HTML5を日本語で議論するW3Cのグループ、日本で初めての会議を開催

2010年1月25日

HTML5について日本語で議論するW3Cのグループ「HTML5 Japanese Interest Group」がスタートしたことは昨年12月に紹介しましたが、そのInterest Groupのフェイス・ツー・フェイスミーティングが先週の金曜日、1月22日に慶應義塾大学 日吉キャンパスで開催され、100人以上の参加者が集まりました。

fig 右端でマイクを持っているのがHTML5 Japanese Interest Group議長の矢倉眞隆氏

会議では、Webブラウザを開発している企業4社がプレゼンターとなり、HTML5におけるブラウザのサポート内容などを発表しています。

HTML5 Japanese Interest Group 憲章

なおHTML5 Japanese Interest Groupには誰でも参加することができます。会場でも多くの方の参加を呼びかけていました。

以下からはプレゼンターの主な発言内容を中心に、会議の内容を紹介します。

オペラソフトウェア ダニエル・デイビス氏

Open Webという宗教へもっと入ってください、というのが私の肩書き「Webエバンジェリスト」。

Can I use HTML 5 now?

Can I use HTML5 now?

WebブラウザごとにHTML5をサポートしている比較表は、簡単ではない。ブラウザが多い。さらに、バージョン、デバイス、ユーザーによる設定でも異なってくる。JavaScript On/Offとかプラグインありなしとか。それを全部比較するのは非常に大変。

しかもHTML5の仕様そのものの変更も多い。私はイギリス人でHTML5仕様は英語で書かれているが、それでも混乱する。

だからブラウザが対応しているかどうかを考えるのは無視しよう。

OperaでのHTML5対応関連技術の紹介。

  • HTML5 Form
  • Flashなしで動画再生。字幕をJavaScriptで表示
  • Video+SVGフィルタ
  • Canvas
  • WAI-ARIA
  • CSS3 Transitionsでアニメーション

でもHTML5に対応しないブラウザはどうする?

HTML5 FormsはOperaが対応している。Ruby(ルビ)はIEが対応。Drag&DropはForefoxが対応。We SocketsはWebkitが対応。でも、こんなことをいちいち考えて作っていたら混乱するだけ。

そこで「Progressive enhancement」。これがいちばんいい戦略。

「Progressive enhancement」は、どのブラウザでも正しく見えるベースラインを設定して、その上にエフェクトなどの追加機能が使えるならば使っていく。その方法とは。

Fallbackを使う。タグの中に対応していない場合の内容を書いておく。

JavaScriptライブラリを使う。ライブラリが対応を調べて、適切に動作してくれる。raphaeljs.comとかmodernizr.comなど。

ブラウザの対応を無視する。CSS3のエフェクトやWAI-ARIAなど。

One Webとは。それは同一のインターネット体験ではない。それぞれのユーザにとって最良なインターネット体験。

関連記事:どのWebブラウザをサポートするべきか? 「プログレッシブ・エンハンスメント」という考え方 - Publickey

モジラジャパン 加藤誠氏

私はコアデベロッパーとしてちゃんとコードを書いている人です。

Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later

Demos Mozilla Hacks - the Web developer blog。このサイトがデモで使われました

Firefo 3.6/gecko 1.9.2やそれ以降のバージョンでサポートされる新たな規格を紹介。

  • File API(Firefox 3.6 / Geck 1.9.2)
  • CSS Gradients(Firefox 3.6 / Geck 1.9.2) CSSグラデーション
  • Web Open Font Format(Firefox 3.6 / Geck 1.9.2)
  • WebGL(Firefox.next / Geck 1.9.3)

モジラならどのGeckoのバージョンが同じなら、モバイルでもPCでも同じ機能。バージョンによって何に対応しているか分かりやすい。

FileAPIは、<input type="file">で選択されたローカルファイルへのアクセスを提供。HTML5のDrag&Dropと組み合わせると、ブラウザウィンドウへのファイルのドラッグ&ドロップでファイルにアクセスすることが可能。人間として自然な形でファイルにアクセスできる。

CSS Gradients(グラデーション)もサポート。先に実装されていたたWebKitでは構文が異なる。ほかのブラウザもぜひ実装してほしい。

