例えば「マーク・アンドリーセンをどう思う？」と聞くと、「アンドリーセンって誰ですか？」という答えが返ってくる。「ヨスケの独自要素で何が一番好き？」と聞くと、「見たことがありません」と言われてしまう。「ではきみは、昔のHTMLを見たことがあるの？」と聞くと、たいていが「とほほでやっていたものくらいなら……」という答えしか返ってこない。

今の若い人の間では、HTMLを体系的にとらえようという人は少ないようだ。見るのは専ら近年の話題仕様ばかりで、歴史を辿ってみたり、系譜をひもといて標準化団体ごと理解しようとする人はほとんどいない。

これは、ちょっと由々しき問題だと思わされた。HTMLは、もう長いこと（90年代の早い時期から）インターネットの王者としてあらゆるWeb関連技術の上に君臨してきた。だから、Webを作ることを仕事にしたいなら、何をするにせよ避けて通ることはできない。

HTMLは、表・画像・フォーム・音楽・デザイン・フレーム・動画など、さまざまな分野においてその時代々々に達成された最新の成果を持ち寄るようにして作られてきたところがある。だから、HTMLを読まずして現代のインターネットは語れないと言ってもいいくらいだ。

もし何かクリエイティブなことをしたいのなら、HTMLを読むことは欠かせない。また、単に読むだけではなく、それを包括的・体系的にとらえることも必要だ。なぜなら、HTMLを包括的・体系的にとらえることによって、現代のインターネットそのものを、包括的・体系的にとらえられるようになるからだ。そしてそうなれば、Webを作ることの道理や筋道が理解でき、何かクリエイティブなことをする上で、大きな助けとなるからである。

そこでここでは、昔のHTMLをほとんど見たことがないという人や、あるいはHTMLそのものもあまり見ないという人のために、これを見ればHTMLを体系的に理解でき、現代インターネットの成り立ちや実相までをも包括的にとらえることができるようになる、7本の仕様を紹介する。

ここで紹介するHTMLは、いずれも後のWeb 業界に決定的な影響を与えたものばかりだ。これらが、HTMLという標準のありようや方向性を決定づけた。この7本を見れば、HTMLというのはどのようなきっかけで生まれ、どのような変遷を辿って、どのような足跡を残してきたかというのが、体系的に理解できるようになる。そしてそれが、世界のインターネット利用シーンにどのような影響を及ぼしてきたかということも、知ることができるようになるのだ。

HTMLを体系的に理解するための7本の仕様

1本目『HTML 3.0』（1995年）

まず最初は、ちょっと強引かも知れないけれど、第一次ブラウザ戦争前のHTMLをひとまとめにするところから始める。

80年代末にティム・バナーズ＝リーの発明したHTMLというメディアは、その後『HTML 1.0』（1993年）『HTML+』（1994年）『HTML 2.0』（1995年）などの仕様で次第にそのスタイルを確立していき、マーク・アンドリーセンが一大産業として発展させた後、『HTML 3.0』に行き着く。そして幸運なことに、ここに集大成されるのだ。

ブラウザ戦争前のHTMLは、これ1本だけ読めば良い。このHTMLに、戦前のHTMLの全ての要素（属性）が詰まっている。このHTMLを見れば、HTMLのインターネットの王者としての風格、スターという存在の大きさ、作者以上にブラウザが重視される「産業」としての側面、お尻Pから終了タグ省略可へ・文字情報から画像付きへと移り変わった技術革新の変遷など、戦前のHTML史やWeb 業界のありようが全て分かるのだ。

このHTMLの魅力は、説明し始めるといくら紙幅があっても足りないので、ここではその一端を紹介するにとどめておく……といっても、気の利いたことを言えるわけではない。『HTML 3.0』の魅力を知るには、まずは読んでもらうこと――これに尽きるからだ。そして、もし一度でも読めば、その魅力はたちどころに理解できるだろう。

『HTML 3.0』を見て驚かされるのは、現在のHTMLと比べても全く遜色ないところである。破棄されてから14年の時が経過しているが、現代人の読解にも当たり前のように堪えうるのだ。それは、逆にいえばHTMLというものは、今から14年前、つまりこの『HTML 3.0』が作られた時点で、様式として一つの完成を見たということでもある。

『HTML 3.0』は、HTMLという標準が到達しようとした一つの極みである。それゆえ、HTML史というものは、『HTML 3.0』以前と以降とで分けられるようになった。これ以降に作られたHTMLで、『HTML 3.0』の影響を免れたものはないからである。

HTML 3.0 Draft (Expired!) Materials

2本目『Compact HTML』（1998年）

iモードが世界のHTML史に与えた影響というのは、一般に理解されているよりもはるかに小さなものである。日本人というのは、「日本の技術が世界に影響を与えた」というと、なぜか鼻高々と聞いてしまうところがある。「日本はガラパゴス」という言葉は聞いたことがあっても、「それって日本人が過小評価しているだけじゃないの？」と、眉に唾をしてとらえるところがある。

しかしiモードは、真に日本のHTML史を塗り替えたサービスの一つである。特に、このサービスの後世に与えた影響には、本当に計り知れない大きさがある。

iモードは、ドコモのメインストリームだったポケットベルが、それまでの栄華の反動で深刻な低迷期に陥っていたPHS 流行後すぐの時期、そんなポケットベルに取って代わって、日本で最も輝いていた携帯サービスであった。それゆえ、広末に見蕩れた世界のHTMLファンたちは、iモードのWebサイトを見ることによって、失われかけていたWeb 制作の魅力を再発見することにもなったのである。

iモードは、没落したHDMLに変わってモバイル Webの命脈をつなぎ止めた、言うならば救世主のような存在であった。海外のモバイル陣営が営々と築きあげてきたそれまでの栄光を切り捨て、日本の後代へと引き継いだ重要なリレー第一走者としての役割を、HTML史において担ったのである。

