1章 はじめに
  1. はじめに
  2. WebRelease の利用環境
  3. 製品のライセンスについて
2章 ユーザ管理
  1. WebRelease のユーザ管理
  2. ユーザの登録
  3. ユーザの休止
  4. ユーザの削除
  5. ログインユーザ一覧
  6. ログイン履歴
  7. ユーザ登録情報の一括処理
3章 サイトの作成
  1. サイトの作成
  2. サイト設定
  3. スタッフの登録と役割の設定
  4. スタッフごとのテンプレート設定
  5. スタッフのフォルダへのアクセス制限
  6. スタッフの承認ステップ
  7. スタッフの解任
  8. サイトリソース
  9. リソースの登録
  10. リソースの編集
  11. リソースの一括移動
  12. リソース名の一括設定
  13. リソースの一括削除
  14. リソースフォルダ
  15. 辞書の管理
  16. 外部リンクのチェック
  17. サイトのエキスポート
  18. サイトのインポート
  19. サイトの閉鎖
  20. サイトの削除
  21. サイトの操作履歴
4章 FTPの設定
  1. FTP の設定
  2. プライマリチャネルの設定
  3. FTP 記録の参照
  4. FTP の実行状況
  5. FTP 予約(定時起動)の設定
5章 テンプレート
  1. テンプレート
  2. テンプレートの作成
  3. 文書型の定義
  4. 要素のタイプ
  5. テンプレートの展開
  6. 要素参照
  7. 関数呼び出し
  8. 演算子
  9. テンプレートリソース
  10. リソース参照
  11. メソッド
  12. 拡張タグ wr-if wr-then wr-else
  13. 拡張タグ wr-switch wr-case wr-default
  14. 拡張タグ wr-conditional wr-cond
  15. 拡張タグ wr-for
  16. 拡張タグ wr-break
  17. 拡張タグ wr-variable
  18. 拡張タグ wr-append
  19. 拡張タグ wr-clear
  20. 拡張タグ wr-return
  21. 拡張タグ wr-error
  22. 拡張タグ wr-- と wr-comment
  23. WYSIWYG エディタ設定
  24. テンプレート・プロファイラ
  25. テンプレートのリビジョン
  26. テンプレートのダウンロード
  27. テンプレートのアップロード
  28. テンプレートの上書きアップロード
  29. テンプレートのフォルダ
  30. テンプレートの状態
  31. テンプレートの削除
  32. ページ作成後のテンプレート修正
  33. 入力フィールドの短縮表示
  34. 作成したページの一覧
  35. テンプレートを利用可能なスタッフの設定
  36. テンプレートの操作履歴
  37. テンプレートを参照している目次の一覧
  38. テンプレートの検索
6章 コンポーネント
  1. コンポーネント
  2. コンポーネントの使用例
  3. コンポーネントとセレクタ
7章 ページの作成
  1. ページの作成の手順
  2. ページのプレビュー
  3. 実機でのプレビュー
  4. ページの状態
  5. ページの編集と編集完了
  6. ページリソース
  7. リソースの登録
  8. リソースの編集
  9. リソースの一括移動
  10. リソースの一括削除
  11. リソースフォルダ
  12. ページの公開と公開終了
  13. ページの削除
  14. ページのリビジョン管理
  15. リンク元一覧
  16. ページ内の外部リンク一覧
  17. ページの公開状況
  18. スケジュール一覧
  19. フォルダ
  20. バージョニングフォルダ
  21. ページの一括処理
  22. 一括ページ登録
  23. html と関連リソースの zip 取り込み
  24. WYSIWYG エディタの使い方
  25. Markdown の使い方
  26. ページの操作履歴
  27. コンテンツ中の語句のチェック
  28. ページの検索
8章 マルチデバイス配信
  1. 多チャネル化
  2. チャネル別コンテンツの生成
  3. チャネル選択機能
9章 承認プロセスの設定
  1. 承認ステップの定義
  2. 承認プロセスの定義
  3. 承認プロセスをフォルダに関連付ける
