印刷屋プラグインで、ループ処理を使った複数ページの生成を行います。
概要
ループ処理で、複数ページを生成してみます。
ユーザー選択項目やチェックボックス項目、テーブルなど配列要素を持つ項目などは、同様に選択値分のページを生成することが出来ます。
今回は、ページ内の文字列もループ処理しています。
- 印刷屋プラグインプレビュー画面
印刷屋プラグイン設定
.custom-blue {
color: blue;
font-size: 32px;
}
.custom-rows {
color: red;
font-size: 24px;
}
ループ処理
TAGS_HTML(
ARRAY_MAP(ARRAY("A-PAGE","B-PAGE","C-PAGE"),xx,
PAGE_HTML(
TAG("div", xx, ATTR("class","custom-blue")),
ARRAY_FOR(3,idx,
TAG("div", "TEST-"&(idx+1), ATTR("class","custom-rows"))
)
)
)
)
ループ処理で生成されたプレビューのHTML
生成されたHTML
<div class="rex0220-pcraft-page">
<div class="custom-blue">A-PAGE</div>
<div class="custom-rows">TEST-1</div>
<div class="custom-rows">TEST-2</div>
<div class="custom-rows">TEST-3</div>
</div>
<div class="rex0220-pcraft-page">
<div class="custom-blue">B-PAGE</div>
<div class="custom-rows">TEST-1</div>
<div class="custom-rows">TEST-2</div>
<div class="custom-rows">TEST-3</div>
</div>
<div class="rex0220-pcraft-page">
<div class="custom-blue">C-PAGE</div>
<div class="custom-rows">TEST-1</div>
<div class="custom-rows">TEST-2</div>
<div class="custom-rows">TEST-3</div>
</div>
解説
この計算式は、複数のページ("A-PAGE"、"B-PAGE"、"C-PAGE")を持つHTML構造を動的に生成するためのものです。それぞれのページには、クラス属性 "custom-blue"
を持つ <div>
要素が作成され、その中に "TEST-1"
, "TEST-2"
, "TEST-3"
という3つの <div>
要素が含まれます。
計算式の分解と説明
- ARRAY("A-PAGE","B-PAGE","C-PAGE")
配列を作成(["A-PAGE", "B-PAGE", "C-PAGE"])。 - ARRAY_MAP(..., xx, ...)
配列の各要素 "A-PAGE", "B-PAGE", "C-PAGE" を xx 変数として処理。 - PAGE_HTML(...)
HTML ページのコンテナを作成。 - TAG("div", xx, ATTR("class","custom-blue"))
各ページのタイトルを div にラップし、クラス "custom-blue" を付与。 - ARRAY_FOR(3, idx, TAG(...))
インデックス idx を 0 から 2 までの範囲でループし、3つの <div> を作成。
各 div の中身は "TEST-1", "TEST-2", "TEST-3"。
それぞれ class="custom-rows" が付与される。 - TAGS_HTML(...)
PAGE_HTML の出力をまとめて HTML に変換。