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プラグインを 有効 にしてご利用ください。