RSS

W3C 2009年度 第2回 日本会員会議と W3C HTML 5 Japanese Interst Group ミーティング ＠慶応大 日吉キャンパス

22 1月

2010年になりましたが、本年度最後の W3C 日本会員会議が 14時からあり、17時から引き続き HTML5 Japanese Interest Group の集会？が21時ぐらいまでありました。

W3C 日本会員会議は、W3C の方々から本年度の活動の総括ならびに今後の展望などが語られ、一覧を見ると、2009年は意外と関わってたんだなぁと、しみじみ。

QA で、今後の W3C 慶応の活動において、アンテナハウスさんがおっしゃっていた事に、同感。
HTML5 はまだ W3C の仕様そのものが未完成だし、実装には膨大なコーディングと検証が必要になってくるので、やっぱりなんらかの優先度が必要になると思われる。
HTML5 Japanese IG で、各分野において日本のマーケットで必要と思われるサブセットなどが議論されれば、開発者は W3C HTML5 Japan IG のスレッドをみれば、トレンドを把握しやすいし、我々も、市場がどういった機能を欲しているのか？というのがわかりやすくなると思います。

QA では、私も質問。(芦村さん、しょぼい質問ですみませんでした。。。)
「MMI Architechture に興味を持っている日本のお客様は、具体的にはどういった方面の方が多いのか？」

今度また、久しぶりに WG に参加させていただきます！

ーーーーーーーーーーーーーーー

さて、W3C 日本会員会議の後に開催された、W3C HTML5 Japanese Interest Group Meeting での補足です。
プレゼンテーションは、他のブラウザーベンダーさんの HTML5 に対する先進的な発表に、うらやましいなぁと正直思ってしまいましたが、私の今回のミッションは、

「Internet Explorer 8 も (地味に) HTML 5 を (ちょっとは) サポートしてるんだぞ！」

ということを、みなさんに伝えることだったのですが。。。少しは達成できたでしょうか？

さて、話をした内容はともかく、DEMO は準備不足もあり、結局印象的だったのは他ブラウザとの Selectors API の実装とパフォーマンスだったりしたかも・・・？と思ってしまったので、ブログで補足しておこうかと。。。そして、もう一つ、お土産に何個か用意していた USB 水槽？は、「水を入れたら、数滴、洗剤を加えておいてください。そうすることで、水が腐って濁っていくのをいくらか防いでくれます」ということを付け足しておきます。

DEMO サイトは公開されていますので、誰でも確認できます。

Try it at http://ie8demos.com/

で、本来紹介したかったのは、次のようなことでした。

  1. DOM Storage
  2. Native JSON
  3. Mutable DOM Prototypes (これは省略しちゃったので、こちらでもうちょいフォローします。)
  4. Data URI (Not HTML5)
  5. AJAX Navigation (これは上記のサイトでも確認できるけど、もっとわかりやすい DEMO を後で UP します。)
  6. Cross Document Messaging (XDM)
  7. Cross Domain Requests
  8. Selectors API (上記サイトでも使ってますが別の DEMO サイトがわかりやすい)
  9. Online/Offline Event ハンドラ (これも上記サイトではなし。別の DEMO を使いました。)

では、それぞれ見ていきましょう。

１．DOM Storage (Web Storage)

  • Cookies は、いろんな制限がある。 (容量は 4k とか。DOM Storage は、10 MB/ドメイン, Max:100MB まで)
  • 2つのタイプのストレージがあります。
  • セッション ストア・・・それぞれのセッションに対し単一(ユニーク)であり、ブラウザ インスタンスにわたって共有することができる。
  • ローカルストア・・・ブラウザやセッションにまたがり、またセッション間で共有できる。
  • ストレージの場所 ： C:\Users\[ユーザー名]\AppData\LocalLow\Microsoft\Internet Explorer\DOMStore

(DEMO) ->フォーム内のデータは、すべて Local Storage にストアされいます。

２．Native JSON (Javascript Object Notation)

  • IE8 のパーサーは、いわゆる eval() を基にしているのではなくて、独自実装。json_parser.js と同じくらい安全で早い。
    • 今までの IE では、別途ライブラリを作ってそれを利用する必要があったが、IE8 では Native のライブラリがある。
  • JSON2 (JSON2.js) を互換性がある。。。が、JSON オブジェクトのプライベートあな実装が定義されている場合は、影響があるかも。
  • 対処方法は、既存のコードを Native JSON に合わせるか、Native JSON をオプトアウトしておく。

(DEMO) -> RENTAL フォームに入力して DOM Storage に保存する際、JavaScript で扱いやすくするために、フォームデータを JSON ストリングの配列にコンバートしている。例 ： PickUp Date に "1月22日" とした場合、value="{"pickUpDate":"1\u670822\u65e5",　…  という感じ。

３．Mutable DOM Prototypes

  • Internet Explorer 8 では、いくつかのエレメントはたまに必要なのになぁと思ってしまうような、プロパティやメソッドが存在しなかったりします。そんな時、Mutable DOM Prototypes は、プロパティやベースクラスレベルでほしいエレメントを加えることができるようにします。

(IE8 では、「JavaScript オブジェクト」のように、「DOM オブジェクト」へのプロトタイプと、setter/getter プロパティが利用可能になって、DOM オブジェクトに対する柔軟性と接続性が向上している、と MSDN には書いてあったはず。。。)

