Monacaチームの小田川です。
Monacaでアプリ開発を行う際に、開発者側が用意した画像ファイルや設定ファイルのようなリソースファイルをネイティブ側の処理で使用したい場合があります。
Monacaが利用しているCordovaでは、iOSやAndroid用のアプリをビルドするために必要なプラットフォームを提供しています。ネイティブ側の設定を行う場合は、このプラットフォームに対して行う必要があるため、開発側で用意したリソースファイルは、ビルドの際にプラットフォームにコピーする必要があります。
今回は、Monacaプロジェクト内の開発側で用意したリソースファイルをビルドの際にプラットフォームにコピーする方法について説明していきたいと思います。今回の対象プラットフォームは、以下になります。
- iOSプラットフォーム 6.2.0
- Androidプラットフォーム 11.0.0
リソースファイルをコピーする方法
Cordovaでは、プラットフォームにリソースファイルをコピーする機能として、resource-fileを提供しています。このresource-fileは、config.xmlに設定します。
Monacaで提供しているテンプレートプロジェクトでは、ネイティブ側で使用するリソースファイルは、
- ルート/res
フォルダー内に配置されています。
今回は、対象のリソースファイルがresフォルダー配下に配置されている場合を想定して説明していきます。resフォルダー配下のsetting.xmlをプラットフォームにコピーする場合は、以下のような設定になります。
<resource-file src="/res/setting.xml" target="setting.xml"/>resource-fileでは、iOSとAndroidでリソースファイルのコピー先が異なっています。次は、resource-fileのコピー先について見ていきたいと思います。
iOSプラットフォームの場合
iOSプラットフォームは、Xcodeプロジェクトをベースに構成されています。以下のresource-fileの設定例でiOSプラットフォームにリソースファイルをコピーした場合は、iOSプラットフォームの
- ルート/ターゲットフォルダ/Resources
にコピーされます。
<!-- 設定例 -->
<resource-file src="/res/xxx.plist" target="xxx.plist"/>このResourcesフォルダーは、iOSが提供しているAPIからアクセス可能なフォルダーになります。通常、iOSの場合は、このResourcesフォルダーにリソースファイルをコピーすることで、ネイティブ側のプログラム上から利用することができます。Cordovaプラグイン等でコピー先が指定されている場合は、指定先に合わせて設定してください。
Androidプラットフォームの場合
Androidプラットフォームは、Android Studioプロジェクトをベースに構成されています。以下のresource-fileの設定例でAndroidプラットフォームにリソースファイルをコピーした場合は、Androidプラットフォームのルートにコピーされます。
<!-- 設定例 -->
<resource-file src="/res/setting.xml" target="setting.xml"/>Androidの場合は、iOSとは異なり、リソースファイルの配置先が、ファイルタイプによって分かれています。そのため、正しい配置先にファイルをコピーする必要があります。Androidプラットフォーム内のリソースファイルを配置するためのベースフォルダーは、以下になります。
- ルート/app/src/main/res
画像ファイルのコピー先フォルダーは、以下になります。
- ルート/app/src/main/res/drawable
- ルート/app/src/main/res/drawable-nodpi
- ルート/app/src/main/res/mipmap-xxx
xxxのフォルダーは、解像度やAPIレベル別に複数あります。そのため、画像ファイルをコピーする場合は、正しいコピー先を指定する必要があります。設定例は、以下になります。
<!-- 設定例 -->
<resource-file src="/res/ic_launcher.png" target="/app/src/main/res/drawable/ic_launcher.png"/>
<resource-file src="/res/ic_launcher.png" target="/app/src/main/res/drawable-nodpi/ic_launcher.png"/>
<resource-file src="/res/ic_launcher.png" target="/app/src/main/res/mipmap-xhdpi/ic_launcher.png"/>色指定、文字列指定、スタイル指定用のリソースファイルのコピー先フォルダーは、以下になります。
- ルート/app/src/main/res/values
設定例は、以下になります。
<!-- 色指定例 -->
<resource-file src="/res/colors.xml" target="/app/src/main/res/values/colors.xml"/>
<!-- 文字列指定例 -->
<resource-file src="/res/strings.xml" target="/app/src/main/res/values/strings.xml"/>
<!-- スタイル指定例 -->
<resource-file src="/res/themes.xml" target="/app/src/main/res/values/themes.xml"/>色指定、文字列指定、スタイル指定以外のxml用のリソースファイルのコピー先フォルダーは、以下になります。
- ルート/app/src/main/res/xml
ネットワーク セキュリティ構成を行うnetwork_security_config.xml等は、このxmlフォルダーにコピーします。設定例は、以下になります。
<!-- 設定例 -->
<resource-file src="/res/network_security_config.xml" target="/app/src/main/res/xml/network_security_config.xml"/>おわりに
config.xmlのresource-file機能を利用することで、Monacaプロジェクト内のリソースファイルをビルドの際にプラットフォームにコピーすることができます。ネイティブ側の処理で開発者側が用意したリソースファイルを使用する必要がある場合は、一度、resource-file機能を試してみてください。