Adobe Developer Connection（ADC）と連動する開発者向けイベント「ADC MEETUP ROUND3」では、General Sessionの他にHTML関連情報とFlash関連情報の2つのトラックが設けられた。HTMLトラックのSESSION4では、 株式会社サイバーエージェントでWebアプリやハイブリッドアプリの開発を担当する大谷剛氏より、jQuery Mobileを利用したWebアプリ化の作成と、それをPhoneGapを用いてネイティブアプリ化する方法の紹介が行われた。

 

• セッション資料

 

1　jQuery MobileとPhoneGapを用いたWebサイト／アプリ制作

昨年行われたAdobe MAX 2010で、アドビ システムズはオープンソースのJavaScriptライブラリ「jQuery」のサポート強化や、そのモバイル版である「jQuery Mobile」の開発への積極的なコミットを表明した。その1年後のMAX 2011では、モバイルアプリケーション開発フレームワーク「PhoneGap」の開発元であるNitobi Software社の買収が大きな話題となった。いずれも、モバイルアプリ開発のサポート強化を進めるアドビの姿勢を強く印象付けるニュースであった。

大谷氏のセッションは、jQuery Mobileを利用してモバイル端末対応のWebアプリを作成し、さらにそれをPhoneGapでネイティブアプリに変換するという一連の流れをデモンストレーションする形式で進められた。ベースにしたのはADC MEETUP ROUND3の告知サイト。まずこのモバイル版を作成し、それをPhoneGapでネイティブアプリ化するのが今回の目標だ。

図1.1　作成するアプリのページ構成

作業環境としてはAdobe Dreamweaver CS 5.5を使用。Dreamweaver CS 5.5はjQuery Mobileを使ったWebサイト制作に対応しており、jQuery Mobile Widgetや、HTMLマークアップのコードヒント機能、jQuery Mobileを使ったサイト向けのスターターテンプレートなどを備えている。

 

2　jQuery Mobileの強み

最初に大谷氏は、jQuery Mobileの特徴について説明した。jQuery Mobileは様々なスマートフォン用ブラウザーに最適化されたWebサイト／アプリを手軽に制作できるフレームワークであり、主な特徴としては次のようなものが挙げられる。

• HTML5 Markup-driven
• write less, do more
• マルチプラットフォーム
• PhoneGap対応

jQuery Mobileは、HTMLのマークアップを中心としてデザインを定義するスタイルのフレームワークになっている。具体的には、「data-role」などのカスタムデータ属性を利用して各要素に意味付けを行うことによって、内部でJavaScriptがこの属性を解析し、UIを構築してくれる。HTMLの記述量も最小限で済むように設計されており、必要なタグやclass属性などはフレームワークが自動で付け加えてくれる。

図2.1　jQuery MobileではHTMLのマークアップでUIを定義する

図2.2　必要なタグやclass属性は自動で追加される。赤い部分が追加されたコード

対応するプラットフォームも多い。iOSやAndroid、BlackBerryをはじめとして、主要なモバイルブラウザーを広範囲に渡ってサポートしている。注目したいのがPhoneGapもサポートに加わっている点だ。jQuery Mobileによって提供されるUIは、PhoneGapでネイティブアプリ化した後でも有効なため、Webアプリだけでなく各種スマートフォン／タブレット向けのアプリ制作でも活用できるというわけだ。

図2.3　jQuery Mobileのプラットフォーム対応状況。グレードA（緑）はフルサポート、グレードB（オレンジ）は全部ではないが十分なレベルのサポート、グレードC（赤）はごく限定的なサポート

大谷氏は、「iUi」や「jQTouch」、「Sencha Touch」などのフレームワークと比較した上で、jQuery Mobileの優位性として特に次の2点を挙げている。

例えば、iUiは記述が簡単で、iPhoneアプリのような見た目を表現できることが特徴だが、機能的にはまだ十分とは言えない。Sencha TouchはJavaScriptでのコーディングを主としたフレームワークなため、使いこなすにはある程度のプログラミングの力が必要となる。どのフレームワークにも得手不得手があるものの、使いやすさという点ではjQuery Mobileが有利ではないかというのが大谷氏の見解だ。