10章 承認プロセスによる公開管理
  1. ページの公開承認依頼
  2. 承認と差戻
  3. 承認プロセスとページの公開終了
  4. 承認依頼フォルダ
  5. 一括承認依頼
  6. 一括承認
  7. 緊急対応としてのページの公開と公開終了
  8. 承認依頼の削除
  9. 進行中の承認依頼の管理
11章 その他の機能
  1. ダッシュボード
  2. 英語インタフェース
  3. タイムゾーンの指定
12章 システムの運用管理
  1. WebRelease の停止と起動
  2. データのバックアップ
  3. メモリ設定
  4. メールサーバの設定
  5. Proxy サーバの設定
  6. その他のシステム設定
  7. 証明書のインポート
  8. ストレージの管理
  9. 操作履歴
  10. ログファイルのダウンロード
  11. WebRelease のバージョンアップ
  12. ライセンスのアップグレード
  13. 期間ライセンスコードの更新
  14. WebRelease の Uninstall
13章 索引
  1. 関数索引
  2. オブジェクト索引
14章 Appendix
  1. サポートされているタイムゾーン
  2. プレビュー時の URL 書き換え機能
  3. 正規表現
  4. 要素名・リソース名・変数名・メソッド名

HTMLElements オブジェクト

HTMLElements オブジェクトは、基本的に HTMLElement オブジェクトの配列です。

HTMLElements オブジェクトは、例えば、HTMLDocument や HTMLElement オブジェクトに対する select() メソッドの呼び出しによって得られます。一般に select() の結果として複数の HTMLElement オブジェクトが抽出されるため、select() メソッドの戻り値はいつも HTMLElements になります。

抽出されたすべての HTMLElement に対して、同じ処理を行いたい場合、例えば class 属性を付け加えたい場合など、 select() の結果が単なる HTMLElement オブジェクトの配列だとすると、個々の HTMLElement について処理を行うために、wr-for などの繰り返し構文を使って処理を記述しなければなりません。例えば、下記のような記述になります。

select() の結果に対して wr-for で繰り返し処理をする
....
<wr-variable name='images' value='parseHtml(htmlText).select("img")' />
<wr-for list="images.asArray()" variable="img">
%img.addClass("shadow")%
</wr-for>
....

こういった処理をあちこちで記述するのは面倒なものです。そこで HTMLElements オブジェクトが使われます。 例えば HTMLElements オブジェクトの addClass() メソッドを使えば、先のコードは、下記の様に簡潔に記述できます。これだけのコードで、select() されたすべての img 要素に class="shadow" を付加することができます。

HTMLElements オブジェクトの addClass() メソッドを使った場合のコード
....
%parseHtml(htmlText).select("img").addClass("shadow")%
....

HTMLElements オブジェクトは HTMLElement オブジェクトの配列ですが、wr-for で使用する場合には、下記のように asArray() メソッドを使ってください。

wr-for の list= に指定してループを行う場合には明示的に asArray() メソッドを使用する必要があります。
....
<wr-variable name='images' value='parseHtml(htmlText).select("img")' />
<wr-for list="images.asArray()" variable="img">
%img.addClass("shadow")%
</wr-for>
....

HTMLElements オブジェクトは、その中にマッチする要素をひとつも含んでいない場合には isNull() 関数で true が返されます。

select() の結果が空の場合には isNull() 関数は true を返します
....
<wr-variable name="p" value='parseHtml("<p>Hello</p>").select("p")' />
<wr-->
パースされた html 中には p 要素がひとつあります。
変数 p に代入された HTMLElements 要素の size() は 1 になります。
</wr-->
<h1>isNull:%isNull(p)%</h1>
<h1>isNotNull:%isNotNull(p)%</h1>
<wr-variable name="li" value='parseHtml("<p>Hello</p>").select("li")' />
<wr-->
パースされた html 中には li 要素がありません。
変数 li に代入された HTMLElements 要素の size() は 0 になります。
</wr-->
<h1>isNull:%isNull(li)%</h1>
<h1>isNotNull:%isNotNull(li)%</h1>
....

この展開の実行結果は下記のようになります。

実行結果
....
<h1>isNull:false</h1>
<h1>isNotNull:true</h1>
<h1>isNull:true</h1>
<h1>isNotNull:false</h1>
....

addClass(className)

