Flickr画像をブログで自動的にEXIF情報表示してくれる、FlickrEX。

私のブログの写真は、初期の頃を除いてFlickrにアップしたものをHTMLタグで表示させていますが、そのHTMLタグの出力も外部サービスを利用しています。以前にブログでも紹介した事がありますね。Flickr2Tagというサービスです。

最近の記事に使っている写真は、一眼レフを使って撮影したものも多いので、EXIF情報を画像下部に貼り付けたりしているのですが、これが実は手動でFlickrから1つずつコピー＆ペーストしているので、かなりの手間です。
ローカルのパソコン上に保存された画像ファイルのEXIF情報をコピーするツールはいくつか見た事があるのですが、結局「コピーする→ブログ文章にペーストする」という手間が発生してしまい、長続きしないと思ったので、使っていませんでした。
探してみるとありました。Flickrの画像を自動で検知し、自動的にEXIF情報を表示してくれるブログパーツ「FlickrEX」です。こんな便利なツールがあるなんて知りませんでした。
作者の@drikin様、ありがとうございます。使わせていただきます。で、ここで気が付いたのですが、Flickr2Tagと同じ作者様だったのですね(笑)。

[D] Flickr画像に自動的にExif情報を付加するブログパーツ FlickrEx
http://blog.drikin.com/2013/02/flickrex.html

使い方は非常に簡単で、スクリプトを＜body＞タグ内に追記します。これだけですぐに表示されるようになります。

&lt;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";
&lt;/script>
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
&lt;script src="//github.com/drikin/FlickrEx/raw/stable/flickrex.min.js"></script>
&lt;script src="//github.com/drikin/FlickrEx/raw/stable/exifex.min.js"></script>

上記タグを追記するだけで、作者のサイトからスクリプトを参照して、画像の下にEXIF情報を表示してくれます。これだけなので、非常に簡単ですね。下は追記直後の状態です。FlickrEXで追加された情報と、元々私が記事内に記載していた情報が2重に表示されています。

ただ、これだと画像の横に文字が回り込んでいたり、表示される情報を追加したいですね。
さらに、追加する情報もカスタマイズすることができるようです。利用できる情報の一覧はこちらで確認できます。私の場合は、以下のようにカスタマイズしてみました。

var FLICKREX_EXIF_FORMAT = “%camera% (%lens%) / %Exposure Mode% / %Focal Length% / f:%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%”;

スクリプト内の「//var ～」の「//」がコメントになっているので、削除するとその設定が適用されるようになっています。私は上の追加設定をコメントアウトされている設定の一番下に追記しました。
下が設定完了したブログの状態です。

FC2ブログの場合、HTMLテンプレートと、CSSテンプレートが別々のウィンドウで変更できるので、HTMLテンプレートには、上記のFlickrEXのスクリプトを追記しましたが、CSS側には、以下のように最後に追記しました。

.flickr-exif{
font-size: 10px;
}
/*強制的に改行させる
.entry p img {
display:block;
clear:both;
}

FlickrEXは、クラス情報として「flickr-exif」という名前を付与されているようなので、そのクラスに対してのフォントサイズを指定して、画像リンクを貼り付けた場合必ず改行させるように変更しています。
ただし、FC2のテンプレートによっては、こういった追記が出来ない、または追記しても反映されないものもありますので、ご注意下さい。
この状態で、下にいつも通りFlickrTagでHTMLタグを取得して貼り付けてみます。

FC2ブログの場合は、記事記入時の下段プレビュー時に何も表示されませんが、別ウィンドウでプレビュー表示させるとEXIF情報が追加されています。
問題は今まで書いた記事にも自動的に情報が付与されてしまうことになってしまい、EXIF情報がに2重に表示されてしまう事です(笑)。記事内の文章を削除していくことになるので、結構面倒な事になりそうです。しかも私が記事に挿入していたFlickr画像のタグも少し変更しないといけません。
少しずつさかのぼって削除していくしかありませんね。
少しの間、過去記事が見にくいですが、ご了承下さい(笑)。

ＦＣ２ブログランキング