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

rex0220 印刷屋プラグイン 見積書の作成手順

0
Last updated at Posted at 2025-09-03

rex0220 印刷屋プラグインで、「商品見積書パック」をベースにして見積書を作成してみます。

※アプリテンプレートで試せます。
印刷屋プラグインで、見積書を作ろう

概要

kintone アプリストアの「商品見積書パック」をベースにして、印刷屋プラグインで見積書を作成します。
見積書アプリでは、見積書に必要な消費税等の項目を追加や金額の書式を設定します。
帳票設定には、計算式のみで作成する方法と、HTMLと計算式の組合せで作成する方法があります。
今回は、その2種類を設定します。
設定内容は異なりますが、見積書の書式は同等のものになります。
開発・保守しやすい方法をご利用ください。

2025-09-03_17h20_37.png

  • 2種類の作成例：　タイトル部分のみ変更しています

2025-09-04_08h00_40.png

操作例

「見積書」作成で、「見積ファイル」に PDF が保存されます。

2025-09-04_07h45_26.gif

商品リストアプリ

基本的な項目は、そのまま。
横幅などを調整し、見積に必要な商品データを追加します。

2025-09-03_18h17_37.png

見積書アプリのフォーム設定

見積書アプリに、見積書で表示する項目を追加・変更します。

2025-09-03_18h15_31.png

  • 担当者：　ユーザー選択
  • 見積ファイル：　添付ファイル
  • テーブル
    • 型番：ルックアップ
    • 商品名：　文字列：ルックアップコピー項目
    • 数量：　数値
    • 単価：　数値：ルックアップコピー項目
    • 金額：　計算：単価*数量
  • 小計：　計算：SUM(金額)
  • 消費税：　計算：ROUNDDOWN(小計*0.1)
    • 消費税は、端数切り捨て
  • 合計：　計算：小計+消費税
  • 備考：　文字列複数行

2025-09-03_17h36_54.png

金額の設定

桁区切り、単位記号"￥"の設定を行います。
印刷屋プラグインで見積書に反映されます。

2025-09-03_17h44_32.png

印刷屋プラグイン設定

帳票を計算式のみで作成する方法と計算式とHTMLの組合せで作成する2種類を設定します。

見積書のボタン設定

  • ボタン名
    • 見積書：　計算式のみで作成
    • 見積書HTML： HTMLと計算式の組合せで作成

2025-09-03_18h51_32.png

見積書：　計算式のみで作成

PAGE_HTML, TAG 等の関数により、HTMLを組み立てます。

2025-09-03_18h52_17.png

  • ボタン表示条件

見積ファイルが無い場合に、「見積書」ボタンを表示します。

NOT(見積ファイル)
  • ファイル名

見積ファイルにセットする PDF のファイル名を指定します。

"見積書-"&見積番号
  • CSS: 共通CSS をベースにして、下記を追加します
見積書-CSS
.pcraft-inv-seal {
    left: -40px;
    width: 120px;
}

.pcraft-inv-item-td-value {
  word-break: keep-all;
}

.pcraft-inv-item-table thead {
    background-color: #2c3e50;
    color: white;
}

.pcraft-inv-item-table th,
.pcraft-inv-item-table td {
    border: 1px solid #ddd;
}

.pcraft-inv-item-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}
  • 計算式：　TAG関数で、HTML を構成します
見積書-計算式
PAGE_HTML(
  TAG("div", ATTR("class", "pcraft-inv-header"), "見積書"),

  TAG("div", ATTR("class", "pcraft-inv-info"),

    // header left
    TAG("div", ATTR("class", "pcraft-inv-left"),
      TAG("p", 宛名 & " 御中"), VTAG("br"),
      TAG("p", ATTR("class", "pcraft-inv-estimate-amount"), "見積金額:", TAG("span", FVAL(合計))),
      TAG("p", ATTR("class", "pcraft-inv-validity"),
        "見積の有効期限: " & DATE_ADD(見積日,1,"month", "YYYY年M月D日")
      )
    ),

    // header right
    TAG("div", ATTR("class", "pcraft-inv-right"),
      TAG("p", "見積書番号: " & 見積番号),
      TAG("p", "発行日: " & DATE_FORMAT(見積日, "YYYY年M月D日")),
      TAG("p", "株式会社△△△△"),
      TAG("p", 担当者),
      VTAG("img", ATTR("class", "pcraft-inv-seal", "width", "250", "height", "120", "src", "data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjUwIiBoZWlnaHQ9IjI1MCIgdmlld0JveD0iMCAwIDI1MCAyNTAiPgogIDwhLS0g6KeS5Li46ZW35pa55b2i44Gu5p6gIC0tPgogIDxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjIzMCIgaGVpZ2h0PSIyMzAiIHJ4PSIyMCIgcnk9IjIwIgogICAgICAgIGZpbGw9Im5vbmUiIHN0cm9rZT0icmVkIiBzdHJva2Utd2lkdGg9IjYiIC8+CgogIDwhLS0gMeihjOebriAtLT4KICA8dGV4dCB4PSI1MCUiIHk9IjExMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIzNiIgZm9udC1mYW1pbHk9InNlcmlmIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0icmVkIj4KICAgIOagquW8j+S8muekvgogIDwvdGV4dD4KCiAgPCEtLSAy6KGM55uuIC0tPgogIDx0ZXh0IHg9IjUwJSIgeT0iMTcwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjQ4IiBmb250LWZhbWlseT0ic2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJyZWQiPgogICAg4paz4paz4paz4pazCiAgPC90ZXh0Pgo8L3N2Zz4K"))
    )
  ),

  // table
  TABLE_HTML(見積明細,
    OPT("pref", "pcraft-inv-item-"),
    ARRAY("#", ROWNO(見積明細) + 1),
    商品名, 数量, 単価, 金額
  ),

  // summary
  TAG("div", ATTR("class", "pcraft-inv-summary-section"),
    // 備考
    TAG("div", ATTR("class", "pcraft-inv-remarks-section"),
      TAG("strong", "備考:"), VTAG("br"),
      TAG("span", HTML(FVAL(備考)))
    ),
    // 合計
    TAG("div", ATTR("class", "pcraft-inv-total-section"),
      TAG("table",
        TAG("tbody",
          TAG("tr", TAG("th", "小計"), TAG("td", FVAL(小計))),
          TAG("tr", TAG("th", "消費税 (10%)"), TAG("td", FVAL(消費税))),
          TAG("tr", TAG("th", TAG("strong", "合計")), TAG("td", TAG("strong", FVAL(合計))))
        )
      )
    )
  )
)

