Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2008年06月27日
メタ情報をXHTMLに埋め込むRDFa
フロントエンド・エンジニア 矢倉
6月20日に、RDFa構文仕様の勧告候補が公開されました。順調に進めば、今年中にも勧告されるのではないかと予想しています。
さて、勧告となってはいないものの、試験的にWeb標準仕様 日本語訳一覧にRDFaを導入してみました。今回はこのページをサンプルに、簡単なRDFaの解説をしようと思います。
RDFaとは
RDFaは、メタ情報をXHTMLで表現する仕様です。RDFをデータモデルに用いることで、より柔軟で多彩なメタ情報を埋め込むことができます。メタ情報を埋め込む方法は何通りかありますが、もっともシンプルなものは、従来のmeta/link要素による指定とほぼ変わりません。
たとえば、ページの説明を記述するとき、XHTMLやHTMLではこう記述します。
<meta name="description" content="ページの説明" />RDFaでは、新しく導入されたproperty属性を利用し、次のように記述します。
<meta property="dc:description" content="ページの説明" />name属性を併記し、検索エンジンにもRDFクライアントにも理解できるXHTMLとすることも可能です。
しかしながら、このようなシンプルな指定であれば、特にRDFaを利用するメリットを見出せません。RDFaは従来のmeta要素やlink要素と、どのような点において異なり、また優れているのでしょうか。
文書以外のリソースにもメタ情報を
meta要素やlink要素で指定できるのは、基本的に要素が指定されたHTML文書のメタ情報のみです。このため、他のページに関する情報や、人などのリソースについて、メタ情報を記述することはできません。
しかし、RDFaでは、当該文書以外のリソースについてもメタ情報を与えられるようになっています。
たとえば、日本語一覧のページにはページの作成者である私という「人」と、公開をしているミツエーリンクスという「組織」に関するメタ情報を記述しています。
<link rel="foaf:maker" resource="[_:myakura]" />
<meta about="[_:myakura]" property="foaf:name" content="矢倉 眞隆" /><link rel="dc:publisher" resource="[_:mitsue-links]" />
<meta about="[_:mitsue-links]" property="foaf:name" content="株式会社 ミツエーリンクス" />
<link about="[_:mitsue-links]" rel="foaf:homepage" href="http://www.mitsue.co.jp/" />
新しく導入されたresources属性とabout属性を利用し、「何に対するメタ情報なのか」を部分的に変更しています。
文書内の情報
RDFaで追加される属性は、head要素のみに限定されません。body要素内の情報についても利用可能です。日本語訳一覧はこれを利用して、原文と日本語訳の関係をマークアップしています。
<div about="http://standards.mitsue.co.jp/resources/w3c/TR/2008/WD-html5-diff-20080610/"
typeof="foaf:Document">
<h3>HTML 5 における HTML 4 からの変更点</h3>
<p rel="vtr:isTranslationOf">原文:
“<a href="http://www.w3.org/TR/2008/WD-html5-diff-20080610/">HTML 5
differences from HTML 4</a>”</p>
<p rel="vtr:prevVersion">旧版訳:
<a href="/resources/w3c/TR/2008/WD-html5-diff-20080122/">2008年1月22日版</a></p>
</div>文章にもマークアップを施すことにより、より意味のある情報を公開することができるようになります。
RDFaをサポートするツールやサービス
RDFaの策定は数年前から始まっており、いくつかのツールがすでに公開されています。W3CのValidatorも、XHTML+RDFaによる文書の検証を行うことができます。また、RDFを抽出するためのRDFa Distillerも公開されています。
サービスにおいても、先日公開されたYahoo!のSearchMonkeyが、microformatsとともにRDFaをサポートしています。
RDFa vs. microformats?
RDFaは柔軟にメタ情報をXHTML文書に埋め込むことができます。しかしながら、よりリッチな情報を埋め込もうとすればするほど、記述しなければならない要素や属性が増えてしまいます。また、RDFの基本や属性の使い方を学ぶ必要もあり、手間がかかってしまいます。
このため、RDFaはmicroformatsとよく比較されます。つい先日も、BBCがアクセシビリティ・ユーザビリティ上の懸念から、Webサイトで配信していたhCalendarの配信を中止したことで、「RDFa対microformats」という構図で論戦が行われました（“The War of the Worlds”）。
microformatsはRDFaのような正確性を完全に保証するわけではありませんが、充分に機能します。利用できる範囲においては、microformatsのほうが現時点ではより多くのメリットを享受できる可能性が高いと思われます。
しかし、RDFaとmicroformatsは排他的な関係にあるわけではありません。たとえば、microformatsで対応できる部分はそちらを利用し、microformatsにはない語彙がある場合はRDFaを利用することもできます。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年06月18日
6月前半のW3C
フロントエンド・エンジニア 矢倉
HTML 5の草案が公開
すでに「HTML 5の最新草案が公開」でお伝えしましたが、HTML5の新しい草案が6月10日に公開されました。
XHTML Modularization 1.1とXHTML Basic 1.1が勧告案に
XHTML Modularization 1.1とXHTML Basic 1.1が、ともに勧告案（Proposed Recommendation）として公開されました。ディレクタの承認がおりれば、勧告として公開されます。
XHTML Modularization 1.1は、XHTML 1.0の要素を機能ごとにモジュールとして定義し、体系化した仕様です。2001年に公開されたバージョン1.0のエラーを反映し、XML Schemaによるモジュール定義の追加、XFormsで定義されていたinputmode属性の追加が行われています。
XHTML Basic 1.1は、XHTML Modularizationで定義されるモジュールから構成される、多様な環境を想定したXHTMLです。携帯電話などのWebページ作成言語として利用されています。
Modularizationがほぼ完成したので、XHTML 1.1 (Second Edition)やXHTML 2.0が、ようやく進みそうです。
Web Applicationsワーキンググループの設立
これまで別々のグループとして活動していた、Web API WGとWeb Application Formats WGが統合され、Web Applications WGとしてスタートしました。XMLHttpRequest level 2やAccess-Controlなど、Webアプリケーションにとって便利な仕様が、今後はこのWebApps WGから公開されることになります。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年06月11日
HTML 5の最新草案が公開
フロントエンド・エンジニア 矢倉
HTMLワーキンググループより、HTML5の新しい草案が公開されました。多くの修正や変更、そして新しい機能の追加など、盛りだくさんの内容となっています。
新機能
いくつか気になったものを取り上げてみます。
MathMLのサポート
MathMLはXML構文のみでサポートされていましたが、HTML構文でも一部の機能を除きサポートされるようになりました。なお、同様にSVGのサポートも検討されています。
ol要素のreversed属性
項目に順序があるol要素ですが、逆順であることを記すためのreversed属性が追加されました。
ルビ
文字にふりがなを与えるruby要素が追加されました。現時点では、IEの実装に近いものとなっています。
iframeのサンドボックス機能
iframeのサンドボックス化を行う、sandbox属性が追加されました。
canvasのテキスト描画機能
これまでは図形のみの描画にとどまっていたcanvasですが、新たにテキストを描画するメソッドが追加されました。
showNotification()
新着情報ダイアログなどを提供するためのshowNotification()メソッドが追加されました。
新しい機能であることからどれも実装のないものですが、今後の展開に期待したいです。
ふたつの付属書
さて、HTML WGは付属書として、“HTML 5 differences from HTML 4”と“HTML 5 Publication Notes”というふたつの文書もあわせて公開しました。
「HTML5 differences～」は、HTML 4とどのような点で異なるかを解説する文書です。「HTML 5 Publication Notes」は、前回の草案から変更された箇所を、セクションごとに解説した文書です。
1月に「differences」の翻訳を行ったこともあり、今回もその更新版と「Publication Notes」の翻訳を公開しています。
「パブリケーション・ノート」は急ぎで訳したこともあり、引用文の訳を行えていませんが、概要をご理解いただければ幸いです。引用文については、今後取り組んでいく予定です。
HTML WGでは、引き続きコメントを受け付けています。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [1件]
2008年06月05日
IE8のモードスイッチ
フロントエンド・エンジニア 矢倉
IEBlogの“IE8 Beta 2 Coming in August”という記事にて、IE8 Beta 2が8月にリリースされるというアナウンスがありました。Beta 2ではCSS 2.1準拠に向けたバグ修正や、スクリプトのパフォーマンス向上が見込まれるようです。また、日本語を含む各言語版のBetaも配布されます。
さて、同じ記事にて「meta要素によるレンダリングモード指定の文書を公開しました。」という報告がありました。今回はこの“Defining Document Compatibility”という文書を参考に、改めてIE8のレンダリングモードについて解説したいと思います。
3つのレンダリングモード
IE8には3つのレンダリングモードが存在します。
- IE8モード
- CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。
- IE7モード
- IE7の標準準拠モードと同じ
- IE5モード
- IE7やIE6の互換モードと同じ
これまで「標準モード」、「互換モード」とされていた呼称が変更されていますが、IE7モード、IE5モードにおいて表示に関する変更はないと考えてよいでしょう。
どのモードでレンダリングされるかは、これまでのIEと同じく、DOCTYPEによって決定されます。
DOCTYPEスイッチで切り替わるのは、IE8モードとIE5モードです。IE6やIE7と同じように、適切なDOCTYPEを記述することで、より標準に準拠したレンダリングモードで表示されることになります。IE8の場合は、IE8モードが該当します。
「metaスイッチ」
互換性という観点から、IE8にはIE7モードが備わっています。しかし、DOCTYPEによる指定で、IE7モードを選択することはできません。このため、IE8では明示的にレンダリングモードを選択するための「metaスイッチ」が導入されました。
たとえば、次のようなmeta要素を記述することで、文書をIE7モードで表示させることができます。
<meta http-equiv="X-UA-Compatible" content="IE=7">metaによる指定はDOCTYPEを上書きするため、DOCTYPEが記述されていない文書でも、上記の指定をすることでIE7モードを適用させることができます。
選択できるモードは、IE7モードだけではありません。content属性の中にある「IE=○○」の値を書き換えることにより、各レンダリングモードを選択することができます。指定する主な値は次のとおりです。
IE=8- IE8モードで描画します。
IE=7- IE7モードで描画します。
IE=5- IE5モードで描画します。
IE=edge- 一番新しいエンジンで描画します。
IE=emulateIE7- IE7としてページを描画します。
現時点では、IE=edgeとIE=8に違いはありません。もしIE9がIE9モードを備えてリリースされた場合、IE=edgeを指定した文書はIE9モードでレンダリングされることになります。
「IE7スイッチ」
さて、五番目の「IE=emulateIE7」は、Beta 2より登場する新しい値のようです。一見IE=7との違いが分かりませんが、IE=7はIE7モードで強制的にレンダリングするのに対し、IE=emulateIE7の場合は、さらに文書のDOCTYPEをチェックした上で、IE7モードかIE5モードでレンダリングするのかを決定します。「IE7スイッチ」といったところでしょうか。
<!DOCTYPE html PUBLIC ...
<html ...>
<head>
<title>emulateIE7</title>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
</head>
...IE8で上記のHTMLを表示すると、DOCTYPEが記述されているためIE7モードで描画されます。DOCTYPEを取ってみると、IE5モードで表示されることになります。
モードの複数指定
metaスイッチには、複数のレンダリングモードを指定することができます。
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9">metaスイッチをサポートする今後のIEは、指定される値の中から、一番適したモードを選択します。上記の例ではIE7モードとIE9モードを選択していますが、IE8でその文書を表示させると、IE8モードではなくIE7モードでレンダリングすることになります。
しかし、複数のmeta要素を記述しても、最初の指定のみが有効になります。
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=8">この場合、IE8モードではなくIE7モードでレンダリングされます。
そのほか
モードスイッチはmeta要素による指定のほかに、HTTPヘッダにX-UA-Compatibleを指定することでも実現できます。また、どのモードでレンダリングしているかを知るために、document.documentModeプロパティが用意されています。
より詳しいDOCTYPEとレンダリングモードの関係など、ここで触れていない情報については、次のスライドや記事が参考になります。
- CSS Nite公式ブログの「CSS Nite in Shinjukuフォローアップ（2）」で公開されているPDF資料（17ページより）
- SummerWind - IE8のレンダリングモードに関するまとめ
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年06月03日
CSS 2.1の勧告はいつ？
フロントエンド・エンジニア 矢倉
現在のCSS WGの活動期限は今年の夏までとなっています。このため、最近は夏からの新しいCSS WGに向けて作業しています。その一環なのか、先週「どのCSS仕様がどこまで進むことができるか」について議論されていたようです。
CSS WG Blogで先ほど公開された記事では、2010年の活動終了時点でのステータスがまとめられています。
勧告予定とされている仕様は次のとおりです。
- CSS 名前空間 (CSS Namespaces)
- セレクタ (Selectors)
- カラー (Color)
- メディアクエリー (Media Queries)
これらは、特にOperaやSafariで実装度合いの高い仕様です。よほど大きな問題がなければ、期間中の勧告は間違いないと考えています。楽しみです。
さて、このリストの中にCSS 2.1が入っていません。CSS 2.1は勧告にならないのでしょうか？
これには、W3Cの策定プロセスと、勧告になるための条件が関係しているのです。
現在のW3Cプロセスでは、実装との剥離が少なくなるよう、「仕様の各機能を完全にサポートする実装が、2つ以上存在していること」という要件が課せられています。
CSS 2.1はひとつの巨大な仕様です。このため、各機能に対し、サポートしている実装が2つ以上という条件を満たすのは非常に難しいことです。一方、CSSモジュールは機能ごとに分割されているため、勧告になるための条件を早く満たすことができます。このため、CSS 2.1よりも早くCSS3モジュールが勧告されるという、奇妙な事態に陥っているのです。
とはいえ、CSS 2.1は現段階でも充分に安定しているといえます。勧告にまだ時間がかかるのは残念ですが、より精度の高い仕様として仕上げてほしいなあと思います。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
