PhoneGapとは
PhoneGapは、アドビシステムズ社により公開されている、デバイス向け「ハイブリッドアプリケーション」制作のためのフレームワークです。PhoneGapのソースコードは、Apache財団に寄贈されており、Apache Cordovaのプロジェクト名で管理されています。PhoneGapは、アドビシステムズ社が提供するCordovaディストリビューションです。
複数のデバイスに対応するアプリケーションを開発する場合、デバイスのOSごとに特定の開発環境を用意して、特定の言語で開発を行うことになります。そういったケースでは、PhoneGapを用いることで、HTML5＋CSS＋JavaScriptのみで複数のデバイスに対応するネイティブアプリケーションの実装が可能になります。このようにして作られたアプリケーションを一般的に「ハイブリッドアプリケーション」と呼びます。
PhoneGapを使ったアプリケーション開発は、基本的にはWebアプリケーションを実装するようにアプリケーションを開発できます。つまりブラウザ上で開発・テストを行うことができます。
また、PhoneGap標準ライブラリを使って、デバイス依存の機能を使ったアプリケーション開発も行うことができます。このような依存機能は、実機上での開発・テストになります。
デバイス依存機能については、PhoneGapのサイトにデバイスごとにまとめられています。アプリケーション開発を始める前に、確認しておきましょう。
また、このサイトに載っていない機能は、PhoneGapプラグインとして自前で作成することができます。
PhoneGapプラグインの開発方法については、「Plugin Development Guide」を参照してください。
PhoneGap 3.0
7月19日に「PhoneGap 3.0」がリリースされました。プラグインアーキテクチャを刷新してアプリケーションの小型化と高速化を目指しています。また、SDKの中に入っているツールなどを改善して、新しいAPIが追加されています。このPhoneGap 3.0についての詳細は、次回説明します。
PhoneGapのはじめかた
PhoneGapを使ったデバイス向けアプリケーション開発するには、大きく二通りの方法があります。
- PhoneGap SDK
- PhoneGap Build
PhoneGap SDKとは
PhoneGap SDKは、複数のデバイスでビルドするためのコマンドラインベースの開発環境が入っています。
そして、複数のデバイス向けのアプリケーションを開発するためには、デバイスごとのビルド環境を用意する必要があります。
PhoneGap Buildとは
PhoneGap Buildは、アドビシステムズ社が提供しているWebサービスです。PhoneGap Buildは、PhoneGap SDKを使ったビルド環境がサービス上に用意されているのでデバイスごとにビルド環境を用意する必要がありません。開発者はHTML＋CSS＋JavaScriptでアプリケーションを開発して、PhoneGap Buildにアップロードするだけで複数のデバイス向けアプリケーションにパッケージされます。また、Gitリポジトリからのインポートにも対応しており、登録するだけで簡単に利用することもできます。
PhoneGap Buildのサービス内容
現在PhoneGap Buildには、無償と有償の2種類のプランがあります。
| プラン | 無償プラン（Free plan） | 有償プラン（Paid plan） |
|---|---|---|
| 金額 | 0円 | $9.99/月（1000円/月） |
| プライベートアプリ数 | 1 | 25 |
| パブリックアプリ数 | 無制限 | 無制限 |
| コラボレーターの招待数 | 無制限 | 無制限 |
| ビルド数 | 月間100ビルドまで | 月間1,000ビルドまで |
| Creative Cloud |
Creative Cloud無償メンバーシップの方は こちらの無償プランを利用できます。 |
Creative Cloud有償メンバーシップの方は こちらの有償プランを利用できます。 |
| プライベートアプリ |
アプリを構成するリソースは、非公開です。 アプリを登録する際は、ZIP圧縮して直接PhoneGap Buildにアップロードするか、 あるいはGitHub上のプライベートリポジトリにアップしてそのURLを指定します。 |
|---|---|
| パブリックアプリ |
アプリを構成するリソースは、一般に公開されます。 アプリを登録する際は、GitHub上のパブリックリポジトリに アップロードしてそのURLを指定します。 |
PhoneGap Buildでアプリケーションを作ってみよう
今回はAdobe Creative Cloudの無償メンバーに登録して、PhoneGap Buildでアプリケーションを作ってみましょう。また、PhoneGap Buildを使ったアプリケーション開発には、Dreamweaver CCをおすすめします。Dreamweaver CCには、PhoneGap Buildサービスとの連携機能があります。
Adobe Creative Cloudへ参加
Dreamweaver CCやPhoneGap Buildを無償で試すためには、Adobe Creative Cloudの無償メンバーの登録が必要です。すでにAdobe Creative Cloudへ参加している場合は、次の手順までスキップしてください。
まず、https://creative.adobe.com/にアクセスします。
真ん中にある［使用を開始］ボタンを押下します。
https://creative.adobe.com/plansに遷移しますので、無料の列の［登録］ボタンを押下します。
https://creative.adobe.com/join/starterに遷移するので、必要事項を記入して［作成］ボタンを押下します。
その次のページで利用規約に同意すると、Adobe Creative Cloudへの参加は完了です。
PhoneGap Buildのメンバー登録
次にPhoneGapビルドのサイトを開きます。このサイトは日本語も用意されています。日本語に変えたい場合は、ページの最下部までスクロールして左端にあるLanguage:の部分から日本語を選択します。
そうするとhttps://build.phonegap.com/?locale=ja_JPに遷移して日本語のページになります。
では、メンバー登録を始めていきましょう。最初に右上の［登録］リンクを押下します。
https://build.phonegap.com/plansに遷移するので、［完全無料］ボタンを押下します。
https://build.phonegap.com/plans/freeに遷移するので、［AdobeID］リンクを押下します。
https://build.phonegap.com/plans/free-adobeidに遷移するので、先ほど作ったCreative Cloudのメンバーのメールアドレスとパスワードを入力します。
その後サインインが行われて、https://build.phonegap.com/appsに遷移すると、PhoneGap Buildのメンバー登録は、正常に完了します。
証明書の設定
次に、iOSやAndorid向けのアプリケーションをパッケージングするために必要となる証明書を登録します。
- iOS向けのアプリケーションで必要となる証明書は、まずアップル社のiOS Developer Programに登録します。そして、証明書（.p12ファイル）とプロビジョニングプロファイル（.mobileprovisionファイル）を取得する必要があります。
- Androidデバイス向けのアプリケーションで必要となる証明書は、JDKのKeytoolなどで作成します。
次に、サインイン後右上の人型ボタンを押下すると下記のようになります。そこにある［アカウントを編集］リンクを押下します。
https://build.phonegap.com/people/editに遷移するので、［署名キー］タブを押下します。
その後、［iOS］ボタンを押下して、証明書（p12）ファイルとプロビジョニングプロファイルを選択して［キーを送信］ボタンを押下します。
アップロードに成功すると下記のようになるので、黄色い鍵ボタンを押下して、証明書のパスワードを入力します。
成功すると下記のようになります。Androidも同様の手順で署名キーのアップロードを行います。
PhoneGap Buildでアプリケーションをビルド
PhoneGap Buildでアプリケーションをビルドするためには、PhoneGap Buildサービスにアップロードする必要があります。やり方はいくつかありますが、今回は次の2つの方法を紹介します。
- PhoneGap Buildのサイトに手動アップロード
- Dreamweaver CCからアップロード
上記以外の手段として、PhoneGap 3のコマンドラインツール、Edge CodeやBracketsのPhoneGap Buildプラグイン（現在は正常に動作しませんが、今後修正されるはず）の利用、Githubリポジトリ指定による受け渡しなどがあります。
手動アップロード
まず開発者は、PhoneGap BuildでアプリケーションにパッケージしたいHTML＋CSS＋JavaScriptをZIP圧縮します。
今回はサンプルとして、PhoneGap SDKのサンプルを使います（www.zip）。
次に、PhoneGap Buildにサインインします。下記のような画面になりますので、［.zipファイルをアップロード］ボタンをクリックして先ほど作成したアプリケーションのZIPファイルを選択します。
ZIPファイルを選択するとアップロードが開始されます。
アップロードが完了するとアプリケーションの名前と説明文を入れる画面になります。それらを入力したら［ビルド準備完了］ボタンを押下します。そうするとデバイスごとにアプリケーションがパッケージングされます。
パッケージングが、成功するとデバイスごとのアイコンが緑になり、失敗すると赤色になります。成功したデバイスのアイコンを押下するとパッケージングされたファイルをダウンロードすることができます。パッケージングされたファイルのダウンロードURLのQRコードを、インストールしたいデバイスで読み取りインストールします。
今回のサンプルをパッケージングした場合、iPhoneでQRコードを読み取りそのダウンロードURLにアクセスすると、下図左のように「"build.phonegap.com"によりアプリケーションがインストールされる」旨のダイアログが表示されます。［インストール］ボタンを押下して、iPhoneにアプリケーションをインストールすると、下図右のようにPhoneGapのサンプルが表示されます。
Dreamweaver CCからアップロード
Dreamweaver CCがインストールされていない場合は、ダウンロードセンターよりダウンロードしてインストールします。
Dreamweaver CCの準備ができたら、Dreamweaver CCを起動して、起動画面の［サイト…］を押下します。
サイト名とローカルサイトフォルダーを入力して保存と押下します。
サイトが定義されると［ファイルウィンドウ］が下記のようになります。そして、今回のサンプルのZIPファイル（SDK付属のサンプルファイル）をローカルサイトフォルダ上に展開しておきます。
次に、PhoneGap Buildサービスの設定を行います。メニューより［サイト］→［PhoneGap Buildサービス］→［PhoneGap Buildサービス］を選択し、PhoneGap Buildサービスウィンドウを表示します。
PhoneGap Buildサービスウィンドウでは、メールアドレスとパスワードを入力してPhoneGap Buildにログインします。
ログインが成功すると下記のようになります。まだこの段階ではローカルサイトフォルダ上にファイルが存在しないので、PhoneGap Buildサービス上で新規プロジェクトを作成するかどうかの確認を求められます。
このまま［続行］ボタンを押下すると、PhoneGap Build側でプロジェクトが生成されて、PhoneGap Buildサービスから3つのファイル（config.xml、index.html、ProjectSetting）をローカルサイトフォルダにダウンロードされます。
config.xml：プロジェクトの構成ファイルです。アプリ名などはこのファイルで変更できます。
今回は、下記のように修正しておきます。
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
version = "1.0.0">
<name>MyFirstApplication</name>
<description>
My First Application on PhoneGap Build.
</description>
<author href="https://akb7.jp" email="dev-user@akabana.net">
AKABANA
</author>
</widget>
- index.html：メインとなる最初のHTMLファイルです。
- ProjectSetting：プロジェクトの設定ファイルです。
次に、PhoneGap Buildウィンドウは、PhoneGap Buildサービスからデバイスごとの証明書を取得して表示します。
このプロジェクトで使用するキーを、デバイスごとに選択してパスワードを入力します。
今回は、先ほど登録したiOSの証明書のTeamを選択してパスワードを入力して続行ボタンを押下します。
PhoneGap Buildは、プロジェクトで指定されたキーを使ってデバイスごとに順次ビルドしていきます。
ビルドが完了したら、各デバイスのところに［Build Complete］と表示されます。QRコードボタンを押して、QRバーコードを表示します。このQRコードは、デバイスごとにパッケージングされたファイルのダウンロードURLとなります。よって、インストールしたいデバイスでQRコードをデバイスで読み取り、ダウンロードURLからインストールします。
また、作成されたプロジェクトは、PhoneGap Buildのサイトで確認できます。
先ほどconfig.xmlを修正しておいたので、アプリケーション名や詳細などが変更されています。
まとめ
今回は、PhoneGapの再入門ということで、PhoneGapの概要とPhoneGap Buildサービスを使った複数デバイス向けのアプリケーションを作成する方法を紹介しました。PhoneGap Buildは、デバイス特有の言語を使うことなくHTML/CSS/JSで作ったWebアプリケーションを簡単にネイティブアプリケーションにパッケージすることが可能です。ビルド環境が簡潔になったことによって、開発者はアプリケーションの開発に専念することができると思います。
次回は、PhoneGap 3.0の使い方や新機能についてご説明します。
