2011-12-05

こんにちは。昨年 12 月にハートレイルズに入社しました、大久保（@kuboon）です。

3 月上旬に公開したキャット＆チョコレートは、私がメインの開発を担当させていただきましたが、イラストその他の見た目デザインは、社内デザイナの @corink_web さんにお願いしました。

デザイナさんと一緒に仕事をする時には、「このように作ってください」「言われた通りに作りました」という単方向の進め方では多くのロスが発生します。お互いに密にコミュニケーションを取りながら平行して作業を進める事ができれば開発効率はぐんと上がります。しかしこれは、心がけだけで実現できるほど簡単なことではありません。

動的なサイトをデザインしてゆくにあたり、「密にコミュニケーションを取る」ためには、お互いの修正が実際に動くサイトへ瞬時に反映され、動作確認をできる環境が必須です。また、単純なサイズ変更のような修正であれば、わざわざデザイナさんにお願いするよりも自分でやってしまった方が早い場合もあります。css などは、二人とも随時修正したいものでもあります。こういった問題を簡単に実現するために、今回は dropboxd を使う事にしました。 Dropbox は強力なコラボレーションツールですが、実はコマンドライン版がありまして、これをサーバにセットアップすることで、たいへん便利な環境になるのです。

以下に、実際に私が作業をした時系列でその使い方を書いてみました。

キャット＆チョコレートの開発には Ruby on Rails を使用しており、サーバは Amazon EC2 上にあります。

まず、必要最低限の view で、ある程度のところまで作り込みました。この時、文章の分量が分かっていた方がデザインをしやすいので、本番運用中の状態が想像しやすいようにダミーデータも入れておきます。タイトルロゴなどはダミー画像を作って html に記述しておいても良いかもしれません。

ここまでできた物をサーバにデプロイします。これは git を経由しました。

動作している URL をデザイナさんに送り、見てもらいます。

またこのとき、私の Dropbox 内に今回のプロジェクトの為のフォルダを作成し、デザイナさんの Dropbox アカウントと共有設定をしました。同時に、サーバ用の Dropbox アカウントを 1 つ用意し、同じフォルダを共有しておきます。

デザイナさんは実際にアプリケーションを動作させながら、どのようなデザインにするか草案を作ります。

また、ロゴや枠のような画像パーツを実際に制作します。これは随時 Dropbox に置いてもらうことで、作業の進捗を見守ることができます。

受け取った画像パーツを、私は適当な名前で public_html/images に配置し、erb に組み込みます。

ここでいよいよ dropboxd の出番です。

dropboxd のインストール

https://www.dropbox.com/install?os=lnx
インストール方法その他いろいろ説明されていますが、順を追って簡単に解説を。

1. ホームディレクトリに移動します

cd ~

2. wget します

32bit OSの場合：

wget -O dropbox.tar.gz "http://www.dropbox.com/download?plat=lnx.x86"

64bit OSの場合：

wget -O dropbox.tar.gz "http://www.dropbox.com/download?plat=lnx.x86_64"

3. アーカイブを解凍

tar -xvzf dropbox.tar.gz

./.dropbox-dist/ に一式がインストールされました。

4. dropboxd を起動（まだ同期は始まらない）

~/.dropbox-dist/dropboxd

5. すると以下のように表示されます

このクライアントはアカウントにリンクされていません...
 
このマシンをリンクするには https://www.dropbox.com/cli_link?host_id=***&cl=ja を開いてください。

この URL をターミナルからローカルマシンのブラウザに（サーバとまったく関係ないマシンで OK）コピペして開くと、Dropbox アカウントへのログインが促されます。ここで、先ほど作っておいたサーバ用アカウントでログインしますと、このアカウントに先ほどのサーバの dropboxd が紐づきます。

注意：
この時、既にご自分の Dropbox アカウントにログイン済みのブラウザで URL を開くと、ログイン画面ではなくパスワード入力のみが求められますが、ここでうっかり普通にパスワードを入力してしまうと、そのアカウントが dropboxd に紐づいてしまい、プロジェクトと関係ないファイルが次々とサーバにコピーされていってしまいます。必ず一度ログアウトし、サーバ専用アカウントでログインしましょう。（Dropbox の selective sync という機能を使えば、サーバ用のアカウントを別途用意せずに対応することは可能ですが、現状 dropboxd では exclude 設定機能のみしかなく、「特定のフォルダだけを同期する」という設定は難しいようです）

紐付けがうまくいくと、先ほどのターミナルに以下のように表示されます。

クライアントはリンクされました。cat-choco さん、ようこそ！

~/Dropbox/ 以下に共有フォルダが作成されているはずです。

Dropbox と Ruby on Rails のリンク

次に、この共有フォルダと、rails プロジェクトをリンクします。これにはシンボリックリンクを使います。

dropboxd はシンボリックリンクを追跡しますので、任意のファイル・フォルダへのシンボリックリンクを ~/Dropbox/ 以下に作成すると、その実体が同期対象になります。以下のようにして、ここに public_html へのシンボリックリンクを貼ります。

ln -s /your_rails_root/public_html ~/Dropbox/catchoco

（ファイルへのシンボリックリンクは、そのファイルが他のマシン上で変更された際に実体ファイルに置き変わってしまいます。これは dropboxd がファイルを同期する際に、別名ファイルを一旦作ってから、元ファイルを削除、元ファイル名へリネーム、という手続きをたどる為です。フォルダをシンボリックリンクしてその中のファイルを変更する分にはこの問題は発生しません。）

ここまで実行すればまもなく、自分のローカルマシンとデザイナさんのマシンにも public_html フォルダが作成され、その中身が次々とコピーされてくるはずです。

以上で設定は完了です。デザイナさんがローカルマシン上でファイルを編集、保存すると、数秒後にはサーバに反映され、すぐに結果をみることができます。適当な区切りで、サーバ上で public_html フォルダを git commit しておけば良いでしょう。便利！！