LoginSignup
7
9

More than 5 years have passed since last update.

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

Posted at

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.設定の修正

アプリ情報の修正

以下の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をみて、必要な設定を追加する。

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

8.アイコンの変更

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

Icons and Splash Screens

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

作成したアイコンは、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などの要領に従って、アプリを後悔する。

7
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
9