この HTMLElements オブジェクトが保持している複数の要素に、一括して class 属性を追加します。

書式

addClass(className)
className:

追加したい class 属性の名前を指定します。

戻り値:

HTMLElements オブジェクト

複数の HTMLElement オブジェクトに対して一括して class 属性を設定できる点を除いて、HTMLElement オブジェクトの addClass() メソッドと同じです。HTMLElement の addClass() メソッドの説明も参照してください。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
<body>
<ul class="menu">
<li>menuItem1</li>
<li>menuItem2</li>
</ul>
</body>

この中にある li 要素の class 属性に "menuItem" と "listItem" を追加してから、body 全体を展開結果に埋め込む場合の展開の記述は、例えば下記のようになります。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("li").addClass("menuItem").addClass("listItem")%
%doc.body().outerHtml()%
</html>

parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。

doc に対して select("li") を実行し li 要素を取り出します。この例では 2 件取り出されます。

select() の結果得られた li 要素 2 件を含む HTMLElements オブジェクトに対して addClass("menuItem") と addClass("ItemList") を実行し class 属性を追加します。

最後に doc の body に対して outerHtml() メソッドを呼び出して body 要素全体を展開に埋め込みます。

実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul class="menu">
<li class=" menuItem listItem">menuItem1</li>
<li class=" menuItem listItem">menuItem2</li>
</ul>
</body>
</html>

ヒント

removeClass(className) メソッドも参照してください。

addStyle(style)

この HTMLElements オブジェクトが保持している複数の HTMLElement オブジェクトに、一括して style 属性を追加します。

書式

addStyle(style)
style:

追加する style 属性を文字列で指定します。

戻り値:

HTMLElements オブジェクト

既に style 属性が付けられている要素に対して呼び出しても大丈夫です。その場合、既に付けられている style 属性の末尾に、style で指定した文字列が付加されます。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
<body>
<ul>
<li>menuItem1</li>
<li>menuItem2</li>
<li>menuItem3</li>
</ul>
</body>

この中にある li 要素を取り出し、その要素の style 属性に "list-style-type: square;" を追加してから、展開結果に埋め込む場合の展開の記述は、例えば下記のようになります。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("li").addStyle("list-style-type: square;")%
%doc.body().outerHtml()%
</html>

parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。

doc に対して select("li") を実行し li 要素を取り出します。この例では 3 件取り出されます。

select() の結果得られた HTMLElements オブジェクトに対して addStyle("list-style-type: square;") を実行し style 属性に "list-style-type: square;" を追加します。

最後に doc の body に対して outerHtml() メソッドを呼び出して body 要素全体を展開に埋め込みます。

展開の実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul>
<li style="list-style-type: square;">menuItem1</li>
<li style="list-style-type: square;">menuItem2</li>
<li style="list-style-type: square;">menuItem3</li>
</ul>
</body>
</html>

asArray()

この HTMLElements オブジェクトが保持している HTMLElement オブジェクトを配列にして返します。

書式

asArray()
戻り値:

HTMLElement オブジェクトの配列

HTMLElements に保持されている HTMLElement を配列として扱いたい場合に利用します。主な利用局面は HTMLElements を wr-for の list= に渡す場合です。list= に渡してループする場合には、HTMLElements をそのまま渡すのではなく、asArray() メソッドを呼び出した結果を list= に渡すようにしてください。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmltext の記述
<body>
<ul>
<li>menuItem1</li>
<li>menuItem2</li>
<li>menuItem3</li>
</ul>
</body>

この htmlText の中から li 要素の本体を切り出して展開結果に組み込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-for list="parseHtml(htmlText).select(\"li\").asArray()" variable="x">
%x.html()%<br>
</wr-for>
</html>

parseHtml() で htmlText をパースして HTMLDocument オブジェクトを生成してから、select("li") を実行し htmlText 中の li 要素を抽出します。抽出した li 要素を保持している HTMLElements オブジェクトの asArray() メソッドを呼び出して、HTMLElement の配列を取得しそれを wr-for の list= に渡してループしています。

HTMLElements は HTMLElement の配列ですが、それをそのまま wr-for の list= に渡すことができませんので、select() の結果でループを実行したい場合には、asArray() メソッドを呼び出した結果を list= に指定してください。

