「DTD」を含む日記 RSS

はてなキーワード: DTDとは

2018-07-03

anond:20180703163232

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
	<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
	<title>


  
  

2017-10-20

「ちなみに"//EN"って何のことなんでしょうね」

シフトJISを使い続ける上場企業をまとめてみた - megamouthの葬列

それは文書宣言内に使われる公開識別子(この場合公的公開識別子)のパートの一つで公開テキスト(この場合DTD)が英語で書かれていることを意味するんや

と書こうとしたらもう指摘が入っていた

まあもう2017年なんや基本的にこんなことを知っていても役に立つ場所が無いので気にする必要はないんやで

いにしえのHTML原理主義気取りの奴とやりあうときとかその程度にしか役に立たんのやで

2010-09-03

http://anond.hatelabo.jp/20100903065628

だって、そもそもHTMLでは、実体としての半角「<」は「<」、半角「>」は「>」にエスケープされなければならないものだし。

正規表現でどうしてもやりたいなら、DTD定義されてるエレメント名を定義して引っ掛けるしかないよ。

2010-02-19

新世ウェブスタンダード

第壱話 HTML5、襲来

第弐話 見知らぬ、ブラウザ

第参話 鳴らない、Audio

第四話 WAI-ARIA、逃げ出した後

第伍話 Safari、心の向こうに

第六話 決戦、第3のブラウザOpera

第七話 WWWの造りしもの

第八話 Chrome、来日

第九話 瞬間、Canvas、重ねて

第拾話 セクションダイバー

第拾壱話 静止したACID3の中で

第拾弐話 先行実装の価値

第拾参話 バグ、混入

第拾四話 Firefox、魂の座

第拾伍話 バグとハック

第拾六話 死に至る非標準、そして

第拾七話 四人目のECMAScriptエンジン

第拾八話 DTDの選択を

第拾九話 ベンダーの戰い

第弐拾話 XMLのかたち、SGMLのかたち

第弐拾壱話 WHATWG誕生

第弐拾弐話 せめて、マイクロフォーマットらしく

第弐拾参話 IE

第弐拾四話 最後のCSS

第弐拾伍話 終わるXHTML2

第弐拾六話 世界の中心でセマンティックを叫んだけもの

劇場版 W3C新生

劇場版 WebKit/世界標準を、君に

2010-01-13

http://okajima.air-nifty.com/b/2010/01/post-abc6.html

少し遅れた感があるけど、解いてみた。

出力がテキストでないけど・・・。

仕事の合間を使ってやったものの、昼前に始めたのが5時頃にようやくできる程度。

これを25分とは尋常じゃないな、大口叩くだけあってよっぽど優秀なんだろう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

<html&gt;

<head&gt;
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"&gt;
<meta http-equiv="Content-Language" content="ja"&gt;
<meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
<meta http-equiv="Content-Style-Type" content="text/css"&gt;
<style type="text/css"&gt;
<!--

pre {
  font-family: monospace;
}

--&gt;
</style&gt;
<script type="text/javascript"&gt;
<!--

window.onload = function() {

  var q = new Map();
  q.load("maptest.txt");
  q.search();

  var answer = document.getElementsByTagName("pre").item(0);
  var answerText = "\r\n";
  for(var ix = 0; ix < q.route.length; ix++) {
    answerText += q.route[ix].join("") + "\r\n";
  }
  answer.firstChild.data = answerText;

  alert("終了しました。");
};

/** マップオブジェクト
 */
function Map() {
  this.ymap = [];
  this.route = [];
}

//マップの読み込み
Map.prototype.load = function(filePath) {
 //ファイルシステム
  var fileSystem = new ActiveXObject("Scripting.FileSystemObject");

 //ファイル読み込み
  var file = fileSystem.OpenTextFile(filePath);
  while(!file.AtEndOfLine) {
    var fileBuffer = file.ReadLine();
    this.ymap.push(fileBuffer.split(""));
  }
  file.Close();

  fileSystem = null;
};

