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. 要素名・リソース名・変数名・メソッド名

HTMLTextNode オブジェクト

HTMLTextNode オブジェクトは html 中のテキストを表すオブジェクトです。

例えば


<p>こんにちは<em>今日は</em>良い天気です</p>

という html 断片において「こんにちは」の部分と「今日は」の部分、そして「良い天気です」の部分が HTMLTextNode オブジェクトで表される部分になります。

外側の p 要素は、の3つの子ノード HTMLTextNode, HTMLElement, HTMLTextNode を持った HTMLElement です。em 要素は、内側に一つだけ HTMLTextNode を持った HTMLElement です。

HTMLTextNode オブジェクトは HTMLElement の unwarp() メソッドや childNodes() メソッドの戻り値として得られます。select() メソッドでは得ることはできません。

after()

テキストの後ろに html を挿入します。

書式

after(html)
html:

テキストの後ろに挿入する html テキストを指定します。

戻り値:

HTMLTextNode オブジェクト。挿入された html ではなく、after() のターゲットになった HTMLTextNode が返される点に注意してください。

利用例 1

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

htmlText の記入内容
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<p>こんにちは</p>
ここは HTMLTextNode で表現されます。
<p>さようなら</p>
</body>
</html>

この html に対して「ここは HTMLTextNode で表現されます」というテキストの後に、新たな p 要素を追加してから展開に組み込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.after() の example</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
<wr-for list="body.childNodes()" variable="aNode">
<wr-if condition="aNode.nodeName() == \"HTMLTextNode\" && aNode.isBlank() != true">
%aNode.after("<p><em>挿入</em>してみました</p>")%
</wr-if>
</wr-for>
<hr>
%body.html()%
</body>
</html>

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

body に対して childNodes() メソッドを実行し、body 直下のノードの配列を取得します。取得した配列はそのまま wr-for の list= に渡してループを実行します。

ループの内側では、各ノードのタイプが "HTMLTextNode" であるかどうかを nodeName() メソッドで調べています。また、ノードが HTMLTextNode である場合には、そのノードが空でないかどうかを isBlank() メソッドで調べています。空でない HTMLTextNode が見つかったら aNode.after("<p><em>挿入</em>してみました</p>") を実行して p 要素を追加しています。

最後に body.html() を実行し、p 要素を付け加えた後の body の内側を展開しています。

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

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.after() の example</title>
</head>
<body>
<hr>
<p>こんにちは</p> ここは HTMLTextNode で表現されます。
<p><em>挿入</em>してみました</p>
<p>さようなら</p>
</body>
</html>

HTMLTextNode は select() メソッドで探し出すことができないので childNodes() メソッドを使っています。

ヒント

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

before()

テキストの前に html を挿入します。

書式

before(html)
html:

テキストの前に挿入する html テキストを指定します。

戻り値:

HTMLTextNode オブジェクト。挿入された html ではなく、before() のターゲットになった HTMLTextNode が返される点に注意してください。

利用例 1

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

htmlText の記入内容
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<p>こんにちは</p>
ここは HTMLTextNode で表現されます。
<p>さようなら</p>
</body>
</html>

この html に対して「ここは HTMLTextNode で表現されます」というテキストの前に、新たな p 要素を追加してから展開に組み込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.before() の example</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
<wr-for list="body.childNodes()" variable="aNode">
<wr-if condition="aNode.nodeName() == \"HTMLTextNode\" && aNode.isBlank() != true">
%aNode.before("<p><em>挿入</em>してみました</p>")%
</wr-if>
</wr-for>
<hr>
%body.html()%
</body>
</html>

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

body に対して childNodes() メソッドを実行し、body 直下のノードの配列を取得します。取得した配列はそのまま wr-for の list= に渡してループを実行します。

ループの内側では、各ノードのタイプが "HTMLTextNode" であるかどうかを nodeName() メソッドで調べています。また、ノードが HTMLTextNode である場合には、そのノードが空でないかどうかを isBlank() メソッドで調べています。空でない HTMLTextNode が見つかったら aNode.before("<p><em>挿入</em>してみました</p>") を実行して p 要素を挿入しています。

最後に body.html() を実行し、p 要素を付け加えた後の body の内側を展開しています。

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

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.before() の example</title>
</head>
<body>
<hr>
<p>こんいちは</p>
<p><em>挿入</em>してみました</p> ここは HTMLTextNode で表現されます。
<p>さようなら</p>
</body>
</html>

HTMLTextNode は select() メソッドで探し出すことができないので childNodes() メソッドを使っています。

ヒント

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

isBlank()

この HTMLTextNode が何らかのテキストを保持している場合に true を返します。保持しているテキストが空白だけの場合は false を返します。

書式

isBlank()
戻り値:

真偽値 true または false

利用例 1

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

htmlText の記述内容
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>
</p>
<p> </p>
<p>あ</p>
</body>
</html>