見積書HTML： HTMLと計算式の組合せで作成

HTML の定義と計算式で帳票を作成します。
見積の明細と備考は、計算式で変換します。

  • HTML 内の ${計算式} で、計算結果を反映します

2025-09-03_18h52_58.png

  • ファイル名

見積ファイルにセットする PDF のファイル名を指定します。

"見積書HTML-"&見積番号
  • CSS: 見積書-CSSと同じです
見積書HTML-CSS
.pcraft-inv-seal {
    left: -40px;
    width: 120px;
}

.pcraft-inv-item-td-value {
  word-break: keep-all;
}

.pcraft-inv-item-table thead {
    background-color: #2c3e50;
    color: white;
}

.pcraft-inv-item-table th,
.pcraft-inv-item-table td {
    border: 1px solid #ddd;
}

.pcraft-inv-item-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}
  • HTML: 指定した HTML を計算式で変換します
    • ${計算式}
      • 計算結果を反映
    • ##table##
      • テーブルの可変の複数行に対応するため、計算式で展開
    • ##備考##
      • 文字列複数行内の改行コード(\n)は、HTMLで無視されるため、計算式で"<br>"に変換する
見積書HTML
<div class="rex0220-pcraft-page">
    <div class="pcraft-inv-header">見積書HTML</div>
    <div class="pcraft-inv-info">
        <div class="pcraft-inv-left">
            <p>${宛名} 御中</p><br>
            <p class="pcraft-inv-estimate-amount">見積金額:<span>${FVAL(合計)}</span></p>
            <p class="pcraft-inv-validity">見積の有効期限: ${DATE_ADD(見積日,1,"month", "YYYY年M月D日")}</p>
        </div>
        <div class="pcraft-inv-right">
            <p>見積書番号: ${見積番号}</p>
            <p>発行日: ${DATE_FORMAT(見積日, "YYYY年M月D日")}</p>
            <p>株式会社△△△△</p>
            <p>${担当者}</p><img class="pcraft-inv-seal" width="250" height="120"
                src="data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjUwIiBoZWlnaHQ9IjI1MCIgdmlld0JveD0iMCAwIDI1MCAyNTAiPgogIDwhLS0g6KeS5Li46ZW35pa55b2i44Gu5p6gIC0tPgogIDxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjIzMCIgaGVpZ2h0PSIyMzAiIHJ4PSIyMCIgcnk9IjIwIgogICAgICAgIGZpbGw9Im5vbmUiIHN0cm9rZT0icmVkIiBzdHJva2Utd2lkdGg9IjYiIC8+CgogIDwhLS0gMeihjOebriAtLT4KICA8dGV4dCB4PSI1MCUiIHk9IjExMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIzNiIgZm9udC1mYW1pbHk9InNlcmlmIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0icmVkIj4KICAgIOagquW8j+S8muekvgogIDwvdGV4dD4KCiAgPCEtLSAy6KGM55uuIC0tPgogIDx0ZXh0IHg9IjUwJSIgeT0iMTcwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjQ4IiBmb250LWZhbWlseT0ic2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJyZWQiPgogICAg4paz4paz4paz4pazCiAgPC90ZXh0Pgo8L3N2Zz4K">
        </div>
    </div>
    ##table##
    <div class="pcraft-inv-summary-section">
        <div class="pcraft-inv-remarks-section"><strong>備考:</strong><br><span>##備考##</span></div>
        <div class="pcraft-inv-total-section">
            <table>
                <tbody>
                    <tr>
                        <th>小計</th>
                        <td>${FVAL(小計)}</td>
                    </tr>
                    <tr>
                        <th>消費税 (10%)</th>
                        <td>${FVAL(消費税)}</td>
                    </tr>
                    <tr>
                        <th><strong>合計</strong></th>
                        <td><strong>${FVAL(合計)}</strong></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
  • 計算式
    HTMLで指定された内容は、変換の計算結果を反映した文字列として$htmlに設定されます
見積書HTML-計算式
LET(
  table, TABLE_HTML(見積明細,
    OPT("pref","pcraft-inv-item-"),
    ARRAY("#",ROWNO(見積明細)+1),
    商品名, 数量, 単価, 金額
  ),
  html,$html,
  html,REPLACE(html, "##table##", table),
  html,REPLACE(html, "##備考##", FVAL(備考)),
  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
Sign upLogin
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?