Flickr画像に自動的にExif情報を付加するブログパーツ FlickrEx

お気づきの方も多いと思いますが、僕のブログの写真は基本的に全てFlickrからの引用となっています。

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

まずは使い方から

初級編

とりあえずブログの写真はFlickrという人は、Adsenseなどのブログパーツを導入する要領で、ブログのテンプレートをカスタマイズして↓下記のコードをコピペしてみてください。

<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 = "#content img";
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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>

これだけでページ内にある全てのPublicなFlickr画像の下に自動的にExif情報が挿入されるはずです。

中級編

でもって、おれはこのExif情報も表示したいとか、並べ方、見せ方を変更したいとか思われたら、カスタマイズをすることもできます。

↑のコピペしたコードの先頭にコメントアウトされた行があることにお気づきでしょうか?

先頭にある//を除去してコメントを外し、右側のデータをカスタマイズすることで見た目や適応範囲を変更することができます。

一つ一つ解説しておくと

FLICKREX_API_KEY

これは特に機能として変更はありませんが、自分のAPIKEYを使いたい人はここでAPIKEYを指定出来ます。

FLICKREX_EXIF_FORMAT

このパラメータでExif情報の出力フォーマットを変更できます。ExifパラメータはFlickrのExifページを参考にLabel名を%%のように%で囲むと、この部分が実際のExifデーターで変換されます。

僕のブログでは

var FLICKREX_EXIF_FORMAT = "%camera%(%Lens% ) %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%";

↑こんな感じでカスタマイズしてレンズ名や、編集ソフト情報まで出力してます。

FLICKREX_EXIF_JQUERY_SELECTOR

これは、ちょっと細かい機能ですが、このなかにjQueryのSelectorを指定することで、特定のimgだけに適応を制限することができます。例えばサイドバーにもFlickr画像を利用していたりすると、そこにExif情報が出ると邪魔なので、本文内のFlickr画像だけにExif情報を出したいと思ったら

var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img";

例えば、↑上みたいな書き方をしてid="content"以下のimgタグにだけ効果を適応することが可能です。

見た目のカスタマイズ

付加されたExif情報には.flickr-exifというクラス名が適応されてるので、CSSを追加することで文字サイズなどの見た目を調整出来ます。たとえばExif情報を少し小さく表示したかったら

     .flickr-exif {
        font-size: small;
     }

みたいな感じでカスタマイズできます。

上級編

FlickrExは\TypeScript\で書かれています。ソースコードはGithubのFlickrExレポジトリで公開しています。

将来的には、Exif情報だけでなく、例えば、自動的にデバイスの解像度を検知して、Retinaディスプレイに対応した画像に置き換えるなどといった拡張を考えています。

個々の機能はPlugin的に追加できるといいなと思っていて、今回のExif情報はexifex.tsというコードで実装されてますが、自由にForkしてオリジナルのプラグインを作ってPull Requestしてくれたら嬉しいなと思っています。

面白いアイディアを思いついたらぜひプラグインの作成もご検討ください。

Flickr写真を活用されているブログでExif情報が簡単に見えるようになると、見るのも一層楽しくなるし、なにせ写真の勉強になります。

なので、個人的には、世界中全てのFlickr画像活用ブログで採用して欲しいと思うくらいオススメです。

公開記念として、興味ある方けど、インストールがよくわからない、上手くいかないという方には、出来る限りインストールお手伝いをさせて頂きたいと思っているので、興味ある人はお気軽にコメントなり@drikin宛にツイートしていただければと思います。

流行るといいなｗ

関連リンク

• drikin/FlickrEx · GitHub

Posted from Drift Writer on my iPad