レポート

「第10回 HTML5とか勉強会」活動報告

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

毎月第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リリースされるとのこと。期待大ですね。

著者プロフィール

小松健作(こまつけんさく)

NTTコミュニケーションズ 先端IPアーキテクチャセンタ リサーチエンジニア。上位層プロトコル及びWebテクノロジの技術開発に取り組む。また,「html5とか勉強会」のスタッフをつとめる。 好きな言語は,JavascriptとRuby。

Blog:http://blog.livedoor.jp/kotesaki/

Twitter:@komasshu

コメント

コメントの記入