印刷屋プラグインで、ループ処理を使った複数ページの生成を行います。

概要

ループ処理で、複数ページを生成してみます。
ユーザー選択項目やチェックボックス項目、テーブルなど配列要素を持つ項目などは、同様に選択値分のページを生成することが出来ます。
今回は、ページ内の文字列もループ処理しています。

印刷屋プラグインプレビュー画面

印刷屋プラグイン設定

.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 に変換。