とはいえ、一方で欠点もある。それは、容易さ故にカスタマイズ性が低く、デザイン変更が簡単な部分と難しい部分の差が大きいことだという。それを解消する方法の1つとして、大谷氏は「Fireworks CSS3 Mobile Pack」を取り上げた。これはモバイルやタブレット向けのWeb標準に沿ったデザイン制作を支援するAdobe Fireworks CS5用の拡張機能である。この中に含まれる「jQuery Mobile Theme Skinning」を使えば、テンプレートをもとにしてjQuery Mobile用のデザインテーマを簡単に作成できるという。詳しくは、大谷氏による「Fireworks CSS3 Mobile Packを使ってみよう」をご覧いただきたい。

 

3　モバイル向けWebアプリの作成

続いて、いよいよ実装に取りかかる。とは言っても、実際にはDreamweaver自体がモバイル向けのWebアプリ制作をサポートしているため、普通に作ってターゲットにWebアプリを指定すればOKとのこと。ポイントはjQuery Mobile用のスターターテンプレートを活用することで、これによってモバイル端末環境に合わせた設定を簡単に適用することができる。

図3.1　Dreamweaverでモバイル向けWebアプリを作成している様子

 

4　DreamweaverがPhoneGapに対応

続いて、作成したWebアプリをPhoneGapを利用してネイティブアプリに変換する。それに先立ち、大谷氏はおさらいとしてPhoneGapの特徴を次のように説明した。

• Nitobi Software社が開発
• Webアプリからネイティブアプリへの変換ツール
• ネイティブAPIへのアクセスが可能
• マルチプラットフォーム
• クラウドでビルドが可能（PhoneGap:Build）
• Dreamweaver CS5.5でサポート

図4.1　PhoneGapのプラットフォーム別の機能サポート状況

ここで注目したいのが、Dreamweaver CS5.5で正式にPhoneGapのサポートが追加されている点である。具体的には、Dreamweaverで直接ネイティブアプリがビルドできることに加え、エミュレートも行うことができる。また、「簡易インストール」でAndroid向けの環境を簡単に構築することが可能となっている。ただし、現時点でDreamweaverに付属するPhoneGapは最新版のAndroid SDKに対応しておらず、build.xmlを手動で編集して修正する必要があるので注意が必要とのことだ。

 

5　モバイル向けネイティブアプリの作成

ネイティブアプリの作成は、Dreamweaverのメニューにある［サイト］→［モバイルアプリケーション］から行う。まず、［アプリケーションフレームワークの設定］ウインドウで、使用するAndroid SDKやiOS Developer Toolsのパスを設定する。続いて［ネイティブアプリケーション設定］ウインドウでアプリケーション名やターゲットOSのバージョンなどを設定する。設定が完了したら、あとは「ビルド」メニューを選択するだけだ。

図5.1　アプリケーションフレームワークの設定例

図5.2　ネイティブアプリケーション設定の例

図5.3　iPhoneエミュレータで実行した様子

図5.4　Androidエミュレータで実行した様子

最後に大谷氏は、PhoneGap:Buildを用いてネイティブアプリに変換する様子も見せてくれた。PhoneGap:Buildは、Webアプリをアップロードしたらクラウド上でPhoneGapを用いてネイティブアプリに変換してくれるサービスである。作成されたネイティブアプリはダウンロードリンクかQRコードを使ってモバイル端末にダウンロード可能。SDKなどをインストールして開発環境を整えなくても手軽に各種プラットフォーム向けのネイティブアプリを作れる点が大きなメリットである。

図5.5　PhoneGap:Buildで作成したアプリをAndroid端末上で実行

大谷氏によれば、今回のデモに作成したアプリケーションは「より簡単に、より早く（速く）」をコンセプトとして作成し、実際の工数は1日程度で完成させたとのこと。比較的規模の小さいアプリケーションであればDreamweaver CS5.5だけを使って作成可能であり、コーディングも最小限で済ませることができるという。ただし、フレームワークに任せる部分が多くなる分、それぞれのフレームワークの特性を理解した上でデザインを行うことが重要だと語った。

 

関連記事

ADC MEETUP ROUND03 レポート

• SESSION1： General Session from Adobe MAX 2011
• HTML SESSION2： Adobe new tools : Introduction of Edge, Muse and Proto
• HTML SESSION3： HTML5でユーザビリティを高めるためのフォーム構築法
• Flash SESSION2： Stage3Dの利用で広がるFlashの表現と可能性
• Flash SESSION3： AIR3の新機能：Captive Runtime + Native Extensions
• Flash SESSION4： What's new in Flex 4.6 SDK

著者について