CordovaでティラノスクリプトのゲームをAndroidアプリ化
はじめに
ティラノスクリプトで作ったゲームをAndroidアプリ化しようと思って、
とりあえず公式をたどり手順通り進めてみた。
【2015年冬版】phonegapでアプリ化する(Android版) - シケモクテクノロジー
おっと、AndroidStudioからエミュレーター起動しても、
エラーがでて先に進まないぞ!
よし、違う方法を探してみよう!やってみよう!
で出来た方法の紹介となります。
基本的には、こちらのサイトを参考にし、
つまったところや、困ったところを補足している感じです。
Cordova - iPhone, iOSと Android 両方で動くアプリ開発環境 - DEblog
そもそもCordovaとはなんだ?
HTML+Javascripで作ったものを、ネイティブアプリにしてくれる、素敵なフレームワークだよ!
(ちょこっと調べましたが、よくわかんなかった)
ステップ②:JDKをダウンロード
JDK(Java 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がインストールされいなかったかもしれない。