日報 #4 - div, section, articleの違いをサイト設計の根幹に求める

本日の報告。

今回は抽象的と具体的の丁度間くらいの話をしようと心がけます。

少しは読む人を意識して書こうと思います。

今日やったこと。

1. HTMLコーディング規約に触れつつ新デザインのモック作成

他にも色々細かいことはしたが割愛。

とにかく、新デザインのモックを共同開発者と作ってみて、コードレビューを行い、

Sassで回収できる部分の境界線を見極めようという作業を行った。

まずSassだが、非常に便利であるだけでなく、

HTMLのidやclassに対する考え方をすっかり変えてしまう程の力があると感じた。

昔はclass部分にデザインのmoduleを複数個追加していき、スタイルの再利用性をはかっていたが、それをしなくてもよい、という判断になった。

前回にも触れたがあくまで再利用性はSass上で行われればよく、CSS上は冗長でよい、という感覚になれるまで時間がかかりそうだ。

本当の本当はCSSが冗長になる＝打たなきゃいけないコーディング量が増える、転送量が増える＝いくない

なのだが、少なくともコーディング量が増えることはなくなった。

冗長な分、転送量は増大するかもしれないが、なんだかんだいってmodule.cssのような「このページでは不必要なスタイルモジュール」を大量に読み込んでいたのも昔の文化の事実なので、どっこいどっこいかな、と思う。

で、話は戻ってHTMLのコーディング規約だが、

サブタイトルにあるように「div, section, articleの違い」について悩んだ。

http://www.html5.jp/html5doctor/the-section-element.html

http://www.html5.jp/tag/elements/article.html

http://www.w3.org/html/wg/drafts/html/master/sections.html

この辺りのドキュメントを死ぬほど細かく読んだが、ぶっちゃけよく分からん。

「この人達は世の中のインターネットコンテンツは全てブログかニュースのようなドキュメントサイトだと思い込んでいまいか？」という風に愚痴った直後に、「それでもいいのか」と思い直した。

RoomClipのような画像投稿サイトに代表されるマルチメディアサイトと、

ブログのような記事投稿サイト（ドキュメントサイト？）を同質に見るという立場にW3Cの人は立っているのかな、と思い直した瞬間に、

はたと気がつく。

今までHTMLはマークアップ言語だから、表面的な見え方の「構造とデザイン」に軸足をおいているのだと思っていた。

しかし、articleやsectionはもはやその領域を超えている。

よく読めば、タグの仕様書に、「意味のある塊」や、「独立したコンテンツ」といった言葉が散見される。

どうやら我々が保持している、または見せたいと思っているコンテンツの性質についての視座が多く含まれているようだ。

ということならば、

立ち返るべき場所はタグの意味じゃなくて、僕らのコンテンツの性質の方だ。

「独立したコンテンツ」の意味を正確に捉えるためには、僕らのコンテンツにおいて「独立した」という言葉の意味に答えなければならない。

僕らのコンテンツは、「投稿者の投稿」と「運営者の投稿（コンテストなど）」によって成り立っている。

世に言うCGMだ。

つまり、とても重要なのは「誰がどんな投稿をしたのか？」という部分なんじゃないかな。

この「誰がどんな投稿をしたのか？」の集合がDBであり、それらが「どう配置されているのか」は、実際のところどうでもよい。（ユーザビリティにとっては最重要だが）

例えば「人気の写真一覧」とかは実は「投稿をセレクトした（キュレート）」だけなので、我々のコンテンツの本質的な形をしていない。

我々の本質的なコンテンツとは、「1人のユーザが生成したコンテンツがメインとなっている塊」を指すわけだ。

これを「独立したコンテンツ」と呼ぶにはふさわしい。

よってこれをarticleと呼ぶ。

（もっと具体的に言うと、僕らのDBにおいて1つのuser idをキーにしてかき集められたレコード群だ。）

そうではないものである意味をもって集められた塊は、sectionだ。

意味もないただデザインだけのために固められたものは、divだ。

と解釈してみると、割合スッキリするんじゃないかと思っている。

データの意味が形として表現されているということは望ましいことだ。

だが一方で、直感的かどうかと言われるとまだ疑問だ。

やっぱり人と計算機は少し違うんだな、と今日も思った。