Posted at

PhoneGap Builderを使ってHTMLでモバイルアプリを作る

More than 3 years have passed since last update.

PhoneGapとPhoneGap Buildは違うので注意。

OSSのcordovaをAdobeが製品化したのがPhoneGapで、PhoneGap BuildはPhoneGapのビルドツール。

参考:http://phonegap.com/getstarted/


1.Phonegapのインストール

npm install -g phonegap


2.スマホにデバッグツールをインストール


3.プロジェクトを作成

次のコマンドでプロジェクトを作成する。

<AppName>を自分のものに変える。

phonegap create <AppName> --template blank

オプションは次を参照。

http://docs.phonegap.com/references/phonegap-cli/create/

また、上記の場合、templateオプションを指定しないとデフォルトのhello-worldテンプレートが適用される。

その他のテンプレートは次を参照。

http://docs.phonegap.com/references/phonegap-cli/templates/


4.開発

www/index.htmlがトップ画面になるので、www配下を好きなように編集し、ブラウザでindex.htmlの動作を確認する。

ただし、次の部分は削除してはいけない。

ローカルで確認するとこの部分でエラーになるが、モバイルアプリに変換するときにphonegapが生成するため、気にしなくてよい。

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


5.モバイルでの確認

プロジェクトルートで次のコマンドを実行する。

phonegap serve

次のように表示される。

$ phonegap serve

[phonegap] starting app server...
[phonegap] listening on xxx.xxx.xxx.xxx:yyyy
[phonegap]
[phonegap] ctrl-c to stop the server

スマホにデバッグツールをインストールでインストールしたデバッグツールを起動し、Server Adress部分に上記のxxx.xxx.xxx.xxx:yyyyを入力し、Connectボタンを押す。


6.スマホの機能(カメラなど)を使った開発


プラグインを探す

以下のサイトでCameraなど使いたいプラグインを探し、Plugin IDと使い方などを調べる。

https://build.phonegap.com/plugins


プラグインを適用する

phonegap plugin add [Plugin ID]


7.設定の修正


アプリ情報の修正

以下のidnamedescriptionauthorを自分のものに編集する。


config.xml

<widget id="com.phonegap.helloworld" version="1.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

<name>Hello World</name>
<description>
A blank PhoneGap app.
</description>
<author email="support@phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>



各種設定

次のサイトのConfiguringをみて、必要な設定を追加する。

http://docs.build.phonegap.com/en_US/configuring_basics.md.html#The%20Basics

なお、hello-worldテンプレートのconfig.xmlを参考にするとよい。

https://github.com/phonegap/phonegap-template-hello-world/blob/master/www/config.xml


8.アイコンの変更

config.xmlでアイコンを指定したら、アイコンを作成する。

Icons and Splash Screens

アイコンは、次のサイトなどを利用して、全てのサイズを作成するとよい。

http://realfavicongenerator.net/

作成したアイコンは、www/res/icon配下におくとよい。

参考:https://github.com/phonegap/phonegap-template-hello-world/tree/master/www/res/icon


9.PhoneGap Buildでアプリを作成する


PhoneGap Buildのアカウントを作成する

以下で、アカウントを作成してログインする。

https://build.phonegap.com/


GitHubにアプリをpushする

PhoneGap BuildはGitHubと連携するので、GitHubにリポジトリを作成して、作成したアプリをGitHubにpushする。


PhoneGap Buildでアプリを作成する

[+ new app]ボタンを押し、GitHubのURLを入力してアプリを作成する。


10.PhoneGap Buildに鍵を登録する

参考:https://github.com/amirudin/build/wiki/Android-Signing


鍵を生成する

Javaのkeytoolを使い、以下のコマンドで鍵を生成する。

keytool -genkey -v -keystore [keystore_name].keystore -alias [alias_name] -keyalg RSA -keysize 2048 -validity 10000


鍵を登録する

https://build.phonegap.com/people/edit

の[Signing Keys]で[add a key]をクリックし、鍵を登録する。

このとき、titleはなんでもよく、Aliasは鍵を生成したときの[alias_name]にする。

※Statusが[locked]になったときは、クリックしてunlockする。


11.PhoneGap Buildでビルドして、アプリをダウンロードする

アプリ画面で登録した鍵を設定し、[Update code]をクリックしてコードを最新化した後に、[Rebuild all]でビルドする。

ビルドが完了したら、スマホから、二次元バーコードでURLをよみとって、アプリをダウンロードする。


12.各種サイトで公開する

Androidの場合であれば、Google Play Developer Consoleなどの要領に従って、アプリを後悔する。