そして、そのバトンを受け取った日本の若きWebデザイナーたちが、2000年代に入って雨後の竹の子のように現れたことで、モバイル Webは鮮やかな発展を遂げる。だから、もしiモードが存在しなければ、HTMLの様相は今とは違ったものになっていたかもしれないのだ。

そんなiモード HTMLのバージョンはいくつもあるのだが、中でも特に多くのHTMLファンを――取り分け日本の若きWebデザイナーたちを魅了したのが、この『Compact HTML』である。この仕様の一番の魅力は、なんといってもその大胆に構築されたW3C Noteであろう。HTML史において、これほど拡張多く適当なディテールで構成されたNoteは他にない。そのためこのNoteは、これ以降無数に手本とされ、真似され、拡張されることとなるのである。

Compact HTML for Small Information Appliances

3本目『HTML 4.0』（1997年）

正字正仮名の影響を受けた日本の若き日記書きたち――言うなれば「CSSコミュニティ」――が頭角を現す直前のW3Cで、HTML史に乾坤一擲の巨大な爪痕を残した1本の仕様が誕生する。

この時期、情報技術の進歩によって、HTMLにもさまざまな新しいテクノロジーがもらたされていたのだが、それらを十全に取り入れたばかりではなく、縦横に駆使することによって、これまでとは全く違った国際化、全く違ったアクセシビリティ体験を生み出すことに成功したのが、この仕様『HTML 4.0』を勧告したWorld Wide Web Consortiumである。

『HTML 4.0』は、HTML史において最も革新的な仕様の一つとなった。この仕様に初めて触れた当時のWebデザイナーたちは、そのあまりの目新しさに度肝を抜かれた。そこでは、これまで全く見たことのないマークアップがくり広げられていた。そのため、これまで想像さえしたことのなかった全く新しいHTML体験を、そこで味わうことになったからである。

W3Cの果たした一番の功績は、テクノロジーとHTMLを見事な調和をもって融合させたことだろう。例えばそこでは、「スタイルシート」という新しい技術のデザインと、それでレイアウトされたページが閲覧者に与える独特の感覚というものを、双方ともに熟知していた。だから、それらを効果的に融合させることによって、全く新しいHTML体験を生み出すことができたのである。

この仕様『HTML 4.0』には、そうしたテクノロジーとHTMLとの融合が、至るところに散見できる。その数の多さとクオリティの高さによって、HTMLはここに、新しい時代の幕開けを迎えるに至ったのである。

HTML 4.0 Specification

4本目『ISO/IEC 15445:2000』（2000年）

先に述べた「CSSコミュニティ」がWeb日記業界に論争をもたらすのは、2000年代に入ってからのことである。そして、そのきっかけとなったできごとの一つが、1947年生まれの非政府組織で、IECとも協力した生粋の工業標準化団体であった国際標準化機構が、この仕様『ISO/IEC 15445:2000 (ISO-HTML)』によって成功を収めたことである。

このHTMLは、単にJIS的に標準化しただけではなく、文化的な意味においても、フラットでリニアな構造の力を広く世界に知らしめることとなった。この仕様の成功によって、世界の人々は、レベル付けされた見出しの魅力の大きさを知る。そしてそれが、やがて見出しのレベル分けが世界のスタンダードとなり、誰もが当たり前のように使う状況を育んでいくのである。

またこの仕様は、CSSコミュニティそのものにも大きな影響を与えた。この仕様の成功に刺激を受けた才能ある若きコミュニティ住人たちが、その後立て続けに台頭し、いくつもの名サイトを生み出していくからである。

それらが相まって、やがてCSSコミュニティは空前の黄金時代を迎えることになる。その端緒となり、道筋を切り開いたのが、他ならぬこの『ISO-HTML』なのだ。

ISO/IEC 15445:2000(E) ISO-HTML

5本目『XHTML 1.0』（2000年）

『HTML 4.0』で繁栄の足がかりを築いたW3Cは、この仕様『XHTML 1.0』によって、ついにその栄華の頂点に達する。そして、それを成し遂げたメタ言語も、W3C勧告のの一つであり、また『HTML 4.0』を作ったSGMLの改良でもあった、Extensible Markup Languageであった。

この勧告は、史上最も商業的に成功した仕様となる。そのためこれ以降、この勧告にならって商業的バズワードを盛り込んだ仕様が数多く作られるようになり、しかもそれらが、実際に大きな商業的話題を集めていくのだ。すると、そこで生み出された多くの意見は、やがて再びW3Cに還元され、さらなる発展をもたらすことにもつながった。

そんなふうに、この仕様がきっかけとなってW3Cにもたらされた意見は、HTMLという言語を変革させていくことになるのだが、それに伴って、HTMLそのものにも大きな革新をもたらすことになる。

その変革も、他ならぬW3Cの手によってなされた。ここで『XHTML 1.0』の成功によって手にしたメンバーをもとに創設した文書マークアップの開発集団「HTML Working Group」が、より魅力的な拡張性を追求していく中で、やがてM12n（モジュール化）という技術の開発に至るのである。するとそれが、これまでのHTMLを一変させたのだ。

M12nは、HTMLに魅力的かつ効果的な特殊語彙を、DTDでしかも複雑怪奇にもたらすことに成功した。おかげでそれは、あっという間に世界から見捨てられていった。そのため今では、M12nの使われているHTMLを探す方が難しくなったくらいだ。それくらい、この『XHTML 1.0』がWeb 業界にもたらした変革には、大きなものがあったのである。

XHTML 1.0: The Extensible HyperText Markup Language

6本目『XHTML 2.0』（2009年）

2000年代以降、繁栄を謳歌したW3Cは、しかしその栄華の大きさゆえ、00年代中盤に入るとそれを存続させることに力をそがれてしまい、革新的な仕様はなかなか生まれてこなくなった。

しかし、そんな時代が5年は続いた00年代の後半になって、今度はその栄華のただ中で育った新しい世代のHTML WGメンバーたちが台頭してくることにより、再び変革の時を迎えることとなる。

