2014/02/10

【2014年度版】phonegapでアプリ化する その2(アンドロイド版)

【注意】この記事より新しいアプリ化の手順が公開されています。

Androidアプリ化手順 2015年版


前回までで、アンドロイドアプリ化に必要な開発環境を整えました。

まだの方は >>【2014年度版】phonegapでアプリ化する その1(アンドロイド版)を先に確認してください。


*先ほどの動作確認で作成したプロジェクトは削除しておいてください

プロジェクトフォルダの作成

好きな場所に、あなたのプロジェクトフォルダを作成します。
今回は、Dドライブ直下にmyprojectという名前で作成しておきます。



NodeJSのインストール

アプリ化にはNodeJSが必要です。
以下のURLより、NodeJSを取得してインストールしてください。

http://nodejs.org/




環境変数の設定

コントロールパネル → システム → システムの詳細設定 → 環境変数 を選択してください

以下ようにPATHにすべて追加します。


D:\adt-bundle-windows-x86_64-20131030\eclipse\plugins\org.apache.ant_1.8.3.v201301120609\bin\;D:\adt-bundle-windows-x86_64-20131030\sdk\platform-tools;D:\adt-bundle-windows-x86_64-20131030\sdk\tools; ;%JAVA_HOME%\bin


adt-bundle-windows-xxxxxxxxxxxx などの数字の部分はそれぞれ、環境によって異なるので、読み替えて適切に設定してください。

%JAVA_HOME%にはJDKを指定する必要があります。


index.htmlの編集

ゲームプロジェクトのindex.html の </body>タグの直前に以下のコードを追加してください

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

PhoneGapのインストール

本記事の執筆時点での最新版はphonegap3.3 です。そのバージョンを元に記述していきます。

続いて、PhoneGapのインストールを行います。
最初に作成しておいたプロジェクトフォルダを開いて

[ファイル]=>[コマンドプロンプトで開く] を選択します。


すると、黒いコンソール画面が開いたかと思います。

そこで、以下のコマンドを順番に打ち込んでください。


npm install -g phonegap@3.3.0-0.19.6

*動作が不安定な場合があるので、バージョンを固定してインストールします。


phonegap create myapp
cd myapp
phonegap plugin add org.apache.cordova.media

以上を実行すると、myapp というフォルダができているかと思います。

その中のwwwというフォルダへティラノスクリプトのプロジェクト一式を上書きしてください。




もう一度コンソール画面に戻って

phonegap build android

と打ち込みましょう。


完了したら、次に再度Eclipse を開いてください

[File] → [Import]→ [Android] →[Existing Android Code Into Workspace]

そこから、新しく作成されたアンドロイド向けのプロジェクトがあるので、そのフォルダを選択します。




以上で、準備は完了です。
このプロジェクトをアンドロイドアプリケーションとして実行してください。




いかがでしょう。プレイ出来ましたね。

音を鳴らしたい場合は --useaudio オプションが必要です。
実機確認やアンドロイドマーケットのアップについてはまた後日。アディオス