ひよっこ blog

ゲーム制作について、作ったものや思ったことをつらつら書いていく予定

CordovaでティラノスクリプトのゲームをAndroidアプリ化

はじめに

ティラノスクリプトで作ったゲームをAndroidアプリ化しようと思って、
とりあえず公式をたどり手順通り進めてみた。

【2015年冬版】phonegapでアプリ化する(Android版) - シケモクテクノロジー

おっと、AndroidStudioからエミュレーター起動しても、
エラーがでて先に進まないぞ!
よし、違う方法を探してみよう!やってみよう!
で出来た方法の紹介となります。


基本的には、こちらのサイトを参考にし、
つまったところや、困ったところを補足している感じです。
Cordova - iPhone, iOSと Android 両方で動くアプリ開発環境 - DEblog


そもそもCordovaとはなんだ?

HTML+Javascripで作ったものを、ネイティブアプリにしてくれる、素敵なフレームワークだよ!
(ちょこっと調べましたが、よくわかんなかった)

ステップ①:Node.jsをダウンロード

下記からNode.jsをダウンロードします。

Node.js

ステップ②:JDKをダウンロード

JDKJava SE Development Kit)をダウンロードします。
Java SE Development Kit 8 - Downloads

Accept License Agreement にチェックを入れて、
jdk-8u91-windows-x64.exeを押しましょう。
Windows 64bitじゃない場合はご自分のPCに合わせてダウンロードしてください

ステップ③:ApacheのAntを導入

下記より【apache-ant-X.X.X-bin.zip】をダウンロードして解凍してください。
Apache Ant - Binary Distributions

私の解凍ツールでは、解凍時になにやらエラーが出ていましたが、
普通に進めることができました。

ステップ④:PATHを設定 その1

Android SDKを実行するため、PATHを設定します。
「システムの詳細設定」(「システムのプロパティ」の「詳細設定」タブ)より、
環境変数(N)」ボタンを押してください。

ユーザー環境変数(新規追加): JAVA_HOME
変数値(例): C:\Program Files\Java\jdk1.8.0_91

ユーザー環境変数(新規追加): ANT_HOME
変数値 (Pleiadesが入っている場合の例): C:\apache-ant-1.9.7

ユーザー環境変数 [Path] を編集し、後ろに以下を追加
…… ;%JAVA_HOME%\bin;%ANT_HOME%\bin

JAVA_HOMEは「ステップ②:JDKをダウンロード」がインストールされた場所、
ANT_HOMEは「ステップ③:ApacheのAntを導入」で解凍したフォルダを置いた場所(悩んだらC直下で良いと思います)を設定します。

[Path]はすでに変数値が入っていると思うので、一番右に、「;%JAVA_HOME%\bin;%ANT_HOME%\bin」を追加してください。

ステップ⑤:Android Studioのダウンロード

下記よりAndroid Studioをダウンロードしてください。
重たいので容量の空いてるところにダウンロードをお勧めします。50GBはもっていかれました。
Download Android Studio and SDK Tools | Android Studio

Intel HAXMがインストールされていない場合は、エミューレーターが実行できないそうなので、

Android studioを起動
・[Tools]-[Android]-[SDK Manager] を選択
SDK Tools のタブを選択
・「Intel x86 Emulator Accelerator(HAXM installer) 」にチェックを入れて Applyを押す

・ intelxaxm-android.exeを起動してインストール
・AndroidStudioを閉じる


こちらのサイトの「AndroidStudioのインストール」が分かりやすいです。
【2015年冬版】phonegapでアプリ化する(Android版) - シケモクテクノロジー


ステップ⑥:Cordovaのセットアップ

コマンドプロンプトを起動して、Node.jsをインストールした階層に移動します。

私の場合は下記にインストールしましたので、
C:\Program Files\nodejs

cd Program Files\nodejs

でエンターを押せば、コマンドプロンプト上でディレクトリの移動ができます。
(cdはチェンジディレクトリーですね)
Dドライブにインストールしている場合は、

d:

で、Dドライブに移動できるので、そこからcd~と入れてください。
ちなみに、フォルダ名は1文字入れてTabキーを押せば続きは勝手に表示されます。

Node.jsのディレクトリに移動しましたら、
コマンドプロンプト上で下記を打ちます。

npm install cordova -g

放っておくと何やらごちゃごちゃ出るので、
コマンドプロンプトが動かなくなったら、さらに下記を打ちます。

npm install plugman -g

ステップ⑦:PATHを設定 その2

