このブログの更新は Twitterアカウント @m_hiyama で通知されます。
Follow @m_hiyama

メールでのご連絡は hiyama{at}chimaira{dot}org まで。

はじめてのメールはスパムと判定されることがあります。最初は、信頼されているドメインから差し障りのない文面を送っていただけると、スパムと判定されにくいと思います。

参照用 記事

クリーンHTML、Web API、CSSデザインはどう関係するのか

「マイクロフォーマットとクリーンHTML」からの引用:

僕がマイクロフォーマットを思い出したキッカケは、WebAPIのデータ形式について考えていたときです。マイクロフォーマット方式でマークアップされたHTML断片をWebAPIで使えないかな?と思ったのです。

「プログラマ/デザイナの境界としてのクリーンHTML」からの引用:

もし今後、「要素構造の単純化CSSデザインの拡大」がさらに潮流となるなら、プログラマ/デザイナ境界をクリーンHTMLにずらしてもいいのじゃないか、というのが今の僕の考えです。

「WebAPI」の話と「プログラマ/デザイナ境界」の話は、異なる話題のようですが、実は同じ文脈のなかにあるのです。そのことを説明します。



まず最初に断っておくと、僕はXMLJSON形式の使用を否定しているわけでは全くありません。もう一つの選択肢としてクリーンHTMLを加えてはどうだろう、と言っているだけです。XMLJSON形式は当然に提供し、クリーンHTMLも併用するというスタンスです。場合によっては(あくまでも場合によっては)、XMLJSONよりクリーンHTMLのほうが都合が良いこともあるでしょう。

クリーンHTMLフラグメントは、何らかの構造的データの表現となっています。XMLJSONで表現できるデータですが、それと構造的・意味的に等価な代替表現としてクリーン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方式が、XMLJSONを使う場合と比べて明らかに有利な点は次です。

  • Webページに構造的データを埋め込む用途に限れば、利用者側でやることが何もない。

もちろん、Webページ全体と埋め込みパーツのデザイン上の整合性が問題になりますが、合意されたIDやクラス名に基づいたCSSデザインで見た目の調整ができるなら、それほどひどくアンバランスにはならないと思われます。

つまり、コンテンツの実体はリモートから取り寄せ、ベージ内への配置(レイアウト)や飾り付け(デザイン)はお好みに応じて、という方式です。ケーキを手作りするのでもなく、完成品のケーキの配達をたのむのでもなく、スポンジの台とクリームだけ注文して、トッピングの飾り付けは自分でする、という感じでしょうか。



さらに、「Webページに構造的データを埋め込む用途」以外の、もっと複雑な応用はどうか? という問題があります。これについても、クリーンHTMLでもたいていは対応できるだろうと僕はみこしています。「プログラムで処理すれば何でもできる」という完全な自由をあきらめるなら(あきらめてもいいのなら)、クリーンHTMLの利用で事情が単純になり、システム全体が“クリーン”になることも期待できます。

そこらへんの話はまたオイオイ; マイクロフォーマットやクリーンHTMLを利用したシステムの話はまだ続くでしょう、たぶん。