この展開の実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
menuItem1
<br> menuItem2
<br> menuItem3
<br>
</body>
</html>

attr(attributeName)

指定した名前の属性値を取得します。

書式

attr(attributeName)
attributeName:

取得したい属性の名前を指定します。

戻り値:

属性の値を文字列で返します。もし該当する HTMLElement が存在しない場合、空文字列が返されます。

この HTMLElements に含まれる HTMLElement の中で、attributeName に指定された名前の属性を持つ最初の HTMLElement に指定されているその属性の値を返します。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<a href="http://www.frameworks.co.jp/">www.frameworks.co.jp</a><br>
</body>
</html>

この htmlText を下記のような展開で処理してみます。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<h1>%parseHtml(htmlText).body().select("*").attr("href")%</h1>
</body>
</html>

parseHtml() 関数で htmlText をパースして body 要素を取り出してから body に対して select("*") を実行して全要素を取り出します。この時点で得られた HTMLElements には p 要素と a 要素が含まれています。

その後、この HTMLElements に対して attr("href") を実行しています。結果として得られるのは HTMLElements 中の2番目の a 要素の href 属性の値になります。

実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>http://www.frameworks.co.jp/</h1>
</body>
</html>

ヒント

attr(attributeName, attributeValue) メソッドも参照してください。

attr(attributeName, attributeValue)

この HTMLElements に含まれる全ての要素に対して属性値を設定します。

書式

attr(attributeName, attributevalue)
attributeName:

設定したい属性の名前を指定します。

attributeValue:

設定したい属性の値を指定します。指定した文字列中の & や ' や " などは自動でエスケープされますので、事前にエスケープしておく必要はありません。

戻り値:

HTLElements オブジェクト

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
<!DOCTYPE html>
<html>
<head><title>HTMLElements.attr(key,val) の example</title></head>
<body>
<p>Hello World!</p>
<a href="http://www.frameworks.co.jp/" target="_top">www.frameworks.co.jp</a><br>
<a href="http://www.example.com/">www.example.com</a><br>
<p>Good byte.</p>
</body>
</html>

この htmlText の中にある全ての a 要素に target="_blank" の属性を指定してから展開に組み込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("a").attr("target", "_blank")%
%body.html()%
</body>
</html>

parseHtml() 関数で htmlText をパースし、パース結果から body 部分を取り出して変数 body に入れておきます。

body に対して select("a") を実行し a 要素を探し出します。

取り出した a 要素に対して target="_blank" という属性を指定します。attr("target", "_blank") という指定を行うと、既に target の指定のある要素に対してはそれが書き換えられ、また、target という属性を持っていない要素にはそれが付け加えられます。

最後に html() メソッドで、属性値を書き換えたあとの a 要素を含む body の内側を展開しています。

実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p>Hello World!</p>
<a href="http://www.frameworks.co.jp/" target="_blank">www.frameworks.co.jp</a>
<br>
<a href="http://www.example.com/" target="_blank">www.example.com</a>
<br>
<p>Good byte.</p>
</body>
</html>

ヒント

attr(attributeName) メソッドも参照してください。

first()

この HTMLElements に含まれている HTMLElement の中の先頭の要素を返します。この HTMLElements オブジェクトが空の場合には null が返されます。

書式

first()
戻り値:

先頭の HTMLElement オブジェクトを返します。

ヒント

last() メソッドも参照してください。

hasAttr(attributeName)

この HTMLElements が保持している HTMLElement のいずれかが attributeName に指定された属性を保持している場合に true を返します。

書式

hasAttr(attributeName)
戻り値:

true または false の真偽値。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
....
<a href="http://www.frameworks.co.jp/">www.frameworks.co.jp</a><br>
<a href="http://www.example.com/" target="_blank">www.example.com</a><br>
....

この html に対して target 属性をもった a 要素があるかどうかを調べてみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<body>
<h1>%parseHtml(htmlText).select("a").hasAttr("target")%</h1>
</body>
</html>

parseHtml() 関数を使って htmlText をパースしてから、その結果に対して select("a") メソッドで a 要素を拾い集めます。集まった a 要素を保持している HTMLElements オブジェクトに対して hasAttr("target") メソッドを呼び出して target 属性を持っている a 要素があるかどうか調べています。

