写真や動画を公開する機能に特化したクリエイター向けのCMS「Koken」を試してみました。

「Koken」というCMSがあります。写真や動画を公開する機能に特化したクリエイター向けのCMSです。デフォルトで付いている公開用のサイトデザインテンプレートがどれも綺麗です。管理画面もとてもかっこいいです。

Koken - Creative website publishing
http://koken.me/

インストールに必要な環境については、下記のように記載されています。

Koken is free and may be installed on your own web server.
Requires PHP 5.2.0 or higher  /  MySQL 5 or higher  /  ImageMagick or GD

インストールに必要はファイルは、index.phpだけです。事前にデータベースを用意して、index.phpとそのディレクトリに適切なパーミッションを設定するだけで、かっこいいインストールウィザードが開始されます。

インストール後は、管理画面にアクセスをして、画像をドラッグ＆ドロップで登録します。動画も登録できますが、そのためには、事前にサーバにffmpegのインストールが必要です。

登録した画像を公開用のアルバムフォルダに、ドラッグ＆ドロップするだけで公開設定が完了します。

設定できる項目は沢山あります。その中で、Settings > Image publishing > HiDPI 　(Retina) という項目があり、オンにすると、Retina対応の高解像度の画像を配信してくれます。但し、表示がすごく重くなるので、チェックしない方が良いかもしれません。

公開用のデザインテンプレートは、どれも素敵なデザインばかりです。テンプレートを選択して、適用するだけで、すぐに反映されます。

「Koken」をインストールしてみました。

vivo-photo-koken
http://labo.vivo.name/koken/

トップページの各画像をクリックすると、各アルバムの画像が表示されます。

画像を公開する事に専念できる良いCMSの仕組みだと思います。

「OneTimeBox」をインストールした時の備忘録

使い捨て感覚で、簡単に作成、リアルタイムに共有できるウェブフォルダ「OneTimeBox」を試してみました。　の続きです。

下記のインストールマニュアルに沿って、インストール作業をします。

oliversong / onetimebox
https://github.com/oliversong/onetimebox

Meteorのインストール

$ sudo curl https://install.meteor.com | sh

Meteoriteのインストール

$ sudo npm install -g meteorite

Githubからソースをクローンします。

$ git clone git@github.com:oliversong/onetimebox.git
$ cd onetimebo

自宅のWindowsマシンは、Githubとの通信をSSHで行う設定をしていましたが、自宅のLinuxマシンには、その設定をしていなかったため、クローンが正常に実行できません。下記のサイトを参考に、Linuxマシンにも秘密鍵を登録しました。

github の接続確認でのエラー
http://tizio1976.blogspot.jp/2013/10/github.html

GithubでSSH通信した時に「Permission denied (publickey).」が発生した時の対処方法。
http://sbkro.hatenablog.jp/entry/2013/04/23/231312

秘密鍵を登録して、正常にGithubからソースをクローンできました。

アップするデータのストレージには、filepickerを使うため、filepickerにユーザー登録をして、filepicker API keyを取得します。そのfilepicker API keyを設定した　/lib/key.coffee　ファイルを用意しておきます。

Ink File Picker - Dead Simple Uploads for Web and Mobile
https://www.inkfilepicker.com/

Google Analyticsのコード設定は、スルーしています。

Meteorでのエラー　meteorコマンドでエラーが出ます。

$ meteor
meteor error: no such package: 'errors'
meteor add errors
error: no such package: 'errors'
error: no such package: 'spin'
error: no such package: 'cron-tick'
error: no such package: 'iron-router'

必要なパッケージが不足しているようなので、インストールします。

$ mrt add iron-router
errors
tag: https://github.com/tmeasday/meteor-errors.git#v0.2.0
accounts-ui-bootstrap-dropdown
tag: https://github.com/erobit/meteor-accounts-ui-bootstrap-dropdown.git#v0.6.5.1
spin
tag: https://github.com/SachaG/meteor-spin.git#v0.2.0
cron-tick
tag: https://github.com/tmeasday/meteor-cron.git#v0.0.4
iron-router
branch: https://github.com/EventedMind/iron-router.git#dev

Done installing smart packages

Meteorでのエラーが解消しました。

$ meteor
[[[[[ ~/onetimebox ]]]]]

iron-router: updating npm dependencies -- connect...
=> Meteor server running on: http://localhost:3000/

Meteorのバージョンが古いデータのようなので、meteor update　をしておきます。

$ meteor update

これで正常にDeployできるようになりました。

$ meteor deploy vivo-file-share.meteor.com

使い捨て感覚で、簡単に作成、リアルタイムに共有できるウェブフォルダ「OneTimeBox」を試してみました。