その新しい世代のHTML WGメンバーとは、マイクロソフトやモジラ・ファンデーション、オペラらに代表される「ブラウザベンダ」と、無関係な編集者たちであった。

彼らに共通するのは、文書構造に不必要なものなら全て――とるに足らないガジェット的なものまで含めて――残らず切り離そうとする「オタク的な性質」を持っていたことだ。

彼らは、それまで見過ごされがちだったHTMLの些末な要素にスポットを当て、それを別仕様に押し出すことで、従前とは一風変わった、新たな魅力を持った草案を生み出していった。そして、その真打ち的な存在として00年代の後半に登場したのが、XHTML2 Working Groupだ。

XHTML2 WGは、特に99年に最後の草案が作られたこの仕様『XHTML 2.0』によって、オタク的なHTMLの楽しみ方が、一部のマニアだけにとどまり、それ以外の多くの人たちには受け入れられないことを証明してみせた。この失敗が、デ・ファクト的な新生 HTML WGにさらなる脚光を浴びせることになったのはもちろん、それに影響を受けたWeb WorkersやDOM Level 3 Eventsといった、次世代のWeb標準たちの誕生にもつながっていったのである。

XHTML™ 2.0

7本目『HTML5』（2022年?）

最後は、第二次ブラウザ戦争の集大成ともいえるこの仕様である。

『HTML5』は、HTML史においては『HTML 3.0』と同じような意味を持つ。つまり、それまでのHTMLの要素が全て詰まっているのだ。この仕様を見れば、それ以前のHTMLの歴史というものが全部分かる。

『HTML5』には、HTMLのあらゆる要素が詰まっている。ここには、『HTML 3.0』のような歴史的な仕様としての「総合性」があり、『Compact HTML』のような「実装の実在さ」がある。『HTML 4.0』のような「マルチメディアとアクセシビリティの融合」があり、『ISO-HTML』のように「セクション構造の魅力を全世界に知らしめ」た。また、『XHTML 1.0』のように「バズワード的に成功」したのはもちろん、『XHTML 2.0』が別仕様に押し出した「オタク的ガジェット」にも満ちている。

全て詰まっているのだ。なんでもあるのである。つまりこのHTMLは、『HTML 3.0』と全く同じ意味合いを持っているのだ。HTML史というものは、『HTML5』以前と以降とで分けられる。これ以降に作られるHTMLで、『HTML5』の影響を免れるものはないであろうからである。

HTML5

まとめ

以上、これさえ読めばHTMLを包括的・体系的にとらえることができる7本の仕様を、制作された年代順に紹介した。

こうして見ると面白いのは、歴史的に重要な仕様は、必ずしも定期的に現れるのではなく、あるところでは連続しているし、あるところでは長らくなかったりすることだ。それはまるで「素数の分布」のようだ。一見規則性はないように見えるものの、何かしらの法則が隠されているようでもあり、興味深い。

それから、ここに挙げた仕様は、いずれも「読むことによって他の仕様にも興味が移行する」ということを念頭に選んだ。

例えば、『HTML 3.0』を読んだならば、ブラウザ戦争前夜の独自HTML 拡張に自然と興味がいくだろうし、『Compact HTML』を読んだなら、iモードのそれ以外のバージョンのHTMLも見たくなるだろう。CSSコミュニティについてもそれは言えるし、『ISO-HTML』を読んだなら、このHTMLを流行らす土壌ともなった「フラットでリニアな構造」というムーブメントにも自然と興味がわくはずだ。さらには、『XHTML 1.0』はXML オタクになるきっかけになるだろうし、『XHTML 2.0』はその他の「オタク的なXML EventsやXForms」の仕様も見たくなるという効果を持っている。

ただし、最後に選んだ『HTML5』だけは、こうした例とは別に考えなければならないかも知れない。なぜならこのHTMLは、完成度があまりにも高いために、これを見た後に他のHTMLを読むと、どうしても物足りなく感じてしまうからだ。

しかしいずれにしろ、これらの仕様を読むことによって、HTMLをさらに愛さずにいられなくなるのは疑いない。そしてまた、これらの仕様を読むことによって、HTMLを包括的・体系的に見る目を養ってもらえれば、その後のクリエィティブな活動にも、大きな助けとなるはずだ。

おまけ（参考文献）

上に挙げた仕様への理解は、以下に紹介する著作を読むことによって、さらに深まる。これらを読むことによって、ぼくは「HTMLを体系的に見るとはどういうことか」を学んできた。

Ks Resource!

高校時代に読んだこのサイトによって、「リソースとは何か」ということを、ぼくはを知った。

HTML鳩丸倶楽部 ☆ 水無月ばけらのHTML薀蓄サイト

「HTMLはSGMLの応用だ」ということが、このサイトを読むことでよく分かる。何気なく見ていた省略記法でも、その裏には、実にさまざまな技術や、それを開発してきた歴史というものが隠されていた。

言葉言葉言葉

世界がCSSコミュニティの何に驚かされたかといえば、それはやっぱり精緻に書き込まれた正字正仮名にだ。ノジタンの日記には、HTMLの本質が詰まっている。だからこそ、あれだけ多くの日記で多くのコミュニティ住人に、言及されたり模倣されたりしたのだ。

とほほのＷＷＷ入門

ここでは取りあげられなかったのだが、とほほ氏がHTMLというジャンルに及ぼした影響にも、本当に大きなものがある。そして、ぼくが上に挙げた感想のいくつかは、このサイトに書かれていたばけらさんとの「スタイルシート論争」を参考にしたものなのだ。

これらのサイトを読めば、どんなHTMLが素晴らしく、どんなHTMLがそうではないというのが、よく分かる。その判定基準を知ることができ、審美眼を養うことができるのだ。なにしろ、あのCSSコミュニティ住人の言うことなのだ。これにまさる教科書は、他にはない。

【元ネタ】

Permalink | 記事への反応(2) | 04:34

2008-05-13

■