実行結果は下記のようになるでしょう。このケースでは target 属性をもつ a 要素があるので true になります。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>true</h1>
</body>
</html>

hasClass(className)

この HTMLElements が保持している HTMLElement のいずれかが className に指定された class 属性を保持している場合に true を返します。

書式

hasClass(className)
戻り値:

true または false の真偽値。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
....
<a href="http://www.frameworks.co.jp/" class="localLink link">www.frameworks.co.jp</a><br>
<a href="http://www.example.com/" class="externalLink link">www.example.com</a><br>
....

この html に対して class 属性に externalLink を持った a 要素があるかどうかを調べてみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<body>
<h1>%parseHtml(htmlText).select("a").hasClass("externalLink")%</h1>
</body>
</html>

parseHtml() 関数を使って htmlText をパースしてから、その結果に対して select("a") メソッドで a 要素を拾い集めます。集まった a 要素を保持している HTMLElements オブジェクトに対して hasClass("externalLink") メソッドを呼び出して class 属性に externalLink を持っている a 要素があるかどうか調べています。

実行結果は下記のようになるでしょう。このケースでは class="externalLink" を持つ a 要素があるので true になります。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>true</h1>
</body>
</html>

html()

この HTMLElements に含まれている各 HTMLElement オブジェクトの内側の html を連結したものを返します。この HTMLElements が空の場合空文字列が返されます。

書式

html()
戻り値:

文字列を返します。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
....
<a href="http://www.example.com">Hello <span style="color:blue;">World!</span></a>
<p>How are you?</p>
<span>Good bye.</span>
....

この html 中の a 要素と p 要素の内側の HTML を取り出して展開結果に組込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<body>
%parseHtml(htmlText).select("a, p").html()%
</body>
</html>

parseHtml() 関数で htmlText をパースしてから select("a, p") メソッドを呼び出して a 要素と p 要素を拾い集めます。集めた a と p 要素を保持している HTMLElements オブジェクトに対して html() メソッドを呼び出し、a 要素と p 要素の内側の html を連結した結果を生成して展開結果に組込んでいいます。

この展開例の実行結果は下記のようになるでしょう。内側の html を連結した物なので a タグと p タグは除去されています。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head></head>
<body>
Hello
<span style="color:blue;">World!</span> How are you?
</body>
</html>

ヒント

outerHtml() も参照してください。

html(html)

この HTMLElements に含まれる各 HTMLElement の 内側の html をパラメタで指定された html に書き換えます。

書式

html(html)
html:

各要素の内側を置き換える html を指定します。この文字列は html として正しい html を渡してください。html でなければならないので & 記号など、エスケープが必要なものは適切にエスケープされている必要があります。

戻り値:

HTMLElements を返します。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
....
<a href="http://www.example.com">Hello World!</a>
<p>How are you?</p>
<span>Good bye.</span>
....

この html 中の a 要素と p 要素の inner HTML を "今日は<em>雨が降る</em>でしょう" に書き換えた上で展開結果に組込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("a, p").html("今日は<em>雨が降る</em>でしょう")%
%body.html()%
</body>
</html>

parseHtml() 関数で htmlText をパースしてから body() メソッドで body 要素部分を取り出し、変数 body に保持しておきます。

次に、body から select("a, p") を実行して a 要素と p 要素を抽出します。抽出して得られた HTMLElements オブジェクトに対して html("今日は<em>雨が降る</em>でしょう") を実行し a 要素と p 要素の内側の html を "今日は<em>雨が降る</em>でしょう" に書き換えます。

最後に、書き換えた後の body を body.html() で展開に組込んでいます。

この展開例の実行結果は下記のようになるでしょう。a 要素と p 要素の内側の html は書き変わっていますが、 span 要素は書き変わっていません。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head></head>
<body>
....
<a href="http://www.example.com">今日は<em>雨が降る</em>でしょう</a>
<p>今日は<em>雨が降る</em>でしょう</p>
<span>Good bye.</span> ....
</body>
</html>

is(selector)

この HTMLElements に含まれる要素の中に selector にマッチするものがある場合に true を返します。

