always one step forward

トップ > it > ブログに載せるFlickr写真にExif情報を自動表示 by FlickrEx

ブログに載せるFlickr写真にExif情報を自動表示 by FlickrEx

it

「Flickrの写真をブログへ貼ると、自分が表示したいExif情報を自動取得してその写真の下へ表示してくれる」‥まさに最近やりたかったことを、@drikinさんのブログパーツ風JavaScriptライブラリ「FlickrEx」で実現できた。

Untitled

何がしたかったか

撮った写真はFlickrにどかどかと置いている。何枚か引用してブログを書くことがたまにある。旅行にいくと写真は増えるので、旅行記を書こうものなら引用したい枚数も増える。このとき、特に最近、Exif情報(*)も一緒に表示できたらいいなと思っていた。この情報は、たとえばこんなときに参考になることが多い：

  • 自分で「ああこれはこんな設定で撮ったのか」と思い起こす
  • 展示会のプロ写真家の写真や、カメラメーカーのカタログのサンプル写真には、けっこうな確率で写真の脇に小さくこの設定がでていることが多い
  • Web上の他の人の写真を見るときにも、これらの設定は参考になる

今回は一番上、自分の写真について確認したいとき。ブログに共有用HTMLを貼りつけた時点ですぐ確認できるようになった。

(*) 自分の場合はF値・ISO感度・シャッタースピード・あとは露出、カメラ機種名くらいか。ちなみにFlickr上では写真ごとに↓のように表示される

img03

何を表示しているか

どのExif情報を表示するかは自分でカスタマイズできる。FlickrExのページを参照しつつ、以下のようにした：

var FLICKREX_EXIF_FORMAT = "%camera%, %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure%sec / %Exposure Bias% EV";
/* 順に：カメラ機種名, 焦点距離, F値, ISO感度, シャッタースピード, 露出 */

Untitled

参考：はてなブログの場合の設定箇所

大きくは2か所。

  • 1) JavaScriptを貼り付ける「サイドバー」
    • ダッシュボード、管理画面の [デザイン] → [カスタマイズ] を開く
    • [サイドバー]を開いて「モジュールを追加」で表示されるテキストエリアに下記を貼り付ける：
    • 自分のAPIキーがあれば2行目のコメントアウトを外す（ただし指定しなくてもよい）
<script type="text/javascript">
    // var FLICKREX_API_KEY = "(your Flickr API key)";
    var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img";
    //var FLICKREX_EXIF_FORMAT = "%camera% / %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%";
    var FLICKREX_EXIF_FORMAT = "%camera%, %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure%sec / %Exposure Bias% EV";
</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.js"></script>
<script src="//github.com/drikin/FlickrEx/raw/stable/exifex.js"></script>


  • 2) CSSを定義したい場合は「デザインCSS」
    • スタイルを定義したい場合のみ
    • ダッシュボード、管理画面の [デザイン] → [カスタマイズ] を開く
    • [デザインCSS]を開いて .flickr-exif { } に好きなように定義
    • ※（HTMLファイルに直接は表示されないけれど）このExif情報は <div class="flickr-exif"> ... </div> の中に表示される。だからCSS中では .flickr-exif { } にいろいろ書けばよい
.flickr-exif {
  color: #595959;
  margin: 0px 0px 0px 20px;
}


img04

ToDo: これからしたいこと

現在は結局「貼りたい写真をブラウザで表示 → Share用URLをコピー → ブログ側へ貼り付け」を「1枚1枚手動で」行っていて面倒。

img01

代わりに、

  • FlickrユーザーIDを指定するとSet一覧を表示
  • SetのIDを指定すると、含まれる写真をブログに貼り付けるためのHTMLを自動生成して表示

あたりを何とかできたら、写真つきブログ執筆がそれこそ捗る。

たとえば「Setをリストボックスから選択すると、その下左に写真のサムネイル、右にHTMLが吐かれたテキストボックスが並ぶ」という画面構成までイメージできている。Flickr APIを使って、jquery+JSON、ローカル環境でできそうとは思っているけれど、まずはJSONデータ構造の理解から。せっかくAPI公開が豊富で柔軟にいろいろできる（はずな）ので、なんとかしてみたい