iPhone X用にAppをアップデートする

iPhone Xは、これまで以上に夢中になれるApp体験を可能にする5.8インチSuper Retinaディスプレイを特長としています。Appのテストを今すぐ始めましょう。Safe Areaを考慮し、アダプティブレイアウトに対応するなどして、Super Retinaディスプレイを最大限に活かしましょう。

シミュレータで実行し、テストを行う

最新バージョンのXcode 9をダウンロードして、シミュレータでAppを今すぐテストしましょう。実際のデバイスでテストする前に、App内のUIの問題を見つけ、解決し、AppがiPhone Xで美しく表示されるようにしましょう。

ネイティブ解像度でフルスクリーン表示できるようにする。プロジェクトのベースSDKがiOS 11に設定されており、Launch Storyboardを使用している、またはiPhone X用の起動画像を設定している場合、AppはiPhone X上で全画面表示モードで実行されます。

Appのあらゆる箇所を確認する。UIが正しく表示され、各要素に配置の不具合や、重なり、拡大縮小の誤り、表示の欠けなどがないことを確認してください。問題を発見した場合は、Safe Area Guideとレイアウトマージンを使ってUI要素の配置を修正します。

シミュレータ上で、部分的にしかAppを確認できない場合(たとえば、大部分ではUIKitが使われているものの、カメラが統合されている場合など)は、シミュレータが対応していないビューをコメントアウトするなどして、できる限り多くのUIをテストしてください。シミュレータの使い方やその対応テクノロジーについては、「Simulator Help」をご確認ください。

Safe Areaの考慮

AppのレイアウトはSuper Retinaディスプレイの全体に広がって表示されるようにしましょう。同時に、コンテンツやコントロールの表示が適切で、簡単にタップできることを確認してください。以下のSafe Areaを用いて、AppがiPhone Xの新しい寸法でも適切に動作するようにしてください。

Appでカスタムのレイアウトを採用している場合でも、簡単にiPhone Xに対応することができます。Auto Layoutを使ってガイドラインを順守している場合は特に容易に調整できます。

iPhone XのSafe Area iPhone XのSafe Area

ステータスバー。Safe Areaに従い、ステータスバーの下に十分なスペースを設けます。ステータスバーの高さを憶測で判断せず、コンテンツがステータスバーの下に隠れたり、間違って配置されないようにします。

iPhone XのステータスバーのSafe Areaを正しく使用している例
iPhone XのステータスバーのSafe Areaを正しく使用していない例

ディスプレイの曲線的なコーナーとセンサーハウジング。コンテンツとコントロールは四隅とセンサーハウジングから離して配置し、Appの表示が欠けることなく画面全体に広がるようにします。

iPhone Xの曲線的なコーナーとセンサーハウジングのSafe Areaを正しく使用している例
iPhone Xの曲線的なコーナーとセンサーハウジングのSafe Areaを正しく使用していない例

ホームインジケータ。Appがホームインジケータに干渉しないよう、コンテンツとコントロールを見やすくし、常にタップできるようにします。

iPhone XのホームインジケータのSafe Areaを正しく使用している例
iPhone XのホームインジケータのSafe Areaを正しく使用していない例

画面の端を使ったジャスチャ。iPhone Xのディスプレイでは、画面の端を使ったジェスチャでホーム画面、Appスイッチャー、通知センターコントロールセンターを表示することができます。こうしたジェスチャと干渉しないようにするため、コントロールをSafe Areaの内部に配置し、UIを調整してください。頻繁に使用するべきではありませんが、エッジプロテクト(最初のスワイプでApp固有のジェスチャを呼び出し、もう一度スワイプするとシステムのジェスチャを呼び出す方式)を使用しても構いません。

iPhone Xの画面端を用いるジェスチャのSafe Areaを正しく使用していない例

様々なアスペクト比と画面の向きへの対応

iPhone Xの画面の高さとアスペクト比は、その他のiPhoneデバイスと異なっています。縦向きの場合、iPhone Xディスプレイの幅は旧モデルの4.7インチディスプレイの幅と同じです。しかしながら、iPhone Xディスプレイの高さは、4.7インチディスプレイよりも145ポイント分長くなっています。

画面の様々なアスペクト比にコードが対応していることを確認する。特定の幅、高さ、アスペクト比でコンテンツを配置しているAppは数多くあります。コンテンツの拡大縮小や配置が正しく行われることを確認してください。

iPhone Xの画面アスペクト比を正しく処理している例
iPhone Xの画面アスペクト比を正しく処理していない例
iPhone Xの画面アスペクト比を正しく処理していない例

Appを横向き画面でテストする。縦向き画面で問題が見つかる場合もありますが、横向き画面にした際により多くの問題が発生する傾向があります。デバイスを左右両方に回転させながら、あらゆるUIをテストするようにしてください。

iPhone Xの横向き画面を正しく処理している例
iPhone Xの横向き画面を正しく処理していない例

ビデオを適切に拡大縮小する。iPhone X上のビデオコンテンツはディスプレイ全体で再生されるべきです。とはいえ、それによって映像の上下が欠けたり、左右が大きくトリミングされたりする場合は、画面に合うようにビデオを縮小して再生する必要があります。AVPlayerViewControllerではこれが自動的に行われるものの、AVPlayerLayerをベースにしたカスタムのビデオプレイヤーでは、ビデオの重心の初期設定を適切に選択し、ユーザーが好みに応じてAspectとAspectFillの表示モードを切り替えられるようにする必要があります。

Human Interface Guidelinesで詳しく調べる

iPhone Xでビデオの拡大縮小を適切に施している例
iPhone Xでビデオの拡大縮小を適切に施していない例

Face IDのためのアップデート

Touch ID用のコードがFace IDで動作するか検証する。に対して動作することを確認する。Appで現在Touch IDを使っている場合は、iPhone Xで実行する際にFace IDについて説明する文字列が表示されるようアップデートしてください(例:「Face IDでサインインしてください」)。Face IDTouch IDを表すアイコンは使わないでください。