ステップ④ではAndroid SDKを実行するため、PATHを設定しましたが、
今度は、cordova コマンドがAndroid SDKの各種ツールを呼び出せるように設定します。
PATHを設定することで、コマンドを使用した時に、PCが探せるようになるというような感じです。(たぶん)

「システムの詳細設定」(「システムのプロパティ」の「詳細設定」タブ)より、
環境変数(N)」ボタンを押してください。

ユーザー環境変数 [Path] を編集し、後ろに以下を追加
…… ;C:\Users\ユーザー名\AppData\Local\Android\sdk\tools;C:\Users\ユーザー名\AppData\Local\Android\sdk\platform-tools;

私の場合はDドライブにAndroid studioをインストールしたため、
D:~というディレクトリになりました。


ステップ⑧:CordovaでAndroidアプリのプロジェクト作成

やっとアプリのプロジェクトが作れるところまで来ました!
コマンドプロンプトで、下記を指定することで、Android用のプロジェクトができます。

D:
cd testgame

cordova create Game1  jp.touchstone  TestGame1 -d

任意でいいのですが、上記の例だと、Dドライブ直下のtestgameフォルダに作ります。

そして、testgameフォルダの中にGame1フォルダを作り、
jp.touchstone パッケージで、SampleApli1 ファイルを作ります。

とりあえず、コマンドを打って、指定した場所に
testgameフォルダが実際にできていればOKです。


ステップ⑨:Android SDK ManagerでSDK追加

Android SDK Managerを起動して、SDKをインストールします。
SDK Manager.exeを起動してください。

私は下記にインストールしましたが、
Android Studioインストール時に設定したディレクトリにあります。

D:\Users\xxx\AppData\Local\Android\sdk
SDK Manager.exe

または、コマンドプロンプトからも起動できます。
起動したままで、androidと入れててエンターを押せば起動します。

C:android


起動したら、適当にSDKをインストールします。
私は、Android 4.2.2(API 17)からAndroid 6.0(API 23)までインストールしました。
ちなみに、Android Nはインストールできませんでした。

インストールしたいものに、チェックして、右下より
「Install」ボタンを押してください。
その後、別のウィンドウが出てくるので、
「Accept License」にチェックをして「Install」を押します。

インストールにはとても時間がかかるのでとても待ちます。

終わったら、cordova platform add androidをします。

D:
cd testgame\Game1

cordova platform add android

ステップ⑩:AVD Managerの設定

SDK Manager.exeと同じディレクトリにある、
AVD Manager.exeを起動します。
コマンドプロンプトから起動したい場合は、下記のようになります。

C:android avd

ここで、新しいデバイスの定義ができますが、
デフォルトでいくつか入っているので、別にしなくても良いかと思います。


ステップ⑪:ティラノスクリプトを入れる

D:\testgame\Game1\www

wwwフォルダに、ティラノスクリプトのindex.htmlがあるフォルダを上書きします。
(特に増やしてなければ、下記が上書きされると思います。)

・data
・tyrano
・index.html
・novel_sound.swf
・readme.txt

index.htmlを開いて、 の直前に以下のコードを追加してください。

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

ステップ⑫:ビルドと端末での起動

Android端末を、デベロッパー(開発者)モードに変更します。
USB接続しない状態で、Androidの[設定][端末情報]で、[ビルド番号]で記号が並んでいるところを、7回タップします。
すると、「デベロッパー・モード」になります。

設定に[開発向けオプション]が追加されているので、[USBデバッグ]をチェックします。

そしてUSBでPCに接続します。

コマンドプロンプトで【C:\testgame\Game1】のディレクトリに移動して、
「cordova build」を実行すると、ビルドされます。その後、
「cordova run android -device -d」を実行すると、USBで接続した端末で起動できます。

D:
cd testgame\Game1

cordova build

cordova run android -device -d

おわり

お疲れさまでした。これで端末での起動は終了です。

エミュレータでの起動方法などもろもろありましたが、もう端末起動で力尽きました。

横画面にしたいとか、ステータスバー消したいとかあれば、
config.xmlを編集することでどうにかなります。
下記は上でステータスバーを消しており、下で横画面固定にしています。

<preference name="Fullscreen" value="true" />
<preference name="orientation" value="landscape" />

見にくい記事になってしまいましたが、
とりあえずこの手順でAndroidアプリの起動ができました。

最初にできなかったのは、
ApacheのAntをダウンロードしていなかったのと、
対応するAndroid SDKがインストールされいなかったかもしれない。