Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript jQuery 小技集

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

投稿日:


2013-03-27_flickrex_lazyload_00
ボクは写真が好きで、バックアップも兼ねて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ですww
さて、FlickrExはGithubにホストされていますのでそこからソースをForkして修正を始めます。自分の作ったソースも公開しているものに関してはGithubに移して行こうと思いアカウントは取ってあったんですが作業は全く進んでおらず実質Githubデビュー的なw

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

いよいよブログに導入

・・・という紆余曲折はあったのですが、無事にブログに導入しました。
2013-03-27_flickrex_lazyload_01
やり方は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リクエストが飛んでいるので負荷とかが気になっていたりもしますが、今後の改善や機能追加にも期待です(というかまた自分で書けということかw)

-JavaScript, jQuery, 小技集

執筆者:

関連記事

MovableTypeとFeedburnerで複数のRSSを配信開始

リニューアルの準備として、前にカテゴリーを整理したんですが、今回はFeedの整理です。前から「RSSでは技術系のエントリーだけ読みたい」という話が聞こえてきたりしたのですが、技術系エントリーを読むよう …

Ffmpegで複数動画を結合して一つの動画に出力

いつも、動画変換においてやりたいことがあってもコマンドを思い出せないFfmpeg。今回もこのごろ良く使うものを自分用のメモを兼ねて記録しておきます。

facebookのファンページを作る時に気をつけたい細かい話

何かと話題のfacebookですが、前回のエントリーではプロフィール画面で遊ぶ方法をとりあげました。で、今度はブロガーや企業の間でも増えてきているファンページの作り方について書いてみたいと思います。 …

Googleドライブのフォーム機能は初期値をセットできる

とても便利なのにあまり知られていないらしいことが分かったのでエントリー。 Googleドライブのフォームは本当に便利で、アンケートやお問い合わせフォームが本当にサクッと数分でできちゃいます。以前書いた …

no image

ブログデザインをリニューアルしました!これからはCreazy!

1年以上も寝かし続け、いっそなかった事にしようと思っていたリニューアルをついに公開しました! 4回に渡って実施されたブログデザイン勉強会の後押しもあり、途中脳内が血みどろになるほど苦労してここまでこぎ …

スポンサードリンク

スポンサードリンク