Markup

Node (各種パーツ)

Author : trashtoy

Table of Contents

概要

Node インタフェースはマークアップ言語を構成するパーツをあらわします. 具体的には要素・テキスト・コメントなどに相当します.

API は DOM に似ている部分もありますが, それは表面的な相似に過ぎません. このモジュールの目的はマークアップ言語のモデル化ではなく出力であるため, DOM で定義されている一部のノードは意図的にサポートされていません. 逆に, DOM には無くこのモジュールのみに存在するノードもあります.

Element

Element はマークアップ言語における「要素」を表現するクラスです. Element には ContainerElementEmptyElement の 2 種類があります.

ContainerElement

ContainerElement は開始タグと終了タグから成る要素を表します. append() メソッドを使ってテキストや任意のノードを子ノードとして追加することが出来ます.

以下に ContainerElement を使ったサンプルコードを掲載します.

  1. $p->setAttribute("class""test");
  2. $p->append("The Quick Brown Fox Jumps Over The Lazy Dogs.");
  3.  
  4. $builder new Peach_Markup_DefaultBuilder();
  5. echo $builder->build($p);

このコードは以下の結果を出力します.

  1. <class="test">The Quick Brown Fox Jumps Over The Lazy Dogs.</p>

EmptyElement

EmptyElement は空要素 (終了タグを伴わないタグ) を表すクラスです. HTML では img, input, br, hr などの要素が該当します.

このノードは Peach_Markup_DefaultBuilder::setRenderer()Renderer の種類を切り替えることで, タグの書式を制御することが出来ます. 以下にサンプルコードを掲載します. タグの末尾が ">" から "/>" に変化していることに注目してください.

  1. $input new Peach_Markup_EmptyElement("input");
  2. $input->setAttributes(array("type" => "text""name" => "subject""value" => ""));
  3.  
  4. $builder new Peach_Markup_DefaultBuilder();
  5. $builder->setRenderer("HTML");
  6. echo $builder->build($input)// Output: <input type="text" name="subject" value="">
  7.  
  8. $builder->setRenderer("XHTML");
  9. echo $builder->build($input)// Output: <input type="text" name="subject" value="" />

属性の設定方法

要素に属性をセットするためのメソッドとして setAttribute()setAttributes() の 2 種類があります. 属性を 1 つだけセットする場合は setAttribute(), 複数の属性を一度にセットしたい場合は setAttributes() といった具合に使い分けると良いでしょう.

以下にサンプルコードを掲載します.

  1. // setAttribute() で属性をセットします
  2. $script new Peach_Markup_ContainerElement("script");
  3. $script->setAttribute("type""text/javascript");
  4. $script->setAttribute("src""sample.js");
  5.  
  6. // 以下のように setAttributes() で複数の属性を一度にセットすることも出来ます
  7. $script new Peach_Markup_ContainerElement("script");
  8. $script->setAttributes(array("type" => "text/javascript""src" => "sample.js"));

Boolean 属性の設定方法

例えば HTML における input 要素の readonly 属性のような, 値を持たない属性のことを Boolean 属性と呼びます. 要素に Boolean 属性をセットするには以下の方法があります.

  • setAttribute() の第 2 引数に null を指定する (または第 2 引数を省略する)
  • setAttributes() の引数の配列で, キーに属性名, 値に null を設定する
  • setAttributes() の引数の配列で, キーを省略し, 値に属性名を設定する

input 要素に readonly 属性を付加するサンプルコードを掲載します. 以下に挙げるコードはすべて同じ意味になります.

  1. // setAttribute() の第 2 引数を省略する場合
  2. $input new Peach_Markup_EmptyElement("input");
  3. $input->setAttributes(array("type" => "text""name" => "subject""value" => "Sample"));
  4. $input->setAttribute("readonly");
  5.  
  6. // キーに属性名, 値に null を指定する場合
  7. $input new Peach_Markup_EmptyElement("input");
  8. $input->setAttributes(array("type" => "text""name" => "subject""value" => "Sample""readonly" => null));
  9.  
  10. // キーを省略する場合
  11. $input new Peach_Markup_EmptyElement("input");
  12. $input->setAttributes(array("type" => "text""name" => "subject""value" => "Sample""readonly"));

Text

Text は要素内のテキストを表します. このノードは出力される際に自動的に htmlspecialchars() で特殊文字を変換します.

