毎月第3水曜日に開催している「HTML5とか勉強会」。その記念すべき第10回を9月15日に開催しました。本稿では、その模様をUstreamでのアーカイブ含め報告します。
今回は、最近注目を集めているスマートフォンでのWebアプリケーション開発に関する各種フレームワーク（JQTouchやSencha Touchなど）について、講演いただきました。これらのフレームワークは、HTML5およびCSS3などの最新Web技術を活用しており、ネイティブアプリケーションと見間違えるようなユーザーエクスペリエンスをWebアプリケーションで提供することが可能です。また、現状スマートフォンにおいてデファクトとなっているiPhoneやAndroidで動作することから、商用環境でも使いやすいことが特徴になっています。
勉強会の開催場所は、前回と同じくGoogleの日本オフィスを提供いただきました。
「第10回記念HTML5デモアプリ」
まず始めに、本勉強会の第10回を記念して、本勉強会スタッフが作成したデモアプリケーションを筆者より紹介させていただきました。
本デモでは、HTML5とCSS3の各種最新Web技術を活用しています。CSS3の3D Transformsで表現したトンネルの中を、ハッシュタグ#html5jでつぶやかれたユーザーのアイコンが駆け抜けていくものに始まり、W3Cの慶應ホストでリーダーを努めているMichael Smithさんと、HTML5のエディターを努めているIan Hickson(Hixie)さんからのビデオメッセージを紹介しました。このビデオでは、WebSRTの技術を活用し、日本語訳を付けました。そしてデモの最後は、スタッフロールで締めくくられました。
本デモはこちらで公開しています（CSS3 3D Transformsを用いていることからSafari（Win版ではSafari5）でしか見れません。ご注意ください）。
本デモ終了後、このデモ用いた各種テクニックを簡単に紹介しました。また、デモの解説もこちらで公開しています（ChromeもしくはSafariのみ対応）。
「jQTouchとそのテクニック」
最初のセッションは、主催者の白石さんよりJQTouchについて講演いただきました。
jQTouchは、jQueryのプラグインとして動作するフレームワークです。jQTouchを使うことでiPhoneのWebアプリを「ネイティブアプリっぽく」見せることが可能になります。画面遷移の際のエフェクト処理（スライドインやポップアップなど）をclass属性の変更だけで行えたり、ホーム画面から起動した時にアドレスバーを隠すなどの処理などが簡単に実現できるため、非常に便利なフレームワークであることが説明されました。特徴は、アプリケーションの各画面を一つのHTMLファイルで記述すること。HTMLファイル内のブロック要素に対する画面遷移を、jQTouchで制御する構造となっているとのことでした。
後半は、iPhoneにバンドルされているブラウザ「mobile Safari」の各種固有機能が紹介されました。フレームワークを使う限り、通常これらの固有機能は隠蔽されています。したがって、これらを知る必要はないように思われます。しかしながら、Webアプリを作るにあたり、フレームワークの「クセ」により、要求仕様通りのアプリ開発が困難となることはしばしば発生します（これはどのようなフレームワークを用いても発生します）。このようなときに、そもそもの機能を把握していると、フレームワーク規定外でのアプリ開発を行うことが可能となるため、開発の柔軟性を高められます。講演の中では、それらの固有機能が丁寧かつ簡潔に紹介されました。
講演資料は、こちらです。講演資料もjQTouchを参考にしたWebアプリとなっています（閲覧推奨はSafariですが、スライドの一部遷移を除きChromeでも閲覧可能です）。
「jQuery Mobile調査報告」
最初のセッションの後、ライトニングトークス（LT）の発表が2つ行われました。一本目のLTは、スタッフの吉川さんからjQuery Mobileの調査報告が発表ありました。
jQuery Mobileは、前述のjQTouchとは異なり、pluginではありません。スマートフォン用の機能がjQuery自体に実装されることを意味します。つまり、jQueryのコアライブラリやjQuery.uiの次期バージョンでは、スマートフォンに対応した機能が具備されます。WebがPCに依存せず、各種デバイスでシームレスに利用可能であるという"One Web"の概念はよくいわれているところではありますが、実際に開発を行ってみると、デバイス固有の機能を意識せざるを得ないのが現状です。ここで、現在のWebで最も利用されているjQueryが、共通のライブラリでPCとSmart Phoneをサポートすることには大きな意味があると感じられます。ハードルは高いでしょうが、PCとスマートフォンの違いを意識せずWebアプリ開発が可能となる道に向けた大きな一歩と感じられ、今後の動向からは目が離せません。
LTでは、リリース前ということもあり、あくまで現時点での調査結果をもとに、各種スマートフォンへの対応プランや実装されるUIが紹介されました。講演資料はこちらで公開されています。jQuery mobileは今年の10月に1stリリースされるとのこと。期待大ですね。
「PhoneGap」
2本目のLTは、H2O Spaceのたにぐちさんより、スマートフォン用のアプリを生成するフレームワーク「Phone Gap」について発表がありました。
Phone Gapは、HTML+CSS+Javascriptで構成されたWebアプリをiPhoneなどのネイティブアプリに変換するフレームワークです。LTでは、Objective-Cを知らなくてもappStoreで販売することができる“救世主”という出だしでスタートしました。また、PhoneGapはiPhoneアプリの開発環境XCodeのアドインとして利用できます。インストール手順はやや煩雑であるとのことで、手順や利用法を含め、ビデオを用いて説明されました。XCodeではJavascriptファイルを表示しないため、ファインダーで開く必要があるなど、はまりやすいポイントをわかりやすく紹介されました。
講演資料（ビデオ）は、たにぐちさんのブログで公開されています。
「Endo of Native? Sencha Touch: HTML5+CSS3+JavaScriptスマートフォン向けWebアプリフレームワーク」
最後は、今回最大の目玉、スマートフォンWebアプリフレームワークとして、大変注目を集めているSencha Touchについて、Ext Japanの直鳥さんに講演していただきました。
Sencha Touchは、YUI（Yahoo User Interface Library）を拡張するライブラリとして始まった Ext JSを基に、jQTouchやRaphaelの開発者らが開発したスマートフォン用フレームワークです。HTML5/CSS3の機能を活用し、ネイティブアプリケーションのユーザーエクスペリエンスを簡単に提供することができます。mobile Safariが提供している機能をベースに、様々なUIを利用可能となっており、画面遷移のエフェクトや、フリップにより画面を切り替えるカルーセルやボタンによるタブなどモバイルアプリ開発に必要となる各種機能を余すところなく盛り込まれています。Sencha Touchは非商用や個人利用であればオープンソースで、商用についても開発者一人あたり一万円弱（現状価格。円高の今がライセンス購入のチャンスかもしれません）のライセンス形態となっています。気軽に利用可能ですので、興味のある方はぜひSencha Touchのサイトをチェックしてみてください。
Javascriptによるアプリ開発は、スパゲッテイ構造になりやすいことが有名ですが（筆者もこれにはいつも悩まされています）、Sencha TouchではJSON指定をベースとしたオブジェクト指定による画面遷移開発等をサポートしており、MVCによるアプリ開発が可能であることが強調されていました。直鳥さんが開発されたTwiMap（iPhoneでアクセスください）を用い、その利用法を分かりやすく説明されました。
講演資料は、こちらで公開されています。
最後に
早いもので、本勉強会のレポートも5回を数えました。多数の方にご覧いただけているとのことで大変嬉しく思っています。
本勉強会は、毎月第3水曜日に開催していますので、興味を持たれた方はぜひ参加ください。開催の告知はhtml5-developers-jpで行われますので、ご確認ください。来月も開催予定です。お楽しみに。
なお、筆者が管理している「Events in HTML5-jpでは、本勉強会の開催状況や、過去のアーカイブなども公開しておりますので、ぜひご活用いただければ幸いです。
