iPhoneのローカルファイルをプレビュー表示する際の回転してしまう問題が深刻であることに気がついた件

相変わらずのマルチブラウザにおける仕様違いに辟易としている、下駄です。 ブラウザアプリを開発していて、iPhoneだけに発生する現象を発見してしまい、おかげでこれまで作ったツールの不具合を同時に見つけてしまったという事を備忘録として残しておきます。

ファイルアップロードのプレビュー表示時の不具合を検知

以前に公開した画像アップローダの中で使用している、画像プレビュー機能ですが、 [Javascript] 画像アップロードに特化した便利なImageUploderライブラリ スマートフォンで撮影された画像には、当たり前のようにexif情報がついていて、同時にorientation値として、画像の回転情報が含まれています。 これがないと、写真が正常な向きで保持できなくなり、アップロードした後で横倒れしてしまう現象が発生してしまいます。 プレビュー表示の際に適正な回転値を摘要して、アップロードした先でもそれを保持する必要があるのですが、今回はプレビューの時の表示のみでの話になります。 パソコンを使って開発をしている為、ファーストデバッグはパソコンでのブラウザ（mac端末なので基本的にChromeとSafari）で行うのですが、マルチブラウザ（デバイス）での確認とのことで、iPhoneで確認をした時に、何故かiPhoneでのプレビューだけが、横倒れしてしまう事象が発生しています・・・ AndroidもPCのどのブラウザも正常なのに、iPhoneだけ・・・ 何故・・・？？？？？ iPhoneで撮影された画像で画像が横倒れしている写真をパソコンに転送して、パソコンでプレビューを見てみると・・・・ 正常に表示！！！！ この時点でiPhoneでの問題があることに気がつく。

iPhoneの問題を追求

iPhoneでの撮影はhomeボタンが下側に来る撮影をしていたんですが、iphone端末事態を回転させて撮影してみます。 homeボタンが右側に来るように撮影すると・・・正常に表示 homeボタンが左側で撮影すると・・・回転異常！！！ homeボタンが下で撮影すると・・・回転異常！！！ どうやら、homeボタンが右側のみが正常という結果ですが、これはorientationの値が1の時で、回転情報が無い時と同じ状態であると分かります。 プレビューでは、exifのorientation値を持っていると、それを加味して、画像を回転させる処理を行っているのですが、どうやら、これがiPhoneのみで不具合を誘発しているようでした。 ようするに、iPhoneのプレビュー表示では、orientation値を無視すれば、正常に表示されるという状態であることがわかりました。 そう思って、exif情報を削除（またはorientation値をすべて"1"にする）と、アップロードした先で回転していない状態でアップロードされてしまうため、 ここで至った結論としては、iPhoneでは、プレビュー表示の時のみ、orientation値を反映しないという対応しかないと考えられる。 ここでさらなる問題とぶち当たってしまうのだが、できれば現時点でこの手の処理を追加したくないというのも、iOSの不具合の可能性もあり、今後のアップデートで改善されてしまう可能性もあるからだ・・・

恐ろしいiPadの仕様

念の為iPad（手元にあったiPadpro）でプレビュー表示をしてみた所、iPhoneと同じ状態での表示となった。（不具合発生） iPadもiPhoneと同じ症状なので、端末判定を行おうとユーザーエージェントを見てみてびっくり！！！ なんと、最新iPadOSのユーザーエージェントは、mac版safariとほぼ同じで、ipad判別のしようがないという事がわかりました。 デバイス判定でontouchstartイベントの有無で判断してもいいのだが、なんとも悩ましい現状だ。

#iPad

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15

mac-safari

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15

最後にiPhone-chromeで確認した結果・・・

ここに来てiPhoneのchromeブラウザで見てみたらどうだろう？？？ ・・・・・・safariと同じ結果・・・ これでどうやらiOSのスマホのみの現象であることが分かる。 なんとも悩ましい事象だが、何とかこの事象をどこかの値で判別したい為、もう少し調査が必要であることがわかる。 blob使用とfileAPIの箇所を徹底的に調査する必要がありそうだ・・・ なるはやで解決して、対応結果をまたブログで報告したいと思います。 同じ症状で悩む人がいれば情報交換しましょう！！