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機能を試してみてください。