RPGツクールMV

【2019年版】RPGツクールMVで作ったゲームをiOSで実機テストする方法(Mac+Cordova)

RPGツクールMVではスマホアプリも作れるようになりました。

アプリ化する手順はRPGツクールMVのヘルプに書いてあるのですが、情報が古くなっていて今やるとエラーで進まないところがあります。

この記事では、2019年11月現在のRPGツクールMVで作ったゲームをiOSアプリ化する方法をまとめました。

iOSアプリを作るにはMacが必要なので、ない場合は購入することになります。

わたしがMacを購入したときに調べた結果をまとめた記事があるので、もしよければ参考にしてみてください。
iOSアプリ作成用のMacはなにを買えばいいか調べてみた

事前準備(初回のみ実行)

RPGツクールMVでデプロイメントする

RPGツクールMVのメニューからファイル→デプロイメントをクリックします。

Android / iOSを選択し、OKボタンをクリックします。
iOSアプリビルド準備1 RPGツクールMVでデプロイメントする

Node.jsをインストールする

https://nodejs.org/からNode.jsのインストーラーをダウンロードします。

バージョンが2つあるみたいですが、13.1.0Currentの方をダウンロードしました。(違いはよくわかっていない)
iOSアプリビルド準備2 Node.jsをダウンロード

インストーラーの設定はデフォルトのままでいいので、「続ける」を選んでインストールを続けます。

「インストーラが新しいソフトウェアをインストールしようとしています。」というメッセージが表示されたら、パソコンアカウントのパスワードを入力します。(AppleIDではない)
iOSアプリビルド準備3 Node.jsのインストール認証

アクセス権限(パーミッション)の設定

.configフォルダにアクセス権をつけておかないとcordovaコマンドを実行したときにpermission deniedエラーが出るので、アクセス権を設定します。

画面左下にある顔マークのアイコンをクリックし、Finderを立ち上げます。
iOSアプリビルド準備4 Finderを開く

アプリケーション→ユーティリティ→ターミナルをクリックし、ターミナルを起動します。
iOSアプリビルド準備5 ターミナルを起動

ターミナルは、Windowsでいうコマンドプロンプトのような文字コマンドでパソコンを操作するツールです。

ターミナルで次のコマンドを入力してReternキーを押します。

アカウント名のところには現在ログインしているパソコンのアカウント名を入力してください。

アカウント名がhogehogeだったら sudo chown -R hogehoge /Users/hogehoge/.config になります。

Cordovaをインストールする

ターミナルで次のコマンドを入力してReternキーを押します。

パスワードを聞かれるので、パソコンアカウントのパスワードを入力します。

ターミナルでパスワード入力しても画面には表示されません。
(ウェブでよく見る●表示にもなりません)

間違えた場合は1度Returnキーで認証失敗させてから、あらためてコマンドを打ち直してください。

ios-simのインストール

ターミナルで次のコマンドを入力してReternキーを押します。

ios-deployのインストール

ターミナルで次のコマンドを入力してReternキーを押します。

Xcodeのインストール

App StoreでXcode検索して入手ボタンを押し、インストールします。
iOSアプリビルド準備6 Xcodeインストール

「XCodeが変更を加えようとしています。」というメッセージが表示されたら、パソコンアカウントのパスワードを入力します。
iOSアプリビルド準備7 Xcodeインストール認証

XcodeにAppleIDを登録する

Xcodeを立ち上げ、左上のメニューからXcode→Preferences…をクリックします。
iOSアプリビルド準備8 初期設定

Accountsタブをクリックし、左下にある+ボタンをクリックします。
iOSアプリビルド準備9 AppleIDを追加

Apple IDを選択してContinueボタンをクリックします。
iOSアプリビルド準備10 Apple IDを選択

Apple IDのパスワードで認証すると、XcodeにApple IDが登録されます。
iOSアプリビルド準備11 Apple IDで認証する

AppleIDに証明書を追加する

Manage Certificates…ボタンをクリックします。
iOSアプリビルド準備12 署名の設定

左下の+ボタンをクリックします。
iOSアプリビルド準備13 署名設定完了

証明書が追加されるのでDoneボタンをクリックします。
iOSアプリビルド準備14 署名を追加

プロジェクトの作成と設定(プロジェクトごとに実行)

プロジェクトの作成

ターミナルで以下のコマンドを入力し、プロジェクトを作成します。

フォルダパスで指定したフォルダが存在しない場合、1階層下まではフォルダを作ってくれますが2階層以上はエラーになります。

(例)
デスクトップにフォルダがない状態でパスを~/Desktop/workにした場合、workフォルダが作られます。

しかしデスクトップにフォルダがない状態でパスを~/Desktop/work/testにした場合、no such file or directoryエラーになります。

プロジェクトの階層を深くしたい場合は、先にmkdirコマンドでフォルダを作っておきます。

パッケージ名とアプリ名は任意の名前です。

ただし、パッケージ名はほかのアプリとかぶってはいけません。

無数にあるアプリとかぶらないようなパッケージ名を考えるのは大変なので、独自ドメインを取得してドメインを逆順につけるという方法が主流になっています。

たとえばmoooty.comというドメインを持っていたら「com.moooty.アプリ名」みたいなパッケージ名になります。

