モバイルアプリケーションフレームワークの「PhoneGap」を利用すれば、HTML/CSS/JavaScriptのWeb技術のみで、様々なプラットフォームに対応したネイティブのモバイルアプリケーションを開発することができる。しかし、プラットフォームごとに環境環境を用意するのは意外と大変だ。そこで今回は、PhoneGapをもっと手軽に使うことができるWebサービス「PhoneGap Build」について紹介する。
PhoneGap Buildとは
モバイル端末向けのアプリケーション開発フレームワーク「PhoneGap」では、HTMLやCSS、JavaScriptといったWeb技術を使って、様々なモバイルプラットフォーム向けのアプリケーションを単一のソースから作成することができる。『【レポート】Web標準技術でモバイルアプリ開発可能なフレームワーク「PhoneGap」を試す』では、このPhoneGapの基本的な使い方について解説した。iOSやAndroidをはじめとする主要なモバイルプラットフォームを幅広くサポートしている点がPhoneGapの大きな魅力である。
その一方でPhoneGapを使う上での問題点とされているのが、開発環境を整える手間が大きいということである。PhoneGapを使ってモバイルアプリを開発するためには、PhoneGap本体とは別に、ターゲットとするプラットフォーム向けの開発環境も個別に用意しなければならない。iOSであればXcode、AndroidであればAndroid SDKなどが必要となる。開発環境ごとに設定や使い勝手が異なるため、いかにコードベースが同じとは言っても、結果的には複数のプロジェクトを管理しているのと同じ状態になってしまう。
そのような悩みを解決してくれる存在が「PhoneGap Build」だ。PhoneGap Buildは、PhoneGapを利用したアプリケーションのビルド環境をオンラインで提供しているWebサービスであり、現在はAdobeによって運営されている。HTML/CSS/JavaScriptによるコードやプロジェクトをアップロードすると、サーバ上のビルド環境を利用して各種モバイルプラットフォーム向けのパッケージを生成してくれる。生成されたパッケージは、同じく自動で生成されるQRコードを使って簡単に端末にダウンロードおよびインストールができるようになっている。PhoneGap Buildを使う場合にはローカルに特別なライブラリや開発ツールを用意する必要がないため、どんな環境でもすぐに開発を始められるというのが大きなメリットだ。
PhoneGap Buildによるモバイルアプリの開発
では、早速PhoneGap Buildを使ってみよう。PhoneGap Buildには4種類(※)のプランが用意されている。そのうちの「Developerプラン」であればPublicなアプリでれば無制限に、Privateなアプリであれば1つのみ作成することができる。
※現在はベータ版のサービスであり、正式公開時にはコース構成が変わる可能性がある
PhoneGap Buildを利用する、Adobe IDかGithubのアカウントのいずれかが必要となる。持っていない場合には、PhoneGap Buildサイトから登録することが可能。アカウントが取得できたら、トップページの[Sign in]ボタンでサインインしよう。
|
図2.1 PhoneGap Buildのサービスサイト。使用するにはアカウントの登録およびサインインが必要 |
|
図2.2 サインイン画面。Adobe IDまたはGithubアカウントが利用できる |
初めてサインインした場合は、最初にアプリ作成画面が表示される。ここで、図2.3アプリ名やソースコードのアップロード方法などを指定する。
|
図2.3 新規アプリの作成画面。ソースコードのアップロードには3種類の方法がある |
それぞれの指定項目の意味は以下のとおり。
・enable debugging - デバッグモードをオンにす
・make app private - アプリをprivateモード(外部に公開しない)で作成する
・create a new gir repository - 新しいGitリポジトリを作成し、そこにソースコードを配置する
・pull from a git/svn repo url - 既存のgitまたはSubversionリポジトリのURLを指定して、そこからソースコードを取得する
・upload an archive or index html file - ソースコード(zipでまとめたファイル群またはindex.html)をローカルからアップロードする
今回はローカルにあるindex.htmlファイルをアップロードしてみる。使用するindex.htmlの内容は以下のようにした。これは『【レポート】Web標準技術でモバイルアプリ開発可能なフレームワーク「PhoneGap」を試す』の、カメラ機能を利用する例と同様のものだ。ただし、読み込むJavaScriptのファイル名は「cordova-1.9.0.js」ではなく「phonegap.js」としてある。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>PhoneGapのサンプル</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource;
var destinationType;
// デバイスの準備完了
function onLoad() {
document.addEventListener("deviceready", onDeviceReady,false);
}
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
// 写真の撮影
function capture() {
navigator.camera.getPicture(cameraSuccess, cameraError, {
quality: 50,
destinationType: destinationType.DATA_URL
});
}
// 撮影に成功
function cameraSuccess(imageData) {
document.getElementById("status").innerHTML = "撮影成功";
var image = document.getElementById("photo");
image.src = "data:image/jpeg;base64," + imageData;
}
// 撮影に失敗
function cameraError(message) {
document.getElementById("status").innerHTML = "撮影失敗:" + message;
}
</script>
</head>
<body onload="onLoad()">
<h1>カメラAPIの利用例</h1>
<form>
<input type="button" value="撮影" onClick="capture()" />
</form>
<div id="status"></div>
<img src="" id="photo" width="100%" />
</body>
</html>
アップロードするファイルはとりあえずこのindex.htmlだけで、その他のファイル(たとえばphonegap.jsなど)は必要ない。[Create]ボタンをクリックすると、ソースコードがアップロードされて、アプリのビルドがはじまる。数十秒から数分待つと、図2.5のようにプラットフォームごとのビルド状況が表示される。
|
図2.5 アプリのビルド状況の表示 |
青いボタンで表示されているプラットフォームはビルドに成功したものであり、赤(Blackberry)とオレンジはビルド失敗を意味する。今回の例の場合、Blackberryはサポート外のバージョンであったためビルドできなかった。iOSについては、証明書である.p12ファイルとプロビジョニングファイルを別途登録する必要なため、初期状態ではビルドできない。(なお、証明書とプロビジョニングファイルの登録方法についてはアドビ システムズのWebサイト上の記事が参考になる)
この状態で、青いボタンのいずれかか、右上の[PRIVATE]または[ADMIN]ボタンをクリックすると、図2.6のページに移動します。このページでは、ビルドされたアプリのダウンロードリンクとダウンロード用QRコードが掲載されており、このリンクまたはQRコードを利用して、端末からアプリをダウンロードできるようになっている。
|
図2.6 ビルドされたアプリのダウンロードリンクおよびQRコードの一覧(※このサンプル画像のリンク先はすでに無効になっている) |
例えばAndroid端末にインストールしたい場合には、「android」用のQRコードをバーコードリーダーアプリを利用して読み取り、パッケージ(apkファイル)をダウンロードしてインストールすればよい。
|
図2.7 QRコードからダウンロードリンクを読み取れる |
インストールに成功すると端末には図2.8のようなアイコンが表示される(デフォルト設定のままビルドした場合)。これをタップすれば図2.9のようにアプリが起動する。
図2.8 デフォルトのアプリアイコン |
図2.9 Android端末iでアプリを実行した様子 |
アイコンの画像を変更する
アイコン等の設定を変更したい場合には、config.xmlというファイルに設定を記述する。config.xmlの記述方法はhttps://build.phonegap.com/docs/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>MyFirstApp</name>
<description>Sample app for PhoneGap Build.</description>
<author href="http://www.ongs.jp" email="ongs@example.com">
ONGS Inc.
</author>
<icon src="icons/icon.png" width="70" height="70" />
</widget>
その上で、config.xmlを含めた関連するファイルを図3.2のように配置し、フォルダごとzip形式でまとめてアップロードすればよい。
図3.2 設定ファイルとアイコン画像を追加してzipでまとめる |
なお、ソースコードを変更したい場合は図2.6の上部にある[Update code]ボタンをクリックし、図3.3のダイアログから新しいコード(またはzipファイル)をアップロードする。アップロードが完了すると自動的にアプリが再ビルドされる。
|
図3.3 ソースコードのアップデート |
上記の他に、Webサイト上から設定を変更することもできる。図2.6上部の[Edit]ボタンをクリックしてアプリの設定画面(図3.4)を表示させ、左のメニューから[Details]を選んで詳細設定画面(図3.5)を開く。そしてこの画面で設定を修正すればよい。アイコン画像のアップロードもここから行える。
|
図3.4 アプリの設定画面 |
|
図3.5 アプリの詳細設定画面からもアイコンなどの設定を変更できる |
Dreamweaver CS6でPhoneGap Buildを使う
ここまで紹介してきたように、PhoneGap Buildは単体でも利用できるが、Adobeが2012年5月にリリースした「Adobe Dreamweaver CS6」(以下、Dreamweaver)を利用することでさらに便利に使うことがきる。Dreamweaver CS6にはPhoneGap Buildを利用するための機能が統合されており、ツール上からシームレスにPhoneGap Buildによるアプリのビルドが行えるようになっているからだ。
DreamweaverでPhoneGap Buildを使うには、まずワークスペースを「モバイルアプリケーション」に変更する。すると左側に図4.1のように「PhoneGap Buildサービス」のパネルが表示される。
|
図4.1 Dreamweaver CS6のPhoneGap Buildサービスパネル |
この状態で通常通りWebサイトの構築を行った上で、PhoneGap BuildサービスパネルからPhoneGap Buildにログインすると、図4.2のように表示されるので、[新規プロジェクトとして作成]を選択した状態で[続行]ボタンをクリックする。
|
図4.2 ログインすると、Dreamweaverで構築したサイトをPhoneGap Buildでモバイルアプリ化できる |
するとサイトのファイル一式がアップロードされて、アプリのビルドが開始され、パネル上には図4.3のようにビルド状況が表示される。ステータスが[Build Complete]になっているパッケージのQRコードアイコンをクリックすれば、図4.4のようにダウンロード用のQRコードが表示され、モバイル端末からダウンロードすることができる。
|
図4.3 ビルド状況やダウンロードリンク、QRコードなどもDreamweaver上で確認可能 |
|
図4.4 ダウンロード用のQRコードの表示(※このサンプル画像のリンク先はすでに無効になっている) |
Dreamweaverでは、PhoneGap Buildでビルドしたアプリを、AndroidやwebOSのエミュレータで実行することもできるようになっている。まず、図4.5の「PhoneGap Buildの設定」パネルで、Android SDKやwebOS SDKのインストールしてあるパスを設定する。
|
図4.5 SDKのインストールパスを設定する |
その上で、ビルド完了後のパネルで右矢印のボタン(図4.6)をクリックすると、図4.7のように使用するデバイスの選択画面が表示される。ここで任意のAVDを選択して[起動]ボタンをクリックすれば、図4.8のようにエミュレータ上でアプリが実行される様子を確認できる。
|
図4.6 ビルドしたアプリのエミュレータによる起動 |
|
図4.7 AVDまたはデバイスを選択して[起動]ボタンをクリック |
|
図4.8 Androidエミュレータで実行した様子 |
おわりに
PhoneGap Buildを使えば、通常のWebサイトの作成プロセスを保ったままで、特に開発環境に変更を加えることなくネイティブのモバイルアプリを作成できるようになる。さらに、Dreamweaverを利用すれば開発環境を離れることなくPhoneGap Buildによるビルドができるようになる上に、エミュレータによる検証もシームレスに行うことが可能となる。
現在のPhoneGap Buildサービスはベータ版であり、正式サービスは2012年中の開始が予定されている。正式サービス開始後もDeveloperプランについては引き続き無償で利用できる見込みとのこと。それに加えて、正式サービスではprivateアプリが複数作成できるようになる有償プランもスタートする。
AdobeによるPhoneGapやPhoneGap Buildへの積極的な投資は、同社がHTML関連技術に注力しているという強い姿勢の現れでもある。それに加えてこの春より新しいライセンス体系として「Adobe Creative Cloud」がスタートしたことから、同社の提供するツールやサービスの連携機能はますます強化されていくはずだ。PhoneGap/PhoneGap Buildもその一環として、各種ツールとより強く結びつき、より便利に使えるようになることが期待できるだろう。
