サイト内検索

html5 を使ったブログのデザイン

この記事は、html5doctor に掲載されている記事「Designing a blog with html5」を日本語訳したものです。この記事では、ブログサイトを例にとって、著者が実際に HTML5 の新要素をどのように使ったかを、理由も添えて、解説してくれます。HTML5 マークアップのケーススタディとして、とても有益な記事です。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

html5 を使ったブログのデザイン

この記事は、Opera Web エバンジェリストの Bruce Lawson 氏によって投稿された 2 つの記事の訂正バージョンで、許可を受けて再投稿したものです。All rights reserved.

HTML5 のフィーチャーセットには、簡単にインタラクティブなウェブページを開発できる JavaScript API が数多く含まれている。しかし、あなたの従来型のウェブ 1.0 のページにセマンティクスを加えられるような新しい要素がいろいろある。これらを探求するために、ブログのマークアップを見ていこう。

まず、私たちが最初にやることは、ページの広範囲にわたる構造をマークアップする header, footer, and nav 要素を使うことだ。私たちは、新しいデータ型を使うことで、ブログ・コメント・フォームをもっとスマートにすることができるだろう。そして、HTML5 対応ブラウザーなら、それに内蔵のバリデーションを利用できるようになるだろう。

それから、私たちはページの中心部でいくつか作業をすることになる。HTML5 の article 要素を使って、ブログ投稿やコメントをもっとうまくマークアップするのだ。そして、CMS 駆動型サイトで、アクセスしやすく階層化された見出しを持つ構造にするために、section 要素をどのように使うのかをご覧いただく。ブログは時系列を持つため、私たちは、HTML5 が日付と時刻を表すために何をもたらしてくれるのかを見ることができるだろう。

では、電話の受話器を置いて、紅茶を入れて、さぁ、はじめよう。

DOCTYPE をセットする

HTML5 は、兄弟の XHTML5 ではなくプレーンな HTML として使うとき、DOCTYPE は必要ない。しかし、すべてのブラウザーは、DOCTYPE がないと、Quirksmode に入ってしまう。しかし、そうしたくはないだろう:HTML5 と Quirksmode の衝突は、物質と反物質が出会ったのと似ている。現実反転が起こって、あなたの下着は火を吹くことになるだろう。

あなたは、もう警告を受けた。だから、ドキュメントの 1 行目には 、<!DOCTYPE html> を入れなければならないのだ。

HTML5 を "使っている" サイトがいくつかある。実際には、既存のコードを取ってきて、DOCTYPE を変更しただけだ。もし、妥当でセマンティックなコードを使ってきたのなら、それでもいいのだ。HTML5 は、妥当な HTML 4.01 にとても似ているからだ。Eric Meyer は小さな違いを述べている。それは、"イメージのサブミットで value 属性を許可されていない" といったことだ。そして、言語の間にはちょっとした違いがあるものだが、それは HTML 5 differences from HTML 4 にまとめられている。

しかし、私は、ただ単に、自分の既存のコードのバッジを付け替かえたいというわけではない。今すぐに、新たな構造化要素を使いたいのだ。

新たな構造化要素を使う

私のブログは、他の多くのブログのように、 <div id="header"> でヘッダーを、<div id="footer"> でフッタを、いくつかの記事("content" といわれる領域 <div id="content"> で囲んでいる)、そして、いくらかのナビゲーション("sidebar" といわれる領域 <div id="sidebar"> で囲んでいる)を表示している。ウェブ上のほとんどのサイトはよく似た構造を持つが、これらの領域を、"branding", "info", "menu" と命名したり、母国語の単語で表したりしている。

