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

「HTML5とか勉強会」も早いもので一周年を迎えました。記念となる第12回は、11月18日にGoogleのオフィスをお借りして開催しました[1]⁠。本稿では、本勉強会のレポートをお届けします。

今回は、Web Directions East 2010で来日していた海外からのスペシャルゲストによる講演含め、本セッションでは4つのプレゼンテーション（どれも英語）が発表されました。また、引き続き同一会場で行われた懇親会ではLTが3本行いました。

なお今回は実験的に、WebSocketを利用したチャットシステムを使って、英語の講演中に日本語訳のテキストを共有する試みを実施しました。システムは筆者が開発し、和訳は同じく勉強会スタッフの矢倉さんを中心に行いました。

「The State of HTML5: Inaugural Address」

最初に、GoogleのChromeチームに所属し、jQueryやHTML5Rocksにも携わっているPaul Irishさんより、HTML5全体に関して講演していただきました。

HTML5とその関連仕様には、様々な機能が含まれており、それらの中には現実的な環境の中で使いやすいものから、極めて実験的なものまで様々です。そこで、それらの機能を4つのカテゴリ（安心して使える機能、だいたい使える機能、実験的な機能、エッジな機能）に分類し、それぞれについて概要説明とデモンストレーションが行われました。

安心して使える機能としてdoctypeやcontenteditableなどが、だいたい使える機能としてはcanvasやgeolocationなど、また、socket.io（ブラウザに応じ、自動でフォールバックしてくれるnode.js + クライアントサイドjavascriptのライブラリ）含めwebsocketが紹介されました。実験的な機能としては、<input>のmeter属性やprogress属性、canvas, SVG, WebGLに対応した3Dエンジンライブラリのthree.jsなどが紹介されました。エッジな機能としては、<device>や（エリクソン社でのカメラからの映像キャプチャー実験⁠）⁠、Audio Data apiのデモ（注：FireFox4βでしか動きません）が紹介されました。

さらに、クロスブラウザ環境での開発についても言及され、APIやCSS3の各種機能の利用可否を判定するライブラリであるModernizrやクラスプラットフォームでHTML5の機能を提供するライブラリがまとめられているサイトが紹介されました。ただし、ライブラリを駆使して、すべてのブラウザで同一の機能を提供することは、パフォーマンス面など様々な観点で無理があるため、旧来のブラウザには最低限のUXを、最新のブラウザでは最大限のUXを提供するProgressive Enhancementが望ましいとの考えを示されました。

「WAI-ARIA」

2番目のセッションでは、OperaのBruce Lawsonさんより、WAI-ARIAについて講演をいただきました。

WAI-ARIAとは、Web Accessibility Initiative-Accessible Rich Internet Applicationsの略で、Webサービスでのアクセシビリティに関し、W3Cが勧告に向けた検討を進めているものです。本講演では、視覚障害者のためのスクリーンリーダーとHTML5との関連や、聴覚障害者のための、ビデオへの字幕の付与についてお話をいただきました。

HTML4.01で多用される<div>は、それ自体はブロック要素であることのみを示しています。しかしながら、この要素はページ構成としてのナビゲーションやヘッダー、本文などを区分するものとして頻繁に用いられます。このような状況は健常者から見るとなんら問題なく捉えられがちですが、視覚障害者がスクリーンリーダーを用い利用する場合には大きな問題となります。このようなデバイスは、ナビゲーション部分や本文部分などを識別し、それに応じた機能（例えば、本文の音声読み上げなど）を提供することが必要となりますが、マークアップですべて<div>と記述されているだけでは、それらの識別が困難となるためです。

このためARIAでは、"role"などの属性を定義することで、マークアップ中でナビゲーションを識別できるようにしていること、HTML5では<nav>要素の活用により、"role"属性を記述する必要がなくなることなどが紹介されました。

また、video要素の字幕フォーマットであるWeb SRT（現在検討の初期段階にあり、Working Draftにはなっていません）についても紹介され、聴覚障害者へのアクセシビリティを実現するのみならず、ノイジーな環境での認識性の向上や、検索エンジンへの対応も図れることを講演いただきました。

「jQuery Mobile + PhoneGap」

休憩時間をはさみ、Jonathan Starkさんより、モバイル環境でのアプリ開発について講演いただきました。

最初に、モバイルアプリを開発する上で、ネイティブアプリとWebアプリとを比較し、ネイティブアプリでは、デバイスが提供するフルスペックを用いたアプリケーション開発を行うことができることや表現力が豊かであることを、Webアプリでは配布やサポートの容易性をメリットとしてあげ、ゴールやターゲットに応じいずれかの環境を選択すべきとの考えが示されました。

Webアプリでは、様々なデバイスに対し（理想的には）1ソースでの提供が実現可能となるため、ターゲットが許される（例えば、カメラアクセスが不要であるなど）限り、Webアプリで開発するのが望ましいと述べられました。

講演内では、jQTouchのライブコーディングが披露され、マークアップで、各パネル（アプリケーションの各画面）を定義していくことで、簡単にWebアプリを開発可能であることを紹介いただきました。

