iPhoneの写真が勝手に回転している事に悩まされた話(解決できました)

写真・画像

こんにちは、くみです。
iPhoneで撮った写真をはてなブログにアップしたら全て横転しているという事があり結構困りました。
原因を解明し、対応策までたどり着きましたので共有します。

ちなみに私の環境は

  • iPhone:iPhone4
  • OS:iOS 7.0.6

です。他の環境で再現するかどうかは確認していません。

起こった現象

事の発端は、ブログの更新をFacebookでポストしようとした時でした。
サムネイルが何故か横転しているんです。ブログ上ではちゃんと見えているのに。

Facebookのデバッグツールを使ってOGPのサムネイル画像(og:image)を検証してみたのですが、確かに横転している。

でもブログ上ではちゃんと見えている。

▼Twiterでもこのようにサムネイルが横転している。

f:id:arfecia:20140316143351p:plain

Facebookのバグなのか?はてなのバグなのか?

問題を切り分けるために画像を調べたのですが、同じ画像なのに

cdn-ak.f.st-hatena.com/images/fotolife/〜:サムネイルをクリックしたもの、こっちでは横転していて、ブログではちゃんと見えている。

???

原因がEXIF情報のorientationにある事を知る

URL直打ちで横転しているのでどうやらFacebookのせいではなさそうと判断し、はてなのバグかも?と思い色々Google先生に相談してみたところ(「はてな 画像 横になる」「cdn-ak.f.st-hatena.com 画像 横」などでぐぐっていました)、どうやらはてなのバグでもなく写真のEXIF情報に含まれるorientationという属性のせいらしいということがわかりました。

EXIFとは。

 Exchangeable image file format(エクスチェンジャブル・イメージ・ファイル・フォーマット)は、富士フイルムが開発し、当時の日本電子工業振興協会 (JEIDA)で規格化された、写真用のメタデータを含む画像ファイルフォーマット。デジタルカメラの画像の保存に使われる。略称はExif(「イグジフ」もしくは「エグジフ」)。

カメラの機種や撮影時の条件情報を画像に埋め込んでいて、ビューワやフォトレタッチソフトなどで応用することができる。

Exchangeable image file format – Wikipedia : http://ja.wikipedia.org/wiki/Exchangeable_image_file_format

要するに写真に埋め込まれている撮影データのようです。この中のOrientation属性というのが回転情報を表しており、これが原因だったようです。

該当の写真のOrientation属性を確認してみる。Macだとデフォルトのプレビュー.appのインスペクタウィンドウから見る事ができます。(上のツールメニューの一番上、>Show Inspector、コマンド+Iで出てきます。)

さっそくHDDにある該当写真をチェックしてみる。

f:id:arfecia:20140316151446p:plain

確かに90度回転という数値になっているようです。

なぜ今まで気にならなかったのか?

実は横転したのは今回が初めてで、今まではサムネイルもちゃんと正しい方向で見えていました。急にiPhoneがおかしくなったのかな?と思い、過去の写真も見てみると…過去の写真もorientation属性が6になってる!

どうやら今までははてなブログの『写真を投稿』機能を使う事ではてなブログが属性を修正してくれていたようなのです。今回は写真がたくさんあったのではてなフォトライフに直接アップしたのですが、それでorientation属性を維持したままになっていたようでした。複雑だな。

ちなみにWordPressにアップしてみたら回転して表示されてしまったので、WordPressを本格的に使おうと思ったら何らかの解決策を見つけておかないといけません。

対応策1(失敗):はてなフォトライフ上で回転できないか試してみた

というわけで対応策を考えます。
まずはてなフォトライフ上で画像を回転すれば、横転したものを直すわけだからうまくいくのではないか…と思ったのですがこれはうまくいきませんでした。サムネイルが横転したままだったりブログ上で横転したり。

対応策2:EXIF情報を消去しようとしてみる

次に諸悪の根源(?)であるEXIF情報を編集できないか調べてみました。すぐ見つかったのは消去出来るソフト。MacだとImageOptimというアプリで消去できるようです。:

JPEGをPNGに変換する事でEXIFを消去するという技もあるようです。:

対応策3:EXIF情報を書き換えようとしてみる

とはいえ削除してしまうというのも元ファイルを激しく変えるという点でなんとなく抵抗があり、簡単に6を1に書き換えるような事ができないのか調べてみました。

