2010年1月 | Web標準Blog | ミツエーリンクス

Home > メソッド > Web標準Blog > 2010年1月

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。

2010年1月27日

第一回HTML5 Japanese IG F2Fが終了しました

フロントエンド・エンジニア矢倉

先週金曜日に、HTML5 Japanese IGのF2Fが慶應義塾大学日吉キャンパスにて行われました。110人もの方にご参加いただき、盛況のうちに終了しました。

今回はOpera, Mozilla, Microsoft, Googleの方をお招きし、HTML5や関連仕様についてお話していただきました。現時点で、次のスライドが公開されています。

また、参加された方のTwitterのログやBlogエントリでも、当日の様子をご覧いただけます。

今後もこういった催しを行うことを検討しています。ぜひHTML5 Japanese IGにご参加いただき、HTML5に関する意見・質問などを寄せていただけたらと思います。

恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]

2010年1月18日

HTML5 Japanese IG F2F開催のお知らせ

フロントエンド・エンジニア矢倉

昨年のおわりに活動がスタートしたHTML5 Japanese IGですが、今週金曜日にFace-to-Faceミーティングを開催することになりました。慶應義塾大学日吉キャンパスにて、17:30より始まります。

2010-01-22 第一回ミーティング

今回はOpera, Mozilla, Microsoft, Googleより人をお招きし、新しい技術などのデモや説明をしていただきます。参加をご希望の方は、上記ページの案内に従ってメールを送信していただければと思います。

恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]

2010年1月15日

HTML5でアクセシブルな字幕付きビデオを

フロントエンド・エンジニア矢倉

OperaでWebエバンジェリストを努めるBruce Lawsonが、「アクセシブルなHTML5のビデオ」という記事を実装方法とともに紹介しています。

Accessible HTML5 Video with JavaScripted captions
デモ：“HTML5 Video with JavaScripted synchronised captions: demo”
(video要素とOgg Theoraをサポートするブラウザーが必要です)

`video`のアクセシビリティ

video要素やaudio要素のアクセシビリティは、動画や音声にデータとして情報を含む事が望ましいとされています。ただ、それが難しい場合のことを考えて、このデモではビデオの字幕をページ内に記述し、それをビデオの上に重ねるという手法で字幕を表示させています（JavaScriptが有効でない環境では、トランスクリプトが表示されます）。

タイムシートはカスタムデータ属性で

さて、ビデオの内容もそうなのですが、このデモでなによりユニークなのはタイムシート情報をキャプションを囲むspan要素に持たせているところです。

HTML5にはアプリケーション作者や文書作成者が独自の情報を埋め込める「カスタムデータ属性」が用意されており、デモではこれを利用しキャプションに対応する動画の開始時間と終了時間を埋め込んでいます。

カスタムデータは、data-***というかたちで要素に埋めこめます。デモのソースコードを抜き出してみましょう。

<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein ...
<span data-begin=6 data-end=9>in a very famous town that you're too ...
<span data-begin=9.5 data-end=11.5>Anyway, today we're going to talk ...
<span data-begin=12 data-end=15>A lot of people are worried about ...

HTML5では、埋め込んだ情報はelement.datalist.***から取得できると定義されているので、この場合はspan.datalist.begin/span.datalist.endでデータにアクセスできる事になります。しかし、現時点でこのカスタムデータ属性を実装しているブラウザーがないことから、デモでは属性の名前から値をとっています。

そして、取得したデータに該当する再生時間になったら、キャプションを表示する箇所にそのテキストを挿入するという仕組みです。

videoのアクセシビリティやカスタムデータ属性についてはまだ議論中なのですが、とても面白いデモだなと思いました。

恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]

2010年1月 6日

2009年12月のW3C

フロントエンド・エンジニア矢倉

2010年になりました。今年もWeb標準Blogをよろしくお願いいたします。

WAI-ARIA草案

12月15日付で、WAI (Web Accessibility Initiative) のProtocols and Formats WGより、WAI-ARIAの草案が公開されました。オーサリングに関する文書もあわせて更新されています。

昨年2月に最終草案が更新されましたが、多くのコメントがよせられたこともあり、草案に戻っての公開となっています。

CSS3セレクターの勧告案と、2モジュールの勧告候補

「CSS3セレクターの勧告案が公開」で取り上げましたが、CSS WGよりCSS3セレクターの勧告案が12月15日付で公開されました。

Selectors Level 3

また、12月17日付でCSS3 Backgrounds & Bordersと、CSS3 Multi-column Layoutの勧告候補も公開されています。

Selectors API Level 1勧告候補

Web Applications WGより、Selectors API Level 1の勧告候補が公開されました。

Selectors API Level 1

セレクター API Level 1 (日本語訳)

名称にLevel 1がつけられたのは、Level 2が検討中という理由があるようです。

すべての主要ブラウザーの最新版で対応していますので、テストスイートの作成と検証が行われれば勧告になるのにそれほど時間はかからないでしょう。

HTML5関連仕様の最終草案と草案

同じくWebApps WGより同日付で、Web Storage, Web Workers, Server-Sent Eventsの最終草案が公開されました。

Web Sockets APIとWeb SQL Databaseについては、草案の更新のみにとどまっています。

このうち、Web SQL Databaseは今後の策定が実質的に停止する旨が仕様書に書かれました。これは、仕様が利用するSQLの構文についてベンダーの合意が得られなかったことが原因です。とはいえ、データベース機能についてはそのニーズがあることから、WebApps WGは現在、Indexed Database APIという別の仕様を策定しています。