また、ハイブリッドアプリとしてPhoneGap（html+css+jsからiPhoneおよびAndroidアプリを生成するフレームワーク）が紹介され、Android, iPhoneそれぞれの環境で、1ソースでのアプリ開発が可能であることをライブコーディングを通して言及されました（iPhoneでは、PhoneGapからカメラアクセスも可能とのことです⁠）⁠。

「Canvas implementation using CoffeeScript」

最後のセッションとして、Michael Fellingerさんより、CoffeeScriptについて講演いただきました。

Javascriptは、時として冗長なコーディングスタイルを開発者に要求します。その一例が、ヒアドキュメントでしょう。一般的なスクリプト言語の場合（以下はrubyの例⁠）⁠、

out = <<EOF
このドキュメントは
ヒアドキュメントで書かれています
EOF
puts out

といったシンプルな記述ができるのに対し、Javascriptでは

var out = "このドキュメントは";
out += "文字列の連結で書かれています";
alert(out);

といった面倒な記法となります。CoffeeScriptは、pythonやrubyのようなスタイルのスクリプト言語で、シンプルに記述可能な言語となっており、Deploy時にはJavascriptに変換することで、Webアプリの開発効率をあげようというものです。講演の中では、行末にセミコロンが不要であったり、オブジェクト定義をYAMLのようにシンプルに記述可能であることなどを、Javascriptとの対比を含め丁寧に紹介されました。

また、CoffeeScriptのサイトでは、CoffeeScriptからJavascriptへのリアルタイム変換も可能となっており、こちらのデモも併せて紹介されました。

「HTML5で作るスマートフォンのネイティブアプリ開発?JSWAFFLEの紹介」

勉強会終了後、同会場内で懇親会を開催し、その中でLTを3本行いました。最初はクジラ飛行机さんよりJSWAFFLEについてのLTをいただきました。

HTML+CSS+JSからiPhone/Androidのネイティブアプリを開発するフレームワークとしてPhoneGapが有名ですが、特にAndroidではデバイス（例えばカメラなど）にアクセスする機能に乏しいのが現状です。このため、Androidに特化したフレームワークとして自身が開発されたのがJSWAFFLEです。

JSWAFFLEのポイントは、インストールの容易性とプロジェクト作成の容易性、そしてGPS, 傾きセンサー, カメラなどの各種デバイス固有のAPIを利用可能であるとのことでした。

なお、プレゼン資料はこちらで公開されています。

「HTML5 presentaion w/ Android」

2本目のLTでは、筆者より、Androidを組み合わせたHTML5プレゼンテーションを紹介しました。

今回の各講演でも、多くの方がHTML5+CSS3を用い、ブラウザでのプレゼンテーション（PowerPointなどではなく）を行っていましたが、このスタイルの最大のメリットは、アプリケーションを切り替えることなく、デモンストレーションを行える点です。HTML5関連のデモを行いたい場合、それをページ内のJavascriptや、IFRAMEとして埋め込めば良く、非常にスムーズにデモを絡めたプレゼンテーションを行うことができます。そこで、せっかくWebアプリとしてプレゼンを行うのであれば、さらにアプリとしての機能を追加したいという思いより筆者が開発したツールを紹介しました。

本アプリでは、WebSocketを組み合わせることで、ハッシュタグでフィルターをかけたTweeetをTwitter Streaming APIを利用しプレゼン内にリアルタイムに表示したり、Androidのタッチジェスチャーに応じて、プレゼンスライドを切り替えたり、ズームインやポジション移動が可能であることを紹介しました。なお、AndroidでWebSocketを用いるためにFlashを利用したこちらのライブラリを利用しました。

「jQuery Mobile」

最後のLTでは、勉強会スタッフの吉川さんより、jQuery Mobileについて講演いただきました。

jQuery Mobileは、jQueryプロジェクトが開発を進めているモバイルWebアプリ開発フレームワークです。10月にAlpha版がリリースされ、一般に利用可能となったことから、そのコーディング方法について紹介いただきました。

WebKitに限らず、Cross-Platformに対応していることや、デバイスの特性に応じ最適なUXを提供するProgressive Enhancementをサポートしているなどの全体的な特徴に始まり、個々のページ要素（ヘッダー、フッターやフォームなど）のコーディング方法にいたるまで、豊富なサンプルを交え紹介されました。jQuery Mobileは、来年1月に正式版がリリースされるとのことで、AdobeのDreamWeaverでもサポートを検討しているとのことです。

なお、講演資料はこちらで公開されていますが、資料自体がjQuery Mobileで作られており、優れたコーディングチュートリアルとなっています。是非ご確認ください。

最後に

今回は、英語のプレゼンがメインであったこともあり、事前準備等大変ではあったのですが、（⁠いくらかトラブルはあったものの）講演者、Googleの方々、そして参加者の協力のもと大変盛況な会を行うことができました。全関係者のみなさまに改めて感謝申し上げます。

レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、twitter(@komasshu)までお気軽につぶやいていただければと思います。

本勉強会は、毎月第3水曜日もしくは第3木曜日に開催していますので、興味を持たれた方は是非参加ください。

開催のアナウンスはhtml5-developers-jpで行われますので、こちらをチェック願います。来月も開催予定です。お楽しみに。

なお、筆者が管理しています、こちらのサイト（Events in HTML5-jp）で開催状況や、過去のアーカイブなども公開しておりますので、是非ご活用いただければと思います。