//マップの探索
Map.prototype.search = function() {

  var that = this;

 //マップコピー
  var ymap = this.ymap.concat();
  for(var y = 0; y < ymap.length; y++) {
    ymap[y] = ymap[y].concat();
    for(var x = 0; x < ymap[y].length; x++) {
      if(ymap[y][x] == "S")
        var start = new MapNode(y, x);
      if(ymap[y][x] == "G")
        var goal = new MapNode(y, x);
    }
  }

  var openList = [];
  var closeList = [];

  start.costf = start.distance(goal);
  openList.push(start);

 //経路探索
  while(openList.length &gt; 0) {
    var node = openList.shift();
   //探索終了
    if(goal.equal(node)) {
      createRoute(node);
      break;
    }
    closeList.push(node);

   //隣接ノードの作成
    var tonari = [];
    if( ymap[node.positionY][node.positionX - 1] == " "
     || ymap[node.positionY][node.positionX - 1] == "G" )
      tonari.push(new MapNode(node.positionY, node.positionX - 1, node));
    if( ymap[node.positionY - 1][node.positionX] == " "
     || ymap[node.positionY - 1][node.positionX] == "G" )
      tonari.push(new MapNode(node.positionY - 1, node.positionX, node));
    if( ymap[node.positionY][node.positionX + 1] == " "
     || ymap[node.positionY][node.positionX + 1] == "G" )
      tonari.push(new MapNode(node.positionY, node.positionX + 1, node));
    if( ymap[node.positionY + 1][node.positionX] == " "
     || ymap[node.positionY + 1][node.positionX] == "G" )
      tonari.push(new MapNode(node.positionY + 1, node.positionX, node));

   //隣接ノード検索
    for(var tx = 0; tx < tonari.length; tx++) {
      var openIn = false;
      var closeIn = false;
      tonari[tx].cost = node.cost + 1;
      var costf = tonari[tx].cost + tonari[tx].distance(goal);
      tonari[tx].costf = costf;

     //オープンリストから検索し入れ替える。
      for(var ox = 0; ox < openList.length; ox++) {
        if(tonari[tx].equal(openList[ox])) {
          openIn = true;
          if(costf < openList[ox].costf) {
            openList.splice(ox, 1);
            push(openList, tonari[tx]);
          }
          break;
        }
      }
     //クローズリストから検索し、オープンリストへ移す。
      for(var cx = 0; cx < closeList.length; cx++) {
        if(tonari[tx].equal(closeList[cx])) {
          closeIn = true;
          if(costf < closeList[cx].costf) {
            closeList.splice(cx, 1);
            push(openList, tonari[tx]);
          }
          break;
        }
      }
     //どちらにもない場合、オープンリストへ追加する。
      if(!openIn &amp;amp;&amp;amp; !closeIn)
        push(openList, tonari[tx]);
    }
  }

 //適切な位置に追加する。
  function push(array, item) {
    for(var ix = 0; ix < array.length; ix++) {
      if(item.costf < array[ix].costf) {
        array.splice(ix, 0, item);
        return;
      }
    }
    array.push(item);
  }

 //ルートマップの作成
  function createRoute(lastNode) {
    var node = lastNode.parent;
    while(node.parent) {
      ymap[node.positionY][node.positionX] = "$";
      node = node.parent;
    }
    that.route = ymap;
  }
};

/** マップノード
 */
function MapNode(y, x, parentNode) {
  this.positionY = y;
  this.positionX = x;
  this.parent = parentNode;
  this.cost = 0;
  this.costf = 0;
}

//同一ノードかチェックする。
MapNode.prototype.equal = function(targetNode) {
  if( this.positionY == targetNode.positionY
   &amp;amp;&amp;amp; this.positionX == targetNode.positionX )
    return true;
  return false;
};

//直線距離を求める。
MapNode.prototype.distance = function(targetNode) {
  sabunY = this.positionY - targetNode.positionY;
  sabunX = this.positionX - targetNode.positionX;
  return sabunY ^ 2 + sabunX ^ 2;
};

// --&gt;
</script&gt;
<title&gt;経路探索:A*</title&gt;
</head&gt;
<body&gt;

<pre&gt;&amp;nbsp;</pre&gt;

</body&gt;
</html&gt;

2009-11-28

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

はじめに

最近マークアップエンジニア志望の若者と話す機会が多いのだけれど、そこで気づかされるのは、彼らの中に過去HTML(特に90年代以前の仕様)を読んだことのあるという人が、驚くほど少ないことだ。

例えば「マーク・アンドリーセンをどう思う?」と聞くと、「アンドリーセンって誰ですか?」という答えが返ってくる。「ヨスケの独自要素で何が一番好き?」と聞くと、「見たことがありません」と言われてしまう。「ではきみは、昔の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』の影響を免れたものはないからである。

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は、これ以降無数に手本とされ、真似され、拡張されることとなるのである。

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はここに、新しい時代の幕開けを迎えるに至ったのである。

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

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

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

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

それらが相まって、やがてCSSコミュニティは空前の黄金時代を迎えることになる。その端緒となり、道筋を切り開いたのが、他ならぬこの『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業界にもたらした変革には、大きなものがあったのである。

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標準たちの誕生にもつながっていったのである。

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』の影響を免れるものはないであろうからである。

まとめ

以上、これさえ読めば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を体系的に見るとはどういうことか」を学んできた。

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

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

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

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

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


元ネタ

2008-05-13

GuiceSeasar2 を連携させてみたよ

[参考文献]

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

    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 namespace="client">

    <include path="hello.dicon" />

    <component class="org.seasar.guice.Client" />

    </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 initializeOnCreate="false">

    <component class="org.seasar.guice.HelloServiceImpl" />

    </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)

    2007-12-11

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

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

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

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

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

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

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

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

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

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

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





    http://anond.hatelabo.jp/20071211012712

    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>
    

    いくつか補足:

    2007-10-30

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

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

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

    方針


    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 すっごく自信ない。たぶん修正が必要だと思うw

    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から拝借しました。

    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>
    

    2007-08-12

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

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

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

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

    2007-06-27

    http://anond.hatelabo.jp/20070627152101

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

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

    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はそうじゃないのね。

    2007-03-05

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

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

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

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

    2007-01-30

    []要素と要素型

    anond:20070130215557

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

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

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

     
    アーカイブ ヘルプ
    ログイン ユーザー登録
    ようこそ ゲスト さん