Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

原題:PhoneGap Buildの使い方

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/01/22 14:00

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

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

PhoneGap Buildのサービス内容

図1 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 プランを選んで進めてください
図2 プランを選んで進めてください
図3 ユーザアカウント作成時には、Adobe IDか、GitHubアカウントが必要となります。
使用しなかったアカウントは、後からPhoneGap Buildアカウントと紐付けることができます
図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のプライベートレポジトリを指定します
図4 プライベートアプリを作成する際は、[Upload a .zip file]ボタンをクリックしてデータをアップロードするか、左の入力欄にGitHubのプライベートレポジトリを指定します

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

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

図5 アップロードが完了直後の画面
図5 アップロードが完了直後の画面
図6 アプリ名や説明文は直接編集できます
図6 アプリ名や説明文は直接編集できます

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

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

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

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

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

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

証明書などの設定

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

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

図9 ビルドしたアプリの詳細画面(アプリ名をクリックすると、この詳細画面になります)
図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の「要素の検証」のように、
デバッグを行うことができます。
図10 Hydration機能とDebug機能は、ビルドしたアプリの詳細画面の[Settings]タブからも設定できます
図10 Hydration機能とDebug機能は、ビルドしたアプリの詳細画面の[Settings]タブからも設定できます
図11 Hydration機能を有効にしたアプリを起動し、アップデートがあった場合の画面。
[Update & restart now]をタップすると、アップデートして再起動します。
[Ignore for now]をタップすると、アップデートせずに起動します
図11 Hydration機能を有効にしたアプリを起動し、アップデートがあった場合の画面。[Update & restart now]をタップすると、アップデートして再起動します。[Ignore for now]をタップすると、アップデートせずに起動します

 Hydration機能とDebug機能の詳細については、それぞれ「Hydration Builds」と「Debug Build」をご覧ください。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • イマザトリョウジ(イマザトリョウジ)

    Adobe Developer Connectionの編集スタッフ(中の人だけど、外の人)。たまに、USのADC記事の翻訳、ADC関連のコンテンツの作成なども。その他、Web DesigningのFlash Lab.連載や、翔泳社のWeb制作関連書籍の編集もやらせていただいてます。

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5