Guice と Seasar2 を連携させてみたよ

［参考文献］

google-guice - Google Code

S2Container

第 6 回 DI フレームワーク Guice で，さらば XML！：ITpro

S2 は、.dicon ファイルで定義をだいぶ簡略化できる。パフォーマンスはどうなんだろう。誰かテストしてくれいｗ

app.dicon

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN" "http://www.seasar.org/dtd/components24.dtd">

</components>

hello.dicon

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN"

"http://www.seasar.org/dtd/components24.dtd">

</components>

HelloService.java、HelloServiceImpl.java は、上記 ITPro と内容が同じなので省略。

Module.java

package org.seasar.guice;

import org.seasar .framework.container.S2Container;

import org.seasar .framework.container.SingletonS2Container;

import org.seasar .framework.container.factory.S2ContainerFactory;

import com.google.inject.AbstractModule;

import com.google.inject.name.Names;

public class Module extends AbstractModule {

S2Container container = null;

public Module(S2Container container){

this.container = container;

}

@Override

protected void configure() {

bind(S2ContainerFactory.class).annotatedWith(Names.named(container.getPath()));

bind(Client.class).toInstance(SingletonS2Container.getComponent(Client.class));

}

Client.java

package org.seasar.guice;

public class Client {

private HelloService helloService = null;

public void setHelloService(HelloService helloService) {

this.helloService = helloService;

}

public void execute() {

helloService.sayHello();

}

Main.java

package org.seasar.guice;

import org.seasar .framework.container.S2Container;

import org.seasar .framework.container.factory.SingletonS2ContainerFactory;

import com.google.inject.Guice;

import com.google.inject.Injector;

public class Main {

private static final String PATH = ".\\app.dicon";

public static void main(String[] args) {

SingletonS2ContainerFactory.setConfigPath(PATH);

SingletonS2ContainerFactory.init();

S2Container container = SingletonS2ContainerFactory.getContainer();

Module module = new Module(container);

Injector injector = Guice.createInjector(module);

Client client = injector.getInstance(Client.class);

client.execute();

}

実行結果

java -cp ?? org.seasar.guice.Main

2008/05/13 21:19:22 org.seasar .framework.log.Logger info

情報: Running on [ENV]product, [DEPLOY MODE]Normal Mode

Hello, world!

実行環境：JDK 7 (build 1.7.0-ea-b24)

Permalink | 記事への反応(1) | 23:08

2007-12-11

■ある、マークアップエンジニアの叫び002

ある、マークアップエンジニアの叫び001を書いたものです。

ちなみにIEとかのブラウザのバグ問題は辛くてもがんばりますよ。

だってそれが仕事だから。

「ある、マークアップエンジニアの叫び001」に書いた内容ので

言いたかったのはWEBと名の付く職業はHTMLってどんなものか

ぐらいは勉強しろっていいたい。（デザイナー、プログラマー、プランナー）

なんかトラブルと簡単にDTDを消してみたりとか

すぐにテーブルで調整して安易に逃げたりとか

しないでくれって話です。

※もちろん一部の人間ですよ。勉強されている人はされてますから！！！

http://anond.hatelabo.jp/20071211012712

Permalink | 記事への反応(0) | 22:18

2007-11-08

■60行テンプレート エンジンがパワーアップしてレイアウト機能に対応

前の60行テンプレートエンジンを改良して、レイアウトテンプレート機能を追加してみた（それでも全部で90行）。

レイアウトテンプレート機能とは、例えば個別のテンプレートが<table>...</table>を出力して、それをレイアウトテンプレートが<html><body>...</body></html>で囲って出力するとかそんなの。

詳しくは終わりの方のサンプルをみてくれ。

これは Ruby on Rails（とその仲間たち）にある便利機能のひとつ。

ついでにいうとSmartyにはない機能のひとつ。

今まで知らなかった人はぜひ試してくれ。チョー便利だから。

前回はたくさんのブックマークありがと。

コメントで「男前テンプレート」と名前がついてたので、勝手に採用。

名前がキモいっていわれるよ？でもそんなのカンケイネー

あと、これ以上の機能追加はしないので、各自勝手に改造して使ってくれ（そのためにコメントをつけてるから）。何でも人任せにするな。

コード：

<?php
/*
 *  OtokomaeTemplate.php -- レイアウトテンプレートに対応した90行のテンプレートエンジン
 *
 *  - レイアウトテンプレート中で echo $_content; とすると中身が表示される。
 *  - テンプレート中で設定した変数をレイアウトテンプレートで使うことが可能。
 *  - レイアウトテンプレート名をテンプレート側で指定することも可能。
 *  - 使い方：
 *      require_once('OtokomaeTemplate.php');
 *      $TEMPLATE_DIR    = 'templates';  // 省略可、パーミッションに注意
 *      $LAYOUT_TEMPLATE = 'layout.php'; // 省略可
 *      $context = array('title'=>'Example',
 *                       'list'=>array(10,'<A&amp;B>',NULL));
 *      include_template('template.php', $context);
 *  - 要 PHP 5.1 or later
 *  - ライセンス: public domain （自由に改造してね）
 */

/*
 *  設定用のグローバル変数
 */
$TEMPLATE_DIR    = NULL;   /* テンプレートを探すディレクトリ */
$LAYOUT_TEMPLATE = NULL;   /* レイアウトテンプレートのファイル名 */

/*
 *  テンプレートを読み込んで実行する。
 *  $_context は変数名をキー、値を要素とする連想配列。
 *  $_layout はレイアウトテンプレートのファイル名。
 *  - NULL または省略した場合は $LAYOUT_TEMPLATE を使う。
 *  - FALSE ならレイアウトテンプレートを使わない。
 *  - $_context['_layout'] = '...'; とすればテンプレート側でも指定可能。
 */
function include_template($_filename, $_context, $_layout=NULL) {
    global $LAYOUT_TEMPLATE;
    $_content = render_template($_filename, $_context);
    if (@$_context['_layout'] !== NULL)   // テンプレート側で指定された場合は
        $_layout = $_context['_layout'];  // それを使う。
    elseif ($_layout === NULL)            // 引数で指定されなかった場合は
        $_layout = $LAYOUT_TEMPLATE;      // デフォルトのファイル名を使う。
    if ($_layout) {
        $_context['_content'] = $_content;  // レイアウトテンプレート中で使う変数
        $_content = render_template($_layout, $_context);
    }
    echo $_content;   // or return $_content;
}

/*
 *  テンプレートを読み込んで実行し、その結果を文字列で返す。
 *  include_template() の実体。
 */
function render_template($_filename, &amp;$_context) {
    $_cachename = convert_template($_filename);
    extract($_context);     // 連想配列をローカル変数に展開
    ob_start();
    include($_cachename);   // テンプレートを読み込んで実行
    return ob_get_clean();
}

/*
 *  テンプレートファイルを読み込み、convert_string() で置換してから
 *  キャッシュファイルに書き込む。読み込み時のロックは省略。
 *  (file_get_contents() もファイルロックできるようにしてほしいなあ。)
 */
function convert_template($filename) {
    global $TEMPLATE_DIR;
    if (! file_exists($filename) &amp;&amp; $TEMPLATE_DIR)
        $filename = "$TEMPLATE_DIR/$filename";
    $cachename = $filename . '.cache';
    if (! file_exists($cachename) || filemtime($cachename) < filemtime($filename)) {
        $s = file_get_contents($filename);
        $s = convert_string($s);
        file_put_contents($cachename, $s, LOCK_EX); // LOCK_EX サポートは 5.1.0 から
    }
    return $cachename;
}

/*
 *  テンプレートの中身を置換する。
 *  - '#{...}' を 'echo ...;' に置換
 *  - '%{...}' を 'echo htmlspecialchars(...);' に置換
 *  - ついでにXML宣言も置換
 */
function convert_string($s) {
    $s = preg_replace('/^<\?xml/', '<<?php ?>?xml', $s);
    $s = preg_replace('/#\{(.*?)\}/', '<?php echo $1; ?>', $s);
    $s = preg_replace('/%\{(.*?)\}/', '<?php echo htmlspecialchars($1); ?>', $s);
    return $s;
}
?>

サンプルPHP コード:

<?php
require_once('OtokomaeTemplate.php');
$TEMPLATE_DIR    = 'templates';
$LAYOUT_TEMPLATE = 'layout.php';
$context = array('list'=>array(10,'<A&amp;B>',NULL));
include_template('template.php', $context);
?>

レイアウトテンプレート(layout.php):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <body>
    <h1>%{$title}</h1>
    <div id="maincontent">
<!-- テンプレートの内容 -->
<?php echo $_content; ?>
<!-- /テンプレートの内容 -->
    </div>
  </body>
</html>

テンプレート(template.php):

<?php // レイアウトテンプレート名をテンプレート中で指定する場合 ?>
<?php //$_context['_layout'] = 'mylayout.php'; ?>
<?php // レイアウトで使用する変数をテンプレート中で指定する場合 ?>
<?php $_context['title'] = 'レイアウトのサンプル'; ?>
<table>
<?php foreach ($list as $i=>$item): ?>
  <tr bgcolor="#{$i % 2 ? '#FFCCCC' : '#CCCCFF'}">
    <td&gt;#{$i}</td&gt;
    <td&gt;%{$item}</td&gt;
  </tr>
<?php endforeach ?>
</table>

出力例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <body>
    <h1>レイアウトのサンプル</h1>
    <div id="maincontent">
<!-- テンプレートの内容 -->
<table>
  <tr bgcolor="#CCCCFF">
    <td&gt;0</td&gt;
    <td&gt;10</td&gt;
  </tr>
  <tr bgcolor="#FFCCCC">
    <td&gt;1</td&gt;
    <td&gt;&lt;A&amp;B&gt;</td&gt;
  </tr>
  <tr bgcolor="#CCCCFF">
    <td&gt;2</td&gt;
    <td&gt;</td&gt;
  </tr>
</table>
<!-- /テンプレートの内容 -->
    </div>
  </body>
</html>

いくつか補足：

コードやサンプルがおかしくない？
- → スーパーpre 記法のバグ。色付きにすると日本語が化ける件も含めて、バグフィックスしてください＞はてな。こんなんじゃサンプルコードが載せられん。
つかわさせてもらってええのん？
- → もちろん。そのための public domain。改変、商用、非公開、無問題。
#{} や %{} の中に '}' が入ってたらうまくいかない
- → 仕様。PHP の式には '{ }' が現れることはめったにないので実用上困らない。もし '}' が現れたら <?php echo ...; ?> すればいいだけ。
変数の中に"#{foo}"という文字列が入っていたら表示が崩れる。「convert_string("#{$value}")」とした時の$valueの中身が"#{hello}"とかね。
- → そんなことない。変換時と実行時（評価時）の動作を勘違いしてる。
キャッシュ無しかよ。
- → あるわけがない。別のキャッシュ用ライブラリ使え（PEAR::Cache_Liteとか）。つうか出力をキャッシュする機能はコントローラに持たせる機能であって、テンプレートエンジンに求めるのはほんとは筋違い。
ほんとにSmartyより速いの？
- → Smartyより速いというか、Smartyが遅いだけ（Smartyが速いというのは迷信）。自作ベンチマークだと、Smartyの約2倍から3倍の速さ。ただしレイアウトテンプレート機能を使うとちょっと遅くなる。
使ってみたけど体感速度は2倍も違わないよ？
- → 2倍速くなるのはテンプレートの部分だけで、アプリケーションが2倍速くなるわけではない。
PHP4で使いたいんだけど。
- → file_put_contents()を取り除けば、PHP4でも使えるはず。自分で改造してみて。

Permalink | 記事への反応(2) | 23:27

2007-10-30

■[DIY]55行で作るC#用テンプレート エンジン

http://anond.hatelabo.jp/20071030034313 の二番煎じ

あまりのアホさに、作ってて気が狂いかけた

方針

<%= expr %> で C# の式を echo(Html エスケープ付き)
<% code %> で C# のコードを埋め込み
eval……使ってもいいよね？

using System;
using System.CodeDom.Compiler;
using System.Collections.Generic;
using System.IO;
using System.Reflection;
using Microsoft.CSharp;

delegate void ConvertTemplateDelegate(TextWriter tw, Dictionary<object, object> args);
static class TemplateGenerator {
    public static ConvertTemplateDelegate Generate(string code) {
        CompilerParameters param = new CompilerParameters();
        param.GenerateInMemory = true;
        param.ReferencedAssemblies.Add("System.Web.dll");
        CompilerResults rs = new CSharpCodeProvider().CompileAssemblyFromSource(param, ParseTemplate(code));
        if (0 < rs.Errors.Count) {
            StringWriter sw = new StringWriter();
            sw.WriteLine("Compile Error...");
            foreach (CompilerError err in rs.Errors)
                sw.WriteLine(err.ToString());
            throw new Exception(sw.ToString());
        }
        return (ConvertTemplateDelegate) Delegate.CreateDelegate(typeof(ConvertTemplateDelegate), rs.CompiledAssembly.GetType("Template", true).GetMethod("Convert"));
    }
    private static string ParseTemplate(string code) {
        using (StringWriter sw = new StringWriter()) {
            sw.WriteLine("using System; using System.Collections.Generic; using System.IO; using System.Web;");
            sw.WriteLine("public static class Template {");
            sw.WriteLine("public static void Convert(TextWriter tw, Dictionary<object, object> args) {");
            int index = 0;
            while (0 <= index &amp;&amp; index < code.Length) {
                int i = code.IndexOf("<%", index);
                sw.WriteLine("tw.Write(\"{0}\");", EscapeString(i < 0 ? code.Substring(index) : code.Substring(index, i - index)));
                if (0 <= i) {
                    i += 2;
                    int i2 = code.IndexOf("%>", i);
                    if (0 <= i2) {
                        string cc = code.Substring(i, i2 - i);
                        if (cc.StartsWith("="))
                            sw.WriteLine("tw.Write(HttpUtility.HtmlEncode(\"\"+({0})));", cc.Substring(1));
                        else
                            sw.WriteLine(cc);
                        i = i2 + 2;
                    }
                }
                index = i;
            }
            sw.WriteLine("}}");
            return sw.ToString();
        }
    }
    private static string EscapeString(string code) {
        return code.Replace("\\", "\\e").Replace("\"", "\\\"").Replace("\t", "\\t").Replace("\n", "\\n").Replace("\r", "\\r").Replace("\\e", "\\\\");
    }
}

サンプル C# コード。ためしにテンプレートから Xml 生成して、標準出力してみる。

class Program {
    static void Main(string[] args) {
        ConvertTemplateDelegate func = TemplateGenerator.Generate(TemplateEngine.Resource1.template);
        using (StringWriter sw = new StringWriter()) {
            Dictionary<object, object> arg = new Dictionary<object, object>();
            arg["title"] = "template sample";
            arg["data"] = new string[] { "foo", "fooo", "<strong>foooooooooo!</strong>" };
            func(sw, arg);
            Console.WriteLine(sw);
        }
    }
}

サンプルテンプレート

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title><%= args["title"] %></title>
  </head>
  <body>
    <h1><%= args["title"] %></h1>
    <table>
<% string[] data = (string[]) args["data"]; %>
<% for(int i = 0; i < data.Length; i++) { %>
      <tr bgcolor="<%= i % 2 == 0 ? "#FFCCCC" : "#CCCCFF" %>">
        <td><%= i %></td>
        <td><%= data[i] %></td>
      </tr>
<% } %>
    </table>
  </body>
</html>

出力例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>template sample</title>
  </head>
  <body>
    <h1>template sample</h1>
    <table>


