レポート

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

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

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

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

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

画像

※1
Googleの皆様には,会議室の提供だけではなく,勉強会準備や参加者受付,さらには懇親会の手配にいたるまで(今回は勉強会終了後,そのまま懇親会を会場にて実施しました),多大な協力をいただきました。御礼を申し上げます。

「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からカメラアクセスも可能とのことです)。

画像

著者プロフィール

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

NTTコミュニケーションズ 先端IPアーキテクチャセンタ リサーチエンジニア。元々はネットワークエンジニアだったが,Ajaxの登場以来,今後のサービスはWeb(Javascript)を中心に回ると確信。その魅力にとりつかれる。WebSocketに衝撃を受け,リアルタイムWebの到来を信じ,html5の世界に足を踏み出した。 「html5とか勉強会」のスタッフをつとめる。好きな言語は,JavascriptとRuby。

Blog:http://blog.livedoor.jp/kotesaki/
Twitter:@komasshu

コメント

コメントの記入