すぐに子供の写真を見れるGoogle Chromeの拡張作った。
※元ネタはこちらです
http://soh335.hatenablog.com/entry/2013/02/10/011039
http://hisaichi5518.hatenablog.jp/entry/2013/02/01/003820
soh335さんのリポジトリをforkし、
DropboxAPIを利用してDropbox内の写真を表示するように改造してみました。
この拡張でやれること
最初は後者をやりたくて始めたんですけど、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を表示してアプリの認証を行い、
コンソールに戻ってエンターキーを押すとトークンが表示されます。
これをメモっておきましょう。
準備(写真編)
準備(Chrome編)
Chromeでタブを開く
内部説明
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 しておきましょう