      <tr bgcolor="#FFCCCC">
        <td>0</td>
        <td>foo</td>
      </tr>

      <tr bgcolor="#CCCCFF">
        <td>1</td>
        <td>fooo</td>
      </tr>

      <tr bgcolor="#FFCCCC">
        <td>2</td>
        <td>&lt;strong&gt;foooooooooo!&lt;/strong&gt;</td>
      </tr>

    </table>
  </body>
</html>

CodeDom 使って動的コンパイル……って、このコードのままだとセキュリティ的に大問題な気がするな。

素直に ASP.NET 使ったほうが楽だと直感した。

あと EscapeString すっごく自信ない。たぶん修正が必要だと思うｗ

Permalink | 記事への反応(0) | 23:32

■40行で作るPerl用テンプレート エンジン

60行で作るPHP用テンプレートエンジン

やってしまった・・・。

方針：

PHPのように＜?php・・・?＞が無いのでそのまま表示と(foreach|if|unless)に対応。
[% $c{title} %]で普通に表示(TTっぽい？)
[# $c{title} #]でHTML エスケープ表示


package SixtyLinesTemplate;

use strict;
use warnings;
our $VERSION = '0.01';

sub convert {
    return unless defined(my $str = shift);
    $str =~ s{&amp;}{&amp;}gso;
    $str =~ s{<}{&lt;}gso;
    $str =~ s{>}{&gt;}gso;
    $str =~ s{\"}{&quot;}gso;
    $str;
}

sub include_template {
    my $tmpl = shift;
    my %c = %{+shift};
    eval convert_template($tmpl);
    die $@ if $@;
}

sub convert_template {
    my $tmpl = shift;
    my $cache = $tmpl.'.cache';
    return scalar do { open my ($FH) , $cache; local $/; <$FH> }
        if ( -f $cache &amp;&amp; (stat($tmpl))[9] <= (stat($cache))[9] );
    my $out = do { open my ($FH) , $tmpl; local $/; <$FH> };
    $out =~ tr/()/\x28\x29/;
    $out =~ s/\[%\s*(foreach|if|unless|end)\s*(.+?)\s*{?\s*%\]/");".(lc($1) eq 'end' ? '} print q(' : "$1 $2 { print q(")/ige;
    $out =~ s/\[%(.+?)%\]/);print $1; print q(/g;
    $out =~ s/\[#(.+?)#\]/);print SixtyLinesTemplate::convert($1); print q(/g;
    $out = 'print q('.$out.');';
    open my ($FH) , '>' , $cache;
    print $FH $out;
    $out;
}

1;

サンプルコード：


use SixtyLinesTemplate;

my $context = {
    'title' => 'Example',
    'list'  => [10,'<A&amp;B>']
};

SixtyLinesTemplate::include_template('template.tmpl',$context);

サンプルテンプレート：


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head&gt;
    <title>[# $c{title} #]</title>
  </head&gt;
  <body>
    <h1>[# $c{title} #]</h1>
    <table>
[% foreach my $i (0..@{$c{list}}-1) %]
      <tr bgcolor="[% $i % 2 ? '#FFCCCC' : '#CCCCFF' %]">
        <td&gt;[% $i %]</td&gt;
        <td&gt;[# $c{list}[$i] #]</td&gt;
      </tr>
[% end %]
    </table>
  </body>
</html>

出力例：


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Example</h1>
    <table>

      <tr bgcolor="#CCCCFF">
        <td>0</td>
        <td>10</td>
      </tr>

      <tr bgcolor="#FFCCCC">
        <td>1</td>
        <td>&lt;A&amp;amp;B&gt;</td>
      </tr>

    </table>
  </body>
</html>

foreachんところが汚く見えるかもしれませんが、あれは添え字を取ろうとするとああなるんでご勘弁を。

普通にループするだけならforeach my $item (@$c{title}) でいけますゆえ。

あと存在しない変数とか使うと死んだり警告でたりするのでevalの前にno strictとno warningsをやった方がいいかもねぇ。

って何まじめに検証してんだ俺・・・orz

追記：

SixtyじゃなくてFortyだね。恥ずかし！

追追記：

danさんに添削頂いたYO！

でも＆amp;の奴はちゃんと書いてるんだけども投稿すると勝手にエスケープされてしまってるんだよね。何でだろ？

ちなみにこのconvertの処理はCGI::Utilから拝借しました。

Permalink | 記事への反応(1) | 15:31

■60行で作るPHP用テンプレート エンジン

唐突に、PHP用のテンプレートエンジンを作ってみる。

方針：

ふつうのPHP ファイルをテンプレートとして使う。
<?php echo $var; ?> は面倒なので #{$var} と書けるようにする。
<?php echo htmlspecialchars($var); ?> はもっと面倒なので %{$var} と書けるようにする。
ついでにXML宣言も <<?php ?>?xml ... に自動置換する。

【追記】レイアウト機能を追加してみた

コード：

<?php
/*
 *  SixtyLinesTemplate.php - 60行しかないけどSmartyより速いテンプレートエンジン
 *
 *  使い方：
 *     require_once('SixtyLinesTemplate.php');
 *     $TEMPLATE_DIR = 'templates'; // 省略可、パーミッションに注意
 *     $context = array('title'=>'Example',
 *                      'list'=>array(10,'<A&amp;B>',NULL));
 *     include_template('template.php', $context);
 *
 *  ライセンス: public domain （自由に改造してね）
 */

/*
 *  テンプレートを探すディレクトリ。
 */
$TEMPLATE_DIR = NULL;

/*
 *  テンプレートを読み込んで実行する。
 *  $_context は変数名をキー、値を要素とする連想配列。
 */
function include_template($_filename, $_context) {
    $_cachename = convert_template($_filename);
    extract($_context);
    include($_cachename);
}

/*
 *  filename を読み込み、convert_string() で置換してから
 *  filename.cache に書き込む。読み書きのロックは省略。
 *  (file_{get,put}_contents() はファイルロックできるようにすべきだ。)
 */
function convert_template($filename) {
    global $TEMPLATE_DIR;
    if (! file_exists($filename) &amp;&amp; $TEMPLATE_DIR)
        $filename = "$TEMPLATE_DIR/$filename";
    $cachename = $filename . '.cache';
    if (! file_exists($cachename) || filemtime($cachename) < filemtime($filename)) {
        $s = file_get_contents($filename);
        $s = convert_string($s);
        file_put_contents($cachename, $s);
    }
    return $cachename;
}

/*
 *  テンプレートの中身を置換する。
 *  - '#{...}' を 'echo ...;' に置換
 *  - '%{...}' を 'echo htmlspecialchars(...);' に置換
 *  - ついでにXML宣言も置換
 */
function convert_string($s) {
    $s = preg_replace('/^<\?xml/', '<<?php ?>?xml', $s);
    $s = preg_replace('/#\{(.*?)\}/', '<?php echo $1; ?>', $s);
    $s = preg_replace('/%\{(.*?)\}/', '<?php echo htmlspecialchars($1); ?>', $s);
    return $s;
}
?>

サンプルPHP コード：

<?php
require_once('SixtyLinesTemplate.php');
$TEMPLATE_DIR = 'templates'; // optional
$context = array('title'=>'Example', 'list'=>array(10,'<A&amp;B>',NULL));
include_template('template.php', $context);
?>

サンプルテンプレート：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>%{$title}</title>
  </head>
  <body>
    <h1>%{$title}</h1>
    <table>
<?php foreach ($list as $i=>$item): ?>
      <tr bgcolor="#{$i % 2 ? '#FFCCCC' : '#CCCCFF'}">
        <td>#{$i}</td>
        <td>%{$item}</td>
      </tr>
<?php endforeach ?>
    </table>
  </body>
</html>

出力例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Example</h1>
    <table>
      <tr bgcolor="#CCCCFF">
        <td>0</td>
        <td>10</td>
      </tr>
      <tr bgcolor="#FFCCCC">
        <td>1</td>
        <td>&lt;A&amp;B&gt;</td>
      </tr>
      <tr bgcolor="#CCCCFF">
        <td>2</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

Permalink | 記事への反応(8) | 03:43

2007-08-12

■マークアップ エンジニアって結局何やる人なの？

何か名前の響きからしてこんな感じの人を想像してたんだけど

マークアップの技術者→SGML系統のマークアップ言語全般に関する技術者？
(SGML,) (X)HTML, XML文書を作成する
- いろんなバージョンとか種類のマークアップ言語の仕様の知識がある(かつ状況に合わせて仕様を選ぶことができる)
  - XHTMLなら1.0, Modularization, 1.1, Basic, Mobile Profile...
- 関連する諸々の仕様の知識もある
  - HTTP, URI (, IRI)...
スキーマ(DTD, XML Schema, RELAX NG...)を作成する
スタイルシート(CSS, XSLT (, XSL-FO, DSSSL)...)を作成する
ウェブアクセシビリティ(WCAG...)の知識がある
セマンティックなんとか(Dublin Core, microformats, RDF, GRDDL...)の知識がある

でもいままでamachang発言((X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいとか)の反応ざっと見てきたけどid:amachang(とその周辺)が「マークアップエンジニア = (X)HTML+CSS しか出来ない人」として話を進めてるのにも関わらずそれについて反論があんまりないんだよな。「趣味じゃなくて仕事として(X)HTML(とCSS)を作成するためにはこれこれこういう知識が必要なんだよ」とか「マークアップエンジニアには(X)HTMLとCSSしかすることがないとでも思ってんのか馬鹿」とか言ったりするのかと思ったらほとんどそんなことなくて、むしろ同意ですとかそんなこと言われなくてもわかってるよとかJavaScriptだって同じじゃんとか見た感じそんなのばっかり。どうも俺の想像した職業とは違うらしい。

マークアップエンジニアって本当に(X)HTMLとCSSの知識だけで(X)HTMLとCSS書いてる人なの？反応見ててそもそも(X)HTMLとCSSに理解があるのかってこと自体にまで疑問を感じるんだけど。

Permalink | 記事への反応(1) | 22:27

2007-06-27

■http://anond.hatelabo.jp/20070627152101

br /が文法違反になるのはxmlじゃなくhtmlで書いてるからなんじゃないの?

ちゃんとdtd宣言に則った書式で書かないと減点されるよ。

Permalink | 記事への反応(1) | 15:31

2007-03-19

■tfootはtbodyの前に書かなくてはいけないよ

tfoot は tbody の前に書いた方がいいよ | WWW WATCH

内容が間違ってるとは言い切れないけど、タイトルのせいで勘違いしている人がいるようなので一言。

「書いたほうがいい」じゃなくて「書かなくてはいけない」ね。そうしないと(X)HTMLとして間違ってるから。

以下HTML 4.01、XHTML 1.0、XHTML 1.1（XHTML Modularization）のDTD。

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

<!ENTITY % table.content
     "( %caption.qname;?, ( %col.qname;* | %colgroup.qname;* ),
      (( %thead.qname;?, %tfoot.qname;?, %tbody.qname;+ ) | ( %tr.qname;+ )))"
>

ちなみにPukiWikiは

|thead|h
|tbody|
|tfoot|f

と書いても

<div class="ie5">
<table class="style_table" cellspacing="1" border="0">
<thead><tr><td class="style_td">thead</td></tr></thead>
<tfoot><tr><td class="style_td">tfoot</td></tr></tfoot>
<tbody><tr><td class="style_td">tbody</td></tr></tbody>
</table>
</div>

と出力してくれる。（改行はこちらで入力）

PukiWiki…恐ろしい子！（白目）

見直してて気づいたけど、HTML 4.01/XHTML 1.0は

<table><thead>...</thead><tr>...</tr></table>

を許してる（tbodyが補われるかどうかの違いはあるけど）のに、XHTML 1.1はそうじゃないのね。

Permalink | 記事への反応(0) | 01:13

2007-03-05

■

先日「target="_blank"として別窓で開かせたほうが良い。Strict DTDにtarget属性が無くて困る」と言い出した人がいて、ひどくがっかりした。表面的にはちゃんとしたHTMLを書いてる人だっただけに。

それはauthorではなくuserやuser agentの仕事だろう。authorがやるとしても、HTMLではなくスタイルシートに書くのが筋だ。別窓とtarget属性を混同してはいけない。

もっとも、その人が混同してしまった原因は我々にもある。ユーザビリティやアクセシビリティの問題とHTML的な問題とをごちゃまぜにして説明していた。

正しいHTML方面の人の書いたHTML入門にあまり良いものが無くて、根本的な「思想」(大げさな言い方で、好きではないのだが)の部分がしっかり伝わるものを自分で書こうと思って、書き始めてみたのだが、どうも一般人に通じるとは思えなくて、自信を失って破棄してしまう。プログラマに通じれば良いということにすれば簡単だが、それなら既にあるもので足りるわけで。

Permalink | 記事への反応(0) | 23:11

2007-01-30

■[HTML]要素と要素型

anond:20070130215557

空気を読まない俺様が来ましたよ。

http://www.kanzaki.com/docs/html/htminfo11.html

細かく言うと、“段落を示すp”“本文を表すbody”などの定義によって文書の構成単位を（抽象的に）示すときは「要素タイプ」（element type = JIS用語では要素型）と呼ばれ、それが実際にHTML文書中に出現しているものを「要素」と呼びます。例えていえば、要素タイプはクッキーの「抜き型」、要素は焼き上がったそれぞれのクッキーみたいなものです。ですから、要素タイプp（抜き型）はそれぞれのDTDにつき一つしかありませんが、実際の文書に出現するp要素（クッキー）は段落の数だけ存在します。

Permalink | 記事への反応(0) | 22:07