読者です 読者をやめる 読者になる 読者になる

【2015年冬版】phonegapでアプリ化する(Android版) 

☆専用のアプリ化用ツール「ティラノプレイヤー」が公開されています。

この記事の方法は古いですので、ご注意ください。

最新のアプリ化手順は以下となります。

 

shikemokumk.hateblo.jp

 

===================

 

ティラノスクリプトで作成したゲームをアンドロイドアプリ化する手順を説明します。

iphoneアプリ化についてはこちら

 

解説で確認した環境は windows10 です。

Macでも各自で対応するものをインストールして実施いただければ支障はないかと思います。

なにかありましたら、ご連絡いただけると幸いです。

 JDKのインストール

 最初にJDKをインストールします。

以下のURLにアクセスしてください。

Java SE Development Kit 8 - Downloads

Accept License Agreement にチェックを入れて

ご利用の環境に応じて、ファイル名のリンクを選択してください。

f:id:shikemokumk:20151102161652p:plain

 

ダウンロードが完了したら、インストールを実施してください。

 続いて、JDKにパスを通します。

 コントロールパネル → システム → システムの詳細設定

から環境変数を開きます

 

f:id:shikemokumk:20151102162213p:plain

 

 システムの環境変数に新規追加します。

f:id:shikemokumk:20151102162703p:plain

変数名:JAVA_HOME

変数値: C:\Program Files\Java\jdk1.8.0_65

 

この変数値は、ダウンロードしたバージョンや環境によって異なる場合がありますのでそれぞれの値に置き換えてください。上のまま書いてもうまく動きません。

 

 AndroidStudioのインストール

つづいて、以下のURLにアクセスします。

Download Android Studio and SDK Tools | Android Developers

 

f:id:shikemokumk:20151102163114p:plain

 

DOWNLOAD ANDROID STUDIO をクリックして

ダウンロードを開始します。

 

ダウンロードが終わったらインストールを開始してください。

インストール中の設定は特に変更せずデフォルトのまま進めてください。

 

設定が完了したら、AndroidStudioを起動してください。

注:ここでエラーがでて起動できない場合はJDK環境変数の設定が間違っている可能性がありますので、再度確認してください。

 

起動したら、エミュレーターでの動作を確認してみます。

まず、[File]-[New]-[NewProject] から適当なAndroidプロジェクトを作成してください。

その後、

[Tools]-[Android]-[SDK Manager] を選択します。

SDK Tools のタブを選択して

Intel x86 Emulator Accelerator(HAXM installer) 」にチェックを入れて Applyを押してください。

 

f:id:shikemokumk:20151102170219p:plain

 

これだけでは、インストールは終わりません。

AndroidSDKがインストールされているフォルダを開いて intelxaxm-android.exe を実行してインストールしてください。

それぞれの環境により場所は変わりますが

<各自のパス>\AndroidSdk\extras\intel\Hardware_Accelerated_Execution_Manager

フォルダの中にダウンロードされているかと思います。

この後、AndroidStudioを一回閉じてください。

 

 NodeJSのインストール

つづいて、NodeJSをインストールします。

https://nodejs.org/en/

にアクセスして v5.0.0 Stable をダウンロードしてインストールしてください。

 

 

f:id:shikemokumk:20151102170825p:plain

 

PhoneGapのインストール

コマンドプロンプトを起動してください。

黒い画面が表示されるかと思いますのでそこで

 

npm install -g phonegap

 

と打ち込んで最後にエンターを押してください。

成功したら、そのままコマンド画面で

phonegap create mygame 

 

と打ちます。次に

cd mygame 
phonegap plugin add cordova-plugin-media
phonegap build android

 

と続けて実行します。

これで、アンドロイドプロジェクトが作成され、アプリ化する準備が整いました。

 

ティラノスクリプトをアプリ化する

さて、いよいよティラノスクリプトのゲームをアンドロイドアプリ化します。

 先ほどのコマンド画面で 

explorer . 

 

 と打ってください。するとWindowsエクスプローラーが開くかと思います。

以下のような mygame フォルダの中身が表示されるのを確認してください。

f:id:shikemokumk:20151102172502p:plain

 

つづいて、アプリ化したいティラノスクリプトのプロジェクトフォルダを用意します。

ティラノスクリプトのプロジェクトは以下のような構成になっているかと思います。

 

f:id:shikemokumk:20151102172632p:plain

この index.htmlをエディタで開いて、</ body> の直前に以下のコードを追加してください。

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

 

保存します。

その後、プロジェクトフォルダの中身のファイルをすべて選択してmygameのフォルダの中の

\mygame\platforms\android\assets\www

フォルダの中へすべて上書き保存してください。

 

f:id:shikemokumk:20151102180317p:plain

 

これで、アプリ化の準備は完了です。

 

エミュレーターで動作確認

それでは、アプリ化をテストしてみましょう。

再度、AndroidStudioを起動してください。

[File]-[New]-[Import Project]を選択して

先ほど作成しておいた、「mygame」フォルダを選択します。

その後の確認事項については、デフォルトのまま進めてください。

 

プロジェクトが開けたら、

[Run]-[EditConfigurations]を選択します。

その後開いた画面において

①左上の+ボタンを押してください。(AndroidApplicationを選択)

②NameはTest 

③Moduleはandroidを選択

④Emulator は 適当に表示されるものを選択。

(なにも表示されない場合はAVDManagerでインストールしてください)

OKを押します。

 

f:id:shikemokumk:20151102173716p:plain

 

 最後に今回作成したものを選択されていることを確認して再生を押してください

 

f:id:shikemokumk:20151102173916p:plain

 

起動には時間がかかります。

しばらく待ってください。

 

f:id:shikemokumk:20151102174012p:plain

 

こんな感じでエミュレーターが起動して、ティラノスクリプトのゲームが始まりましたね。

上部の電池バーや横向き、縦向きの設定なども簡単にできますので作成したゲームに合わせて設定してください。

 

実機で確認する

実機で確認する方法も簡単です。

まず、お手持ちのAndroid端末で開発者モードを有効にしてください。

以下の、ブログが詳しく書かれています。

 

Android Studioでアプリを実機で動作確認する - Android Studioでアプリ開発!

 

USBデバックを有効にします。

つづいて、先ほどと同様に

[Run]-[EditConfigurations]を選択します。

その後開いた画面において

①左上の+ボタンを押してください。(AndroidApplicationを選択)

②NameはJikkiTest 

③Moduleはandroidを選択

TargetDevice のところを USB deviceに指定

f:id:shikemokumk:20151102174849p:plain

OKを押したあと、実行してください。

f:id:shikemokumk:20151102175308j:plain

実機で表示されましたね。

 

注:実機がPCで認識されない場合はWindowsマシンにドライバが入っていないことが多いです。テストで使用した実機のドライバをWindowsにインストールして認識させてください。デバイスドライバで!みたいなものが出ている場合、ドライバが必要です。

 

以上でティラノスクリプトAndroidアプリ化は完了です。

GooglePlayなどで販売したい場合は apk を生成してアップロードするだけです。他のブログで解説などが山程ありますので、割愛します。

 

(要望があれば、apkとGooglePlay への提出も書くかも)

 

お疲れ様でした。