iPhone X に対応したモバイルサイト・Cordova アプリの作り方と注意点
（この記事は 2017/11/08 に公開された Supporting iPhone X for mobile web & Cordova app using Onsen UI の日本語訳です。）
この記事は Monaca Advent Calendar 2017 1日目の記事です。
iPhone X は Apple が 2017年9月に発表した iPhone の最新モデルです。同年11月3日に全世界で発売が開始されました。
iPhone X の画面は従来の iPhone の画面と全く異なり、
- (1) 画面上部の切り欠き
- (2) 丸まった四隅
- (3) 画面下部の黒いバー
を持ちます。
これらはWeb サイト、Cordova アプリ、ネイティブアプリの全ての UI デザインと実装に影響し、開発者は iPhone X のために特別な対応を行う必要があります。この記事では、その内容を説明します。
また、それに並行して、iPhone X のネイティブアプリのような見た目の Vue アプリを、最近 iPhone X に対応した Onsen UI を使って作成する方法を解説します。
要約（TL;DR）
- 横向き表示の iPhone X Safari または WebView で左右に白い空白領域が生じた場合は、
viewport-fit=coverまたはbody { background-color: black; }を設定することで空白領域を取り除くことができます。 - iPhone X の切り欠き、丸まった四隅、画面下部のバーがページ内容を隠してしまっている場合は、最も外側に位置するボックス群に適切な
marginとpaddingを設定することで解決できます（Onsen UI を利用している場合は、html要素にonsflag-iphonex-portrait属性やonsflag-iphonex-landscape属性を設定することで解決できます）。 - Cordova アプリにて画面端に黒い空白領域が生じた場合は、
cordova-plugin-splashscreenを使ってストーリーボードベースのスプラッシュスクリーンを有効にする、もしくは iPhone X の縦横画素数（2436 x 1242 px）に等しいスプラッシュスクリーン画像を追加することで解決できます。 - 冒頭のサンプルアプリのソースコードは こちらの GitHub リポジトリ から入手できます。
この記事は2つのパートで構成されています:
- Part I: iPhone X に対応したモバイル Web サイトの作り方と注意点
- Part II: iPhone X に対応した Cordova アプリの作り方と注意点
Part I — iPhone X に対応したモバイル Web サイトの作り方と注意点
Web サイトの場合、「iPhone X に対応する」とは、「iPhone X のSafari に対応する」ことを意味します。
では、Web サイトを iPhone X の Safari で表示すると一体どんな問題が起こるのでしょうか？
前準備
説明のためにまず Vue で Web サイトを用意します。円滑な説明のために、今回は iOS アプリによく見られるタブバーパターンを実装します。
実装には Onsen UI を使用します。Onsen UI は数十個の iOS とAndroid のコンポーネントを収録したオープンソースのライブラリです。
今回使用する NPM パッケージのバージョンは以下の通りです。
vue@2.5.2onsenui@2.7.0（コアパッケージ）vue-onsenui@2.3.0（Vue 用の追加パッケージ）
(1) 既存の Vue プロジェクトをお持ちの場合は、そこに NPM または Yarn で Onsen UI をインストールしてください。
# NPM
npm install onsenui vue-onsenui --save-dev# Yarn
yarn add onsenui vue-onsenui -D
Onsen UI の動作にはいくつかのファイルの読み込みが必要です:
import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS importimport VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);
(2) 既存の Vue プロジェクトをお持ちでない場合は、Vue CLI で以下のコマンドを実行して Vue + Onsen UI プロジェクトを作成してください（Vuex といくつかの機能が予めセットアップされています）。
vue init OnsenUI/vue-pwa-webpack # For PWAVue と Onsen UI を使用する準備ができたら、以下の内容で App.vue, NotesPage.vueを作成し、タブバーパターンを実装しましょう。
これで Web サイトの準備が完了しました。
この記事ではタブバーパターンの実装方法については深入りしません。実装方法を詳しく知りたい方は Onsen UI の v-ons-tabbarのドキュメントを参照してください。
第1の問題
では、作成したタブバーパターンを iPhone X の Safari で表示してみましょう。今回は実機の代わりに Xcode 9 で使用できる iPhone X シミュレータを使用します。
ローカル HTTPサーバを立ち上げて、iPhone X シミュレータの Safari からアクセスすると、以下のようになります:
縦向き表示の時は特に問題ないようです。では画面を回転させて横向き表示にしてみましょう。
おっと、左右に白い領域ができましたね？ これは iPhone X の Safari によって強制的に挿入されるものです。この余白がないと画面上部の切り欠きや丸まった四隅がページコンテンツにかぶってしまうから、というのが挿入の理由です。
この「画面を回転させて横向き表示にしたときに左右に空白領域ができる」という症状が iPhone X の Safari における第1の問題です。
この左右の空白領域の色は html 要素または body 要素に background-color を指定することで自由に変更できるため、 background-color を blackに設定すると多少は違和感を軽減することができます。
body {
background-color: black; /* Quick fix for the first problem */
}
しかし、黒以外の色を基調としたページではアドレスバーの幅とページの幅が合わなくなり、妙な見た目になるため、この方法では完全な解決にはなりません。
第1の問題への対処 — — 左右の空白領域のコントロール
iPhone X の Safari は、左右の空白領域の有無をコントロールする機能を提供しています。
左右の空白領域は、 <meta name="viewport" content="..."> の中でviewport-fitという独自の引数を利用することでコントロールすることができるようになっています。 viewport-fitの値には auto, contain, coverのいずれかを指定できます。
auto
デフォルト値。Safari においてはcontainと同義。contain
ビューポートが画面全体をカバーせず、左右の空白領域が発生する。
（object-fit: contain;の動作に似ている）cover
ビューポートが画面全体をカバーし、左右の空白領域が消滅する。
では、 viewport-fitに coverを設定してみましょう。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
これで左右の空白領域はなくなり、第1の問題は解決されました。
第2の問題 — — ページの一部が隠れてしまう問題
しかし問題はそれだけではありません。画面下部のバーがタブバーの文字部分を隠してしまっていますね？それに加え、第1の問題を解決したことで、画面左側の切り欠きや、丸まった四隅がページコンテンツの一部をさらに隠してしまいました。
そう、iPhone X の Safari における第2の問題は「画面上部の切り欠きや、丸まった四隅、画面下部のバーによってページの一部が隠れてしまう」ことです。
第2の問題への対処
ページの一部が隠れてしまう問題は、基本的には問題となっているボックスに対して margin, paddingを適切に設定し、ボックスが切り欠きや四隅、バーによって隠れないようにすることで対処します。
最も簡単な方法としては、 body要素に margin-left, margin-rightを設定してしまうというものがあります。Web サイトのデザインによっては、この対処で十分な場合があります。しかし、タブバーのような画面左端から右端に向かって伸びるボックスが存在する場合は、 body要素にマージンを設定するだけではボックスが途中で途切れてしまい、不自然な見た目になります。また、今回はバーによって文字が隠される問題への対処も必要です。
そのため、Web サイトのデザインによっては、問題となっているボックスそれぞれに対して、個別に margin, paddingを設定する必要があります。非常に面倒ですが、iPhone X の Safari に最適化された見た目を実現するには必要なことです。
なお、対処の必要なボックスに marginや paddingを設定する際は、それらの設定が横向き表示の時のみ有効になるようにしなければなりません。
それを実現するには、 orientation メディアフィーチャーが有効です。メディアクエリーの条件式に (orientation: landscape) を使用すると、ビューポートが横長な時（width> heightを満たす時）だけにスタイルシートを発動させることができます。
@media screen and (orientation: landscape) {
.some-box {
padding-left: 44px;
padding-right: 44px;
}
}ところで、切り欠きや四隅、バーによってボックスが隠れないようにするためには、画面の上下左右から何 px だけボックスを遠ざければ良いのでしょうか？
その具体的な値として、Apple はセーフエリアという領域を定義しています。
セーフエリアとは
セーフエリアとは、切り欠きや四隅、バーなどの障害物が干渉しないことを保証された領域のことです。
All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context.
(出典: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)
そのため、ボックスを画面の上下左右から遠ざける際は、画面の上下左右からセーフエリアまでの距離（safe area insets）を設定すれば良いことになります。
iPhone X の Safari の場合、 横向き表示の時の safe area insets は top=0, right=44, bottom=21, left=44 です（この値は iOS の API を利用することで厳密に調べられます）。そのため、今回の例では、タブバーに対して、横向き表示の時のみ左右に 44 px、下に 21 px の padding を追加すれば良いという計算になります。
第2の問題はこういった地道な調整を繰り返すことで解決できます。
Tip:
constant()の利用には注意が必要WebKit 公式ブログは2017年9月22日の記事にて、新しい CSS 関数である
constant()と4つの定数safe-area-inset-left,safe-area-inset-right,safe-area-inset-top,safe-area-inset-bottomを使ったセーフエリアへの対応方法を紹介しています。4つの定数safe-area-inset-*は「viewport-fitの値がcoverの時のみ値が入る」「画面が回転すると自動的に値が縦向き用/横向き用に切り替わる」という便利な性質を備えています。しかし、
constant()関数と4つの定数safe-area-inset-*には以下の問題があります。(1)
constant()関数は2017年9月21日の時点で CSS 標準から削除され、env()関数に改名された。constant()関数は iOS 11.0 の Safari や UIWebView にはまだ搭載されているが、今後削除されて使えなくなる可能性がある。(2)
constant()およびenv()は現時点では Safari 以外では動作せず、例えばpadding-left: calc(constant(safe-area-inset-left) + 10px);と書いた際にエラーを起こす。そのため Safari 以外のブラウザのために常にフォールバックルールを記述する必要があり、使い勝手が悪い。(3) iOS 11.0 の UIWebView には画面が回転しても4つの定数
safe-area-inset-*の変化が反映されないバグがある。上記のリスクを回避するために、しばらくは
safe-area-inset-*に頼らず、生の値（例: top=0, right=44, bottom=21, left=44）をハードコーディングしたり、変数に代入して利用したりするのが良いでしょう。
UI ライブラリによる iPhone X 対応支援機能の利用
UI ライブラリの中には、iPhone X 対応を支援する機能を備えているものがあります。今回取り上げた Onsen UI には、前述の margin, paddingの設定を自動で行う機能が搭載されています。
html 要素に onsflag-iphonex-landscapeという属性を追加すると、iPhone X 用のパッチ CSS が有効になり、 margin, paddingの調整が必要なボックスに対して自動的に修正が施されます。
他の iOS 端末のことも考慮すると、 onsflag-iphonex-landscape 属性は iPhone X でのみ追加する必要があります。iPhone X でのみ属性が追加されるようにするには、以下のように this.$ons.platform.isIPhoneX()を使用すると簡単です:
beforeMount() {
const html = document.documentElement;
if (this.$ons.platform.isIPhoneX()) {
html.setAttribute('onsflag-iphonex-landscape', '');
}
},UI ライブラリによっては、上記のように簡単にmargin, paddingの設定の問題を解決することができます。
これで iPhone X のSafari における第1の問題に続いて、第2の問題（ページの一部が隠れる問題）も解決できました。
Part I のまとめ
Part I ではタブバーパターンを例に、iPhone X のSafari において第1の問題（横向き表示における左右の空白領域）と第2の問題（ページの一部が隠れる問題）が発生することと、それぞれの問題への対処方法を説明しました。
Web サイトの場合は第1の問題と第2の問題を解決すれば iPhone X 対応は完了です。
Part I では Web サイトの iPhone X 対応について解説しました。
しかし、読者の皆さんの中には生 Cordova や Monaca を使って Cordova アプリを作っている方もいらっしゃると思います。そこで、 Part II では Cordova アプリの iPhone X 対応について解説します。
Part II — iPhone X に対応した Cordova アプリの作り方と注意点
Cordova アプリの場合、「iPhone X に対応する」とは、「iPhone X の WebView に対応する」ことを意味します。
では、Part I の時と同様に、Cordova アプリを iPhone X の WebView で表示すると一体どんな問題が起こるのかを見ていきましょう。
前準備
Part I の時と同じく、説明のためにまず Vue で Cordova アプリを用意します。
この記事で使用するソフトウェアのバージョンは以下の通りです:
vue@2.5.2onsenui@2.7.0（コアパッケージ）vue-onsenui@2.3.0（Vue 用の追加パッケージ）cordova@7.1.0cordova-ios@4.5.3- Xcode 9.0
(1) 既存の Cordova + Vue プロジェクトをお持ちの場合は、そこに NPM または Yarn で Onsen UI をインストールしてください。
# NPM
npm install onsenui vue-onsenui --save-dev# Yarn
yarn add onsenui vue-onsenui -D
Onsen UI の動作にはいくつかのファイルの読み込みが必要です:
import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS importimport VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);
(2) 既存の Cordova + Vue プロジェクトをお持ちでない場合は、Vue CLI で以下のコマンドを実行して Cordova + Vue + Onsen UI プロジェクトを作成してください（Vuex といくつかの機能が予めセットアップされています）。
vue init OnsenUI/vue-cordova-webpack # For Cordova apps(3) Cordova + Vue と Onsen UI を使用する準備ができたら、Part I と全く同じコードを用いて App.vue, NotesPage.vueを作成し、タブバーパターンを実装します。
これで Cordova アプリの準備が完了しました。
第1の問題はどうか？
先ほど Part I にて、第1の問題（画面を回転させて横向き表示にしたときに左右に空白領域ができる問題）について説明しました。
では、第1の問題が iPhone X WebView でも残っているか確認してみましょう。
cordova platform add ios
npm run build && cordova run ios --target="iPhone-X"
おっと、Cordova アプリでは縦向き表示でも上下に空白領域が入ってしまうようです。
では、横向き表示ではどうでしょうか？
横向き表示では左右と下に空白領域が出現しました。
このように Cordova アプリの iPhone X 対応においても第1の問題は健在であることが分かりました。しかし、Part I の時と同じく、 viewport-fit を cover に設定すればこれらの問題は解決します。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
Tip: WKWebView では初めから第1の問題が修正されている
iOS 11 が持つ WebView には、旧式の UIWebView （Cordova デフォルト、Apple 非推奨）と後発の WKWebView （Apple 推奨）があります。
UIWebView では
viewport-fitのautoの値がcontainを指しているため、coverに変更する必要がありました。しかし、WKWebView ではviewport-fitのautoの値が初めからcoverを指しています（筆者により検証）。そのため、WKWebViewでは第1の問題が初めから修正されており、viewport-fit=coverを設定する必要がありません。WKWebView は後発だけあり、様々な場面で UIWebView よりも安定して動作します。Cordova ユーザの方は
cordova-plugin-wkwebview-engineプラグインを使って UIWebView を WKWebView に変更することをお勧めします（ただし、WKWebView 特有の問題もあるのでそこはご注意ください）。
第3の問題
Web サイトの iPhone X 対応では、第1の問題を解決した後、すぐに第2の問題（画面上部の切り欠きや、丸まった四隅、画面下部のバーによってページの一部が隠れてしまう問題）に移ることができました。
しかし Cordova アプリの iPhone X 対応では、第1の問題を解決してもすぐには第2の問題には移れません。第3の問題が発生するからです。
第1の問題を解決した後の端末全体の様子を見てみましょう。
なにやら、縦向き表示の時は上下に、横向き表示の時は左右と下に黒い空白領域ができています。これが第3の問題です。
第1の問題に似ていますが、原理は異なります。第3の問題は、 iPhone X において、一定の条件を満たしていないアプリは強制的にセーフエリア内に表示されるという仕様に由来します。条件は以下の通りです。
Enable full screen native resolution. Your app will run in Full Screen Display Mode on iPhone X if your project’s base SDK is set to iOS 11 and you have a Launch Storyboard or iPhone X launch image.
(出典: https://developer.apple.com/ios/update-apps-for-iphone-x/ )
上記の引用内容を分かりやすく説明します。まず、iOS におけるスプラッシュ画面の表示方式には、 (1) 画像を単純に表示する古い方式（Cordova はデフォルトでこちらを使用。Apple は非推奨） と、(2) ストーリーボードという仕組みを使って画像を伸縮・トリミングして表示する新しい方式（Apple はこちらを推奨） の2つがあります。
(1) の方式の場合、iPhone X の解像度（1125 x 2436 px）と等しいサイズの画像が Cordova アプリに含まれていないと、アプリが強制的にセーフエリア内に表示されてしまいます。1125 x 2436 px の画像を追加するとアプリがフルスクリーンで表示されるようになります。
(2) の方式の場合はアプリは常にフルスクリーンで表示されます。
ただし、Cordova アプリで (2) の方式を用いるには、以下のコマンドで cordova-plugin-splashscreen プラグインを追加し、
cordova plugin add cordova-plugin-splashscreenスプラッシュ画面の素材となる画像を 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" />もちろん、 画像も追加する必要があります。それぞれの画像のサイズは、基本的には cordova-plugin-splashscreenのドキュメントに従い、Super Retina 端末用の3倍解像度スプラッシュ画像（@3x）のみ、最も長辺（2436 px）の長い iPhone X の解像度と最も短辺（1242 px）の長い iPhone 8 Plus の解像度がそれぞれ収まるようにするのが良いでしょう。なお、(2) の方式ではアプリは常にフルスクリーンで表示され、画像のサイズはスプラッシュ画面の動作にしか影響しません。
Default@2x~iphone~anyany.png (= 1334x1334 = 667x667の2倍)
Default@2x~iphone~comany.png (= 750x1334 = 375x667の2倍)
Default@2x~iphone~comcom.png (= 750x750 = 375x375の2倍)Default@3x~iphone~anyany.png (= 2436x2436 = 812x812の3倍)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414の3倍)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812の3倍)Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366の2倍)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366の2倍)（上記の画像を res/screen/ios/ に保存してください）
(1) の方式にせよ、 (2) の方式にせよ、上記の設定を終えると、アプリはフルスクリーンで表示されるようになります:
これで第3の問題は解決しました。しかし、同時に第2の問題（ページの一部が隠れる問題）が発生しました。では、第2の問題を解決していきましょう。
Tip:
この第3の問題（アプリがフルスクリーンで表示されない問題）は必ずしも解決する必要はありません。この問題をあえて解決しないことで第2の問題（ページの一部が隠れる問題）の発生を防ぐことができるからです。第2の問題の解決にはコストがかかるので、第3の問題をあえて解決しないことは既存の Cordova アプリを低コストで iPhone X に対応させたいという状況で有効な選択肢となります。
第2の問題への対処
先ほどお見せしたように、Cordova アプリの場合、縦向き表示と横向き表示の両方で第2の問題が発生します。
Part I の時と同じく、基本的には、問題となっているボックスに対して margin, paddingを適切に設定し、ボックスが切り欠きや四隅、バーによって隠れないようにすることで対処します。
Onsen UI は縦向き表示用のパッチ CSS も提供しています。onsflag-iphonex-portrait 属性と onsflag-iphonex-landscape 属性の両方を html 要素に設定することで、縦向き表示と横向き表示の両方でパッチ CSS を有効にすることができます。
beforeMount() {
const html = document.documentElement;
if (this.$ons.platform.isIPhoneX()) {
html.setAttribute('onsflag-iphonex-portrait', '');
html.setAttribute('onsflag-iphonex-landscape', '');
}
}パッチ CSS を適用すると以下のようになります。
これで iPhone X のWebView における第2の問題（ページの一部が隠れる問題）も解決できました。
Part II のまとめ
Part II では、Cordova アプリを iPhone X の WebView で表示すると
- 横向き表示だけでなく縦向き表示でも画面端に空白領域ができてしまう
- 第3の問題（アプリがフルスクリーンで表示されない問題）が存在する
など、Web サイトを iPhone X の Safari で表示した時よりもさらに複雑な状況になることを説明しました。
一方で、 viewport-fit=cover を設定したり、 cordova-plugin-splashscreen を使ってストーリーボードベースのスプラッシュ画像を表示したりすることで簡単にそれらの問題を解決できるということも説明しました。
Cordova アプリの場合も、第1の問題・第2の問題・第3の問題に対して一つ一つ対処すれば円滑に iPhone X 対応を行うことが可能です。
あとは v-ons-action-sheetや v-ons-navigator等を使って 画面遷移を構築すれば、iPhone X のネイティブアプリのような Cordova アプリが完成します。
上記のサンプルのソースコードは以下の通りです（抜粋）:
)アプリ全体のソースコードはこちらの GitHub リポジトリから入手できます。
結論
この記事では、iPhone X に関して、Web サイトで起こる問題とその対処法（Part I）、および Cordova アプリで起こる問題とその対処法（Part II）を説明しました。特に、
- 第1の問題（画面端に空白領域ができる問題） —
viewport-fit=coverを設定することで解決可能 - 第2の問題（ページの一部が隠れる問題） — 適切な
marginとpaddingを設定することで解決可能 - 第3の問題（アプリがフルスクリーンで表示されない問題） — ストーリーボードベースのスプラッシュスクリーンを有効にすることで解決可能
について説明しました。また、Onsen UI の iPhone X 対応支援機能（ html[onsflag-iphonex-portrait], html[onsflag-iphonex-landscape]）を紹介しました。
この記事を参考に、ぜひ iPhone X で動く素敵な Vue アプリを作ってみてください。Happy coding!
あとがき
今回取り上げた Onsen UI の Twitter アカウントと Web サイトはこちらです。
- ♨️ Onsen UI | Twitter
https://twitter.com/Onsen_UI - Onsen UI [Japanese] | Twitter
https://twitter.com/Onsen_UI_ja - Onsen UI for Vue
https://ja.onsen.io/vue/
参考文献
[css-variables] User Agent properties and variables · Issue #1693 · w3c/csswg-drafts
https://github.com/w3c/csswg-drafts/issues/1693
(Aug 4, 2017)
[CB-13273] Webview is sized incorrectly on iPhone X (Simulator) — ASF JIRA
https://issues.apache.org/jira/browse/CB-13273
(Sep 13, 2017)
Removing the White Bars in Safari on iPhone X
http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
(Sep 14, 2017)
ios — Cordova app not displaying correctly on iPhone X (Simulator) — Stack Overflow
https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator/46232813#46232813
(Sep 15, 2017)
34518947: UIWebView safe area inset constants are not updated on rotation · Issue #18415 · lionheart/openradar-mirror
https://github.com/lionheart/openradar-mirror/issues/18415
(Sep 20, 2017)
Designing Websites for iPhone X | WebKit
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
(Sep 22, 2017)
