SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

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

原題:PhoneGap Buildの使い方

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

(この記事は、アドビ システムズ 株式会社発行の「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?」を参考にしてください。

次のページ
証明書などの設定

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6948 2013/01/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング