Monacaで利用しているCordovaでは、ローカルリソースにアクセスする場合、file://スキーム
が使用されます。
WKWebViewでは、セキュリティーの制約により、ローカルリソースに対して「file://スキーム」を使用してAjaxアクセスすることができません。この問題に対応するために、Monacaから Custom Schemeプラグイン
がリリースされました。
注意点
- このCustom Schemeプラグインは、
iOS 11以降
から利用することができます。 そのため、 以下のように config.xml にiOSのDeployment Target
を指定する必要があります。
<platform name="ios">
<preference name="deployment-target" value="11" />
</platform>
- Custom Schemeプラグインの動作を確認する場合は、デバッグビルドで確認する必要があります。WkWebView が
有効
になっているカスタムビルドデバッガーでは、デバッガー内で設定が行われているためCustom Schemeプラグイン
が無効
の状態でもローカルリソースにAjaxアクセスすることができます。
Custom Schemeプラグインの利用方法
Custom Schemeプラグインを利用する場合は、Monacaプロジェクトの
設定 > Cordovaプラグインの管理 > 利用可能なプラグイン > Custom Scheme
を 有効
にします。その他の設定は、必要ありません。
Custom Schemeプラグインの動作確認
今回は、ローカルリソースとしてJSONファイルにAjaxアクセスして動作確認を行ってみたいと思います。
Monacaプロジェクトの www
フォルダーに検証用のJSONファイルを作成します。検証用データは、以下を使用します。ファイル名は test.json
にしています。
{
"name": "Monaca",
"age": 1000
}
検証コードは、以下になります。
今回、Ajaxアクセスには Fetch API
を使用しています。
<script>
function test01() {
fetch("test.json")
.then(function(response) {
alert("response.status: " + response.status);
alert("response.ok: " + response.ok);
if (response.ok) {
response.json().then(function(json) {
alert(JSON.stringify(json));
})
}
})
.catch(function(error) {
alert("error: " + error);
});
}
</script>
<body>
<input type="button" value="Fetch APIテスト" onclick="test01()" />
</body>
MonacaプロジェクトのiOSアプリ設定画面から WkWebView を 有効
にして、Custom Schemeプラグインを 無効
にしている場合は、以下のようなエラーが出力されます。
TypeError: Cross origin requests are only supported for HTTP.
iOSアプリ設定画面から WkWebView を 有効
にして、Custom Schemeプラグインも 有効
にしている場合は、正常に test.json にアクセスされ、以下の内容が出力されます。
response.status: 200
response.ok: true
{"name":"Monaca","age":1000}
おわりに
WKWebViewを使用してローカルリソースにAjaxアクセスする必要がある場合は、Custom Schemeプラグインを 有効
にしてご利用ください。