「マイクロフォーマットとクリーンHTML」からの引用:
僕がマイクロフォーマットを思い出したキッカケは、WebAPIのデータ形式について考えていたときです。マイクロフォーマット方式でマークアップされたHTML断片をWebAPIで使えないかな?と思ったのです。
「プログラマ/デザイナの境界としてのクリーンHTML」からの引用:
もし今後、「要素構造の単純化+CSSデザインの拡大」がさらに潮流となるなら、プログラマ/デザイナ境界をクリーンHTMLにずらしてもいいのじゃないか、というのが今の僕の考えです。
「WebAPI」の話と「プログラマ/デザイナ境界」の話は、異なる話題のようですが、実は同じ文脈のなかにあるのです。そのことを説明します。
まず最初に断っておくと、僕はXMLやJSON形式の使用を否定しているわけでは全くありません。もう一つの選択肢としてクリーンHTMLを加えてはどうだろう、と言っているだけです。XMLやJSON形式は当然に提供し、クリーンHTMLも併用するというスタンスです。場合によっては(あくまでも場合によっては)、XMLやJSONよりクリーンHTMLのほうが都合が良いこともあるでしょう。
クリーンHTMLフラグメントは、何らかの構造的データの表現となっています。XMLやJSONで表現できるデータですが、それと構造的・意味的に等価な代替表現としてクリーンHTMLフラグメントがある、ということです。通常、クリーンHTMLフラグメントは、Webページ全体を表すのではなくて、Webページに埋め込まれる部分となります(Webページ全体でもかまいませんが)。
以前に例に挙げた人物情報(名刺)であれば、次のように使われるでしょう。
<html> <head> <!-- 省略 --> </head> <body> <h1>プログラマ/デザイナの境界としてのクリーンHTML</h1> <div class="author">著者: <div class="vcard"> <div class="fn">檜山 正幸</div> <ul class="email-list"> <li class="email">hiyama{AT}chimaira{DOT}org</li> </ul> <ul class="url-list"> <li><a class="url" href="http://www.chimaira.org/">http://www.chimaira.org/</a></li> <li><a class="url" href="http://d.hatena.ne.jp/m-hiyama/">http://d.hatena.ne.jp/m-hiyama/</a></li> </ul> </div> </div> <!-- 省略 --> </body> </html>
別なファイルから人物情報をページに取り込むなら、次のようなテンプレートを使うことになるでしょう。
<html> <head> <!-- 省略 --> </head> <body> <h1>プログラマ/デザイナの境界としてのクリーンHTML</h1> <div class="author">著者: {* 名刺の取り込み *} {include file="peopel/vcard/m-hiyama.html" } </div> <!-- 省略 --> </body> </html>
Smarty風テンプレート構文を使ってますが、要するにサーバーサイド・インクルード(SSI)に過ぎません。もし、テンプレートエンジンが別なドメインからのインクルードをサポートしているなら、次のようですね。
<html> <head> <!-- 省略 --> </head> <body> <h1>プログラマ/デザイナの境界としてのクリーンHTML</h1> <div class="author">著者: {* 名刺の取り込み *} {include file="http://service.example.jp/about/m-hiyama.vcard" } </div> <!-- 省略 --> </body> </html>
これは、サーバーサイド・トランスクルードということになります。トランスクルードは、クライアント(ブラウザ)サイドでもできます。例えば、よくある「scriptタグを貼るだけ」方式だとすれば次のよう:
<html> <head> <!-- 省略 --> </head> <body> <h1>プログラマ/デザイナの境界としてのクリーンHTML</h1> <div class="author">著者: <script src="http://service.example.jp/about/m-hiyama.vcard.js"></script> </div> <!-- 省略 --> </body> </html>
http://service.example.jp/about/m-hiyama.vcard.js というJavaScriptコードは、クリーンHTMLフラグメントを document.write() を使ってその場に書き出します。
どのタイミングでどのような取り込み手段を使うにしろ、人物情報(名刺)を表すクリーンHTMLフラグメントがWebページに埋め込まれることになります。Webページ本体とは別に管理保存されるデータをURI経由で取得しているので、インターネット上に分散配置されたリソースをまとめ上げていることになります。もし、http://service.example.jp/about/ が人物情報をサービスしている提供者なら、このURLはWebAPIのサービス提供エンドポイントとみなせます。
「プログラマ/デザイナの境界としてのクリーンHTML」は、このような状況では、「Webサービス提供者/Webサービス利用者の境界としてのクリーンHTML」となります。クリーンHTML方式が、XMLやJSONを使う場合と比べて明らかに有利な点は次です。
- Webページに構造的データを埋め込む用途に限れば、利用者側でやることが何もない。
もちろん、Webページ全体と埋め込みパーツのデザイン上の整合性が問題になりますが、合意されたIDやクラス名に基づいたCSSデザインで見た目の調整ができるなら、それほどひどくアンバランスにはならないと思われます。
つまり、コンテンツの実体はリモートから取り寄せ、ベージ内への配置(レイアウト)や飾り付け(デザイン)はお好みに応じて、という方式です。ケーキを手作りするのでもなく、完成品のケーキの配達をたのむのでもなく、スポンジの台とクリームだけ注文して、トッピングの飾り付けは自分でする、という感じでしょうか。
さらに、「Webページに構造的データを埋め込む用途」以外の、もっと複雑な応用はどうか? という問題があります。これについても、クリーンHTMLでもたいていは対応できるだろうと僕はみこしています。「プログラムで処理すれば何でもできる」という完全な自由をあきらめるなら(あきらめてもいいのなら)、クリーンHTMLの利用で事情が単純になり、システム全体が“クリーン”になることも期待できます。
そこらへんの話はまたオイオイ; マイクロフォーマットやクリーンHTMLを利用したシステムの話はまだ続くでしょう、たぶん。