2016年07月24日
RPGツクールMV向けCordovaを使ったApkファイル出力
◆RPGツクールMV向けCordovaを使ったApkファイル出力
本記事は公式ヘルプとは異なる方法（Cordovaというツールを経由した出力）です。
私はある時から公式ヘルプの手順ではApkファイル出力時にPython utf-8エラーが発生するようになったため、代替案として用いました。
公式の手順でできる環境の方はその方が良いと思います。
Cordovaを使った手順の参考元：
http://presentcall.com/cordova%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AE%E6%A7%8B%E7%AF%89-part1/
[前提]
次の記事を元にPython、Oracle JDK、Apache Ant、Android SDK、Crosswalkの導入と環境変数の設定が完了していること
参考：
ツクールMVで作成したプロジェクトをAndroid用apkファイルに出力する手順
https://fanblogs.jp/tabirpglab/archive/155/0
1.Node.jsのインストール
以下のサイトからNode.jsをインストールします
https://nodejs.org/en/
2.cordovaのインストール
「Node.js command prompt」を起動します
Windows10の場合、「node」のキーワードで検索すると表示されました
次のコマンドを入力し、cordovaのインストールを実行します
npm install cordova -g
インストールが完了したことを確認するため次のコマンドを実行します
cordova -v
最初だけ質問され、Enterキーを押下しました（結果、Yesと記述されました）
画像では6.3.0とバージョン確認ができます
3.Cordovaでプロジェクトを管理するためのフォルダ作成
次のコマンドを入力してCフォルダ直下に移動します
cd c:\
次のコマンドを入力してCordovaでプロジェクトを管理するためのフォルダ作成します
cordova create A com.example.sample B
A=プロジェクトを管理するためのフォルダ名
B=アプリ名
com.example.sample=識別用のドメイン名+識別用の名前
例）rpgmakerkuro.comでbandwagonというアプリを管理する場合のコマンド入力例
Cドライブ直下に指定した名前のフォルダが作成されています
4.CordovaプロジェクトにCrosswalkプラグインの導入
次のコマンドを入力して3で作成したフォルダに移動します
cd 3で作成したフォルダ名
次のコマンドを入力し、Crosswalkプラグインを導入します
cordova plugin add cordova-plugin-crosswalk-webview
例）bandwagonというフォルダに移動し、プラグインを導入した場合のコマンド入力例
5.CordovaプロジェクトにAndroid環境を追加
次のコマンドを入力して、3で作成したフォルダに移動します
cd 3で作成したフォルダ名
※4の操作の直後であれば移動した状態なので不要です
次のコマンドを入力して、プロジェクトにAndroid環境を追加します
cordova platform add android
例）andwagonというフォルダに移動し、Android環境を追加した場合のコマンド入力例
6.Cordovaプロジェクトのwwwフォルダを削除
3で作成したフォルダの中にあるwwwフォルダの中身を削除します
7.CordovaプロジェクトのwwwフォルダにRPGツクールMVのプロジェクトをコピー
6のwwwフォルダにRPGツクールMVで「ios/Android」用にデプロイメントしたファイルの中にあるwwwをコピーします
index.htmlファイルをテキストエディタ（メモ帳やTerapadなど）で開き、次のように記述します
<body style="background-color: black">の直下に次の一行を挿入します
<script type="text/javascript" src="cordova.js"></script>
★この手順でSE音など一部が再生されない問題が解消されます
8.config.xmlファイルの編集
3で作成したフォルダの中にあるconfig.xmlをテキストエディタ（メモ帳やTerapadなど）で開きます
次のように記述します（されていることを確認します）
<platform name="android">
<allow-intent href="market:19" />
画面の向きを固定したい場合は次の記述を追記します
縦固定
<preference name="Orientation" value="portrait" />
横固定
<preference name="Orientation" value="landscape" />
また以下情報を参考に設定をカスタマイズすることもできそうです
こちらはお好みでご覧ください
Cordovaのconfig.xmlで設定できる項目まとめ（android編）
http://designsupply-web.com/knowledgeside/1760/
9.アプリのビルド化
次のコマンドを入力して、3で作成したフォルダに移動します
cd 3で作成したフォルダ名
※4の操作の直後であれば移動した状態なので不要です
次のコマンドを入力して、アプリのビルド化を行います
cordova prepare
cordova build android --release
成功すると
BUILD SUCCESSFULの文字と
出力先が表示されます
10.apkファイルへkeystoreファイル（証明書）を関連づけ
Google Playで配布するためにkeystoreファイル（証明書）を関連づけます
keystoreファイルの作成方法については以下の記事をご覧ください
「5-1-1 Keystore ファイルの作成」の項※作成したら5-1-2へ進む必要はありません
https://fanblogs.jp/tabirpglab/archive/355/0
cdコマンドで以下へ移動
{プロジェクトのトップ}\platforms\android\build\outputs\apk
例）9の操作をc\bookmobileフォルダで実行していた場合
cd C:\bookmobile\platforms\android\build\outputs\apk
次のコマンドを実行
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore {作成した証明書ファイルの位置} android-armv7-release-unsigned.apk {キーストアで使う別名（エイリアス）} -storepass keystoreのパスワード
例）次の場合
Keysotreの場所：C:\rpgmakerkuro.keystore
Keystoreパスワード：pass1234
apkファイル名：android-armv7-release-unsigned.apk
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore C:\rpgmakerkuro.keystore android-armv7-release-unsigned.apk release -storepass pass1234
11.apkファイルの圧縮
Android SDK Managerにて「Android SDK Tools」をインストールします
-「Android SDK Tools」は複数表示されますが1バージョンだけで問題ありません
画面では23.0.2をインストールしています
zipalign.exeの場所を確認しておきます
バージョン23.0.2の場合は以下になります
C:\android-sdk\build-tools\23.0.2\zipalign.exe
Node.js command promptに戻り
次のコマンドを実行します
zipalign.exeの場所 -v 4 apkファイル名 圧縮後のapkファイル名
例）次の場合
zipalign.exeの場所：C:\android-sdk\build-tools\23.0.2\zipalign.exe
apkファイル名：android-armv7-release-unsigned.apk
圧縮後のapkファイル名：bookmobile.apk
C:\android-sdk\build-tools\23.0.2\zipalign.exe -v 4 android-armv7-release-unsigned.apk bookmobile.apk
成功すると以下にapkファイルが生成されます
例の場合だと「bookmobile.apk」というファイルが生成されます
C:\bookmobile\platforms\android\build\outputs\apk
後はapkファイルをGooglePlayに登録すれば完了です。
頑張ってください。
■トラブルシューティング
・手順9で「BUILD FAILED」エラーが発生した場合
赤字のエラー英文で問題が示されています。
画像の場合だと
「BUILD前にライセンス許諾に合意する必要がある」
「Android Studio Managerを使って合意とバージョンアップをしなよ」
という旨の記述が記載されているので、Android Studio Managerからバージョンアップすれば良いことが読み取れます。
基本は「何が問題か」「どうすればいいのか」を英文から読むことだと思います。
本記事は公式ヘルプとは異なる方法（Cordovaというツールを経由した出力）です。
私はある時から公式ヘルプの手順ではApkファイル出力時にPython utf-8エラーが発生するようになったため、代替案として用いました。
公式の手順でできる環境の方はその方が良いと思います。
Cordovaを使った手順の参考元：
http://presentcall.com/cordova%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AE%E6%A7%8B%E7%AF%89-part1/
[前提]
次の記事を元にPython、Oracle JDK、Apache Ant、Android SDK、Crosswalkの導入と環境変数の設定が完了していること
参考：
ツクールMVで作成したプロジェクトをAndroid用apkファイルに出力する手順
https://fanblogs.jp/tabirpglab/archive/155/0
1.Node.jsのインストール
以下のサイトからNode.jsをインストールします
https://nodejs.org/en/
2.cordovaのインストール
「Node.js command prompt」を起動します
Windows10の場合、「node」のキーワードで検索すると表示されました
次のコマンドを入力し、cordovaのインストールを実行します
npm install cordova -g
インストールが完了したことを確認するため次のコマンドを実行します
cordova -v
最初だけ質問され、Enterキーを押下しました（結果、Yesと記述されました）
画像では6.3.0とバージョン確認ができます
3.Cordovaでプロジェクトを管理するためのフォルダ作成
次のコマンドを入力してCフォルダ直下に移動します
cd c:\
次のコマンドを入力してCordovaでプロジェクトを管理するためのフォルダ作成します
cordova create A com.example.sample B
A=プロジェクトを管理するためのフォルダ名
B=アプリ名
com.example.sample=識別用のドメイン名+識別用の名前
例）rpgmakerkuro.comでbandwagonというアプリを管理する場合のコマンド入力例
Cドライブ直下に指定した名前のフォルダが作成されています
4.CordovaプロジェクトにCrosswalkプラグインの導入
次のコマンドを入力して3で作成したフォルダに移動します
cd 3で作成したフォルダ名
次のコマンドを入力し、Crosswalkプラグインを導入します
cordova plugin add cordova-plugin-crosswalk-webview
例）bandwagonというフォルダに移動し、プラグインを導入した場合のコマンド入力例
5.CordovaプロジェクトにAndroid環境を追加
次のコマンドを入力して、3で作成したフォルダに移動します
cd 3で作成したフォルダ名
※4の操作の直後であれば移動した状態なので不要です
次のコマンドを入力して、プロジェクトにAndroid環境を追加します
cordova platform add android
例）andwagonというフォルダに移動し、Android環境を追加した場合のコマンド入力例
6.Cordovaプロジェクトのwwwフォルダを削除
3で作成したフォルダの中にあるwwwフォルダの中身を削除します
7.CordovaプロジェクトのwwwフォルダにRPGツクールMVのプロジェクトをコピー
6のwwwフォルダにRPGツクールMVで「ios/Android」用にデプロイメントしたファイルの中にあるwwwをコピーします
index.htmlファイルをテキストエディタ（メモ帳やTerapadなど）で開き、次のように記述します
<body style="background-color: black">の直下に次の一行を挿入します
<script type="text/javascript" src="cordova.js"></script>
★この手順でSE音など一部が再生されない問題が解消されます
8.config.xmlファイルの編集
3で作成したフォルダの中にあるconfig.xmlをテキストエディタ（メモ帳やTerapadなど）で開きます
次のように記述します（されていることを確認します）
<platform name="android">
<allow-intent href="market:19" />
画面の向きを固定したい場合は次の記述を追記します
縦固定
<preference name="Orientation" value="portrait" />
横固定
<preference name="Orientation" value="landscape" />
また以下情報を参考に設定をカスタマイズすることもできそうです
こちらはお好みでご覧ください
Cordovaのconfig.xmlで設定できる項目まとめ（android編）
http://designsupply-web.com/knowledgeside/1760/
9.アプリのビルド化
次のコマンドを入力して、3で作成したフォルダに移動します
cd 3で作成したフォルダ名
※4の操作の直後であれば移動した状態なので不要です
次のコマンドを入力して、アプリのビルド化を行います
cordova prepare
cordova build android --release
成功すると
BUILD SUCCESSFULの文字と
出力先が表示されます
10.apkファイルへkeystoreファイル（証明書）を関連づけ
Google Playで配布するためにkeystoreファイル（証明書）を関連づけます
keystoreファイルの作成方法については以下の記事をご覧ください
「5-1-1 Keystore ファイルの作成」の項※作成したら5-1-2へ進む必要はありません
https://fanblogs.jp/tabirpglab/archive/355/0
cdコマンドで以下へ移動
{プロジェクトのトップ}\platforms\android\build\outputs\apk
例）9の操作をc\bookmobileフォルダで実行していた場合
cd C:\bookmobile\platforms\android\build\outputs\apk
次のコマンドを実行
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore {作成した証明書ファイルの位置} android-armv7-release-unsigned.apk {キーストアで使う別名（エイリアス）} -storepass keystoreのパスワード
例）次の場合
Keysotreの場所：C:\rpgmakerkuro.keystore
Keystoreパスワード：pass1234
apkファイル名：android-armv7-release-unsigned.apk
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore C:\rpgmakerkuro.keystore android-armv7-release-unsigned.apk release -storepass pass1234
11.apkファイルの圧縮
Android SDK Managerにて「Android SDK Tools」をインストールします
-「Android SDK Tools」は複数表示されますが1バージョンだけで問題ありません
画面では23.0.2をインストールしています
zipalign.exeの場所を確認しておきます
バージョン23.0.2の場合は以下になります
C:\android-sdk\build-tools\23.0.2\zipalign.exe
Node.js command promptに戻り
次のコマンドを実行します
zipalign.exeの場所 -v 4 apkファイル名 圧縮後のapkファイル名
例）次の場合
zipalign.exeの場所：C:\android-sdk\build-tools\23.0.2\zipalign.exe
apkファイル名：android-armv7-release-unsigned.apk
圧縮後のapkファイル名：bookmobile.apk
C:\android-sdk\build-tools\23.0.2\zipalign.exe -v 4 android-armv7-release-unsigned.apk bookmobile.apk
成功すると以下にapkファイルが生成されます
例の場合だと「bookmobile.apk」というファイルが生成されます
C:\bookmobile\platforms\android\build\outputs\apk
後はapkファイルをGooglePlayに登録すれば完了です。
頑張ってください。
■トラブルシューティング
・手順9で「BUILD FAILED」エラーが発生した場合
赤字のエラー英文で問題が示されています。
画像の場合だと
「BUILD前にライセンス許諾に合意する必要がある」
「Android Studio Managerを使って合意とバージョンアップをしなよ」
という旨の記述が記載されているので、Android Studio Managerからバージョンアップすれば良いことが読み取れます。
基本は「何が問題か」「どうすればいいのか」を英文から読むことだと思います。
【このカテゴリーの最新記事】
-
-
-
no image
-
no image
-
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/5276581
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック