RPGツクールMVではスマホアプリも作れるようになりました。
アプリ化する手順はRPGツクールMVのヘルプに書いてあるのですが、情報が古くなっていて今やるとエラーで進まないところがあります。
この記事では、2019年11月現在のRPGツクールMVで作ったゲームをiOSアプリ化する方法をまとめました。
iOSアプリを作るにはMacが必要なので、ない場合は購入することになります。
わたしがMacを購入したときに調べた結果をまとめた記事があるので、もしよければ参考にしてみてください。
→iOSアプリ作成用のMacはなにを買えばいいか調べてみた
事前準備(初回のみ実行)
RPGツクールMVでデプロイメントする
RPGツクールMVのメニューからファイル→デプロイメントをクリックします。
Android / iOSを選択し、OKボタンをクリックします。
Node.jsをインストールする
https://nodejs.org/からNode.jsのインストーラーをダウンロードします。
バージョンが2つあるみたいですが、13.1.0Currentの方をダウンロードしました。(違いはよくわかっていない)
インストーラーの設定はデフォルトのままでいいので、「続ける」を選んでインストールを続けます。
「インストーラが新しいソフトウェアをインストールしようとしています。」というメッセージが表示されたら、パソコンアカウントのパスワードを入力します。(AppleIDではない)
アクセス権限(パーミッション)の設定
.configフォルダにアクセス権をつけておかないとcordovaコマンドを実行したときにpermission deniedエラーが出るので、アクセス権を設定します。
画面左下にある顔マークのアイコンをクリックし、Finderを立ち上げます。
アプリケーション→ユーティリティ→ターミナルをクリックし、ターミナルを起動します。
ターミナルは、Windowsでいうコマンドプロンプトのような文字コマンドでパソコンを操作するツールです。
ターミナルで次のコマンドを入力してReternキーを押します。
sudo chown -R アカウント名 /Users/アカウント名/.config
アカウント名のところには現在ログインしているパソコンのアカウント名を入力してください。
アカウント名がhogehogeだったら sudo chown -R hogehoge /Users/hogehoge/.config になります。
Cordovaをインストールする
ターミナルで次のコマンドを入力してReternキーを押します。
sudo npm install cordova -g
パスワードを聞かれるので、パソコンアカウントのパスワードを入力します。
ターミナルでパスワード入力しても画面には表示されません。
(ウェブでよく見る●表示にもなりません)
間違えた場合は1度Returnキーで認証失敗させてから、あらためてコマンドを打ち直してください。
ios-simのインストール
ターミナルで次のコマンドを入力してReternキーを押します。
sudo npm install ios-sim -g
ios-deployのインストール
ターミナルで次のコマンドを入力してReternキーを押します。
sudo npm install --global --unsafe-perm ios-deploy
Xcodeのインストール
App StoreでXcode検索して入手ボタンを押し、インストールします。
「XCodeが変更を加えようとしています。」というメッセージが表示されたら、パソコンアカウントのパスワードを入力します。
XcodeにAppleIDを登録する
Xcodeを立ち上げ、左上のメニューからXcode→Preferences…をクリックします。
Accountsタブをクリックし、左下にある+ボタンをクリックします。
Apple IDを選択してContinueボタンをクリックします。
Apple IDのパスワードで認証すると、XcodeにApple IDが登録されます。
AppleIDに証明書を追加する
Manage Certificates…ボタンをクリックします。
左下の+ボタンをクリックします。
証明書が追加されるのでDoneボタンをクリックします。
プロジェクトの作成と設定(プロジェクトごとに実行)
プロジェクトの作成
ターミナルで以下のコマンドを入力し、プロジェクトを作成します。
cordova create フォルダパス パッケージ名 アプリ名
フォルダパスで指定したフォルダが存在しない場合、1階層下まではフォルダを作ってくれますが2階層以上はエラーになります。
(例)
デスクトップにフォルダがない状態でパスを~/Desktop/workにした場合、workフォルダが作られます。
しかしデスクトップにフォルダがない状態でパスを~/Desktop/work/testにした場合、no such file or directoryエラーになります。
プロジェクトの階層を深くしたい場合は、先にmkdirコマンドでフォルダを作っておきます。
mkdir -p フォルダパス
パッケージ名とアプリ名は任意の名前です。
ただし、パッケージ名はほかのアプリとかぶってはいけません。
無数にあるアプリとかぶらないようなパッケージ名を考えるのは大変なので、独自ドメインを取得してドメインを逆順につけるという方法が主流になっています。
たとえばmoooty.comというドメインを持っていたら「com.moooty.アプリ名」みたいなパッケージ名になります。
iOSプラットフォームの追加
ターミナルで次のコマンドを入力してReternキーを押します。
フォルダパスはcordovaプロジェクトの作成で指定したフォルダパスです。
cd フォルダパス
続けてターミナルで次のコマンドを入力してReternキーを押します。
cordova platform add ios
wwwフォルダを入れ替える
cordovaプロジェクトフォルダの中にあるwwwフォルダを削除し、RPGツクールMVでデプロイメントしたwwwフォルダをコピーします。
プロジェクトにチームを設定をする
cordovaのプロジェクトを作ったフォルダ/platforms/iosにある「アプリ名.xcodeproj」をダブルクリックして開きます。
ウィンドウ左側にあるファイルツリーの一番上(プロジェクト名)をクリックします。
右側のウィンドウからSigning & Capabilitiesタブをクリックし、Team欄の右のボタンから自分のAppleIDを選択します。
AppleIDを選択すると、Status欄にSign Inボタンが表示されるのでクリックし、自分のAppleIDのパスワードで認証してください。
index.htmlの編集
<body style=”background-color: black”> タグの下に以下のコードを追加します。
<script type="text/javascript" src="cordova.js"></script>
config.xmlの編集
config.xmlの設定から、端末を回転した時の動きを設定できます。
<platform name=”ios”> タグの下に以下のコードを追加します。
<preference name="orientation" value="値" />
valueに指定できる値は次の3つです。
値 | 説明 |
---|---|
default | 端末の画面の向きのよってアプリの向きも変わる |
landscape | 横固定 |
portrait | 縦固定 |
ビルド(アプリのファイルを更新するたびに実行)
ターミナルで次のコマンドを入力してReternキーを押します。
ビルドが終わるまで時間がかかります。
cordova build
Xcodeで再生ボタンを押したときにもビルドされるはずなのですが、データが反映されないときがあるので先にターミナルで実行しておきます。
「codesignは、キーチェーンに含まれるキー”Apple Development: アカウント名”へアクセスしようとしています。」というメッセージが表示されたら、パソコンアカウントのパスワードを入力して許可ボタンをクリックします。(複数回表示されます)
Xcodeを使って実機テストする
新しいバージョンのXcodeでは、Apple Developer Programに登録しなくても実機でテストできるようになりました。
最終的にApp Storeでアプリを公開するにはApple Developer Programに登録をする必要がありますが、今までテストする時に登録していたのがリリース直前まで登録を遅らせられるようになった、ということですね。
Apple Developer Programは1年ごとに登録料がかかるので、すこしお財布に優しくなりました。
デバイスの選択
cordovaのプロジェクトを作ったフォルダ/platforms/iosにある「アプリ名.xcodeproj」をダブルクリックして開きます。
テストしたい実機とMacを有線でつなぎます。
Xcodeの左上にあるデバイス欄をクリックし、デバイスを選択します。
(1番上に表示されています)
デバイス欄の左側にある再生ボタン(三角のボタン)を押すと、ビルドが開始され、ファイルが実機にコピーされます。
「codesignは、キーチェーンに含まれるキー”Apple Development: アカウント名”へアクセスしようとしています。」というメッセージが表示されたら、パソコンアカウントのパスワードを入力して許可ボタンをクリックします。
ビルドが完了すると、接続している実機のホーム画面にアプリのアイコンが追加されます。
(アイコンを設定していないとCordovaのアイコンになります)
アプリのアイコンをタッチすると「信頼されていないデベロッパ この〇〇でデベロッパ”Apple Development: 〇〇”のAppを使用することは現在のデバイス管理設定では許可されていません。」というメッセージが表示されます。
1度このメッセージを見ておかないと、次の作業で「デバイス管理」が表示されません。
実機側でデベロッパを信頼する
信頼されていないデベロッパのメッセージを見た後、設定→一般からデバイス管理をクリックします。
Apple Development: 〇〇をクリックします。
Apple Development: 〇〇を信頼をクリックします。
確認メッセージが表示されるので、信頼をクリックします。
再度アプリのアイコンをタップすると、アプリが起動します。
テストが終わったら、設定→一般→デバイス管理からAppを削除をクリックすると、アプリが消えます。
参考にさせていただいたページ
- RPGツクールMV ヘルプ
- iOSアプリの実機テストがXcode 7なら簡単無料!手順まとめます
- npmでpermission deniedになった時の対処法[mac]
- ios-deployがインストールできないエラー
- [iPhone] 実機でiOSアプリを確認する