書式

is(selector)
selector:

調べたい selector を渡します。

戻り値:

true または false の真偽値を返します。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
....
<a href="http://www.example.com">Hello <span style="color:blue;">World!</span></a>
<p class="cls1">How are you?</p>
<span>Good bye.</span>
....

この htmlText に対していくつかのパターンの is(selector) メソッドを実行して結果を確認してみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<body>
<h1>%parseHtml(htmlText).select("a, p").is(".cls1")%</h1>
<h1>%parseHtml(htmlText).select("a, p").is("[href]")%</h1>
<h1>%parseHtml(htmlText).select("a, p").is("span")%</h1>
<h1>%parseHtml(htmlText).select("a, p").is("div")%</h1>
</body>
</html>

parseHtml() 関数で htmlText をパースしてから select("a p") を実行して a 要素と p 要素を拾い集めます。集めた結果を保持している HTMLElements に対して 4 種類の is(selector) メソッドを適用して結果を確認してみましょう。

この展開例の実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>true</h1>
<h1>true</h1>
<h1>true</h1>
<h1>false</h1>
</body>
</html>

is(".cls1") の結果は true になっています。<p class="cls1".... という記述の要素があるためです。
is("[href]") の結果は true になっています。href 属性を持つ a 要素があるためです。
is("span") の結果は true になっています。a 要素の内側の span 要素があるためです。
is("div") の結果は false になっています。div 要素はどこにも無いためです。

ヒント

not(selector) メソッドも参照してください。

last()

この HTMLElements に含まれている HTMLElement の中の最後の要素を返します。この HTMLElements オブジェクトが空の場合には null が返されます。

書式

last()
戻り値:

最後の HTMLElement オブジェクトを返します。

ヒント

first() メソッドも参照してください。

not(selector)

この HTMLElements オブジェクトから selector にマッチしない要素を除去します。

書式

not(selector)
戻り値:

除去された後の HTMLElements オブジェクトを返します。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
....
<div class="logo">One</div>
<div class="cls2">Two</div>
....

この html の中から <div class="cls2">Two</div> だけを取り出して展開結果に組込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<body>
%parseHtml(htmlText).select("div").not(".logo").outerHtml()%
</body>
</html>

parseHtml() 関数で htmlText をパースした後 select("div") で div 要素を抽出します。この select() 実行後に得られる HTMLElements オブジェクトには二つの div 要素が含まれています。

この二つの div 要素を含んでいる HTMLElements に対して not(".logo") を適用して logo という class 属性を持っている div 要素を除去します。

その後、outerHtml() で結果を展開に組込んでいます。

この展開の実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="cls2">
Two
</div>
</body>
</html>

ヒント

is(selector) メソッドも参照してください。

outerHtml()

この HTMLElements に含まれている各 HTMLElement オブジェクトの html を連結したものを返します。この HTMLElements が空の場合空文字列が返されます。

書式

outerHtml()
戻り値:

文字列を返します。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
....
<a href="http://www.example.com">Hello <span style="color:blue;">World!</span></a>
<p>How are you?</p>
<span>Good bye.</span>
....

この html 中の a 要素と p 要素の HTML を取り出して展開結果に組込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<body>
%parseHtml(htmlText).select("a, p").outerHtml()%
</body>
</html>

parseHtml() 関数で htmlText をパースしてから select("a, p") メソッドを呼び出して a 要素と p 要素を拾い集めます。集めた a と p 要素を保持している HTMLElements オブジェクトに対して outerHtml() メソッドを呼び出し、a 要素と p 要素の html を連結した結果を生成して展開結果に組込んでいます。

この展開例の実行結果は下記のようになるでしょう。a 要素と p 要素がそのまま展開結果に組込まれています。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="http://www.example.com">Hello <span style="color:blue;">World!</span></a>
<p>How are you?</p>
</body>
</html>

ヒント

html() メソッドも参照してください。

remove()

この HTMLElements が保持している各要素を文書から削除します。

書式

remove()
戻り値:

HTMLElements を返します。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
<body>
<div>
<p>Hello</p>
<p>there</p>
<img />
</body>