これらはページの中では全く違う役割を果たしているにもかかわらず、マークアップでは、すべてに一般的な div を使っている。HTML4 では、これらをコーディングする方法が他になかったからだ。HTML5 には、これらの論理領域を区別するために新要素が導入されている:header, nav, footer などだ。(A List Apart で Lachlan Hunt がこれに関してもっと詳しい記事を書いている:A Preview of HTML 5

大きな狙いとしては、この構造を置き換えることだ:

structure chart before redesign

置き換えるとこうなる:

structure chart after redesign

HTML を div から新要素に置き換えるのは簡単なことだ。私が唯一悩んだことは、サイドバーのマークアップに使う要素を決めることだった。これは、サイト全体のナビゲーションだけでなく、検索フィールドや "奥付" 情報も含んでいるからだ。私は aside 要素を使わないことにした。aside 要素は "その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、コンテンツから分離されたものとして見なすことができます。" と仕様で言っているからだ。しかし、aside 要素が表すものは、やはり、ナビゲーションというよりかはコンテンツだ。だから、私は、最も適したものとして nav 要素を使うことにした。

私は、メインコンテンツを section 要素の中に入れた(以前はそれを div にしていた)。section は仕様でこう定義されている

section 要素は、一般的なドキュメント・セクションやアプリケーション・セクションを表します。セクションとは、この文脈においては、コンテンツの主題をグループ化するものです。通常はヘッダーを、場合によってはフッターを伴います。

注意:私は、section 要素の中に、コンテンツ全体を入れることは、もう推奨していない。div 要素を使うことを提案する。適切な section の利用についても読んでほしい。

この場合、"一般的なドキュメントのセクション" は、メインコンテンツのそれのことだ。私は、スキップ・リンク機能が動作するように、id はそのままにした。しかし、将来的には、支援テクノロジーによって、最初の sectionarticle に人々を自動的に誘導する方法が提供されると思う。

私の仲間である HTML5 doctor の Remy Sharp も、もし div のままなら、JavaScript を無効にした Internet Explorer でも div にスタイルを適用できるが、他のコンテンツはそうならないので、読めるサイトにするには相当苦労する、と言っている。

新たに導入された form 属性

ページの主たる構造的な項目と同様に、私は、コメントフォームで、input 要素にいくつかの新しい属性を加えた。

HTML5 は、哲学的な純粋性を考慮しているというよりかは、ディベロッパーが実際に何をするのかを考慮した設計となっている。そして、それは、新たに導入された属性ではっきりと現れてる。これは、JavaScript でバリデーションのルーチンを再発明しているディベロッパーによって今でもなされている多くの作業を、ブラウザーが引き継ぐことを意味している(フォームの機能の拡張が、HTML5 仕様策定を着手した理由だった)。

だから、私は、コメントのメールアドレス入力フィールドを input type="email" に修正した。これは、ユーザーがフォームを送信するとき、HTML5 対応ブラウザーは、JavaScript は一切使わないで、内蔵のバリデーションのルーチンを使って、それが正しいフォーマットかをチェックすることを意味する。Opera の最新バージョンでチェックしてほしい。執筆時点(2009 年 6 月)で完全に実装しているのは Opera だけだ。ユーザーに分かるように、入力フィールドに "メール" アイコンが付け足されることに注目してほしい。

新たに導入された input のタイプによって呼び出される類似の入力バリデーションのルーチンが他にもある。url(ユーザーのウェブのアドレスを求めるフィールドに使う)や、numberpattern だ。pattern は、任意の正規表現を使って入力を評価できる。

さらに良い例は、input type="date" だ。ユーザーが入力フィールドにフォーカスすると、カレンダー・ウィジット(デートピッカー)がポップアップする。あなたはデートピッカーをテストできるが、ここに Opera 9.6 のスクリーンショットを掲載しておく:

date picker pops up next to input field

私は、コメント投稿者の名前とメールアドレスの input と、コメント入力欄の textarea に、とても便利な新属性を使った。それは type="required" だ。これは、フィールドが空のままだったら、送信時にメッセージを表示する。ブラウザーのローカライゼーションが違えば、それに応じたメッセージが表示される必要があるだろうが、(今のところ)ディベロッパー側でそのメッセージをカスタマイズすることはできない。

red-bordered browser message 'You have to specify a value'

この新たなフォームの拡張の利点は、既存の要素に新属性を加えるだけ、という点だ。古いブラウザーを使っている人には、ただ単に、旧来の input フィールドに見えるだけだ。

スクリーンリーダーとHTML5 について

スクリーンリーダーは、このような新しいインタラクションに対して準備してくれることを期待している。私は、HTML5 グループに、公式にスクリーンリーダーのベンダーを招いて、仕様策定に参加してもらうよう、依頼している。ただ、私の知る限り、全く進んでいないようだ。

新要素のレイアウト

新要素をレイアウトするのは、さほど難しいことではない。IE 以外のブラウザーでは、CSS を使って何でもレイアウトできる。意味のない要素でもレイアウト可能だ。ひとつ分かったことは、現在のブラウザーは、常にサポートが改善されているとはいえ、これらの要素の "知識" を全く持っていない、ということだ。

すべてのブラウザーは、それらが "知っている" 要素に対してデフォルトのセッティング情報を持っている。padding や margin はどれくらいにするのか、ブロックかインラインのどちらで表示するのか、といったセッティング情報だ(デフォルト・スタイルシートのサンプルはこちら)。CSS で書き換えられない限り、これらのデフォルトが適用される。しかし、ブラウザーは、header, nav などを知らないため、それらにデフォルトを適用しないのだ。

私は、明示的にブラウザーに指定しないと、恐ろしく変になるレンダリングを見つけた。

header, footer, nav, article {display:block;}

IE のレイアウト

IE で HTML5 のページをスタイリングすることに関して、ひとつ分かったことがある。スタイリングが機能しないのだ。あなたは、JavaScript のハック document.createElement('element name') を使えば、かなり簡単に、強制的にスタイリングすることができるようになる。(Lachlan Hunt が、なぜ IE でこれが必要なのかについてその理由を説明している)

ご参考までに、Remy Sharp が HTML5 有効にするスクリプトについて書いたのだが、私は、それをヘッダーの中で使い、認識されない要素すべてをまとめて認識されるようにした。

しかし、はっきりさせておこう:これは、あなたの IE ユーザーが JavaScript を有効にしていなかったら、機能しない。そのようなユーザーがどれくらいいるのかが、あなたが決心するにあたり大事なことになる。ただ、実質的に、ドラッグ & ドロップといった HTML5 の新しく導入された "Ajax" 風の機能から多くの恩恵を受けるサイトは、今のところ、JavaScript なしには動く見込みはないサイトだ、と私は思うのだ。

Firefox 2 と Camino 1 のレイアウト

Firefox 2 と Camino 1 はどちらも Gecko 1.9 を使っているが、これはバグを抱えており、XHTML としてページを提供しないと、相当に不機嫌になる。(考えてみてほしい。現実反転が起こるのは間違いない。あなたは、どれくらいおかしなことになるか分かるはずだ。)しかし、Firefox や Camino のユーザーは頻繁にアップグレードする。Firefox はバージョン 3 になり、Camino 2 ベータがリリースされた。だから、この問題は、まもなく収まるだろう。(詳細は、Remy Sharp の HTML5 を IE や Firefox 2 でも使えるようにする方法を読んでほしい)

新たに導入された構造化要素は何の役に立つのか?

これらの要素は、ページにセマンティクスを加えてくれる。ブラウザーは、あなたのサイトのどの領域がヘッダーやフッターなのか、今はもう分かっているはずだ。なぜなら、headerfooter 要素があるからだ。しかし、div 要素には、“branding” とか “legal” と名付けたりしているだろう。“en-tete” とか “pied-de-page”、なかには、“kopfzeile” とか “fusszeile“ なんてのもあるだろう。

でも、どうすればいいのか

Robin Berjon が、それを A List Apart のコメントで分かりやすく説明している:

ウェブコミュニティの本当に多くのみなさんが、"セマンティクスは魅力的だ。そして、あなたに甘い汁を吸わせてくれるだろう" という話に同意してくれた。たぶん、これは本当だ。しかし、あなたが少しでも深く掘り下げ始めたら、実際には、その理由をはっきり言える人はほとんどいないことが良く分かる。だから、私たちがこれについて間違った方向に行ってしまう前に、私は問いかけなければいけない:あなたがセマンティクスを使ってしたいことは何なのか?

"コンテンツの目的を再定義するため" というのが一般的な答えだ。これは、一見、良さそうに見える。しかし、あなたは、"どんな目的に再定義するのか?" と問わなければいけないところに、すぐにたどりついてしまう。… HTML は、機能性を提供するけれども、そうでなければ全く意味がなくなってしまうような要素(canvas など)、または、ウェブブラウザーのユーザーが目的を再定義しやくなるような要素だけを加えるべきだと、私は思う。

私の考えでは、このようなセマンティクスを使ってしたいことは、いくつかある。まず、サーチエンジン向けだ。Google や Yahoo! が footer 要素のコンテンツのウェイトを下げたり、header 要素のコンテンツのウェイトを上げるというのは、想像に難くない。2 つ目の理由は、障害のある人に対してサイトをナビゲートできるようにするためだ。例えば、学習障害のある人は、いつも、ナビゲーションの前に、ブラウザーに対して記事を保存するよう指示するかもしれない。ユーザーエージェントは、とてもうまく、キーボードのショートカットを実装するかもしれない。それによって、プログラム的に "スキップ・リンク" を実装すれば、例えば、nav に直接ジャンプしたり、または、ナビゲーションを通り越して直接ジャンプすることもできるだろう。

どこへ私を連れて行くのだろうか …

HTML5 の構造にもっと磨きをかける

ブログのホームページ

ブログのホームページで興味深いことは、一般的に、最新の 5 件以上の投稿が掲載されているという点だ。それぞれには、見出し、"本文"、そして、その投稿に関する情報(時間、誰がそれを書いたのか、何件のコメントがあるか、など)がある。そして、通常は、そのブログ投稿の全文と全コメントが掲載されたページへのリンクがある。

HTML5 には article 要素がある。私は、これを各ストーリーを囲むのに使っている:

article 要素は、ドキュメント、ページ、サイトの独立した部分を形成する構成からなるページのセクションを表します。これはフォーラムの投稿、雑誌や新聞の記事、ウェブログのエントリ、ユーザーが投稿したコメント、その他コンテンツの独立した項目が考えられます。

私が各ブログ投稿をどうやってマークアップしているか、その要点を詳しく見てほしい:

ブログ投稿の構造

diagram of article structure; explanation follows

ラッパーには、一般の div はもう使わず、article を使っている。この中に header を入れて見出し(ブログ投稿のタイトル)としている。そして、発行日時は、time 要素を使ってマークアップしている。

次に、私の各投稿を構成する機知と知恵の結晶があるが、それらは、段落や引用などとしてマークアップされている。そして、変更が加えられることなくデータベースから引き出される。そして、そのブログ投稿に関するデータ(カテゴリー、コメント数)が続く。これは、フッターとしてマークアップされている。単独のブログ投稿を表示するページの場合は、賞賛と愛情を表現したコメントがある。最後に、次の記事にリンクするナビゲーションがあるかもしれない。

記事に関するデータ

次に、投稿に関する "メタデータ" を持ったコンテンツが続く:それはどのカテゴリーに属するのか、何件のコメントがあるのか、などだ。私は、これを footer でマークアップした。以前は、aside を使っていた。aside は、"その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表す" とあるが、私は、それをあまりにも拡大解釈しすぎたと判断した。投稿に関するデータとは、密接に関係するものなのだ。

footer にはもっと適した場所がある:"フッターは通常は、そのセクションに関する情報を含みます。例えば、誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データや、その類です。" もちろん、私は当初この要素のプレゼンテーショナルな名前に面食らった。私は、これをページの最後に使ったわけではない。記事の最後ですらない。しかし、間違いなく規定に沿っているはずだ。それは、そのセクションに関する情報だし、著者名も含んでいるし、関連のドキュメント(コメント)へのリンクや、その類もある。ページに 1 個しか footer を入れることができないなどという理由はまったくない。仕様の説明では、"footer 要素は、それが適用するセクションに対するフッターを表す" と言っている。ページには多くのセクションを入れることができる。この仕様は、"フッターは、通常は、セクションの最後に現れますが、必ずしもそうする必要はありません。" とも言っている。

コメント

私は、コメントを article でマークアップした。仕様では、article は "ユーザー投稿のコメント" にも使えると言っている。しかし、その親の article の中にネストしている。仕様では次のように言っている。

article 要素がネストする場合、内側の article 要素は、原理上は外側の article のコンテンツに関連した記事を表します。例えば、ユーザーが投稿するコメントを受け付けるサイトでのウェブログのエントリは、そのウェブログのエントリの article 要素の中にネストした article 要素として、そのコメントを表すことができます。

これらコメントには、その日付や時間、その著者名も含まれている。もし望むなら、あなたはこれらを header に入れることもできる。しかし、私には、それは、まるで、それのためのマークアップのように見える。

時間と日付

ほとんどのブログやニュースのサイトは、記事発行日時を表示している。

マイクロフォーマット人は、つまり日時のマークアップにとても熱心な支持者のことだが、彼らは、コンピューター・フォーマットの日付がみんなにとってベストだ、と信じている。かれらの wiki では、"日付けには、ISO8601 の YYYY-MM-DD フォーマットが最良の選択だ。これは、世界中のほとんどの人々にもっとも正確に読んでもらえる" と言っている。私は賛成できない(そして、私のまわりの geek でない普通の人々を代表して、私の妻、兄弟、親も、賛成できないのだ)。

非表示のメタデータは、表示されて人が読めるデータに劣る、という点については、マイクロフォーマット人に同意できる。それゆえに、私は、articlepubdate 属性を使わないことした。

仕様を理解するのはかなり難しいが、私の考えでは、あなたが使うフォーマットは、2004-02-28T15:19:21+00:00 だ。T で日付と時間を区切り、+(または - )は UTC からのオフセットだ。日付にタイムゾーンは必要ない。ただ、本来、完全な日時であれば必要なはずだ。しかし、おかしなことに、仕様では、もしあなたが日付を使わず時間だけを使うならタイムゾーンも必要ない、と提案している。

今、time 要素に関して、大きな論争になっている。最近、内輪のサークルのメンバーの Henri Sivonen が、time 要素は未来の予定をマークアップするものであって、ブログやニュースの記事の日時を記録するものではない、と書いている:"hCalendar が想定している利用シーンとは、主に、ウェブページから iCal のようなアプリケーションに、未来の予定が書かれたエントリを転送することだ。" これは、私には、とてもばかげていることに思える。time 要素というものがあるのに、なんで、私は時間や日付をマークアップできないんだ?

time の仕様には、将来の予定だけに限定するなんでどこにも書かれていない:"time 要素は、新暦のグレゴリオ暦における正確な日付や時間を表します。" とあり、3 つの例が掲載されている。そのうち 2 つは、過去についてであり、"未来の予定" なんかではない。仕様は(今のところ)、この要素の利用については限定していないけれども、"新暦のグレゴリオ暦" における正確な日付けとなるフォーマットに限定している。これは、time 要素を使って "今日のブログ投稿" 向けのアーカイブページをマークアップすることはできるが、"2008 年 7 月の投稿" ではダメだ。これは、完全な YYYY-MM-DD 日付にならないからだ。あなたは太古の日付についても正確にマークアップすることはできない。だから、ジュリアス・シーザーが暗殺された日付 15 March 44 BC は準拠していないのだ。

私はこれが解決するとは思っていない。あなたもそう思うなら、遠慮無く、あなたの意見をワーキング・グループまでメールしてほしい。

あなたがこの短い記事(geddit?)を読んで、新しく導入されたセマンティック要素の使い方の参考になったのであれば幸いだ。あなたの感想を聞かせてほしい!