HTML構造の図示
ところでプログラマ向けの「お題」として、「このような図を自動的に作成するツールを書け」というのはいかがでしょう
このような図というのは
http://d.hatena.ne.jp/kamioka/20050609/1118324980
にある「はてなブックマークのHTMLの構造」です。
なるほど。
確かに最近のブログツールは、CSSを切り替えるだけで見た目をごっそり変えられる。標準となるHTML構造とサイトバーやらメニューやらに対応するclassやIDの属性がきっちり決まっているからだ*1。標準が決まっているので、CSSでは決まった標準に対する色やら形やら位置やらを指定してやればいい。逆に、他のツールの標準となるHTML構造や属性付けを自分のツールに流用してやれば、それだけで他のツール用のCSSが使えることになる。tDiaryのテーマがHikiとかはてなとかに流用できるのはこの仕組み。
でも、元となる「標準」の構造が解説されていなかったりすると、デザイン(CSS)を作る人が実際にHTMLを読んで標準を学習しないと駄目。id:kamiokaさんは「はてなブックマーク」のデザイン(CSS)を作りたい人のために、標準構造を図示してくれたわけですね。
で、結城さんが言ってるのは「どうせそういう構造は対象のHTMLのソースを読めばわかるはずなんだから、HTMLから自動的に標準構造を抜きだすツールもあっていいんじゃないの？」ということだ。もっともである。自動処理できるものに人の手をわずらわせるのは無駄だ。しかも一個つくってしまえば、この先「はてなホゲホゲ」なる新しいサービスのデザインが可能になったときでも、その標準構造をいちいち人が書きくだして図示する必要はなくなる。ちょっと作ってみたくなった。
classやidとHTMLの構造を図示して似たところはまとめる、という操作をくりかえせばそれなりにできそう。たぶんXMLそのものからXMLスキーマを生成するのと同じ話だよな。で、そういうツールがあるとすると、ビジュアルなCSSエディタが簡単にできるんじゃないかな。って、あれ、世の中のビジュアルなCSSエディタにはこういう機能搭載されてるんじゃないのかな。ないのかな。
もうすこし妄想してみると、HTML構造+classとidのようにCSSからアクセスされる部分だけの構造スキーマを定義できるようなフォーマットを作って、異なる標準構造間のマッピングも定義してやれば、元々はあるブログツールのために作られたデザイン(CSS)を、他のブログツール(異なる標準構造)に使いまわすことができるんじゃないだろうか。CSSを元のブログの標準構造から他のブログの標準構造にマッピングすることで。そりゃ完全にマッピングするのは無理だと思うけど、ばしっとマッピングしてから人の手で修正してやればそこそこ使えるような気がするのだが。
