0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

rex0220 印刷屋プラグイン ループ処理で複数ページを生成

Last updated at Posted at 2025-02-26

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

概要

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

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

2025-02-26_14h21_05.png

印刷屋プラグイン設定

.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> 要素が含まれます。

計算式の分解と説明

  1. ARRAY("A-PAGE","B-PAGE","C-PAGE")
    配列を作成(["A-PAGE", "B-PAGE", "C-PAGE"])。
  2. ARRAY_MAP(..., xx, ...)
    配列の各要素 "A-PAGE", "B-PAGE", "C-PAGE" を xx 変数として処理。
  3. PAGE_HTML(...)
    HTML ページのコンテナを作成。
  4. TAG("div", xx, ATTR("class","custom-blue"))
    各ページのタイトルを div にラップし、クラス "custom-blue" を付与。
  5. ARRAY_FOR(3, idx, TAG(...))
    インデックス idx を 0 から 2 までの範囲でループし、3つの <div> を作成。
    各 div の中身は "TEST-1", "TEST-2", "TEST-3"。
    それぞれ class="custom-rows" が付与される。
  6. TAGS_HTML(...)
    PAGE_HTML の出力をまとめて HTML に変換。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?