exif情報をブログに自動表示

旧サイトから転載した記事なので内容齟齬やリンク切れなどの不備が生じていることがあります。
***
昨日投稿した記事で、オールドレンズの情報をexifに書き込めるようになったことをご報告しました。

もうひとつ、レンズの新旧に関係なく以前からやってみたかったことがあります。exif情報を、ブログの写真の脇に自動表示したい。

exifEXというFlickrのプラグインが使えることは少し前から分かっていたのですが、なんせ情弱なので、その設定にえらく苦労して時間がかかっておりました。

時々読んでいただいている有難い読者の中には、既にお気づきになった方もいるかもしれませんが、これが最近、やっとなんとか格好がついたのです!

例えばこんな風に、

Flickrに登録済のexif情報から、カメラ・レンズ・焦点距離などいくつかの項目を、写真と並べて自動掲示できるようになりました!

※win7/10上のchromeおよびIEで正常に見えることが確認できてます。android6.0上のchromeでは、PC版表示ではOKでしたが、JUGEMの提供するスマホ版表示、およびJUGEM専用アプリではNGでした。

何をやったかというと単純で、JUGEMブログで利用しているHTMLのテンプレートに、公開されている次のようなスクリプトを書き加えただけです。

<script type=”text/javascript”>
//var FLICKREX_API_KEY = “13aba276fe8c42dd295699d8eca9c6db”;
//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”;
var FLICKREX_EXIF_FORMAT = “%camera% / %Lens% / %Focal Length% / f%aperture% / ISO %ISO Speed% / %Exposure% sec “;
</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>

ただ、ここに行き着くまでが、無能な私には少々大変でした。

1)drinkinさん作のオリジナルのプラグインは、現在のchrome上ではNG
2)chrome用にアップデートしていただいたスクリプトを見つけて修正
3)ブログのHTMLの「どこに」埋め込めば有効になるか、何回か試行錯誤
4)レンズ名を表示する変数 %Lens% を見つけるまで、さらに倍の試行錯誤
5)Flickrの画像URLをembedするスクリプトの方にも、細工が必要と判明

結果的には、このサイトの教えが貴重でした。

それにしても、exiftoolではLensModelという項目の値を書き換えたはずなのに、ここでの引用変数を %LensModel% にすると無効で %Lens% にすると有効という摩訶不思議。

いや、きっと私が何か勘違いしてるんでしょうね。情弱は辛い。

あと、この表示と引き換えに、内心ちょっとカッコいいと思っていたFlickrのオーバーレイ表示が無くなったのが、プチ残念な私です。

(追記)
書き漏らしましたが、ブログのデザインCSSに以下を加えています。なぜか text-decoration:none; が効かずexif情報テキストの下線が消えませんが気にしないことにしました(苦笑)。

.flickr-exif {
color: gray;
font-size: x-small;
font-style:italic;
text-decoration:none;
}

タイトルとURLをコピーしました