ミツエーリンクス

Web標準Blog

Home > メソッド > Web標準Blog

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

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

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlcstandardsをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

2010年09月01日

2010年8月のW3C

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

XMLHttpRequest勧告候補

8/3付けで、XMLHttpRequest仕様が勧告候補として公開されました。

オブジェクトの実装状況は申し分ないでしょうから、テストスイートの作成と検証が終われば、とくに問題なく勧告に向かうのではないでしょうか。

Web Performance WG

8/19に、Web Performance WGの設立がアナウンスされました。

設立が検討されている旨は先々月の記事で紹介しましたが、このたび晴れてWGとして活動がスタートしました。

Charterによると、策定する仕様は次の3つです。

Navigation TimingとResource TimingはもともとWeb Timingというひとつの仕様で定義されていましたが、仕様と実装ともにNavigationTimingインターフェースの進みが早かったことから仕様の分割に至ったようです。

実装も始まっており、MicrosoftがIE9で、Chromeは6から機能が利用できるようです。Firefoxについては、該当のバグを読む限り、Firefox 4のfeature freezeに間に合うかどうかという状態のようです。

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

2010年08月06日

2010年7月のW3C

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

Mobile Web Application Best Practices

7月13日付で、Mobile Web Best Practices WGより、Mobile Web Application Best Practicesの最終草案が公開されました。

MWBP WGはMobile Web Best Practicesを発表していますが、この文書は「モバイル端末でのWebブラウジング」を想定したものでした。

Mobile Web Application Best Practicesは「モバイル端末とWebアプリケーション開発」をそのスコープとしており、HTML5のAppCacheやWeb Storageの利用、HTTPリクエスト数を減らすことなどに言及しています。

CORS草案

7月27日付で、WebApps WGよりCORS (Cross-Origin Resource Sharing)の草案が公開されました。

CSSスナップショット最終草案

7月27日付けで、CSS WGよりCSS Snapshot 2007の最終草案が公開されました。

HTMLのstyle属性などからCSSを利用する際の要件を定めるCSS Styling Attributes Level 1が1月に公開されたこともあり、それをスナップショットに組み込んだことが変更になります。

日本語訳を更新していますので、そちらもご覧ください。

メディアクエリー勧告候補

7月27日付けで、CSS WGより新しいメディアクエリーの勧告候補が公開されました。

勧告候補の更新ということで、仕様に大きな変更は行われていません。今回の勧告候補の公開に合わせて、テストスイートのβ版も公開されています。

こちらも新しい仕様にあわせ、日本語訳を更新しています。

WOFF草案

7月27日付で、WebFonts WGよりWOFF仕様の草案が公開されました。

昨年より編集者ドラフトとして存在しており、またW3C Member Submissionとして提出されてはいましたが、草案としての公開は初めてになります。

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

2010年08月03日

SwapSkillsでMicrodataについてお話しました

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

7月31日に行われたSwapSkills 2010 vol.6にて、Microdataについて講演させていただきました。

Microdataの簡単な概要と書き方、そしてMicrodataに対応するGoogleのRich Snippetsに関して紹介しています。スライドも公開していますので、そちらもご覧ください。

なお、すべての書き方を網羅しているわけではなく、またDOM APIについても「仕様で定義されている」程度の言及しかしていません。

boolean属性とXML

イベントのなかで、曖昧に答えてしまった質問がありましたので、改めて調べました。

質問は、「スライド中の例でitemscopeには属性値が書かれていないが、XMLで書くとしたら値はどうなるか。itemscope="itemscope"とすればよいのか。」といったものでした。

仕様のなかで、itemscopeは“boolean attribute”にカテゴライズされています。仕様書の定義を簡単にまとめると、次のようになります。

ですので、XHTML5でMicrodataを利用したい場合は、itemscope="" もしくは itemscope="itemscope" と記述することになります。

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

2010年07月23日

Web Performance WGとWeb Notification WG

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

