Adobe Developer Connection（AD）

クラウド上でマルチデバイス対応のモバイルアプリをビルドできる「PhoneGap Build」の使い方

原題：PhoneGap Buildの使い方

2013/01/22 14:00

ポスト

　「PhoneGap Build」とは、クラウド上でモバイルアプリをビルドできるサービスです。その名の通り、PhoneGapフレームワークを利用しており、HTML／CSS／JavaScriptで開発したアプリデータをアップロードするだけで、あとはPhoneGap Buildがモバイルアプリに変換してくれます。変換後のアプリは、QRコードを使って直接デバイスにインストールできます。本記事では、PhoneGap Buildの基本的な使い方を紹介します。

ポスト

（この記事は、アドビシステムズ株式会社発行の「Adobe Developer Connection」から許可を得て転載したものです）

PhoneGap Buildのサービス内容

図1　PhoneGap Buildのサイト

　現在PhoneGap Buildには、無償と有償の2種類のプランがあります。

PhoneGap Buildのプラン
プラン	無償プラン（Free plan）	有償プラン（Paid plan）
金額	0円	月額1,000円（※1）
プライベートアプリ数	1	25
パブリックアプリ数	無制限	無制限
コラボレーターの招待数（※2）	無制限	無制限
ビルド数	月間100ビルドまで	月間1,000ビルドまで
Creative Cloud	Creative Cloud無償メンバーシップの方はこちらの無償プランを利用できます（※3）	Creative Cloud有償メンバーシップの方はこちらの有償プランを利用できます

プライベートアプリとパブリックアプリの違い
プライベートアプリ	アプリを構成するリソースは、非公開となります。アプリを登録する際は、ZIP圧縮して直接PhoneGap Buildにアップロードするか、あるいはGitHub上のプライベートリポジトリにアップしてそのURLを指定します。
パブリックアプリ	アプリを構成するリソースは、一般に公開されます。アプリを登録する際は、GitHub上のパブリックリポジトリにアップロードしてそのURLを指定します。

　PhoneGap Buildを始めるには、サイトの下にあるプランのボタンをクリックして、ユーザアカウントを作成します。ここでは「Free Plan」を選択して進めます。

図2　プランを選んで進めてください

図3　ユーザアカウント作成時には、Adobe IDか、GitHubアカウントが必要となります。
使用しなかったアカウントは、後からPhoneGap Buildアカウントと紐付けることができます

※1

　現在、PhoneGap Buildのサイトでは「有償プラン（Paid plan）は月額9.99USドル」と記載されていますが、日本国内からはUSドルでのお支払いができないため、日本のアドビストアから日本円（月額1,000円）でお支払いいただく必要があります。日本のアドビストアから、PhoneGap Buildのサブスクリプションを購入する。

※2

　他のユーザを「コラボレーター（共同開発者やテスター）」として招待できます。

※3

　Creative Cloud無償メンバーシップの方は、月額1,000円のアップグレードをサブスクリプションすると「有償プラン（Paid plan）」を利用できます。上述のリンクから購入できます。

PhoneGap Buildの基本的な使い方

　アカウント作成すると、図4の画面になります。ここではZIPファイルをアップロードする方法を選びます。まず、HTML／CSS／JavaScriptファイルや画像など、アプリに必要なデータをZIP圧縮したファイルを作成します。

　このZIPファイルには、phonegap.js（cordova.js）やネイティブファイル（.h／.m／.javaなど）を含めないでください。含まれていると、コンパイルに失敗することがあります。

　ZIPファイルを用意したら、［Upload a .zip file］ボタンをクリックしてアップロードします。

図4　プライベートアプリを作成する際は、［Upload a .zip file］ボタンをクリックして
データをアップロードするか、左の入力欄にGitHubのプライベートレポジトリを指定します

　パブリックアプリを作成する際は、［open-source］タブをクリックして、GitHubのレポジトリを指定してください。

　アップロードが完了すると、図5の画面になります。アプリ名や説明文にはデフォルトの文言が入っていますが、直接カーソルを当てて編集することができます。

図5　アップロードが完了直後の画面

図6　アプリ名や説明文は直接編集できます

　config.xmlを用いれば、アプリアイコンの指定やプラットフォーム固有の設定などを行うことができます。このconfig.xmlは、アプリのデータと一緒にアップロードします。詳しくは「Using config.xml」をご覧ください。

　次に［Ready to Build］ボタンをクリックします。すると、プラットフォームごとにビルドが行われます。

図7　ビルドが完了した後の画面。各プラットフォームのマークとQRコードが表示されます

　各プラットフォームのマークをクリックすると、アプリの配布データ（ipaやapkなど）をダウンロードできます。また、QRコードをデバイスで読み取り、表示されるURLへアクセスすると、アプリをデバイスにインストールできます。

図8　Android端末でQRコードを読み取り、インストールしたところ

　ビルドに失敗した場合は、「Build Failed?」を参考にしてください。

証明書などの設定

　図7では、iOSのマークが赤くなっていました。それは、ビルドに失敗したという意味です。iOSの場合、デバイスにインストールするには証明書やプロビジョニングプロファイルが必要です。また、Androidなどでもアプリストアに登録するには証明書が必要です。これらの設定は、アプリの詳細画面で行います。

　ビルド後、アプリ名がクリックできるようになり、クリックするとアプリの詳細画面が表示されます。そして、各プラットフォームのところにある［No key selected］をクリックして、証明書などを指定します。

図9　ビルドしたアプリの詳細画面（アプリ名をクリックすると、この詳細画面になります）

　また、［Collaborators ］タブでコラボレーターを招待したり、［Settings］タブでアプリのConfiguration（一部のみ）を設定したりできます。

　なお、アプリの内容を更新する際は、［Update code］ボタンをクリックして新しいデータをアップロードし、［Rebuild all］ボタンか各プラットフォームの［Rebuild］ボタンをクリックします。

Hydration機能とDebug機能

　PhoneGap Buildでは、HydrationとDebugという2つの機能をオプションで用意しています。これらの機能を利用するかどうかは、アプリをビルドする際や、ビルド後のアプリの詳細画面で設定できます。

Hydration機能とDebug機能
Hydration	コンパイル時間がかなり改善されます。また、Hydrationをオンにしてビルドしたアプリの場合、デバイスでアプリを起動する度に、PhoneGap Buildサービスにアクセスして「アプリが更新されていないか」を確認するようになります。そして更新されている場合は、QRコードを経ずとも、デバイス側から直接アップデートできます。
Debug	FirefoxのFirebugやChromeの「要素の検証」のように、デバッグを行うことができます。