gihyo.jpサイトのロゴ

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

2011-07-01

はじめまして、HTML5とか勉強会スタッフの井原と申します。6月21日、18回目の「HTML5とか勉強会」がGoogleのオフィスをお借りして開催されました。本稿では、本勉強会の模様をレポートします。

今回のテーマは「Google Day」ということで、Google I/O 2011の報告や、Googleの提供するJavaScriptライブラリである「Closure Library」についての講演が行われました。また、テーマとは別の発表として2本のショートセッションとLTが発表されました（今回のコーディネータは、勉強会スタッフである小松さんです⁠）⁠。

画像

Google I/O 2011 報告

5月10日、11日にアメリカ・サンフランシスコで開催されたGoogle I/O 2011の中で発表されたChromeとHTML5にまつわる最新情報についてGoogleの及川さん、北村さんに講演いただきました。

最初は及川さんから「基調講演」と「HTML5 & What’s Next」の内容についての報告が行われました。

基調講演では、主に以下の内容が取り上げられていました。

  • Chromeのアクティブユーザ数の増大
  • Chromeによる音声認識のデモ
  • GPUアクセラレーションのデモ
  • Chrome Web Storeが41言語に対応
  • アプリ内課金のローンチ
  • アプリの充実
  • Chromebookの発表

この中から、ChromebookのFile Browser Handlerについて特に詳しく紹介されました。なお、実際のGoogle I/Oでの「基調講演」の動画はこちらにあります。

続いて、「⁠HTML5 & What's Next」についてです。Chromeは当初からウェブの標準化をすすめ、その標準に沿ってブラウザを実装してきました。「⁠HTML5 & What's Next」では、これまでの成果とこれから取り組んでいくことが紹介されたセッションです。

まずこれまでの成果として、File System APIやWebSocket、WebGLによる3Dなどが紹介されました。その後、これから取り組んでいくこととして開発の効率性を向上を目的としたCSSにまつわる提案などについて説明が行われました。具体的には、CSS variables、CSS mixins、CSS Nesting/Hierarchy、Animation/Transitionなどです。なお、Google I/Oでの「HTML5 & What's Next」の動画はこちらにあります。

画像

その後、北村さんによる「HTML5 Showcase for Web Developers: The Wow and the How」のデモが行われました。

「HTML5 Showcase for Web Developers: The Wow and the How」は、ビジュアル的にHTML5の素晴らしさを体験することができるセッションです。FileやGraphic、Audioについてのデモを具体的に利用されている技術と共に説明されました。

なお、Google I/Oでの「HTML5 Showcase for Web Developers: The Wow and the How」のビデオはこちらにあります。また発表に使われていた資料はこちらにて公開されています。

画像

Closure Library & HTML5

Closure Libraryについての説明とClosure LibraryのHTML5関連機能について伊藤千光さんに講演いただきました。

前半は、Closure Libraryの概要について説明していただきました。Closure Libraryとは、Googleの主要なプロダクトで利用されているUIコンポーネントを一般に公開したJavaScriptライブラリです。伊藤さんはClosure Libraryの最も重要な点は、このライブラリがGoogleのJavaScript開発ノウハウの結集であり、JavaScript開発の「Google Way」であるという点にあると言及していました。

Closure Libraryは、JavaScriptにおけるクラスベースのオブジェクト指向を実現したものです。このライブラリはJavaScriptファイルをコンパイラに通すことで、自動的に最適化や依存ファイルの統合を行ってくれます。そのためプログラマは最適化を意識することなく、メンテナンス性の高いコードを書くことができるようになります。

後半は、Closure Libraryに実装されているHTML5関連機能について説明していただきました。Closure LibraryでのHTML5対応は、元々クロスブラウザ対応が意識されていたため、当初は主に古いブラウザでもエミュレートできる機能を積極的に実装してきました。しかし、最近ではWebSocket等の最新ブラウザでのみ利用可能なAPIもサポートされるようになりました。

今回のセッションで詳しく触れていただいたHTML5関連機能は以下のものになります。

  • Local Storage
  • FileSystem API
  • postMessage
  • Drag and Drop
  • WebSocket
  • WebWorker内でのClosure Libraryの使用

発表資料はこちらに公開されています。

Kinect on HTML5へぇ～

前回の勉強会に続き、インターネットイニシアティブ(IIJ)の大津繁樹さんからKinect＋WebSocketによる講演をいただきました。

本勉強会の前週である6月16日にMicrosoftからKinect for Windows SDK betaが配布され、今回のデモはそのSDKに対応した最新バージョンだそうです。使用されている技術は、NS API、Nodejs+Socket.IOによるWebSocketです。またWeb Audio APIを用いた音を使ったデモも行われました。

発表資料はこちらに公開されています。

Developing for TV その2

第17回でも講演いただいたテレビにおいてのWebサイト構築手法の続きをダニエルさんに講演いただきました。

テレビ向けのWebサイト開発は難しく、今回取り上げていただいた問題は、「⁠色」と「ナビゲーション」の2つについてです。

「色」の問題点は、PCとテレビでは色の表示が違うという点です。そのため、色を指定したナビゲーションは避けるべきであるという方法を提案していただきました。

「ナビゲーション」の問題点は、PCとテレビではキーコードが違うという点とCSSのfocusやhoverが端末によって使えるものと使えないものがある点です。キーコードについての解決方法は、テスト用ページを利用して地道に試してみるしかないとのことです。また、focusとhoverについては、ボタンならばbuttonタグをしっかり使うか、divタグでボタンを作る場合はtabindex=⁠”0⁠”を適応するという方法が提案されました。キーコードはこちら、focusとhoverはこちらで、それぞれ確認できます。

Firefox+文字+動き=音的ななにか

第16回から3連続目の株式会社コネクティの若狭さんより、Firefoxを楽器にするという発表をいただきました。

発表中では、twitterから音をイメージさせる文字列を取得して音を生成し、鳴らすデモやHTML5 API (例えばDevice Orientation API) の利用を検知すると音が鳴るデモが行われました。

最後に

レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、twitter（@yutaro_i）までお気軽につぶやいていただければと思います。本勉強会は、毎月第3水曜日または第3木曜日に開催していますので、興味を持たれた方は是非参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5-developers-jpで行われますので、こちらをご確認ください。来月も開催予定です。お楽しみに。

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

おすすめ記事

記事・ニュース一覧