HTML WGやCSS WG, WebApps WGをはじめ、W3Cの多くのWGは複数の仕様を策定しています。グループがカバーする範囲がとても広いことが、仕様の数が増えることにつながっています。

しかし、Geolocation WGやWeb Fonts WGなど、活動範囲を狭めたグループも存在します。現在設立が検討されているWeb Performance WGとWeb Notification WGは、スコープを絞って仕様を短期間の間で策定することを目指しているようです。

Web Performance WGは、Webアプリケーションの開発において重要なパフォーマンス計測のための仕様を作るWGです。Web Timingという編集者ドラフトの仕様がWebApps WGで提案されていますが、こちらを参考に仕様の策定が検討されています。

Web TimingはIE9でも試験的に実装されているようです。

構想段階ではありますが、映像や音声についてもパフォーマンスが問題になることから、グループとして何か活動することも視野に入れているようです。

Web Notification WGは、バルーンやGrowlなど、デスクトップに情報を通知するためのAPIを策定するグループです。Google Chromeの拡張として内部的に実装されたAPIがすでにWeb Notificationsとして編集者ドラフト段階にありますが、単純な通知APIに絞ることなどを含め、プラットフォーム非依存なAPIを策定していくことが検討されています。

どちらの活動についても、すでに専用のメーリングリストが設けられています。提案されている仕様はWebApps WGで議論が行われていましたが、それを独立したWGで集中して作業させたいという意図があるのでしょう。

ベンダーの動きも活発になっていますし、今後はこういった機能を絞った小さなグループでの策定が増えていくのかもしれません。

追記 (2010-08-20)：Web Performance WGは8月19日付けで立ち上げが発表されました。

Co-chairを務めるMicrosoftのJason Weberが、WGの立ち上げに関しエントリをIEBlogに公開しています。

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

2010年07月16日

ベンダー接頭辞は使ってもよいか

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

ベンダー接頭辞つきのプロパティについて、質問をいただきました。

最近ではCSS3を使用したデザインパターンが数多く紹介されています。ボタン要素など簡単なものであれば、画像を用意する事なく表現が出来ると思います。

しかしソースレベルでは(-webkit-)(-moz-)などの接頭辞をつけないとブラウザがうまく処理を行えない現状としては、接頭辞がついたものを業務レベルで実装するべきではないのでしょうか？

※一般的に接頭辞を使用している要素などは納品データ内にあるべきでないのでしょうか？

使うべきでない、あるべきでないとは思いませんが、利用には細心の注意をはらう必要があるでしょう。

使える？避けるべき？

まず、CSS仕様には、ベンダー接頭辞の利用は避けるべき（Authors should avoid vendor-specific extensions）と書かれています。仕様が安定して接頭辞を外す段階になったら、使い始めることができるという認識です。

しかし、仕様が安定してから実装に反映されるまで、さらに製品としてリリースされるまでには時間がかかります。たとえば、WebKitは接頭辞なしのborder-radiusを昨年7月に実装しましたが、そのコードが製品に反映されたのは今年1月のChrome 4が最初で、Safariにおいては6月のSafari 5までかかってしまいました。

とはいえ、border-radiusは昨年夏の段階で仕様も安定していました。接頭辞つきで実装されているものの安定しているプロパティもありますから、接頭辞つきプロパティを一概に「避けるべき」というのは実利的には思えません。

その機能が安定していると判断できれば、ベンダー接頭辞つきのプロパティを書くことに大きな問題はないと思っています。

接頭辞なしのプロパティを忘れないこと

ただし、この時大事なのが、接頭辞のない正式なプロパティも含めることです。「いまは機能しないから」と言った理由からか、接頭辞なしのプロパティを省いたWebページやサンプルに出くわすことがありますが、これにはいくつか問題があります。

まず、特定のエンジンでしか機能しないという問題があります。先日リリースされたOpera 10.60やIE9 Platform PreviewはCSS3 Backgrounds & Bordersの多くのプロパティに対応していますが、それらは接頭辞のない正式なプロパティとして実装されています。