この htmlText の中から p 要素を削除したものを展開結果に組み込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>HTMLElements.remove() の example</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("p").remove()%
%body.html()%
</body>
</html>

parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。HTMLDocument オブジェクトに対して body() メソッドを実行して body 要素を取り出し、それを変数 body に保持しておきます。

body に対して select("p") を実行し p 要素を集めます。集めた p 要素に対して remove() メソッドを実行し、それらの p 要素を文書から削除します。

最後に body に対して html() メソッドを呼び出して body の内側を展開に埋め込みます。

この展開の実行結果は下記の様になるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.remove() の example</title>
</head>
<body>
<div>
<img>
</div>
</body>
</html>

removeAttr(attributeName)

この HTMLElements オブジェクトが保持している各要素から、一括して指定された属性を削除します。

書式

removeAttr(attributeName)
attributeName:

削除したい属性の名前を指定します。

戻り値:

HTMLElements オブジェクト

複数の HTMLElement オブジェクトに対して一括して属性を削除できる点を除いて、HTMLElement オブジェクトの reveAttr() メソッドと同じです。HTMLElement の removeAttr() メソッドの説明も参照してください。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
<p>
....
<a href="http://www.frameworks.com/" target="_blank">www.frameworks.co.jp</a><br>
<a href="http://www.example.com/" target="_blank">www.example.com</a><br>
<a href="http://www.example.com/help.html" target="_top">www.example.com</a><br>
....
</p>

このような html から target="_blank" の部分を除去したい場合の展開は下記のようになります。

展開例(1)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("a[target=_blank]").removeAttr("target")%
%doc.body().html()%
</body>
</html>

parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。

doc に対して select("a[target=_blank]") を実行し target="_blank" という属性指定を持っている a 要素を取り出します。この例では 2 件取り出されます。

select() の結果得られた a 要素 2 件を含む HTMLElements オブジェクトに対して removeAttr("target") を実行し target 属性を削除します。

最後に doc の body に対して html() メソッドを呼び出して body 要素の内側を展開に埋め込みます。

実行結果は下記のようになるでしょう。三つめの a 要素は target="_top" なので select("a[target=_blank]") の選択対象に入らないため removeAttr("target") の影響は受けていません。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p>
....
<a href="http://www.frameworks.com/">www.frameworks.co.jp</a><br>
<a href="http://www.example.com/">www.example.com</a><br>
<a href="http://www.example.com/help.html" target="_top">www.example.com</a><br>
....
</p>
</body>
</html>

removeClass(className)

この HTMLElements オブジェクトが保持している各要素から、一括して指定された class 属性を削除します。

書式

removeClass(className)
className:

削除したい class 属性の名前を指定します。

戻り値:

HTMLElements オブジェクト

複数の HTMLElement オブジェクトに対して一括して class 属性を削除できる点を除いて、HTMLElement オブジェクトの removeClass() メソッドと同じです。HTMLElement の removeClass() メソッドの説明も参照してください。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
<body>
<ul class="menu">
<li class="menuItem listItem">menuItem1</li>
<li class="menuItem listItem">menuItem2</li>
</ul>
</body>

この中にある li 要素の class 属性 "menuItem" を削除してから、body 全体を展開結果に埋め込む場合の展開の記述は、例えば下記のようになります。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("li").removeClass("menuItem")%
%doc.body().outerHtml()%
</html>

parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。

doc に対して select("li") を実行し li 要素を取り出します。この例では 2 件取り出されます。

select() の結果得られた li 要素 2 件を含む HTMLElements オブジェクトに対して removeClass("menuItem") を実行し class 属性を削除します。

最後に doc の body に対して outerHtml() メソッドを呼び出して body 要素全体を展開に埋め込みます。

実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul class="menu">
<li class="listItem">menuItem1</li>
<li class="listItem">menuItem2</li>
</ul>
</body>
</html>

ヒント

addClass(className) メソッドも参照してください。

select(selector)

select() はこの HTMLElements が保持している要素に対して selector で指定された css セレクタを満たす要素だけを選択して絞り込んだ結果を返します。

書式

select(selector)
selector:

選択条件を指定する css セレクタを与えます。空文字列は与えられません。

戻り値:

条件を満たす要素を含む HTMLelements オブジェクトを返します。

HTMLElements の select() メソッドの動作は、その抽出対象が HTMLElements であることを除いて HTMLElement の select() メソッドと同じです。

使用方法については HTMLElement の select() メソッドを参照してください。

size()

この HTMLElements が保持している HTMLElement の数を返します。

書式

size()
戻り値:

この HTMLElements に含まれている要素の数を返します。値は 0 以上の整数です。

tagName(newTagName)

この HTMLElements に含まれる全ての要素の tagName を指定された newTagName に書き換えます。

書式

tagName(newTagName)
戻り値:

HTMLElements を返します。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
....
<body>
<p>Hello <em>World!</em></p>
<a href="http://www.frameworks.co.jp">www.frameworks.co.jp</a>
<span class="cls1">こんにちは</span>
</body>
....

この html に対して body タグの直下にある p a span の各タグを全て div に書き換えた結果を展開結果に組込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
%parseHtml(htmlText).body().children().tagName("div").outerHtml()%
</body>
</html>

parseHtml() 関数で htmlText をパースしてから body 要素部分を取り出します。取り出した body 要素に対して children() メソッドを実行して body 直下の3つの要素 p a span を取り出します。取り出した3つの要素を保持している HTMLElements オブジェクトに対して tagName("div") を実行し、3つの要素のタグを全て div に書き換えています。最後に outerHtml() を実行して書き換えた後の要素を展開に組込んでいます。

この展開の実行結果は下記のようになるでしょう。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
Hello
<em>World!</em>
</div>
<div href="http://www.frameworks.co.jp">
www.frameworks.co.jp
</div>
<div class="cls1">
こんにちは
</div>
</body>
</html>

この例ではタグ名を強引に div に書き換えていますので div タグに href 属性が付されていたり、cls1 というクラス属性が付されていたりします。実施には、属性も考慮に入れてタグ名の書き換えを行なう必要がある点にご注意ください。

toggleClass(className)

この HTMLElements オブジェクトが保持している要素が className で指定した class 属性を持っていればそれを削除します。持っていなければそれを付加します。

書式

tlggleClass(className)
className:

削除または付加したい class 属性の名前を指定します。

戻り値:

HTMLElements オブジェクト

複数の HTMLElement オブジェクトに対して一括して class 属性を設定できる点を除いて、HTMLElement オブジェクトの toggleClass() メソッドと同じです。HTMLElement の toggleClass() メソッドの説明も参照してください。

利用例 1

htmlText という複数行テキストの要素を持つテンプレートがあり、そのテンプレートで作成したページの、この要素の値に下記のような html が記述されている場合を考えます。

htmlText の記述
<body>
<ul class="menu">
<li class="listItem">menuItem2</li>
<li class="menuItem listItem">menuItem1</li>
</ul>
</body>

この中にある li 要素の class 属性に "menuItem" を追加または削除してから、body 全体を展開結果に埋め込む場合の展開の記述は、例えば下記のようになります。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<wr-variable name="doc" value="parseHtml(htmlText)" />
%doc.select("li").toggleClass("menuItem")%
%doc.body().outerHtml()%
</html>

parseHtml(htmlText) で htmlText に書かれている html テキストをパースして HTMLDocument オブジェクトを生成します。パースした結果は、変数 doc にとっておきます。

doc に対して select("li") を実行し li 要素を取り出します。この例では 2 件取り出されます。

select() の結果得られた li 要素 2 件を含む HTMLElements オブジェクトに対して toggleClass("menuItem") を実行し class 属性を削除または付加します。

最後に doc の body に対して outerHtml() メソッドを呼び出して body 要素全体を展開に埋め込みます。

実行結果は下記のようになるでしょう。一つ目の li 要素はもともと class 属性 menuItem が付けられていなかったので toggleClass("menuItem") の実行で menuItem という class 属性が付加されています。反対に、二つ目の li 要素はもともと menuItem という class 属性が付けられていたので toggleClass("menuItem") の実行で menuItem という class 属性が削除されています。

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<ul class="menu">
<li class="listItem menuItem">menuItem2</li>
<li class="listItem">menuItem1</li>
</ul>
</body>
</html>