iOSアプリのiPhone X対応についていろいろ調べてみた

いよいよiPhone Xの発売日が迫ってきてウキウキしているアドバンストテクノロジー部の近藤です。

先日のWWDC 2017でiPhone Xが発表されました。
破壊的アップデートがなされることが発表されて、世界中のアプリエンジニアの皆さんは今から胃の痛い思いをしているかと思います。
iPhone Xにアプリを対応する上で主に画面の変更による注意点を、発売前にわかっている情報を元にまとめていきます。

iPhone X はこうなる

iPhone Xはパッと見てもわかるようにディスプレイの形がかなり変わっています。

センサーハウジング（ディスプレイ上部の出っ張り）

Face ID用のセンサーやフロントカメラなどが収まっているエリアです。この部分が画面の内側までせり出しています。
その両側が従来のステータスバーとなり時計やバッテリー残量などが表示されます。

ホームボタンの代わりにホームインジケータ

ホームボタンは廃止となり、その代わりにホームインジケータと呼ばれるUIが搭載されます。
画面の一番下に表示されている白い棒線の様なものがホームインジケータのUIです。
このエリアでスワイプすることで、ホームに戻る・アプリの切り替えの操作ができます。

角が丸い

画面の角が丸くなります。
詳しくは後述しますが、この部分にはUIは配置できません。

アスペクト比が変わった

アスペクト比が約18:9となり縦長になります。

ガイドラインやWWDCでのKeynote

AppleからiPhone X に関するドキュメントやWWDCのkeynoteが公開されています。

• iPhone X のヒューマンインターフェースガイドライン
• Update your apps for iPhone X.
• Designing for iPhone X
• Building Apps for iPhone X
• Auto Layout Techniques in Interface Builder
• Updating Your App for iOS 11
• Modern User Interaction on iOS

iPhone X 対応でポイントとなる部分

アスペクト比の違い

写真などをフルスクリーンで表示するときは、アスペクト比が変わるため、端末の種類により画像が見切れることを考慮しなければなりません。

レイアウトについて

• センサーハウジングや角の丸い部分で必要な情報が隠れてはいけません。
• センサーハウジングの左右の背景を黒くして、センサーハウジングがないように見せかけてはいけません。
• UIKitを使ったアプリでは、Auto Layoutを利用していれば比較的簡単にiPhone Xに最適化できる（という記述がガイドラインにある）ので、Autoresizingはそろそろ卒業しましょう。

ステータスバー

• ステータスバーの情報は消す必要が無い限りは非表示にはしない。
• ステータスバーの高さが従来より高くなっています。
• 通話中は時計が緑になるため、従来のようにステータスバーの高さは変わることはありません。
  

背景

背景は画面いっぱいにフルスクリーンになるように配置します。

Safe Area

• Safe Areaという概念が新たに追加されました。
• Safe AreaとMarginsの内側にUIを配置します。
• 画面の角とホームインジケータに重ねてUIを配置はできません。（そもそもSafe Areaの外だからNG）
• 画面スワイプなどのジェスチャーは、「ホームに戻るインジケータの操作を優先する」ため、そのエリア上では無視されます。
• iPhone8以前の機種ではSafe Areaは画面いっぱいになります。

Landscape（横向き）表示の注意点

• 動画は余白が出ないように拡大します（動画のアスペクト比によって余白が出るのは仕方ないと思う）
  
• Landscape Right と Landscape Left両方でSafe Area内にUIが収まっているか確認する。画面の角やセンサーハウジングの付近に配置してはいけません。
  
• 動画広告やインタースティシャル広告を利用している場合、上記の点が守られているか確認しておきましょう。（広告SDKの提供元が対応する部分ですが）

各エリアのサイズ

Cocos2d-xの画面はiPhone X でこうなります

• 青い部分がCocos2d-xのゲームのシーンが表示されるエリアです。
• Safe Area内に収まっていますが、アスペクト比の違いにより上下に黒い余白ができてしまいます。
• ガイドラインでNGとされている背景が黒くてセンサーの部分が隠れてしまっています。
• ゲームのUIが画面の両端に配置してあった場合、Marginsのエリアに重なってしまいます。

　※Cocos2d-xのバージョンは3.16で確認しています。

iPhone X で実行したときのみの個別対応が必要かも？

いい感じに背景を黒い部分に配置する、もしくはシーンが表示されるエリアを画面いっぱいに広げてシーン内のスプライトをSafe Area内に収まるように調整するなど、個別で対応が必要になることが予想されます。

Appleの審査

実際に審査に出してみないとわかりませんが、発売日以降は審査時にiPhone Xへの対応を求められると予想されます。
Xcode9からiPhone Xのシミュレータ *1 が利用できますので、可能な限り予め対応させておいたほうが良いと思います。
ガイドラインを正しく理解してできるだけガイドラインに沿ったレイアウトや実装にしましょう。
結局のところAppleのレビュアーのさじ加減なのは言うまでもありませんが・・・。

まとめ

上記のように変更点がたくさんあり、アプリだけに限らずWebサイトにも影響が出そうなiPhone X。
発売は楽しみですがデベロッパーの皆さんにはまた新たな難題が降り掛かってきた感じですね。
対応させるのは大変そうですが、Appleはこういうふうに作ってねというガイドラインをきちんとまとめてデベロッパーに向けて公開してくれています。
それを正しく理解して対応すればリジェクトされるようなこともないのではないでしょうか？