ブログに埋め込んだFlickr画像に自動でEXIF情報を追加する「FlickrEx」がLazyLoadに対応！

ボクは写真が好きで、バックアップも兼ねてFlickrに全ての写真データをアップロードしているのですが、ブログに貼り付ける画像もFlickrにアップロードしたものを使っています。プロアカウントを持っているので容量無制限というのもありますが、Flickrにアップロードすると色々なサイズのサムネイルを自動で作ってくれるので、手間が省けるというのも大きな理由の一つです。
で、Flickrは写真共有サービスであることもあって写真のEXIF（メタ情報）を確認することができるのですが、ブログに貼り付けてしまうとEXIFを見るのに一旦Flickrページに飛んでいかなければいけなくて面倒なんです。他の人のカメラの機種や露出、シャッタースピードなんかを確認するのは写真の勉強にとても良いのですが、Flickrからコピーできる埋め込み用のHTMLコードにはEXIFは含まれないので、自分でコピペするなり手間をかける必要がありました。
そこで、登場したのが@drikinさんのFlickrExです。

ちょっと前から、写真の下にExif情報を表示↑する自作JavaScriptを運用していたのですが、これが想像以上に便利で楽しいので、友人ブロガーやカメラ師匠@shiologyさんのブログなどでも導入してもらっていたのですが、これが評判が良かったので、改めてブログパーツとして汎用化すべく書きなおしてみました。

via: [D] Flickr画像に自動的にExif情報を付加するブログパーツ FlickrEx – Drift Diary XV

ブログパーツの要領で、数行のHTML/JavaScriptコードを貼り付けるだけで、Flickr画像を自動で探してAPI経由でEXIF情報を取得し、Flickr画像に挿入してくれます！これは、スゴイ画期的！で、FlickrEx登場から1ヶ月以上経ってしまったのですが、ようやくこのブログにも導入と思ったのですが実はここで問題が・・・。

Lazy Load Plugin for jQueryの影響でで、Flickr画像を検知できない

Movable Typeで記事中の画像に遅延ロード効果の「Lazy Load」を一括適用する方法 [C!]
少し前に、ブログの表示速度改善を目的に「Lazy Load」を導入しました。詳細は上の記事を参照してもらうこととして、簡単にいうと画像を全部読み込まないで画面に表示されている分だけ都度読み込むようにして無駄をなくすというものです。
FlickrExはIMGタグのsrc属性から自動でFlickr画像を見つけてくれるのですが、Lazy Loadプラグインを導入していると、本命の画像URLがdata-originalという別の属性に書き換わっていて見つからなくなってしまいます。

New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

via: Lazy Load Plugin for jQuery

これは困った・・・と思ったんですが、原因が分かっているので簡単に解決できるかもと思い、前にdrikinさんからも「プラグインとか思いついたら作って！」と言われていたので、自分で修正してみることに。

（実は初めて）gitにPullリクエストを送った

※このパートは技術者の方以外は読み飛ばしてOKですｗｗ
さて、FlickrExはGithubにホストされていますのでそこからソースをForkして修正を始めます。自分の作ったソースも公開しているものに関してはGithubに移して行こうと思いアカウントは取ってあったんですが作業は全く進んでおらず実質Githubデビュー的なｗ

git clone git@github.com:drikin/FlickrEx.git

でFlickrExはTypeScriptでできているということで、.tsファイルを編集。で、コンパイルが必要なんですが環境が無かったのでnode.jsのパッケージをインストールして、

npm install -g typescript

これでtscコマンドが使えるようになったので、FlickrExのリポジトリに内包されいてたスクリプトで、

./build.sh

で.jsファイルが作成されました！
さっそくPULLリクエストを出したところ、翌朝にはマージしていただきました！
Checking data-original attr for jQuery Lazy Load Plugin by yager · Pull Request #9 · drikin/FlickrEx

いよいよブログに導入

・・・という紆余曲折はあったのですが、無事にブログに導入しました。

やり方はdrikin先生の記事を参照していただくとして、ボクのタグはこんな感じ。

<script type="text/javascript">
//var FLICKREX_API_KEY = "18c9f79a96fd34c3b3f16a93fb0a5d3c";
//var FLICKREX_EXIF_FORMAT = "%camera% / %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%";
var FLICKREX_EXIF_JQUERY_SELECTOR = "#posts img[src*='flickr'],#posts img[data-original*='flickr']";
</script>
<script src="//github.com/drikin/FlickrEx/raw/stable/flickrex.min.js"></script>
<script src="//github.com/drikin/FlickrEx/raw/stable/exifex.min.js"></script>

ポイントとしては、

jQueryは別途読み込んでいるので省略
FLICKREX_EXIF_JQUERY_SELECTORは記事詳細を格納している id=”posts” 配下に限定
- img[src*='flickr']、img[data-original*='flickr']はsrc（かdata-orijinal）にFlickr画像のURLが入っているものだけという指定方法だけど、FlickrEx内で同様の判別が入っているので本当は不要

という感じです。

まとめ

いやー、本当に便利ですこれ。Flickr写真をブログに貼り付けている方には是非導入していただきたいです！
結構な数のAPIリクエストが飛んでいるので負荷とかが気になっていたりもしますが、今後の改善や機能追加にも期待です（というかまた自分で書けということかｗ）