iOS版Monacaデバッガー配信停止に伴って、新しくMonacaでリリースされたのが「Monacaクイックビューア」です。
一見するとUIはMonacaデバッガーと同じように見えますが、幾つかの違いがあります。本記事ではその相違点について紹介しつつ、開発時の回避策を解説します。
Cordovaプラグインは使えません
Monacaデバッガーでは、以下のプラグインがデフォルトで組み込まれています。
- バーコードスキャナー
- バッテリー
- カメラ
- キャプチャー
- デバイス
- デバイスモーション
- デバイスオリエンテーション
- ファイル
- ジオロケーション
- アプリ内ブラウザ
- メディア
- ネットワーク情報
- ローカル通知
- バイブレーション
これらの機能の幾つかについてはHTML APIで代替処理ができます（位置情報、カメラなど）。ただ、Cordovaプラグインとは動作が異なる可能性があるので注意してください。
Monacaアプリとしてビルドしている場合と、Monacaクイックビューアで動作している際の違いは、 window.cordova 変数の有無をチェックするのが良いでしょう。
if (window.cordova) {
// Monacaアプリ、カスタムデバッガービルドとして動作している
// Cordovaプラグインが使える
} else {
// Monacaクイックビューア、Web IDEのプレビューとして動作している
// Cordovaプラグインは使えない
}
HTML APIで代替できるものについては、この判定を使って処理分けしたり、Monacaクイックビューアでは動作させないと言った仕組みにする必要があります。
例えばNCMBのプッシュ通知プラグインもMonacaクイックビューアでは利用できませんので、 window.NCMB.monaca.setDeviceToken のような関数へのアクセスはエラーになってしまいます。
利用開始できるイベントが異なります
Monacaアプリの場合、画面のDOM構築に加えてCordovaプラグインの準備完了を待ちます。そのイベントが deviceready です。対してMonacaクイックビューアの場合はDOM構築のみになるので、 DOMContentLoaded イベントのみになります。Monacaクイックビューアで deviceready を待ってもイベントが呼ばれないので注意してください。
お勧めの方法としては、 window.cordova の有無でイベントを変えることです。
const event = window.cordova ? 'deviceready' : 'DOMContentLoaded';
document.addEventListener(event, e => {
// 処理を記述
});
なお、Onsen UIなどを使っている場合には ons.ready などあらかじめ指定されているものを利用すれば問題ありません。
SafariとwkWebViewでは利用できる機能に差異があります
MonacaクイックビューアをSafariで開いて利用する方は多いかと思います。それに対して、MonacaアプリはレンダリングエンジンにwkWebViewを使います。この時の機能差は意識して開発を行う必要があります。
具体的にどこが違うのか判定が難しいのですが、例えばSafariはフルスクリーン表示ができますが、wkWebViewを使ったブラウザ（Chromeなど）ではできません。Safariは動画のインライン再生ができますが、Chromeでは最大表示になってしまいます。
ChromeはwkWebViewを使っているはずなので、MonacaクイックビューアはChromeで利用するのがお勧めです。Safariで利用できている機能がMonacaアプリで使えないと言った動作齟齬を極力なくした方が、開発しやすいでしょう。
CORS制限/CSPには注意してください
Webアプリケーションが常に気にしなければならないのがCORS制限です。fetch関数では外部サイトへのPOSTであったり、任意のコンテンツをGETで取得するのに制限があります。
Cordovaプラグインであれば cordova-plugin-advanced-http や cordova-plugin-fetch が利用できますが、Monacaクイックビューアでは使えないので問題になります。これの解決策はMonacaカスタムデバッガービルドを使うほかないでしょう。
また、WebアプリではCSP（Content Security Policy）も問題になります。HTTPSでは使える機能が、MonacaアプリのURLスキーマでは使えない場合があります。これも分かりやすい一覧などがある訳ではないので、実際にやってみないと分からないのですが…なるべく早い段階でカスタムデバッガービルドを使った方が動作差異をなくせます。
まとめ
Monacaクイックビューアは簡易的な動作確認用ツール、くらいに考えておく方が良いでしょう。iOSアプリをちゃんと開発するならば、早めにカスタムデバッガービルドを使うのがお勧めです。
なお、NCMBのプッシュ通知プラグインはカスタムデバッガービルドでは正しく動作しない（プッシュ通知受信時に期待したハンドリングができない）のでご注意ください（参考： ニフクラ mobile backendを使ってAndroidへプッシュ通知を送る手順を一から紹介 – モナカプレス）。