「OneTimeBox」という、ファイル共有サービスのオープンソースがあります。あっけないほど簡単に、ファイルを共有するためのウェブフォルダが作れます。

OneTimeBox
http://www.onetimebox.org/

GitHubでソースは公開されています。

oliversong / onetimebox
https://github.com/oliversong/onetimebox

インストール方法も書かれているので、自宅サーバに入れてみました。問題なく動作します。公開のフローも用意されているので、日本語に直して（私なりの意訳ですが）アップしてみました。

OneTimeBox　使い捨て感覚で、簡単に作成、リアルタイムに共有できるウェブフォルダ
http://vivo-file-share.meteor.com/

することは、とても簡単です。

「共有フォルダを作成」ボタンを押して、ファイルのアップロード画面を開きます。共有したいファイルを「ここにファイルをドラッグ」という場所まで、ドラッグするとアップロードできます。

その下にアップロードされたファイルが表示されます。アップロードするファイル数の制限はありません。

アップロードができたら、共有したい人に、そのページのURLを知らせるだけです。本当に余計なものが何もないシンプルな操作です。

ファイルはリアルタイムに共有されます。共有フォルダにファイルを入れて、関係者にそのURLを連絡したとします。連絡を受けた人が、そのURLにアクセスをして、該当のファイルをダウンロードしている最中に、追加のファイルがアップロードされたとします。その際、ダウンロードをしている人には、ブラウザを再読み込みしなくても、追加されたファイルが表示されます。

このアプリは、meteor（メテオ）というアプリケーションフレームワークで作成されています。
meteorについては、下記のサイトで内容を確認しました。

体感！JavaScriptで超速アプリケーション開発 －Meteor完全解説
http://gihyo.jp/dev/serial/01/meteor

Meteor
http://www.meteor.com/

インストールのマニュアル通りでは、正常に動作しませんでした。

まず、GitHubからダウンロードしたファイルのMeteorのバージョンが古いため、「meteor update」が必要でした。Meteor 0.6.6.2のバージョンで動作を確認しました。

さらに、Meteorを起動しようとすると、「packageが足りません」というエラーが表示されました。必要なpackageをインストールすることで、正常に動作するようになりました。

このあたりのことは、また、まとめて備忘録として記載します。

しんかんせんがのっとられた

ある日、しんかんせんのうんてんしゅが、うんてんするしんかんせんのところに行くと、そのしんかんせんがなくて、すみずみさがしても、どこにも、そのしんかんせんは見あたらなくて、せんろの上をみたら、そのしんかんせんがあって、しんかんせんは、のっとられていました。いろいろな駅に、そのことを知らせて、一日たっても、そのしんかんせんは、駅には来なくて、それで、そうさくを開始しました。

そうさくを開始してから5日たって、そのしんかんせんを見つけました。うんてんせきを見てみたら、そこには人がいて、その人をたいほしました。そのしんかんせんは、ほかにしょりょうきちにおいてありました。そのしゃりょうきちは、さいしょにおいてあったしょりょうきちと、すごくはなれた場所にあって、そのしんかんせんの中は、すごくきたなくて、のっとった人は30年、ろうやにいれられました。そのしんかんせんは、もとのしゃりょうきちにもどされました。

ぶつかったしんかんせん

ある日、しんかんせんがスピード300kmで、前のしんかんせんとのあいだは5kmで走っていた。前のしんかんせんはとまってばっかりで、あと10分～15分ストップして、すすんでいるしんかんせん、あと5分～10分でつくことになっていた。とまっているしんかんせんは、すすんでいるしんかんせんの方向に行くことになっていて、そのままぶつかって、だいばくはつになった。

jQueryのパララックスのプラグイン「Nikebetterworld Parallax Effect」のサンプルデモデータを使って熊本旅行のパララックスサイトを作りました。

jQueryのパララックスのプラグインの定番の「Nikebetterworld Parallax Effect」のサンプルデモデータを使って熊本旅行のパララックスサイトを作りました。

熊本旅行2013のパララックス
http://www.vivo-one.biz/kumamoto_travel_parallax/ 

パララックス効果の指定の方法はとても簡単で、用意されている関数　parallax（）　にパラメーターを渡してあげるだけです。 下記の部分が該当の箇所です。

$('#nav').localScroll(800);

//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll.
// Example: 0.1 is one tenth the speed of scrolling,
// 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use 
// it's outerHeight option to determine 
// when a section is in the viewport

$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#third').parallax("50%", 0.3);
$('#fourth').parallax("50%", 0.1);
$('.bg2').parallax("50%", 0.4);

Nikebetterworld Parallax Effect
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/