ところが、ページのソースコードに-webkit-border-radiusや-moz-border-radiusだけしか書かれていないサンプルが意外に多いのです。これでは同等の機能を備えているにも関わらず、OperaとIE9ではその恩恵にあずかれません。

もうひとつの問題は、正式なプロパティを実装したあと、接頭辞つきプロパティのサポートが行われなくなることです。

プロパティが標準化されていれば、将来的に接頭辞は省かれた状態で実装されます。このとき、ベンダーによっては接頭辞付きのプロパティを引き続きサポートするか、それとも打ち切るかという選択ができます。

たとえば、WebKitは先程のborder-radiusをはじめ、多くのプロパティで -webkit-のつくプロパティも引き続きサポートしています。Microsoftも後方互換を非常に重視していますから、-ms-のついたプロパティを今後もサポートする可能性は非常に高いと思われます。

いっぽう、Mozillaは接頭辞つきのプロパティについて、早くからサポートを打ち切ることを考えているようです。background-originの接頭辞を外すバグの中で、開発者のDavid Baronが「製作者が接頭辞つきのプロパティを利用するのであれば、次のように接頭辞なしのプロパティも書いているはずだという立場をとっている。Web上にあるGecko固有の内容は最小化したい。」と語っています。

すべての接頭辞つきプロパティに対し同様の対応を行えるかは難しいところでしょう。たとえば、border-radiusのサブプロパティに、ひとつの角を丸めるプロパティ (-moz-border-top-right-radius など) がありますが、標準化の過程でプロパティ名や構文が変更されてしまいました。Geckoは古い構文のプロパティ (-moz-border-radius-topright) のみを以前から実装しているので、接頭辞を外すにせよ -moz-opacity のようにある程度の期間を設けてる対応を行うかもしれません。

接頭辞つきプロパティがサポートされ続けたとしても、接頭辞への依存は避けるべきです。接頭辞つきのプロパティを利用するのであれば、対応する正式なプロパティもあわせて記述すべきというのが基本的な見解です。

安定度合いを知るには

では、プロパティの安定度合いははどうやって判断すればよいのでしょうか。

ひとつ参考になるのが、仕様書のステータスです。接頭辞は仕様が勧告候補（仕様が固まり、実装を呼びかける段階）になった際に省くとされていますから、近々で勧告候補になっている仕様であれば、機能が安定しているとおおむね考えてよいでしょう。

また、CSS WGでもベンダー接頭辞を省くタイミングについてベンダーと連携し、プロパティごとの安定度を仕様書に盛り込むことなどを検討しているようです。そうなると、安定度合いを知るとても良いソースになります。

使うことを考えるには、仕様だけでなく実装状況についても知る必要があります。以下は各ベンダーの出している情報になります。

Safari CSS Reference
SafariのCSSリファレンスになります。プロパティには「Support Level」という項目があり、CSS3絡みでは「Stable CSS 3」「Experimental CSS 3」という段階があります。Stableはすでに接頭辞なしで実装されているものですので、接頭辞を書く必要はありません。Experimentalは接頭辞がついているもので、利用するのであれば正式なプロパティも併記すべきでしょう。
Mozilla CSS support chart
FirefoxでサポートされるCSSの機能になります。一番右の列に「-moz-」という文字があれば、基本的に接頭辞付きで実装されているものになります。
Web specifications support in Opera
OperaのWeb標準サポート状況に関するページです。英語サイトでは最新版の10.60に相当するPresto 2.6でのサポート状況が公開されています。CSS3についてはモジュールごとにページが用意されているなどかなり細かく、また接頭辞に関するページも用意され、そこでは接頭辞なしのプロパティを併記するようにとも書かれています。
CSS Compatibility and Internet Explorer
IEに関するドキュメンテーションです。IE9への言及はまだありませんが、IE8の際はベータ版が公開されたときにこの表がアップデートされていましたから、ベータ版を待ちましょう。

すこし厄介なのが、仕様が初期の段階で安定していないにもかかわらず、試験実装のあるプロパティです。ベンダー固有の拡張を標準化する際に良く起こりますが、CSS Image Valuesで定義される予定の画像グラデーションやCSS Animationsなどが当てはまるでしょうか。

