環境
- Monaca Cloud IDE
- OnsenUI 2
XS、XS Max、XRの表示に対応するには一工夫
2019年1月18日現在、Monaca Cloud IDE環境では以下の問題があります。
- OnsenUI（Monaca version）が2.9.1までしか提供されておらず、これらの端末での表示にバグあり
- Monaca のスプラッシュスクリーン設定画面が iPhone7 までしか対応しておらず、Xcode10.1 ビルド環境かつ App Store Connect 経由でアップロードするとエラーになる
本記事は、上記を解決する方法について解説しています。
このため、Monaca側が対応すればこの記事の内容は不要になる可能性がありますので、あらかじめご了承ください。
また、利用するプラグイン側の問題、対応状況や干渉によって動作しなくなる可能性もありますので併せてご理解ください。
OnsenUI versionを2.10.5以上にする
OnsenUIは、iPhoneXについては対応しています。
iPhone X - Onsen UI
ここで iPhone X 用パッチの有効化 に書かれているコードを実行しておけば iPhoneX 対応は完了。
if (ons.platform.isIPhoneX()) { // iPhone X であるか否かを判定
// <html> 要素に属性を追加（値として空文字列を設定）
document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
}
if (ons.platform.isIPhoneX()) { // iPhone X であるか否かを判定
// <html> 要素に属性を追加（値として空文字列を設定）
document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
}
反映前
反映後
この ons.platform.isIPhoneX パッチは OnsenUI2.10.5 から XS、XS Max、XR にも対応しているのですが、それ以前のバージョンでは iPhoneX のみ対応。
Releases · OnsenUI/OnsenUI · GitHub
Monaca Cloud IDE では OnsenUI（Monaca version） の利用が推奨されていますが、公開されている OnsenUI より古いバージョンが提供されるため、最新の OnsenUI に差し替える必要があります。
設定 → JS/CSSコンポーネントの追加と削除... から、OnsenUI（Monaca version） を削除し、onsenui 2.10.5 以上をインストール。
この時、インストールするコンポーネントを選択できますので、最低限以下にチェックします。
- components/onsenui/js/onsenui.js
- components/onsenui/css/onsen-css-components.css
- components/onsenui/css/onsenui.css
Xcode10.1対応
App Store のガイドラインで以下アナウンスがされています。
2019年3月以降、 App Storeに提出されるすべてのiOS Appは、iOS 12.1以降のSDKでビルドされ、iPhone XS Maxまたは12.9インチiPad Pro（第3世代）のオールスクリーンのデザインをサポートする必要があります。
ビルド → ビルド環境の設定... から Xcode10.1 を選択しておきます。
スプラッシュスクリーン対応
Monaca で標準提供されているスプラッシュスクリーン（Splashscreen / cordova-plugin-splashscreen）プラグインを使うと、アプリ起動時のスクリーン表示が可能になります。
この時、設定 → iOSアプリ設定... 画面の スプラッシュスクリーン から「サイズ指定モード」を選択してください。
「オートリサイズモード」を選択すると、App Storeアップロード時にエラーとなりました。おそらくconfig.xml にサイズごとの画像指定が必要となったためと思われます。
設定画面では iPhone7 までしか対応しておりませんので、新しいサイズのスクリーン画像を用意し、res/ios/screen フォルダに以下ファイル名とピクセルサイズでアップロードしてください。
※1242x2208 サイズの画像でも互換モードで表示してくれるようですが、iPhoneXS Maxではretina倍率が3倍になり、解像度不足となりますので表示が荒くなります。
- Default@3x~iphone~comany.png (1242x2688）
- Default@3x~iphone~anycom.png (2688x1242）
- Default@3x~iphone~anyany.png (2688x2688）
config.xml に直接追記します。
<splash src="/res/ios/screen/Default~iphone.png" width="320" height="480"/>
<splash src="/res/ios/screen/Default@2x~iphone.png" width="640" height="960"/>
<splash src="/res/ios/screen/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="/res/ios/screen/Default-667h.png" width="750" height="1334"/>
<splash src="/res/ios/screen/Default-736h.png" width="1242" height="2208"/>
<splash src="/res/ios/screen/Default-Landscape-736h.png" width="2208" height="1242"/>
<splash src="/res/ios/screen/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="/res/ios/screen/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="/res/ios/screen/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="/res/ios/screen/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
<splash src="/res/ios/screen/Default@3x~iphone~comany.png" width="1242" height="2688"/> ←追記
<splash src="/res/ios/screen/Default@3x~iphone~anycom.png" width="2688" height="1242"/> ←追記
<splash src="/res/ios/screen/Default@3x~iphone~anyany.png" width="2688" height="2688"/> ←追記
以上です。
補足
これまでは以下記事などを参考にさせていただき、CSSやJavascriptを駆使して何とかする必要があったのですが、OnsenUI 2.10.5 以上になってからは基本的に本記事の方法で動作しています。