作成日

25 October 2012

ADC MEETUP Round 06「CREATE THE WEB TOUR」のセッション6では、アドビ システムズの轟啓介氏により、「Adobe PhoneGap」や「Adobe PhoneGap Build」、「Adobe Edge Inspect」など、モバイルアプリ開発を支援する技術やサービスが紹介されました

(01:00)最初に取り上げられたのは「Adobe PhoneGap」。まず、モバイルアプリの開発事情の説明から始まりました。モバイルデバイスには様々なプラットフォームがあります。モバイルアプリをリリースするとなると、通常は複数のプラットフォームで展開することになり、特に海外向けのサービスとなると展開するプラットフォーム数も増えていきます。

しかし、プラットフォームごとに開発技術や開発環境が異なり、開発リソースの確保が大変になっていきます。コストの面を考えると、諦めなければならないプラットフォームも出てきて、結局1つのプラットフォームだけに絞り込まれてしまうという事態に陥りがちです。

(06:40)開発側の理想としては、1つのコードベースで対応し、コストパフォーマンスを上げたいところです。そうしたマルチプラットフォーム開発を実現する技術として、アドビはAdobe AIRを提供していますが、新たな選択肢として、Web標準を利用できるPhoneGapが加わったとのことです。

PhoneGapとは、HTML5/CSS3/JavaScriptなどを各プラットフォーム向けにラッピングするフレームワークです。具体的には、ネイティブで動作する組み込みのWebViewを利用して、Web標準で作成したコンテンツ・アプリを実行しているとのこと。

(08:00)またPhoneGapは、JavaScriptによる共通APIを通じてOS固有の機能にアクセスするブリッジの役割も果たしているとのこと。OS固有機能への対応表はphonegap.comで公開されています。

(11:40)これらのAPIによる機能の動作を手軽に確認できる手段として轟氏が紹介したのが、アドビのエバンジェリストが開発したアプリ「PhoneGap API Explorer」(iOS/Androidの両方で配布)。実際にiPadを使って、アプリからiPadの加速度センサーの情報を取得するデモや、カメラからの画像データを取得するデモが行われました。

PhoneGap API Explorerで カメラからの画像データを取得している様子です。

(18:30)続いて、PhoneGapを使って作成されたアプリ事例が紹介されました。まずは、BBCがロンドンオリンピックに合わせて開発したモバイルアプリです。競技の情報などを確認することができます。

UNTAPPDは、近くで飲んでる人を探す“飲みニケーション”ツールであり、一人ではお酒飲みにいけない人たちに重宝されているそうです。

Salesforce.comも、モバイル端末向けのアプリをPhoneGapを使って開発しています。

アドビ社内でもPhoneGapで開発されたアプリが利用されているとのこと。以下はSC Insightというアプリで、営業やマーケティングの担当者向けのツールです。

轟氏によれば、PhoneGapが得意とするのは、ゲームのようなグラフィック重視のアプリよりも、データを取り扱うようなアプリであるとのこと。また、PhoneGapのメリットとして、様々フレームワークとの組み合わせでアプリを開発できる、つまり開発の自由度の高さも強調していました。

(24:30)続いて、「Apache Cordova(コルドバ)」とPhoneGapの関係についての説明が行われました。2011年10月より、PhoneGapのソースコードはApache財団に寄贈され、Apache Cordovaというプロジェクト名で管理されています。それに対してPhoneGapは、アドビが提供するCordovaディストリビューションという位置づけになります。ちょうどBracketsとEdge Codeの関係と同様です。なお、現時点ではCordovaとPhoneGapにコードの差は無いそうです。

(25:10)次に、PhoneGapでの開発に役立つ3つのサービスが紹介されました。1つ目は「Adobe PhoneGap Build」です。これは、開発に必要なツールキット(SDK)を全てクラウド上で提供するサービスです。PhoneGap Buildではクラウド上に各SDKの機能が用意されているため、HTML/CSS/JavaScriptのコードを書いてアップロードするだけでモバイルアプリを作成することができます。

PhoneGap Buildには無償プランと有償プランがあり、無償プランでも1つのプライベートアプリ、無制限のパブリックアプリをビルドできます。そして、Creative Cloud有償メンバーシップの方は、有償版と同じように25のプライベートアプリをビルドできます。

(28:30)ここで「Adobe Edge Code」で作成したWebページを、PhoneGap Buildを使ってアプリとしてパッケージしてみるというデモが行われました。ソースコードをZIPファイルにしてアップロードすると、次の2つのオプションボタンが現れます。どちらも開発にとても便利な機能です。

enable debugging:PhoneGapで作ったモバイルアプリを実機でデバッグすることが可能。
enable hydration:この機能をオンにしてビルドしたアプリは、実機で毎回起動時にPhoneGap Buildにアクセスし、アプリのアップデートの有無を確認します。そして、PhoneGap Build上でアップデートされていた場合、実機からアップデートの作業を行えます。

(35:10)「enable hydration」をチェックしてビルドしたアプリの例。起動時にアップデートがあると「Hydra has detected a new update!」と表示されます。画面下部の「Update & restart now」を押すと最新の状態にアップデートされます。

(40:00)2つ目のサービスは「emulate.phonegap.com」です。これは、ブラウザー上で様々なデバイスの機能をエミュレートするサービスで、テストしたいURLを入力すると、各種デバイスでの動作を確認できます。

(42:30)3つ目のサービスは「debug.phonegap.com」です。これはPhoneGap Buildでビルドしたアプリをデバッグするためのサービスです。PhoneGap Build上にあるアプリ一覧から「debug」ボタンをクリックすると、PCに繋いだ実機上のアプリをデバッグすることができます。なお、PhoneGapだけで開発しているアプリのデバッグにも利用できるとのこと。

(46:00)続いて「Adobe Edge Inspect」の紹介が行われました。Edge Inspectは、複数のデバイスに対してURLを送り、同時に各デバイスでの表示を検証することができるツールです。

PCのChromeにEdge Inspect拡張機能を、各デバイスにEdge Inspect用アプリをインストールします。PCのChromeを母艦としてブラウジングすると、同一ネットワーク上にあるデバイスにその内容が反映されます。

さらに、各デバイスで表示されているページのスクリーンショットを一斉に撮影してPCまへ転送することができます。また、画像と同時に、デバイスの様々な情報が記録されたテキストファイルも送られます。

最後に、今回のイベントで取り上げたツールやサービスの最新情報の入手先としてADCサイトが紹介され、講演が締めくくられました。

関連ADC記事:
Dreamweaver CS6とPhonaGap Buildで作るモバイル・アプリケーション
PhoneGap APIを使いこなせ!(Notification API編)
PhoneGapアプリでBasic認証を使ったサーバ通信を行う方法
Adobe Edge Inspect:様々なデバイスで手軽にブラウザーテスト