すぐに子供の写真を見れるGoogle Chromeの拡張作った。

※元ネタはこちらです
http://soh335.hatenablog.com/entry/2013/02/10/011039
http://hisaichi5518.hatenablog.jp/entry/2013/02/01/003820

soh335さんのリポジトリをforkし、
DropboxAPIを利用してDropbox内の写真を表示するように改造してみました。

この拡張でやれること

Dropboxのアプリフォルダにある写真をシャッフルして表示
Dropboxの「Camera Uploadsフォルダ」内の写真を時系列に表示（ペンディング中）

最初は後者をやりたくて始めたんですけど、DropBoxAPIの仕様によりペンディング中です。
理由は後述。

準備(アプリ編)

ダウンロード

適当なフォルダで以下のコマンドを実行して下さい。

git clone https://github.com/toritori0318/chrome-tumblr-tile.git

OAuthライブラリダウンロード

oauth.jsとsha1.jsを同じフォルダにダウンロードします。
https://oauth.googlecode.com/svn/code/javascript/

準備(Dropbox編)

Dropboxアプリ登録

以下のURLからCreateAppします
https://www.dropbox.com/developers/apps

App key / App secret 取得

アプリケーション情報から "App key" と "App secret"をメモしておきます

アクセストークン取得

APIを使うためのアクセストークンを取得します。
Web上で取得する方法が見つからなかったので、
今回はPerlで以下のような簡単なスクリプトを作って実行しました。*1
https://gist.github.com/toritori0318/10553050
実行するとOAuth URLが表示されるので、
ブラウザでURLを表示してアプリの認証を行い、
コンソールに戻ってエンターキーを押すとトークンが表示されます。
これをメモっておきましょう。

準備(写真編)

Dropboxフォルダに写真を置く

上記まで完了していると
「/アプリ/」
という名前でDropboxフォルダが作成されています。
ここにお気に入りの写真をたくさん突っ込んでおきましょう。

準備(Chrome編)

拡張パッケージの設定

「設定」＞「拡張」＞「パッケージ化されていない拡張機能を読み込む」
で、ダウンロードしたアプリのディレクトリを指定します。

Chrome拡張オプション設定

最低限以下の項目を入力するだけでOKです。他のはデフォルトでよいでしょう。

AppKey
AppSecret
AccessToken
AccessSecret

Chromeでタブを開く

毎回写真がシャッフルされて、いい感じに表示されます。yatta!

内部説明

TumblrAPIとDropboxAPI仕様が異なる部分があるので
中でやっていることを少しだけ説明します。

Dropbox metadata APIでフォルダ内のファイル一覧取得
20ファイル分のURLをDropbox thumbnail APIで取得し、blobデータをimageに変換し、DOMツリーに追加
下部にスクロールした時に、次の20ファイルに対して 2. を実行

DropboxAPIにはページングという気の利いた機能が無く、
フォルダ内のオブジェクトをまるっと取得する手段しかありません。
そのため、一気に処理してしまうとフォルダ内全部のサムネイルを取得してしまうので
ブラウザに表示している部分だけを少しずつ画像取得するようにしています。

Camera Uploadsをストリームっぽく表示してみたかった

元々の動機は
「奥さんが撮っている写真をリアルタイムでブラウザに表示出来たりしたら面白いかなー」
というので書き始めたんですが、DropBoxAPIにページングが無いため
「Camera Uploadsフォルダ」が膨れ上がると
タブを開くたびに大きなネットワークアクセスが発生してしまいます。
それがイマイチっぽい感じがしたので実装を断念しました。
ただ、今の仕様でも実装してみたら全然満足しているのでこのままでもいいかなーと思ってます。

まとめ

Chromeのタブを開くだけで幸せな気分になれます。最高。
子供でなくても、ペットや恋人の写真など表示しても捗るのではないでしょうか！

*1:cpanm WebService::Dropbox しておきましょう