Forefox 3.5ではWebフォントのサポートを開始。対応しているのはTrueTypeとOpenType。Firefox 3.6で新しいWebフォント形式のWOFFをサポート。

Web Open Font Format(WOFF)は、結構モジラが関わった。このスペックを作っているのはすごく日本語が堪能なジョンさん。フォントベンダと共同で作成した新しいフォント形式、OpenTypeなどよりもサイズは小さい。現状では特定のグリフだけダウンロードするような差分ダウンロードには対応していない。Mimeタイプは決まってない。

WebGLはつい最近ドラフトが公開された、3D画像を作るための規格。OpenGLのようなもの。

現状のブラウザでのレンダリングでは、OSのAPIを利用している。つまりGDI、Quarts、Cairoなど。このときハードウェアアクセラレーションが使われるかどうかは利用するAPIやOS次第。ソフトウェアで3D画像を計算する必要がある。WebGLを使えば、そういった計算もハードにまかせられる。

現在ではAMD、nVIDIA、IntelなどのPC向けのグラフィックチップでは3D向けのDirectX9やOpenGLをサポートしており、モバイル分野でもTIやクアルコム、iPhoneの最新チップセットではOpenGL ES2.0をサポート。グーグルのNexusOneにもOpenGL ESが入ってる。だったらその機能をブラウザでも使いたい。

Web GLはThe Khronos GroupでAPI仕様が策定されている。Apple、Google、Mozilla、Operaが参加中。OpenGL ES 2.0ベースのAPIをJavaScriptからアクセス。シェーダーやテクスチャも利用可能。Canvasへ描画する。Gecko1.9.3やWebkitで利用可能に。

WebGLのデモとして、球体に地球と火星のテクスチャを貼り付けて回転表示。

関連記事:W3CのFile APIを試してみる。ブラウザ上にファイルを読み込んで操作可能に - Publickey

マイクロソフト 五寳 匡郎氏

マイクロソフトがHTML5でいったい何を話せるの? と思われていると思うが......でもこの会議には参加しないとまたマイクロソフトはだめだなと思われるし。そこでUSチームのデベロッパエバンジェリストと協力して資料を作った。

HTML5 Features in IE8

昔はIE6も革新的だったよと、AjaxをサポートしたのもIE6だよと。5年たってIE7がでたけれども、IE6が長すぎて、よく知りすぎたと。どうすれば何が起こるか、バグ的な要素もふくめてよくわかっていた。

IE7でいちばんの問題は互換の問題。実際調べてみるとStandardモードと互換モードでフィフティフィフティくらいだった。イントラネットなどでは互換モードが思ったより使われていた。

IE8でWeb標準に対応したといっても、まだ疑われていた。プレスリリースなどでもマイクロソフトはこれからWeb標準に対応していきますよといっているし、これからはよほどのことがないかぎり独自実装はしていかないだろう。

HTML5のインプリはやっぱり簡単じゃない。ドキュメントも多いし。非常に困難を極めている。だからといってIE6からIE7のように待たせるとまた移行が困難になってくるし。

でも今日はE9の話はナシです。しちゃうと首がとんじゃうので。ひとつだけ。W3CのSVGのグループにマイクロソフト社員が一人参加しました。そのSVGに入ったパトリックには日本からのデマンドは内々に伝えています。

で、IE8でHTML5の何をサポートしているのか、というお話。

Contoso Car Rental、このサイトがデモで使われました

まずDOM Storage。地味なデモをします。フォームに値を入力。いったんフォームを閉じて開くと、値がちゃんと残っている。

クッキーじゃねえの? という方のために(笑)、クッキー削除。で、フォームを開くとフォームデータは残っている。

で、どこにDOM Storageのデータが保存されているか? この隠しフォルダに(と、ファイルエクスプローラで参照)XMLファイルとして残っている。

DOM Storageはドメインごとに10MBのデータを保存できる。セッションストア、ローカルストア。マックス100MBなので、10MBだと10ドメインなのにご注意。

オンライン、オフラインイベントハンドラ。ネットに接続されているかどうか? のチェックが可能。

Ajaxナビゲーション。クロスドメインリクエスト。それぞれデモ。

Selectors APIにも対応しているのでパフォーマンスがよくなると、ほかのブラウザと比較してみたら、IE8はがんばったのに一番遅かった。ここでデモして戒めとします(場内爆笑)。