このような仕様については、値だけでなくプロパティ名に変更が起こる可能性があります。ですから、接頭辞なしのプロパティを書くかどうかは難しいところです。しかし、実装も多くありませんから、接頭辞なしがどうこうというよりは、その機能に依存しないコンテンツ作りを心がることをまず考えましょう。

まとめ

長くなりましたが、まとめると

3番目については、情報を集めるのがまだまだ難しいというのが現状だと思います。これについては、情報をまとめる場所が必要だと考えています。

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

2010年07月05日

2010年6月のW3C

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

CSS3 Backgrounds & Borders 最終草案

CSS WGより、CSS3 Backgrounds & Bordersの最終草案が6月12日付で公開されました。

透過した画像を持つborder-imageとの兼ね合いについて検討する必要があったことから外されていたbox-shadowがふたたび追加されました（透過画像についての言及は省かれ、単純にボックスに影を落とす機能に限定されました）。

他にもいくつかの変更が行われ、仕様が最終草案に差し戻されました。次の公開時には、再び勧告候補になっているものと思われます。

SVG 1.1 Second Editionの最終草案

SVG WGより、6月22日付でSVG 1.1 Second Editionの最終草案が公開されました。

HTML5の更新

先週の投稿ですでにお伝えしましたが、HTML5と関連仕様が6月24日付で更新されました。

CSS 2.1の現状

W3C Blogに、CSS WGのco-chairであるDaniel GlazmanがCSS 2.1の現状について記事を投稿しています。

現場について、要点がいくつか書かれています。大まかに訳すと次のようになります。

8月にはF2Fミーティングがあるようなので、そこで大きな課題が解決されれば、CSS 2.1とセレクタ仕様の勧告がより具体的に見えてくるでしょう。

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

2010年06月29日

HTML5の更新：代替テキスト、Polyglotマークアップ草案が追加

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

24日付けで、HTML5関連草案が更新されました。また、新たにふたつの草案が公開されました。

これまで公開されていた草案については、HTML5仕様の更新に基づくアップデートが主な変更点になります。HTML5 differences from HTML4のchangelogから、気になったものを抜き出してみました。

HTML+RDFaは、先日公開されたRDFa Core 1.1に準じたものとなりました。HTML 4.01にRDFaの属性を組み込んだDTDも検証目的として用意されています。

代替テキストのテクニックと“Polyglot HTML”

新しく公開されたHTML5: Techniques for providing useful text alternativesでは、さまざまな条件のもと適切な代替テキストを与えるための指針や要件を記載しています。将来的にはHTML5の代替テキストに関するセクションを置き換える目的で作業が進められています。

もうひとつのPolyglot Markup: HTML-Compatible XHTML Documentsは、先日「HTML/XHTML Compatibility Authoring Guidelines」で触れた互換性ガイドラインになります。名称が変更されましたが、文書の目的は変わっていません。

HTML5や関連仕様が実際に使われることが増えてきました。ですから、制作者・開発者向けのドキュメントへのニーズが高まってくるでしょう。現在はリファレンスとして使う文書が多いですが、今後はalt-techniquesのように考え方を伝える文書が重要になってくるのではないでしょうか。WGの成果物としても、リファレンス型でない文書の方がより望ましいのではないかと感じています。

日本語訳

いつもの変更点の更新と、Polyglotマークアップの訳を公開しました。

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

関連情報

バックナンバー

RSS1.0による
最新記事一覧

RSS1.0による最新記事のご案内

プライバシー&サイトポリシーCopyright (c) 2010 Mitsue-Links Co.,Ltd. All Rights Reserved.

Web制作、ホームページ作成、Flash制作：Webサイト構築、Webサイト運用：ブロードバンドコンテンツ（音声制作、動画制作）：システム開発、Webマーケティング、Webブランディング、Webコンサルティング・・＞のWeb Integrationならミツエーリンクスにお任せください。