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
オプションは次を参照。
また、上記の場合、templateオプションを指定しないとデフォルトのhello-worldテンプレートが適用される。
その他のテンプレートは次を参照。
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と使い方などを調べる。
プラグインを適用する
phonegap plugin add [Plugin ID]
7.設定の修正
アプリ情報の修正
以下のid
、name
、description
、author
を自分のものに編集する。
<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をみて、必要な設定を追加する。
なお、hello-worldテンプレートのconfig.xmlを参考にするとよい。
8.アイコンの変更
config.xmlでアイコンを指定したら、アイコンを作成する。
アイコンは、次のサイトなどを利用して、全てのサイズを作成するとよい。
作成したアイコンは、www/res/icon
配下におくとよい。
参考:https://github.com/phonegap/phonegap-template-hello-world/tree/master/www/res/icon
9.PhoneGap Buildでアプリを作成する
PhoneGap Buildのアカウントを作成する
以下で、アカウントを作成してログインする。
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
鍵を登録する
の[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などの要領に従って、アプリを後悔する。