Flickr の写真をブログへ載せるための Bookmarklet
去年のよかった探しリースで、今年はアウトプットを出そうって決めたので、第一弾。
Flickr の写真をブログの記事に載せようとすると結構面倒らしい（ブログパーツじゃなくて本文に載せる話ね）。 なので、 Bookmarklet を作ってみた。 キッカケは2008年は携帯＋flickrで気軽に写真日記をつけよう - iGirlっていう日記を読んだことから。
あとは vox のように、flickr から直接写真をアップできるツールが増えたらいいな（^ω^）はてなも mixi もそうなればいいのに！みなさん独自のフォト機能があるから無理なのかな。でも自分の写真は1つの場所にまとめたいなぁ。
確かに vox の連携機能は良かったなぁ。 でもたぶん、サーバ側が OAuth を使ってみんな連携！ってのはまだまだ先の話だろうから、クライアント側で頑張ってみた。 とりあえず試してみたい方は、以下のページから Bookmarklet をインストールすれば OK 。
はてなの人はフォトライフを使ってもいいんだろうけど、 容量無制限の Flickr pro アカウントを持っている人はそっちを使いたいだろうし、そういうニーズはあるんだろうなと思ってる。
使い方
使い方は簡単。 ブログの編集画面を開いて、登録しておいた Bookmarklet を起動だけ。 すると、 Web ブラウザから Flickr API を使って最近アップロードした写真の一覧を取得し、画面に表示する。
ブログに載せたい写真をクリックすると、ブログの編集領域 (textarea) に写真へのリンクが追加される。 Bookmarklet を使ってクライアント側で動かすので、他のブログサービスでも使えるのが特徴。 とりあえず、はてなダイアリーと tDiary だけ対応させた。 他のサービスも、ちょっとコードを足すだけで使えるようになるはず。
＜追記＞ デフォルトだと最初に見つかった textarea に HTML 形式のリンクを追加するので、 HTML 記法に対応しているブログサービスなら今のままで使える可能性が高いと思う。 WordPress は使えるようになった（jQueryライブラリが競合していたのでちょっと無理しているけど）。 ＜追記ここまで＞
タグやテキストで写真を検索するとか、古い写真も取得できるようにするとか、構想はあるんだけど、とりあえずシンプルな形でリリース。 ソースコードは CodeRepos に登録させてもらった。 Wiki にもう少し詳しい説明を書いたよ。
- FlickrToBlog - CodeRepos::Share - Trac (Wiki)
- /lang/javascript/flickr2blog/ - CodeRepos::Share - Trac (ソース)
裏の目的としては、クライアントサイドのマッシュアップと OAuth の関係を考えるためのステップの1つ。 今回は公開情報のマッシュアップなので認証APIは使っていないけど、これがプライベートなデータだったらどうなるのかな、と考えるための教材にできればなぁ、と思ってた。 とりあえず頭で考えるのとやってみるのではずいぶん違った…かな。
所感
- JavaScript のコードを書いたのはとても久しぶり。簡単にできると思ったけど結構時間かかった。
- もう少しシンプルかつ分かりやすく書けるようになりたい。
- Firefox のみならグリースモンキーを使えば楽だろうけど、あえて Bookmarklet にこだわった。
- Bookmarklet からサーバ上に置いたスクリプト (blog2flickr.js) をロードしている。bookmarkletの文字数制限を無くす - 川o・-・）＜2nd lifeが参考になった。
- blog2flickr.js から jQuery と ThickBox を動的にロード。id:amachang の動的スクリプトローディングを使わせてもらった。これも便利！
- ThickBox が使用するスタイルシートも動的にロードしている。読み込み完了の同期とっていないけど、まぁ大丈夫かな…。
- jQuery を初めて使った。これは便利だねぇ。
- jQuery だと JSONP を使ったクロスドメイン通信が簡単 (1.2からの機能らしい) 。すごい。
- IE と Firefox で挙動が違って泣ける。
- jQuery は noconflict 指定しているので、はてなで使っているprototype.jsとも共存OK
- 古いjQueryを使っているブログサービス（あるの？）だと共存できないかな。
- noconflict 対応のために ThickBox の $ を jQuery に置き換えている。
- jQuery ライブラリは noconflict で動くように作ってほしい。
Bookmarklet と動的ロードと JSONP を使った、クライアント側での（強制）マッシュアップって結構面白いなぁ。
あ、あと、セキュリティ的に気をつけること。
- CodeRepos やここのサイトに置いた JavaScript をそのまま呼ぶ場合は、スクリプト呼び出し時にそのサイトへリファラが飛ぶ。
- グリースモンキーと同じで Bookmarklet に悪意のあるコードが混入すると危険。
なので、 Bookmarklet から呼び出すスクリプトは安全な場所（自分のWebサイト）に置いた方がいい。 共用のをそのまま呼ぶと危険だろうね。 これは汎用的な JavaScript ライブラリにも同じことが言える。