(DEMO) -> 今回の DEMO では、すべてのエレメントに対して "ValidInput" というプロパティを加えてあり、ValidInput が False した時、そのエレメントの見た目を変えるようにしています。(例えば、必須入力の欄に何も入っていなければ、その入力フォームのエレメントは赤色に表示させるとか。)
getElementByClassName (IE8 の Standard Mode ではこれが利用できなくなったのです。Selectors API 使ってってことなんですが。。。) という新しいメソッドを DOM に加えています。
フォームを埋めて、CONTINUE ボタンを押した時、checkRequired () が走り、すべての "required" クラスが付いたエレメントをリストアップして、入力されているかどうかを確認して、入っていないときは、テキストの Body の値を変えるということにしています。

４．Data URI (HTML5 ネタではないですが。。。)

  • HTML や CSS ファイルに小さなサイズのバイナリデータを URL に直接埋め込みたいと思った時に、Data URL は、データの管理性においてちょっと問題を引き起こす可能性がないわけではありませんが、便利に使えます。
  • 大抵は、Base64 円コーディングされて、データ自体はそのサイズが増大します。

(DEMO) -> 2つ目のタブの COMPACT Car の画像が、実は Data URI で埋め込まれたものになってます。

５．AJAX Navigation

  • AJAX Navigation は、Ajax アプリケーション上におけるユーザーのアクションを URL ベースで hash (配列) としてセットできます。
  • これによって、ユーザーは Ajax アプリケーション上でより簡単に URL をカット ＆ ペーストできたり、ブラウザーの戻る/進むボタンで、実行アクションをたどることができます。(初心者への配慮ができる。)

(DEMO1) -> ie8demos のサイトでは、レンタカーの予約画面を進めていくと、その切り替わる画面のタブごとにハッシュを、Step1, Step2, Step3 と作ってあり、ユーザーがタブをクリックしなくても、ブラウザのボタンで前に戻ったりすることができます。

(DEMO2) -> 別のデモ画面では、よくある Web Map ソフト上で Ajax で地図を拡大縮小などの操作をさせた時に、その操作に対してハッシュを作っておくことで、ユーザーがブラウザのボタンで行き来できるようにしてあります。

６．Cross Document Messaging (XDM)

  • XDM は、あるフレームと他(外側) のドキュメント内との間のメッセージのやり取りができます。
  • 例えば、インラインフレームがあるページがあったとして、そのページから、インラインフレーム内のページへデータを伝えることができます。
  • 情報そのものは、同一ドメイン内のリソースであることとが条件になります。

(DEMO) -> このデモサイトで、Step 3 の COMPARE PRICE のボタンの上に実は inLineFrameが存在しており、ここから同じドメイン内にある Quote.html を Widget として呼び出して、必要なデータをメイン画面から伝えている。

  1. InlineFrame 内で呼び出された Quote.html は、Listener として呼び出され、 Call されるのを待っている状態にしておきます。
  2. ユーザーが COMPARE PRICE ボタンをクリックすることで、line 122 にある、getRemoteQuotes() を呼び出して Call し、Quote.html を表示させます。
  • このデモの時に使用したツールは、IE 開発者ツールというもので、IE7 ではオプションツールとして MSDN からダウンロードが必要ですが、IE8 からはチェックしたいサイトを開いて F12 キーをたたくと起動する標準のツールとして実装されています。

７．Cross Domain Requests (XDR)

  • 昨今、Cross-Domain へのコミュニケーションは、AJAX 開発と Mush-up アプリにおいては完全にその一部と化しています。ドメインをまたぐデータのリクエストを作ることは、開発者は Cross-Site 攻撃を防ぎたいと思っているため、今日の Web 上ではチャレンジングなことのひとつになっています。
  • IE8 では、Cross-domain Data Request (XDR) を、新しい XDomainRequest オブジェクトを使って、"サーバー to サーバー" リクエストなしにシンプルに作ることができます。
  • さらにセキュリティを高めるために、XDRs は、相互同意(Mutual Consent) を Web ページとサーバー間に必要とします。
  • 開発者は、window オブジェクトから離れて、XDomainRequest オブジェクトを作ることで、Web ページの中に Cross-Domain リクエストを開始でき、特定のドメインにコネクションを Open することができます。
  • ブラウザーは特別な値を持ったオリジナルのヘッダーを送付することで、その対象とするドメインのサーバーからのデータをリクエストします。で、Access-Control-Allow-Origin ヘッダーを含むサーバーからのレスポンスが返ってきた時のみ、コネクションが確立されます。

(DEMO) -> 1033行目の "jsonPostData" で引き渡している。

８．Selectors API

  • Selectors API のデモは、Beta2 のセミナー用に作成したものでした。
    ですので、これから参照してみたい方は、MSDN の記事とサンプルを見ていただくことをお勧めします。
  • 一応、比較デモで使ったサンプルファイルをこちらに共有しておきます。
    うーん、読み込み用のデータは別ファイルにしてもよかったかもしれませんね～。

９．Online / Offline イベント ハンドラ

  • 今回のデモで使ったのは、MSDN にあるサンプルを流用したものです。
  • 一応、こちらに共有させていただきますが、元ネタを見たい方は、こちらの MSDN サイト (onOnline, onOffline)をどうぞ。

ーーーーーーーーーーーーーーー

イベントが終わって、W3C 慶応のメンバーの方と有志の方とで、日吉駅前の居酒屋で懇親会。
いろんな話が聞けて楽しかったです。Mike さんからは元 W3C の方 (すみません、まだ公開されていないようなので保留。) が Mix に登壇すると聞いて、ますます Mix10 に参加したくなったのですが、、、3月にラスベガスで開催される Mix10 では、セッションの前日に HTML5 の All Day (2 セッション; Part1of2 と Part2of2) Workshop が開催されるということで、参加したいけれど、この Workshop だけに参加するわけにもいかないだろうなぁ。。。

 
コメントする

投稿者: : 2010-01-22 投稿先 Internet Explorer

 

コメントを残す