レポート

JQTouchやPhoneGap,jQuery Mobileを利用したモバイルアプリ開発と,オバマサイトのキャンペーンの裏側が語られた「Web Directions East 2010」レポート(後編)

この記事を読むのに必要な時間:およそ 4 分

10月15日に開催されたWeb Directions East。後編のレポートをお届けする。

Jonathan Stark氏「HTML, CSS, JavaScript を利用したモバイルアプリ開発」

Jonathan Stark(ジョナサン・スターク)氏は,モバイルアプリケーション開発を専門にコンサルタントとして活躍する一方,オライリー・ジャパンから出版されている『iPhoneアプリケーション開発ガイド―HTML+CSS+JavaScriptによる開発手法』の著者でもある(この書籍は日本でも高い支持を得るている)⁠氏は,昨今におけるモバイルアプリ開発にどうして関心が集まるのかを解説した。

写真1 Jonathan Stark氏

写真1 Jonathan Stark氏

2007年の時点ではそこまで重要な存在ではなかった。当初のモバイルデバイスはスクリーンも小さい上に,アプリケーションの修正や追加も容易でないため開発上・デザイン上の制約が大きかった。

しかし2010年現在では解像度の改善やQwertyKeyboard・音声認識などの入力サポート,高速なネットワーク,GPSなども備わったことで,高性能でパワフルなエクスペリエンス・コンピューティングが可能になった。また,コンテンツにおいてもiPhoneやAndroidでは何千,何万といったアプリケーションや音楽データ,電子書籍をダウンロードできるようになったことも大きなイノベーションだったといえるだろうと述べた。

そして,⁠スマートフォンやタブレットPCに限らず,車やプリンター,キオスクなど,タッチスクリーンが様々なところに出現してきている。将来的には家電や日用品に応用される。日常にタッチスクリーンが溢れることになるだろう。コストが下がれば,商品のパッケージングにすら使われることになるかもしれない」と語る。

氏によれば,モバイルアプリにはネイティブアプリ,Webアプリ,そしてSMSアプリの3つのタイプがあり,これらは全く違うアプローチで開発しなければならないと説明する。 モバイルアプリでの開発アプローチとそのゴールについて,氏は"Native vs Web"という見解は誤解を招くだけだと注意。⁠それぞれで何ができるのか,明確に理解する」ことが大事であるという。

例えば,より綿密なレスポンスや,スムーズな動作を期待する場合,またカメラなどのネイティブデバイスへのアクセスが必要な場合にはやはりネイティブアプリが得意としている。 しかし,デバッキングやユーザーテスト,ユーザーサポートのしやすさでいえばWebアプリが有効だ。実際のユーザーを使ってすぐにテストができ,即座にフィードバックが得られるというる点では大きなアドバンテージになるだろう。それぞれの長所・利点を吟味し,選択することが重要だとした。

次に,モバイルアプリケーションにおける,WEBアプリ用ののJavaScriptライブラリとしてjQtouchをデモで紹介。jQtouchは名前のとおりjQueryのpulginとして機能する軽量のフレームワークだが,開発する上でのその簡潔性も大きな特徴となっている。

写真2 jQtouchのデモ

写真2 jQtouchのデモ

デモではさらのHTMLを実際にモバイル用にブラウザで動作するように作成。jQtouchを読み込むには,必要なバージョンのjQueryを先に記述して読み込ませたあとにjqtouch.jsを記述する。簡潔性が特徴と述べたが,極端に言えば最低限jQtouchの提供するclass指定のルールを守りさえすれば,Sciptは初期化分のみという簡潔さだ。

jqt - new $.JQtouch()

また,テーマに基づいて実装でき,classで変更が自由に可能で,デフォルトテーマ"rounded"ではiPhoneライクな表示になる。iPhoneなどにみられるページ遷移時のアニメーションも,基本実装されているため,一行もスクリプトを記述しなくても非常にスムースな形でアニメーションが動作するだけでなく,様々な種類が用意されている。初期化時に細かいデフォルト動作を変更でき,カスタマイズを簡単なのも評価できる。ちなみに,リセットCSSはモジュールとして組み込まれているため必要ない。

氏は続けて,⁠ネイティブとWebの境界線はますます曖昧になってきている」と述べ,Webアプリのネイティブアプリ化に対するアプローチとしてPhoneGapを紹介。PhoneGapはまさに革新的なオープンソースソフトウェアで,HTML+CSS+JavaScriptで作成されたWebアプリをiPhoneやAndroidなど,マルチプラットフォームに対応させることのできるというもの。このWebとネイティブの"混血"する,すなわちハイブリットアプリの作成方法は,これまた非常にシンプルだ。

PhoneGapは基本的に,ネイティブアプリとしてWebアプリをラップすることで実現される。デモでは前述のjQtouchのWebアプリソースをそのままコンパイルしてAndroidとiPhoneのネイティブアプリとして変換。詳しくは割愛するが,基本的にAndroidであればターミナルやコマンドラインを使用して,PhoneGap用の専用コマンドを実行することで自動でプロジェクトが生成され,iPhoneに至ってはテンプレートプロジェクトがXcodeにインストールされる形になっている。あとはプロジェクトに基づいて従来の方法でコンパイルするだけだ。

氏は,⁠JavaやObjective-Cが使えなくてもHTML,CSS,JavaScriptさえできればこうしたネイティブアプリまで対応できる,ターゲット面でもコスト面でも差別的なメリットが大きく,魅力的なアプローチだ」と語った。

なお,スライドはWeb Directions EastのWebサイトにアップされているので,ぜひチェックしてほしい。

写真3 PhoneGapのデモ

写真3 PhoneGapのデモ

セッション休憩中:Amped受賞者,紹介

イベントオーガナイザーのJohn Allsopp氏より,Web Directionsが今秋オーストラリアで開催したAmpedというハッカソンにおいて,優秀作品を制作した受賞者を紹介した。そして受賞者より,その作品内容の制作プロセスなどが語られた。

なお,受賞者たちの本イベントへの参加費が出されているという。日本でも本ハッカソンを開催したいという話があり,その場合の受賞者は他の地域で開催されるWeb Directionsに招待したい旨が語られた。

写真4 HTML5周辺技術を組み合わせてサイトを制作したチーム

写真4 HTML5周辺技術を組み合わせてサイトを制作したチーム

写真5 Open Conference ProtocolというアイデアをiPhoneアプリとして実装したチーム

写真5 Open Conference ProtocolというアイデアをiPhoneアプリとして実装したチーム

著者プロフィール

加茂雄亮(かもゆうすけ)

株式会社ロクナナにて,ActionScriptを伴うFlashコンテンツや,AjaxコンテンツなどRIA開発に従事するフロントエンドエンジニア。テクニカルライターとしての一面を持ち,WEB・雑誌・書籍、媒体問わず執筆。また,イベントやセミナーでの講演など,精力的に活動している。

URLhttp://log.xingxx.com/
URLhttp://rokunana.com/

コメント

コメントの記入