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

CodeZine / 2013年1月22日 14時0分

図11 Hydration機能を有効にしたアプリを起動し、アップデートがあった場合の画面。 [Update & restart now]をタップすると、アップデートして再起動します。 [Ignore for now]をタップすると、アップデートせずに起動します

 「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?」を参考にしてください。


CodeZine

トピックスRSS

ランキング