この htmlText の中にある、3つの p 要素について isBlank() メソッドを呼び出してどういう結果が得られるか試してみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.isBlank() の example</title></head>
<body>
<wr-for list="parseHtml(htmlText).select(\"p\").asArray()" variable="p">
<h1>%p.unwrap().isBlank()%</h1>
</wr-for>
</body>
</html>

parseHtml() 関数で htmlText をパースして HTMLDocument オブジェクトを取得します。

取得した HTMLDocument オブジェクトに対して select("p") を実行し p 要素をすべて洗い出した結果を保持している HTMLElements オブジェクトを取得します。

各 p 要素について isBlank() を呼び出したいので HTMLElements に対して asArray() メソッドを呼び出し wr-for の list= に指定してループを実行します。

ループ内では p 要素を一旦 unwrap() します。この例では、各 p 要素の内側にそれぞれ一つずつ HTMLTextNode によって表現されるテキストが含まれています。先頭の p 要素は、改行を一つだけ含む HTMLTextNode を持っています。二つめの p 要素は空白文字を一つだけ含む HTMLTextNode を持っています。三つめの p 要素は「あ」という文字を一文字だけ含む HTMLTextNode を持っています。それぞれの HTMLTextNode について isBlank() を呼び出して結果を h1 要素の中に表示しています。

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

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

改行文字や空白文字だけからなる HTMLTextNode に対しては isBlank() が true を返します。

nodeName()

要素の型を返します。childNodes() メソッドなどを呼び出すと、型の判らない子要素の配列が得られますが、各子要素の型を調べる時に nodeName() メソッドが役立ちます。

書式

nodeName()
戻り値:

要素の型の名前を文字列で返します。HTMLComment オブジェクトに対してこのメソッドを呼び出すと "HTMLTextNode" が返されます。

outerHtml()

このテキストを html で返します。

書式

outerHtml()
戻り値:

このテキストの html 表現を文字列で返します。

利用例 1

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

htmlText の記入内容
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>こんにちは</p>
</body>
</html>

この html に対して「こんにちは」の部分だけを抽出して展開に組込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.outerHtml() の example</title></head>
<body>
%parseHtml(htmlText).select("p").first().unwrap().outerHtml()%
</body>
</html>

parseHtml() 関数で htmlText をパースし select("p").first() で先頭の p 要素を取り出します。取り出した p 要素に対して unwrap() メソッドを実行して、p 要素の先頭の子ノードとなっているテキスト「こんにちは」の部分を取り出します。取り出した HTMLTextNode に対して outerHtml() を実行して html を生成しています。

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

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.outerHtml() の example</title>
</head>
<body>
こんにちは
</body>
</html>

ヒント

HTMLElement オブジェクトにも同様のメソッドがあります。

parent()

このテキストの親要素を返します。

書式

parent()
戻り値:

このテキストの親要素の HTMLElement オブジェクトを返します。

使用方法については HTMLElement オブジェクトの parent() メソッドを参照してください。

remove()

remove() はこのテキストを文書から削除します。

書式

remove()
戻り値:

null です。削除されたテキストにはアクセスできなくなりますので HTMLTextNode は返されません。

利用例 1

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

htmlText の記述
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<p>remove() メソッドはテキストを削除するときに使用します。</p>
</body>
</html>

この htmlText 中にある「remove() メソッドはテキストを削除するときに使用します。」の部分を削除してから、この html の body 部分を展開に組み込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("p").first().childNodes()[0].remove()%
%body.html()%
</body>
</html>

parseHtml() 関数で htmlText をパースし、パース結果から body を取り出し、変数 body に格納します。

取り出した body 要素に対して select("p").first() で先頭の p 要素を取り出します。抽出した p 要素に対して childNodes() を実行して子ノードの配列を取得します。この例では、この配列の長さは 1 で、要素は HTMLTextNode オブジェクトになります。配列に [0] を適用して先頭要素を取り出し、それに対して remove() を実行して削除しています。

最後に body.html() を実行して、p 要素の内側のテキストが削除されたあとの body 要素の内側の html を生成して展開に組み込んでいます。

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

単回例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p></p>
</body>
</html>

このコードはあくまでもサンプルです。%body.select("p").first().html("")% の方が簡単に同じことができるでしょう。

text()

この HTMLTextNode のとテキストを返します。

書式

text()
戻り値:

この HTMLTextNode のテキストが文字列で返されます。

利用例 1

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

展開例(1)
<!DOCTYPE html>
<html>
<head></head>
<body>Q & A</body>
</html>

この htmlText 中の body 直下のテキストを text() でとりだした場合と outerHtml() でとりだした場合の違いを調べてみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.text() の example</title></head>
<body>
<wr-variable name="textNode" value="parseHtml(htmlText).body().childNodes()[0]" />
<h1>text()</h1>
<wr-for string="textNode.text()" variable="c">[%c%]</wr-for>
<h1>outrHtml()</h1>
<wr-for string="textNode.outerHtml()" variable="c">[%c%]</wr-for>
</body>
</html>

