とうとう完成!ブログ上の画像に自動でexif情報を載せる方法



ブログ上の画像に自動でexif情報を載せる方法


Sponsored Link

とうとうこの日がやってきました。

去年の秋ごろから散々悩まされたこの問題。

たくさん記事を書きましたが僕の不注意で全て消えましたね。

色々試行錯誤した結果wordpressに反映させることができましたので、ご紹介します。手っ取り早く方法を確認したい方はこちら


SONY ILCE-7M2, 1/80 sec. f/4.5, ISO160, 42.0 mm

かなり頑張った結果、意外とシンプルにまとめることができました。スッキリ。今度暇な時Flickrのやつもリトライしてみます。

ここまでのあらすじ

これまで辿ってきた経緯を説明します。

  1. 自分の写真にウォーターマークを入れたかった。
  2. なんかかっこいいし、写真の勉強にもなるし、α7Ⅱ自慢できるし、、、笑

    その際いろんな方々のようにexif情報を追加して表示させたかった。exif情報とは

  3. flickrExというブログパーツを使ってflickrの写真にexif情報を追加させたかったがいろんなerrorを吐いて動いてくれなかった。
  4. 製作者のdrikinさんにも尋ねて見たのですが、原因がわからず。wordpressと相性が悪いのか、何かのプラグインが悪さをしているのか、、、

  5. wordpressのプラグイン「HK Exif Tags」を用いようかと考えたが、タイトルやキャプションを追加するようなもので、カメラ情報などのexifとは異なっていた。
  6. ちょうど行き詰まった頃に、学校のグループ課題で自分たちのグループがexifを扱うことに。
  7. その課題では僕がexifを受け渡しするphpファイルを作成したのでexif周りはだいぶ強くなった。課題のphpではPELというライブラリを使用したがwordpressを使用する際にFTPでアップロードするのがめんどくさく思ってしまった。

    そこで、phpにもともとあるexif_read_data関数を使うことにした。

  8. exif_read_data関数を利用しexifを取得、表示させた。
  9. ただ、ローカルからwordpressの環境に移しところ、なぜかデータが取得できず。
  10. これは多分ショートコードとexif_read_data関数の相性が悪かった。

  11. 学校の課題で”PEL”というライブラリを利用したのでそれを使うことに。
  12. ページにexifを出すことはできたがCSSが適用されない
  13. そのほかヘッダ部分にしか表示されなかったりCSSのポジションがおかしかったりしたが、長すぎるので割愛。

    結局CSSはいろんなところが干渉していたせいだったが、めんどくさかったのでphp内の関数の戻り値として一緒に出力させた。(強引)

  14. 編集が必要な部分はfunction.phpと投稿画面のみ。FTP経由で入れる必要があるのがPELのsrcファイルとautoload.phpの二つ。

exif情報とは


SONY ILCE-7M2, 1/400 sec. f/4.5, ISO500, 47.0 mm

そもそもEXIFとはなんぞやというところから。EXILEじゃあるまいし、、、おじさんか。(19だわ。笑)

EXIFとは、Exchangeable Image File Formatのことで、写真に付加メタデータ(のフォーマット)のことです。

つまり、EXIFの中には「いつ」「どのように」「どこで」その写真が撮られたのかという情報が入っているのです。その情報を取り出すことで、他の人の参考にもなりますし、何しろ「自分の写真の勉強」を一層捗らせてくれるものなのです。

それによって「こういう写真を撮るときはもっとF値を絞ったほうがよかったなぁ」などと自分の撮る写真の質を高めていくことができます。

exif情報を載せている主なサイトとして、フォトヨドバシとマップカメラのサイトをご紹介します。

フォトヨドバシのサイト
マップカメラのサイト

どちらもとても素敵なギャラリーです。これを目指していました。

手順


SONY ILCE-7M2, 1/500 sec. f/4.0, ISO125, 33.0 mm

今回、僕は様々な方の記事やphpのリファレンスを参考にしてブログパーツを作成しました。

主に参考にさせていただいたのはetoさんのブログ記事です。phpのexif_read_data関数の性質など、とても簡単に書かれていてわかりやすい説明でした。

しかし、僕はexif_read_data関数を使いませんでした。(執筆当初は使用していたが路線変更)

この記事では詳しいphpの説明などはしません。何か質問などあれば、コメントしていただければできる限りは返信しようと思います。

まず、下のphpファイルをコピーし、適宜編集し、wordpressのfunction.phpへペーストしてください。

etoさんのphpファイルと違うところは露出を載せていないところと焦点距離を追加したところなどです。

さらに投稿ページ内でimgタグの後ろに、下のようなpタグで書かれた部分を追加するだけです。

僕はスニペットツールで”,exif”と入力すると勝手に生成されるように工夫しました。

以上です。注意点としては

  • 写真自体にexif情報がつけられていないともちろん表示されない。
  • cssはそれぞれ違う。
  • 僕がexif_read_data関数を使うことができなかったのと同じように、PELを使えないかたがいるかもしれません。理由は思わぬところにあるもしれませんが、意外と気づけないものです。
  • 理想はexif_read_data関数を使えるのが一番です。(ライブラリは読み込んだり使いたを習得するのに手間と時間がかかる)
  • 残念ながら、スマートフォンとタブレットには位置がおかしく見えてしまうのです。これからレスポンシブ化頑張ります!

それでは僕の写真をexif情報付きで公開します。ぜひご覧ください。

作例集

SONY ILCE-7M2, 1/80 sec. f/4.5, ISO160, 42.0 mm

SONY ILCE-7M2, 1/125 sec. f/5.0, ISO160, 52.0 mm


SONY NEX-5R, 1/80 sec. f/7.1, ISO100, 16.0 mm


SONY ILCE-7M2, 6 sec. f/11.0, ISO64, 28.0 mm


SONY NEX-5R, 1/125 sec. f/13.0, ISO100, 16.0 mm

参考にしたサイト

exif_read_data – PHP.net
exif関数の変数を知るために用いたサイト
PELの変数を知るために見たサイト
FlickrEx
etoさんのブログ記事

みなさん本当にありがとうございました。

exif情報ってちょっとしたものだけど、あったら便利だし、かっこいいじゃないですか。しっかりと研究したので、ぜひ参考になさってください。

つまづいた方がいらっしゃったらメモ程度ですが僕のevernoteのページをご覧ください。何かのヒントになるかも。。。?

PELとショートコードでみなさんもスマートにexif情報をつけましょう!!