append() メソッドの引数に文字列を指定した場合, 内部ではその文字列の内容をあらわす Text ノードが生成され, そのノードが追加されるという仕組みになっています.

以下にサンプルコードを掲載します.

  1. $text new Paach_Markup_Text("<Hello> & <World!>");
  2. $p1   new Peach_Markup_ContainerElement("p");
  3. $p1->append($text);
  4.  
  5. // 通常は, 以下のように文字列を直接 append してください (上の書き方と同じ処理です)
  6. $p2   new Peach_Markup_ContainerElement("p");
  7. $p2->append("<Hello> & <World!>");
  8.  
  9. $builder new Peach_Markup_DefaultBuilder();
  10. echo $builder->build($p1)// Output: <p>&lt;Hello&gt; &amp; &lt;World!&gt;</p>

Code

Code は整形済のテキストを表すクラスです. Text ノードと違い, 出力の際に特殊文字の変換 (エスケープ) は一切せず, 与えられた文字列をそのまま出力します. XML 宣言, DOCTYPE 宣言, CDATA セクション, PI (処理命令) など, このモジュールでサポートされていない構文をノードの一部として扱いたい場合に使用してください.

以下は HTML の style 要素を出力するサンプルコードです.

  1. $str = <<<EOS
  2. body {
  3.     color: #000;
  4.     background-color: #fff;
  5.     width: 100%;
  6. }
  7. @media(min-width: 901px) {
  8.     body {
  9.         width: 900px;
  10.     }
  11. }
  12. EOS;
  13.  
  14. $style new Peach_Markup_ContainerElement("style");
  15. $style->setAttribute("type""text/css");
  16. $style->append(new Peach_Markup_Code($str));
  17.  
  18. $builder new Peach_Markup_DefaultBuilder();
  19. echo $builder->build($style);

このコードは以下の文字列を出力します.

  1. <style type="text/css">
  2.     body {
  3.         color#000;
  4.         background-color#fff;
  5.         width100%;
  6.     }
  7.     @media(min-width901px{
  8.         body {
  9.             width900px;
  10.         }}
  11. </style>

Comment

Comment は <!-- と --> で囲まれたコメント部分を表現するクラスです. 以下にサンプルコードを掲載します.

  1. $comment new Peach_Markup_Comment();
  2. $comment->append("Sample comment");
  3. $builder new Peach_Markup_DefaultBuilder();
  4. echo $builder->build($comment)// Output: <!--Sample comment-->

コメントアウト

単純にテキストをコメントにするだけではなく, 任意のノードのコメントアウトも表現出来ます. 以下に例を挙げます.

  1. $h1 new Peach_Markup_ContainerElement("h1");
  2. $h1->append("Sample");
  3.  
  4. $p->append("This paragraph is disabled.");
  5.  
  6. $comment new Peach_Markup_Comment();
  7. $comment->append($h1);
  8. $comment->append($p);
  9.  
  10. $builder new Peach_Markup_DefaultBuilder();
  11. echo $builder->build($comment);

このコードは以下の文字列を出力します.

  1. <!--
  2. <h1>Sample</h1>
  3. <p>This paragraph is disabled.</p>
  4. -->

メタコメント

以下のように, コメントの先頭と末尾に任意の文字列を付与することが出来ます.

  1. $h1 new Peach_Markup_ContainerElement("h1");
  2. $h1->append("Sample");
  3.  
  4. $p->append("This paragraph is disabled.");
  5.  
  6. $comment new Peach_Markup_Comment("START""END");
  7. $comment->append($h1);
  8. $comment->append($p);
  9.  
  10. $builder new Peach_Markup_DefaultBuilder();
  11. echo $builder->build($comment);

このコードは以下の文字列を出力します. 先ほどの例と似ていますが, コメントの先頭と末尾に "START", "END" という文字列が付与されていることに注目してください.

  1. <!--START
  2. <h1>Sample</h1>
  3. <p>This paragraph is disabled.</p>
  4. END-->

この機能を使って一部のブラウザに実装されている条件付きコメント ("<!--[if lt IE 7]> ... <![endif]-->" など) を表現することも出来ますが, 条件付きコメント専用の API として Peach_Markup_Html::conditionalComment() が既に用意されているので, 通常はそちらを使用することを推奨します.