ただ眠いんだ

"人生はコメディだ!"

はてなブログでFlickrの画像にExifを付加する ~FlickrEx~

少し前の更新あたりから、ブログ記事に埋め込まれているFlickrの写真にEXIF情報が載るようになりました。
それを可能にしているのが@drikinさんの作ったブログパーツ、「FlickrEx」です!

blog.drikin.com

blog.drikin.com

まあ、2つの記事を読めばいちいち説明することも無いと思うのですが、さらにかみ砕いて説明をしたいと思います。
目標ははてなブログにFlickrExを導入できるようになる!です。

ブログパーツの設置

さて、@drikinさんの記事をまとめると、FlickrExの基本形はこんな感じになります。

<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>(window.jQuery && parseFloat(window.jQuery().jquery) > 1.5) || document.write('<script src="//flickrex.drikin.com/stable/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="//flickrex.drikin.com/stable/flickrex.min.js"></script>
<script src="//flickrex.drikin.com/stable/exifex.min.js"></script>

この場合は「カメラの名前」「レンズの焦点距離」「f値」「ISO感度」「シャッタースピード」「露出補正」「編集に使ったソフト名」が表示されます。
表示される項目を変更するには、3行目の「FLICKREX_EXIF_FORMAT」を編集する必要があります。3行目の行頭「//」を削除して、FlickrのExifのラベルを%%で囲めばOK。
%%で囲っていない部分はテキストとして認識されるので、「f=%aperture%」とか記述すれば「f=2.8」とか表示できるわけです。
公開したい情報をExifから抜き出しましょう。

僕の場合はこんな感じ。

<script type="text/javascript">
    var FLICKREX_API_KEY = "18c9f79a96fd34c3b3f16a93fb0a5d3c"; // this is optional
    var FLICKREX_EXIF_FORMAT = "%camera%(%Lens%), %Focal Length%, f=%aperture%, ISO %ISO Speed%, %Exposure% sec, %Exposure Bias% EV, %Software%";
        var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img";
</script>
<script>(window.jQuery && parseFloat(window.jQuery().jquery) > 1.5) || document.write('<script src="//flickrex.drikin.com/master/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="//flickrex.drikin.com/master/flickrex.min.js"></script>
<script src="//flickrex.drikin.com/master/exifex.min.js"></script>

これをはてなブログの設定→デザインから「フッタ」に貼り付けるとFlickrの画像の下に情報が表示されるようになります。

テキストを装飾する

FlickrExを設置しただけだと、Exif情報がだいぶ主張しすぎてしまうので、テキストの装飾をします。
表示されるのは「.flickr-exif」というクラス名のテキストなので、設定→デザインからデザインCSSを書き換えます。
小さくて灰色で…という場合こんな感じでしょうかね。

.flickr-exif {
    color: gray;
    font-size: 0.84em;
}

.flickr-exif {
    margin-top: 3px;
    margin-bottom: 0.7em;
}

ブログパーツを設置して、CSSも書き換えてこれで万事OK!Exifを公開できるぞ!…とはならないのです。

写真を貼り付ける際の注意

Flickrで埋め込みコードを取得するとこんな感じになります。

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/101915214@N07/23120126324/in/datetaken/" title="20151208-002443.jpg">
<img src="https://farm1.staticflickr.com/661/23120126324_f561142c84_z.jpg" width="640" height="427" alt="20151208-002443.jpg"></a>
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

これをそのまま貼り付けるとExif情報が消えます。 というわけで埋め込みコードを少し書き換え、というか最後の行を削除しましょう。

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/101915214@N07/23120126324/in/datetaken/" title="20151208-002443.jpg">
<img src="https://farm1.staticflickr.com/661/23120126324_f561142c84_z.jpg" width="640" height="427" alt="20151208-002443.jpg"></a>

20151207-210934.jpg

これでExif情報がバッチリ表示されます。JavaScriptの行が競合でもするんですかねえ。

つらつらと書いてきましたが、このブログパーツ、流行らないですかねえ。写真好きとしてはものすごく有益な情報が詰まっているので、あちこちで流行ってくれるとすごく楽しいと思うのですが。

SIGMA デジタルカメラ DP1Merrill 4600万画素 FoveonX3ダイレクトイメージセンサー F2.8

SIGMA デジタルカメラ DP1Merrill 4600万画素 FoveonX3ダイレクトイメージセンサー F2.8