iOSプラットフォームの追加

ターミナルで次のコマンドを入力してReternキーを押します。

フォルダパスはcordovaプロジェクトの作成で指定したフォルダパスです。

続けてターミナルで次のコマンドを入力してReternキーを押します。

wwwフォルダを入れ替える

cordovaプロジェクトフォルダの中にあるwwwフォルダを削除し、RPGツクールMVでデプロイメントしたwwwフォルダをコピーします。

プロジェクトにチームを設定をする

cordovaのプロジェクトを作ったフォルダ/platforms/iosにある「アプリ名.xcodeproj」をダブルクリックして開きます。
プロジェクトの設定1 cordovaで作成したプロジェクトを開く

ウィンドウ左側にあるファイルツリーの一番上(プロジェクト名)をクリックします。

右側のウィンドウからSigning & Capabilitiesタブをクリックし、Team欄の右のボタンから自分のAppleIDを選択します。
プロジェクトの設定2 Teamを設定する

AppleIDを選択すると、Status欄にSign Inボタンが表示されるのでクリックし、自分のAppleIDのパスワードで認証してください。
プロジェクトの設定3 Teamの認証をする

プロジェクトの設定4 Apple IDを認証する

index.htmlの編集

<body style="background-color: black"> タグの下に以下のコードを追加します。

プロジェクトの設定5 index.htmlの設定

config.xmlの編集

config.xmlの設定から、端末を回転した時の動きを設定できます。

<platform name="ios"> タグの下に以下のコードを追加します。

プロジェクトの設定6 config.xmlの設定

valueに指定できる値は次の3つです。

説明
default 端末の画面の向きのよってアプリの向きも変わる
landscape 横固定
portrait 縦固定

ビルド(アプリのファイルを更新するたびに実行)

ターミナルで次のコマンドを入力してReternキーを押します。

ビルドが終わるまで時間がかかります。

Xcodeで再生ボタンを押したときにもビルドされるはずなのですが、データが反映されないときがあるので先にターミナルで実行しておきます。

「codesignは、キーチェーンに含まれるキー”Apple Development: アカウント名”へアクセスしようとしています。」というメッセージが表示されたら、パソコンアカウントのパスワードを入力して許可ボタンをクリックします。(複数回表示されます)
Xcodeを使ってiOSアプリをビルドする

Xcodeを使って実機テストする

新しいバージョンのXcodeでは、Apple Developer Programに登録しなくても実機でテストできるようになりました。

最終的にApp Storeでアプリを公開するにはApple Developer Programに登録をする必要がありますが、今までテストする時に登録していたのがリリース直前まで登録を遅らせられるようになった、ということですね。

Apple Developer Programは1年ごとに登録料がかかるので、すこしお財布に優しくなりました。

デバイスの選択

cordovaのプロジェクトを作ったフォルダ/platforms/iosにある「アプリ名.xcodeproj」をダブルクリックして開きます。

テストしたい実機とMacを有線でつなぎます。

Xcodeの左上にあるデバイス欄をクリックし、デバイスを選択します。
(1番上に表示されています)
Xcodeを使ってiOSアプリの実機テストする1 デバイスを選択する

デバイス欄の左側にある再生ボタン(三角のボタン)を押すと、ビルドが開始され、ファイルが実機にコピーされます。

「codesignは、キーチェーンに含まれるキー”Apple Development: アカウント名”へアクセスしようとしています。」というメッセージが表示されたら、パソコンアカウントのパスワードを入力して許可ボタンをクリックします。
Xcodeを使ってiOSアプリの実機テストする2 キーチェーン認証する

ビルドが完了すると、接続している実機のホーム画面にアプリのアイコンが追加されます。
(アイコンを設定していないとCordovaのアイコンになります)
Xcodeを使ってiOSアプリの実機テストする3 ホーム画面のアプリアイコンをクリックする

アプリのアイコンをタッチすると「信頼されていないデベロッパ この〇〇でデベロッパ”Apple Development: 〇〇”のAppを使用することは現在のデバイス管理設定では許可されていません。」というメッセージが表示されます。
Xcodeを使ってiOSアプリの実機テストする4 信頼されていないデベロッパのメッセージ

1度このメッセージを見ておかないと、次の作業で「デバイス管理」が表示されません。

実機側でデベロッパを信頼する

信頼されていないデベロッパのメッセージを見た後、設定→一般からデバイス管理をクリックします。
Xcodeを使ってiOSアプリの実機テストする5 デバイス管理を開く

Apple Development: 〇〇をクリックします。
Xcodeを使ってiOSアプリの実機テストする6 デベロッパを選択

Apple Development: 〇〇を信頼をクリックします。
Xcodeを使ってiOSアプリの実機テストする7 デベロッパを信頼する

確認メッセージが表示されるので、信頼をクリックします。
Xcodeを使ってiOSアプリの実機テストする8 デベロッパの信頼確認メッセージ

再度アプリのアイコンをタップすると、アプリが起動します。
Xcodeを使ってiOSアプリの実機テストする9 実機でアプリを実行する

テストが終わったら、設定→一般→デバイス管理からAppを削除をクリックすると、アプリが消えます。
Xcodeを使ってiOSアプリの実機テストする10 テストしたアプリを削除する

参考にさせていただいたページ