HTML5で優先的に実装しなければならないものなどをこうした場を利用して聞いていきたいと思います。IE9はリリース前にベータ版がでると思うので、出たらぜひそちらも試してみてください。

関連記事:IE9でSVGに対応? マイクロソフトがW3CのSVGワーキンググループに参加 - Publickey
関連記事:[速報]Internet Explorer 9初披露、HTML5対応、DirectXで描画。Silverlight 4は今日からβ公開 - Publickey

グーグル 及川卓也氏

グーグルはGoogle Chromeというブラウザを作っているだけでなくWebkitにも貢献している。Webkit、まだプラットフォームごとに分かれているところがあるので、同じWebKitを使っているブラウザでも、Safariで動いてChromeで動かない機能というのもある。

HTML5への取り組み

WebSocketsは基本的な実装を完了。Workers統合もほぼ完了した。プロキシ認証と、ハンドシェイクスロットリングは今後実装(WebSocketsのハンドシェイクスロットリングはすでにサポートしてるのですが、実装を変えようとしている(WebKitでの実装にする)ところ)。

いまGoogle Waveではリアルタイムで入力と表示を実現しようとしているが、その部分の実装は死ぬほど大変。いわゆるcometという技術を使っている。cometは特定の技術と言うよりダーティなテクニックのまとめ。こうしたことを解決するのがWebSockets。

WebSocketsはUNIXのソケットに似たもので、つまりHTTPではない。ほかのプロトコルが流れるので、ファイアウォールなどで通信が阻害される可能性がある。そこをグーグルは実験して、どれくらい阻害されるのかを調査した。今後、ファイアウォールベンダなどにこうしてほしいといったメッセージをだそうとしている。

LocalStorageはサポート済み。SessionStorageも「-enable-session-storage」というオプションでサポート済み。1つのレンダラープロセスでの動作を保証。Indexed DatabaseはChrome M6以降で実装予定。Web Databaseはそれなりに実装したが、この機能がHTML5の仕様からはずれた。しかし今後の互換性のために実装からは外さないので今後も使えます。

ルビにはHTML5 RubyとCSS3 simple rubyとcomplex rubyがある。HTML5 RubyはChrome 4.0でサポート済み。CSS3 Rubyは未サポート。ルビに関しては実際にどのようなニーズがあるのか、ぜひフィードバックをください!

CSS Fontは、TrueTypeフォント、OpenTypeフォントはサポート。WOFFは未サポート。

FileAPIとDrag&Dropは作業中。Chrome M5の予定。

WebGLはChrome M6の予定。HTML5 Forms。実は日本のエンジニアが担当していて、コードは書いているがまだ。内部機能はできつつあるが、UI部分が未実装。

Q&A

会場から。HTML5はどのくらいの時期になれば使い始められるだろう? 各ブラウザベンダに質問。

及川(グーグル)
HTML5の要素ごとに違うが、今年前半から後半にはでてくると思う。今年中にぽつぽつ出てきて、年末にはかなり(HTML5のサイトが)見られるのではないか。

デイビス(オペラ)
難しいですね、HTML5はMoving Targetなので。早くHTML5そのものを決めてほしい。できるかぎり実装するだけ。

加藤(モジラ)
サーバサイドを作っている会社だと説明できるかもしれないが、モジラはクライアントだけなので難しい。しかしみんな(ブラウザを)バージョンアップしてくれて古いバージョンが少なくなればできると思う。

五寶(マイクロソフト)
ちゃんとつかえるのは次期バージョン(IE9)からだ。いつ次期バージョンがでるのは分からないが、β版がその前にでるので。ただ、どんな機能がはいるかはまだ未定なところがある。

内容の紹介は以上です。また、当日の会議についてのツイッターをまとめた「Togetter(トゥギャッター) - まとめ「HTML5 Japanese Interest Group #JAIG5 2010-01-22 第一回ミーティング」」も合わせて参照すると分かりやすいかもしれません。

PublickeyのHTML5関連の記事は、タグ「HTML5」でまとめて参照できます。

追記(1/25 12:08):ご本人からのご指摘により、発言を一部修正しました。
追記(1/25 13:42):グーグル及川さんのWebSockets発言について一部補足しました。

あわせて読みたい

HTML/CSS Web技術 Web標準




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本