parseHtml() 関数を使って htmlText をパースし body() メソッドで body 要素を取り出します。その次に body の子ノードを childNodes() で取り出しています。この例では childNodes() の戻り値は長さ1の配列です。配列の要素は "Q & A" というテキストを保持している HTMLTextNode オブジェクトです。配列に [0] を適用して配列の先頭の要素を取り出し、それそ textNode という変数に保持しておきます。

textNode から text() で取り出した文字列を wr-for の string= に渡して、一文字づつループしています。ループ内では [%c%] というコードで文字を出力しています。

同じように、textNode から outerHtml() で取り出した文字列を wr-for の string= に渡して、一文字づつループしています。ループ内では [%c%] というコードで文字を出力しています。

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

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.text() の example</title>
</head>
<body>
<h1>text()</h1> [Q][ ][&][ ][A]
<h1>outrHtml()</h1> [ ][Q][ ][&][a][m][p][;][ ][A]
</body>
</html>

text() で取り出したテキストは html ではなくテキストそのものなので & 記号が &amp; にエスケープされていない点に注意してください。outerHtml() メソッドで取り出したテキストは、その値が html なので & 記号は &amp; にエスケープされています。

上記実行結果の [&] の部分は、ブラウザによっては [&amp;] と表示される場合があります。コードをみてお判りのとおり、c は1文字なので &amp; と表示されていても、それは1文字の & のことを表しているはずです。

text(newText)

この要素と、その全ての子要素中のテキストをつなぎ合わせて返します。または、この要素のテキストを書き換えます。

書式

text(newText)
newText:

この要素のテキストが指定された文字列で置き換えられます。

戻り値:

HTMLElement オブジェクトが返されます。

利用例 1

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

htmlText の記述内容
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>こんにちは</h1>
<p>Hello World!</p>
</body>
</html>

この htmlText の中にある p 要素についてその内側のテキスト "Hello World!" を "It's fine today." に書き換えてか body の内側全体を展開に組み込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>HTMLTextNode.text() の example</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
<wr-variable name="textNode" value="body.select(\"p\").first().childNodes()[0]" />
%textNode.text("It's fine today.")%
%body.html()%
</body>
</html>

parseHtml() 関数を使って htmlText をパースします。その body 要素を body() メソッドで取り出して変数 body に保持しておきます。

次に、body に select("p") を実行して body 中の p 要素を洗い出します。書き換え対象をその先頭の p 要素とするために first() メソッドで先頭の p 要素を取り出します。さらに、first() メソッドの戻り値として得られた HTMLElement オブジェクトに対して childNodes() メソッドを実行して子ノードの配列を取り出します。今回の場合、子ノードは "Hello World!" に対応する HTMLTextNode オブジェクトが一つだけです。配列に [0] を適用して先頭の HTMLTextNode を取り出し、それを変数 textNode に保持しておきます。

取り出した textNode に対して text("It's fine today.") を実行してテキストを書き換えます。

最後に、body.html() を実行し、書き換えたあとの body を展開中に組み込んでいます。

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

展開例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>HTMLTextNode.text() の example</title>
</head>
<body>
<h1>こんにちは</h1>
<p>It's fine today.</p>
</body>
</html>

この例はあくまでサンプルです。%body.select("p").first().html("It's fine today.")% の方が簡単に同じ結果を得ることができるでしょう。

wrap(html)

このテキストを、与えられた html でラップします。

書式

wrap(html)
html:

このテキストを wrap する html を文字列で指定します。

戻り値:

HTMLTextNode オブジェクト。wrap される前の HTMLTextNode が返される点に注意してください。

利用例 1

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

htmlText の記述
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<p>remove() メソッドはテキストを削除するときに使用します。</p>
</body>
</html>

この htmlText 中にある「<p>remove() メソッドはテキストを削除するときに使用します。</p> 」の部分を、h1 タグに書き換えてから、この html の body 部分を展開に組み込んでみましょう。

展開例(1)
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<wr-variable name="body" value="parseHtml(htmlText).body()" />
%body.select("p").first().unwrap().wrap("<h1></h1>")%
%body.html()%
</body>
</html>

parseHtml() 関数で htmlText をパースし、パース結果から body を取り出し、変数 body に格納します。

取り出した body 要素に対して select("p").first() で先頭の p 要素を取り出します。抽出した p 要素に対して unwrap() を実行して p タグを除去します。unwrap() の戻り値は unwrap() された p 要素の先頭の子ノードになるので、この例では「remove() メソッドはテキストを削除するときに使用します。」という HTMLTextNode になります。この HTMLTextNode に wrap("<h1></h1>") を実行して h1 タグで囲んでいます。

最後に body.html() を実行して、p 要素を h1 要素に書き換えた後の body 要素の内側の html を生成して展開に組み込んでいます。

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

単回例(1)の実行結果
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>remove() メソッドはテキストを削除するときに使用します。</h1>
</body>
</html>