どうもアプリケーションベースで簡単に変える方法は見つからず、出てきたのはexiftoolというPerlのモジュールを組み込み、MacだとTerminalからコマンドラインで変更するという方法でした。

これが、この情報に関するページ、プログラマーの方たちばかりが書いているのか、読んでも読んでも何を言われているのか全然わからない!私のPerlコマンドの理解力のせいだと思うのですが…

私ずっと黒魔道士になりたかったんですが、こういう時に、こういう人たちが黒魔道士で自分はただの赤魔道士にすぎないんだなあという事を思い知らされます…。かっこいい呪文とか使えるようになりたいんですが…

とりあえず参考にしたページ。

もうみんな何言ってるのかさっぱりわかんない!><

皆さんのページを良く読ませて頂きまして、どうやらTerminalで

exiftool -Orientation=1 -n

と打ち込み、変更したい写真ファイルをTerminalウィンドウに一気にドラッグ&ドロップ(複数可能)するとOrientation属性を1に変更してくれるようです!

こんな感じ。

f:id:arfecia:20140316162140p:plain

 

※画像ではorientationと=1の間にスペースが入ってますが、それだと機能しないみたい…くっつけて打ってください〜><

やったーばんざーいばんざーい

・・・

変更後は横転しているので、プレビュー.appなどで回転してあげる必要があります…。猫カフェの写真は枚数が多かったので全部回転させるのちょっときつかったです…

仮説:iPhoneで撮影する時に何とか出来るのではないか?

そもそもなんでiPhoneで撮った写真が回転しているのか?はてなブログで一枚一枚上げていくのも量が多いと辛いし、撮る時に何か工夫すれば必要なくなる種類の作業なのではないか?と思い。
iPhoneの向きを変えたら数値も変わるんでは?という仮説を思いつきました。

仮説の検証

というわけでiPhoneの向きを変える事でOrientation属性の数値が変わるか実験してみました。

PowerPointでさくっと作ったiPhoneのワイヤーモック。

普通の向き

f:id:arfecia:20140316154717p:plain

まず普通の向き。これはやっぱりOrientation属性が6(Rotate 90 CWになってしまっています。

ホームボタンを左に

次にホームボタンを左にして撮影してみました。

f:id:arfecia:20140316154723p:plain

シャッターの機能を持つ音量ボタンが普通のカメラのような上部の位置に来るので、よいのではないかと思ったのですが…

結果は 3(Rotate 180)でした。

でもこれで、Orientation属性が端末の向きに準じていることがわかりました!

ホームボタンを右に

f:id:arfecia:20140316154728p:plain

ワクワクしながら次に。ホームボタンを右に。(”インド人を右に”っぽいですね)

…やったー!1(Normal)になった!!どうやら今後ホームボタンを右にして写真を取れば、回転問題は解決しそうです!

逆さま

ついでに逆さまでも試してみました。

f:id:arfecia:20140316154734p:plain

8(Rotate 270 CW)という結果に。

最後に

いやー疲れました…何でこんな事に…
同じ問題で悩んでいる人たちの解決になれば幸いです。

私もこれからはホームボタンを右にして写真を撮り続けます。しかしこれって仕様なんでしょうかバグなんでしょうか。iPhone5Sとかではどうなのかしらん。

コメント

  1. kuteken より:

    オツカレサマデシター!iPhoneのカメラはどの向きで撮ってもボタン右の向き+回転情報で保存されて、あとはカメラアプリやらWebサイトやらがOrientationの情報でよしなに回転してくれているのです。なので、Orientationでよしなにしてくれないサービスだと変な向きになるす(^ω^)

  2. arfecia より:

    あっくてけんさんありがとうございます〜
    そうなんですね…!説明ありがとうございます。
    素人(?)には混乱する挙動です><
    今はほぼスクエアで撮っているのでいいんですが、縦長で撮りたい時とか回転情報付けられて厄介そう。

  3. jmato911 より:

    同じ問題にあたりました。参考になりました、ありがとうございます!私はWindows Media Playerで画像処理して、その後アップロードしていました(めんどい汗)。。

  4. arfecia より:

    id:jmato911さん
    コメントありがとうございます!お役に立てたら良かったです 🙂
    めんどいですよね… 今は普段は横にして写真を撮るようにしていますが、構図の問題でどうしても縦の方がいいこともあり。
    ブログに載せる時に処理するのがめんどくて、そのまま載せてまだ横転したりしています(;´Д`)

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