2013年7月20日土曜日

Flickr用の自家製Chrome拡張を作った

最近、写真の保管場所としてFlickr(フリッカー)を積極的に使っています。先日から無料でも1,000GB分もの保管容量が使えるようになりましたがスゴイですよね。以前は日本からだと遅かった表示速度も、現在は大幅に改善されており使い勝手も良好。DropboxやPicasaからの乗換を検討中です。ネックなのは日本語対応してないところ。もっと英語がスラスラ読めればと思う毎日です。

そんなFlickrはWEBのAPIも充実しており、プログラムの心得がある人なら簡単に様々な便利機能を実装することができます。それを使ってChromeの拡張を1つ自分用に作ってみました。

「写真の公開設定をpublicにした上で、ブログ貼り付け用スクリプトを生成」Chrome拡張です!

僕はFlickrにアップロードした写真を原則すべてprivateつまり非公開にしています。一部「家族から閲覧可」としていますが、それら含めてすべては原則非公開。まぁ今どき当たり前の設定ですよね(ちなみにFlickrのデフォルト設定だとそうはなってないので要注意。)

ただしそれだと、いざブログに貼り付ける際、いちいち手動で公開設定をpublicに変更しなくてはなりませんでした。さらにブログ貼り付け用のスクリプトを出力してコピーしなくちゃいけない。たった2ステップなのですが地味に面倒。

Picasaだ写真の貼り付けは非常に簡単だったので特にそう感じます。(このブログはGoogle様謹製のBloggerで稼働しており、同じくGoogle様謹製のPicasaとは相性が良いのです)

というわけで作ってみました。「公開設定をpublicにした上で、ブログ貼り付け用スクリプトを生成」Chrome拡張を。ちなみにこんな動きです。

flickrの写真を表示させて、Chrome拡張のアイコンをクリックすると
別タブに貼り付け用スクリプトが出力される

ただこれだけです(^_^;)。

意外とハードル高かった


簡単そうに見えて簡単なのですが、意外とハードル高かったです。なぜなら全く触ったことのないPHPで作ってみたから(^_^)/。PHPと言うのは最近人気のプログラム言語です。

また写真公開設定を変えるには単純にAPIをキックするだけではダメで、認証の仕組みを通さないといけないのも、けっこうつまづいた要因です。

個別の説明記事は面倒なので書く予定ナシですが、だいたいこんな感じで作ったヨという流れ。

Flickr APIを調査。認証周りが若干ややこしそう。
全部Javascriptで作るとAPI Keyとか認証トークンとかバレバレになっちゃんじゃないの?ということでサーバサイドで処理することを決意。
とは言っても僕は.NETとJavaしか知らない。今どきJSPとか使えるサーバなんて建てちゃうの?
と思ったら僕が契約してるレンタルサーバさんでPHPが使えるじゃないですが。PHPならサンプルも豊富だし、いっちょ勉強がてらやってみるか。
PHP簡単!(←ごく浅いレベルで)。レンタルサーバにPEARってのをインストールしてHTTPやNetっていうパッケージもインストールしたら、リクエスト投げるのとかも超簡単になったよ。
だけどFlickrの認証が理解できない…。超わかりやすく日本語で解説してくれてるページとかあるのに…。なんだfrobって?ていうかOAuthてのを使うべきなのか?とか試行錯誤してるうちに、とりあえずできた。
認証Tokenさえ取得すればもう認証の仕組みに用はない!(自分しか使わない予定なので。)ようやく公開設定変更の機能部分の実装に入れます。と言ってもAPI1つ叩くだけですが。なに?使うパラメータを名前でソートして結合した文字列をMD5暗号化したのをapi_sigに入れて末尾につけろったって、そんなのは皆さんネット上にメソッド公開してくれてるのでありがたく使わせていただきました(^_^)。
というわけでサーバサイドのPHPはできあがり。PhotoIDを渡せばPHPさんの方で公開設定を変更してくれる仕組みができました。そんでブログ貼り付け用のスクリプトを生成して、返してくれます。
あとはこれをChrome拡張から呼び出すだけだ!ってChrome拡張なんてどうやって作るんだっけ?
Javasciptで簡単に作れるんだ。知らなかったよ。
本当は「最近の自分の写真を9枚ぐらい表示して、そこから選んだ写真を処理する」的にしたいけど、面倒だからまずはflickrのページで画像を表示させた状態からスタートするようにしよう。URLからPhotoIDが取れるし…ってChrome拡張から今表示してるページのURLってどうやって取るの?
Chromeの独自APIがあるんですね。Tab情報取得的なのを使えばよいと。結果はコールバック関数でって、またどうしてそういう…。
どうにかこうにかPHPにPhotoIDを渡せるようになった。完成!

てな感じです。

ひさしぶりに自分にとって新しいことに挑戦してみましたが、こういうのはやっぱり楽しいです。楽しい日曜大工。なかなか時間がとれないのがもどかしいのですが、たまにはね。

ちなみに作ったChrome拡張は年間5ドル払うことで、Chrome Web Storeに載せることができるそうです。今回のは自分専用に作っているので。そんなところの載せるわけにいきませんが、本来はきっちり認証ページを作ったりして皆様にお使いいただけるような形でそういうところに載せるのがベストなのでしょうね。

久々に趣味的なことを楽しみました。ではまた!



0 件のコメント :

コメントを投稿