検証。iPhone Xでアプリの見た目はどうなるのか？

間もなく発売されるiPhone X。スクリーンサイズのパターンがAndroidほど多くないのが利点だったiOSですが、最近ではiPadや世代毎のiPhoneによってパターンが増えつつあります。最新版のiPhone Xでは、これまでの四角い画面ではなくスクリーンの切り欠き（英語ではnotchと言われています）が追加されています。

心配になるのがこれまでに開発したMonacaアプリや、これから作るアプリがiPhone Xに最適化できるのかどうかです。まだiPhone Xが未発売なのでMonacaデバッガーで試すことはできませんが、iOS11と（ピュアな）Cordova6.5を使うことで見え方をあらかじめ確認しておくことができます。今回はその見え方の例と改善ポイントを紹介します。

デフォルトの表示

まず従来通りのMonacaのテンプレートをベースにして作ると、以下のように上下に白い空間ができてしまいます。（わかりやすいように、背景色を設定しています）

Onsen UIで作った場合も同様です。

横向きにするとさらに顕著です。

viewport設定の追加

まずはこの白い空間を取り除きます。HTMLのmetaタグを以下のように変更します。

<!-- viewport-fit=cover の追加 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,viewport-fit=cover">

この変更を行うと白い空間がなくなります。

横向きでも問題ありません。

多くのアプリはこれで最低限の対応が完了できるかと思います。

iPhone Xに最適化する

しかしこの表示ではiPhone Xらしいとは言えません。ステータスバー部分にコンテンツは表示されておらず、従来のiPhone同様の表示と言えます。

iPhone Xのスクリーンサイズに合わせた表示にするには、まずCordovaプラグインの cordova-plugin-splashscreen を追加します。

$ cordova plugin add cordova-plugin-splashscreen

次に元々 res/screen/ios にあったスプラッシュスクリーンの画像をすべて削除します。そして、以下の画像名とサイズで新しいスプラッシュスクリーンを作成します。

Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732

作成したら config.xml に設定を追加します。

<platform name="ios">    
    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />   
      : その他の設定
</platform>

スプラッシュスクリーンの画像自体はiPhoneで自動判別してくれますので特に指定はいりません。この設定を行ったら cordova build ios コマンドでビルドし直す必要があります。

そしてアプリを起動すると、切り欠き部分含めて画面いっぱいにコンテンツが表示されるようになります。

横向きの場合はこうなります。

表示を整える

確かに画面いっぱいに表示できるようになりましたが、ステータスバー部分にコンテンツが被ってしまっているのはよくありません。そこでCSSで設定を追加します。

body{
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}

この safe-area-inset-top/safe-area-inset-bottom/safe-area-inset-left/safe-area-inset-right という指定がiPhone Xの場合にのみ有効になるpadding設定になります。これがないと横向きの時にステータスバーに文字が被ります。

指定するとこのようにちょうど良い感じにコンテンツが寄ります。

横向きでも問題ありません。

もちろんわざとこの指定を行わず、ステータスバーの切り欠き部分を活かしたアプリを作ることもできるでしょう。

参考

基本的にはメタタグ、スプラッシュスクリーン、CSSの3つでアプリの見た目を調整していくことになります。MonacaのiPhone X対応は現時点では未定ですが、順次対応していく予定です。Onsen UIは近日中にiPhone Xに対応する予定です。新しい情報が入り次第、モナカプレスでお伝えしていきますので今後の動向にご期待ください。

デフォルトの表示

viewport設定の追加

iPhone Xに最適化する

表示を整える

参考

関連