«前の日記(2008-01-11 (金)) 最新 次の日記(2008-01-15 (火))»  

まちゅダイアリー


2008-01-13 (日)

Flickr の写真をブログへ載せるための Bookmarklet

去年のよかった探しリースで、今年はアウトプットを出そうって決めたので、第一弾。

Flickr の写真をブログの記事に載せようとすると結構面倒らしい(ブログパーツじゃなくて本文に載せる話ね)。 なので、 Bookmarklet を作ってみた。 キッカケは2008年は携帯+flickrで気軽に写真日記をつけよう - iGirlっていう日記を読んだことから。

あとは vox のように、flickr から直接写真をアップできるツールが増えたらいいな(^ω^)はてなも mixi もそうなればいいのに!みなさん独自のフォト機能があるから無理なのかな。でも自分の写真は1つの場所にまとめたいなぁ。

確かに vox の連携機能は良かったなぁ。 でもたぶん、サーバ側が OAuth を使ってみんな連携!ってのはまだまだ先の話だろうから、クライアント側で頑張ってみた。 とりあえず試してみたい方は、以下のページから Bookmarklet をインストールすれば OK 。

はてなの人はフォトライフを使ってもいいんだろうけど、 容量無制限の Flickr pro アカウントを持っている人はそっちを使いたいだろうし、そういうニーズはあるんだろうなと思ってる。

使い方

使い方は簡単。 ブログの編集画面を開いて、登録しておいた Bookmarklet を起動だけ。 すると、 Web ブラウザから Flickr API を使って最近アップロードした写真の一覧を取得し、画面に表示する。

FlickrToBlog

ブログに載せたい写真をクリックすると、ブログの編集領域 (textarea) に写真へのリンクが追加される。 Bookmarklet を使ってクライアント側で動かすので、他のブログサービスでも使えるのが特徴。 とりあえず、はてなダイアリーと tDiary だけ対応させた。 他のサービスも、ちょっとコードを足すだけで使えるようになるはず。

<追記> デフォルトだと最初に見つかった textarea に HTML 形式のリンクを追加するので、 HTML 記法に対応しているブログサービスなら今のままで使える可能性が高いと思う。 WordPress は使えるようになった(jQueryライブラリが競合していたのでちょっと無理しているけど)。 <追記ここまで>

タグやテキストで写真を検索するとか、古い写真も取得できるようにするとか、構想はあるんだけど、とりあえずシンプルな形でリリース。 ソースコードは CodeRepos に登録させてもらった。 Wiki にもう少し詳しい説明を書いたよ。

裏の目的としては、クライアントサイドのマッシュアップと 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 ライブラリにも同じことが言える。

Tags: JavaScript
本日のツッコミ(全12件) [ツッコミを入れる]
mootoh (2008-01-14 (月) 03:05)

Safari 3.0.4 + WordPress 2.3.0 で試してみました。<br><br>- 本文を書くフォーム内でブックマークレットを起動 → なにも起こらない<br>- めげずにふたたびブックマークレットをクリック → ウィンドウが表示される<br>- ウィンドウ内には、写真のサイズを選ぶラジオボタンがあるが、写真は表示されない<br><br>ささっと試したご報告まで。

まちゅ (2008-01-14 (月) 07:26)

がーん。Safariだとダメなんですね。<br>Mac持っていないんですが、Windows版があるようなので試してみます。

まちゅ (2008-01-14 (月) 08:01)

Windows 版の Safari 3.0.4 で試してみたら動きました。<br>写真の読み込みが終わる前にもう一回ブックマークレットをクリックすると、空のウインドウがでるかもしれません。もう一度試していただけますか?

まちゅ (2008-01-14 (月) 09:41)

WordPressがjQuery1.1.4を使っていて、FlickrToBlogが使っているjQuery1.2を読み込めないのが原因みたいです。<br>ちょっと強引ですが、強制的にjQuery1.2を読み込むようにすると動作しました。<br>http://coderepos.org/share/changeset/4588

harupong (2008-01-14 (月) 11:15)

Windows版のFirefox2.0.0.11で、はてなダイアリーで試しましたが、そもそもWindowが表示されないです。<br>(めげずに何度かクリックしてみましたが、動作変わらず)<br>www.machu.jpと自分のレンタルサーバ、どちらのJavaScriptを呼び出しても動作は同じでした。

まちゅ (2008-01-14 (月) 11:37)

報告ありがとうございます。<br>Firefoxのコンソール(ツール→JavaScriptコンソール)に何かログ残ってないでしょうか?<br>もしたくさん出ていたら、最後の行だけで構いませんので教えていただけると幸いです。

harupong (2008-01-14 (月) 14:24)

エラーログ確認の前に、もしや、と思ってFlickrの設定を見ていたら、そもそも全写真がPrivate設定になっていました><<br>改めて動作確認、Firefox2.0.0.11、IE6 SP2(WinXP SP2)、ともにOKです。<br>お騒がせしました>< もちろん、エラーコンソールのログはなし、です。

mootoh (2008-01-14 (月) 16:00)

Twitterでも書きましたが、Safari+WPでばっちりでした。<br>これでブログに写真を張る手間がずいぶんと減りますー。

asami81 (2008-01-15 (火) 12:28)

わお!わお!!!!<br>なんだか嬉しいです!かんげきいいいい!!<br>ありがとうございます!

まちゅ (2008-01-15 (火) 14:47)

> harupong さん<br>動いてよかったです!<br>そういうこともあるんですね(笑)<br><br>> mootoh さん<br>Twiterでのデバッグにお付き合いいただきどうもです。<br>使ってもらえると、こちらも嬉しいです。<br><br>>asami81さん<br>そこまで喜んでもらえると思っていなかったので、こちらもかんげきしています!!!

s_kushida (2008-04-21 (月) 12:15)

はてなから検索で来ました。<br><br>flickrの写真をはてなダイアリーに貼りたいと考えていたところにこちらを見つけて、感激しました。<br>活用させてもらいます。ありがとうございます。

c9p7p7u3 (2008-09-13 (土) 18:04)

flickrとの連携がやりやすいブログサービスを探してたところにたまたま見つけました。これ、ちょっと感激しました。活用させていただきます!