rex0220 印刷屋プラグイン

kintone

Last updated at 2026-10-06Posted at 2025-02-24

「印刷屋プラグイン」は、HTMLやCSSで作成した帳票をPDFファイルとして生成できるプラグインです。
PC のレコード詳細画面・一覧画面と、スマートフォン版のレコード詳細画面（Web フォントが有効なとき）から帳票を作成し、PDFの保存・ダウンロードが可能です。

概要

見積書や請求書、レコード一覧などを PDF ファイルに作成するプラグインです。
HTMLとCSSを活用し、柔軟な帳票レイアウトを実現します。
ノーコードとは真逆のコードだらけのプラグインです。

主な機能
・個別帳票の作成（レコード詳細画面から1件ずつPDFを生成）
・個別帳票の一括処理（一覧画面で複数レコードをまとめて処理）
・複数レコードを1つの帳票に統合（一覧画面で選択したデータを1つのPDFにまとめる）
・ボタンの表示条件設定（特定の条件で帳票作成ボタンの表示を制御）
・画像ファイルの表示（帳票内に画像を挿入可能）
・ QRコードの表示（URLや文字列をQRコードに変換して表示）
・ kintone グラフの埋め込み用タグ対応（帳票内に画像へ変換して表示）
・ PDFの保存・ダウンロード（PDFを添付ファイル項目に保存、または直接ダウンロード）
・ PDF作成時のレコード更新（PDF生成時に特定のレコード項目を自動更新）
・スマートフォン対応（スマートフォン版のレコード詳細画面で個別帳票を作成。Web フォントが有効なとき）
・ Web フォント（PC・Mac・スマホで同じ書体にしたいときに指定）
・ボタンを押したときの動き（プレビューを表示 / 確認してから作成 / すぐに作成）

※注意事項
印刷屋プラグインは、ブラウザー上で PDF ファイルを作成するため、端末の環境（OS、ブラウザー、フォント等）により作成される PDF の見た目が変わることがあります。
「Web フォント」を指定すると、Windows・Mac・iPhone で同じ字形になります。

直近の変更点

※ Ver.6
・プラグイン設定画面を刷新（保存形式は Ver.5 と互換）
・設定画面に ?（説明）と i（概要）、Markdown コピー、他のボタンからの取り込みを追加
・HTML 設定に「ボタンを押したとき」を追加（プレビュー / 確認して作成 / すぐに作成）
・Web フォントに対応（Google Fonts の候補、または CSS の URL）
・モバイル対応（詳細画面の個別帳票。縮小表示と拡大縮小、保存または共有。ボタンは Web フォントが有効なときだけ出す）
・計算式のエラー時は帳票を作らずにエラーを表示
・PC 用 JS を作り直し（jQuery と Superfish を廃止。PDF は Ver.5 と同じ）

※ Ver.5
・プラグイン一覧にホームページのリンク（homepage_url）を追加

FAQ

よくある質問（設定、操作、保存先、権限、失敗時の確認）は下記にまとめています。

rex0220 印刷屋プラグイン FAQ

AI で帳票を作る

日本語の要件から、AI（Claude Code）に帳票の設定（HTML・CSS・計算式）を作らせる環境を公開しています。作った設定は、設定画面の「設定をアップロード」で取り込みます。

印刷屋プラグインの使用例

今後追加する予定

帳票作成例

見積書の作成例
- rex0220 印刷屋プラグイン見積書の HTML,CSS について

見積書の CSSカスタマイズ例
- rex0220 印刷屋プラグイン見積書のCSSカスタマイズ
- rex0220 印刷屋プラグイン見積書のCSSカスタマイズ２

見積書の社印変更
- rex0220 印刷屋プラグイン見積書の社印変更と位置調整

請求書の作成例
- rex0220 印刷屋プラグイン請求書の作成例

請求書の CSSカスタマイズ例
- rex0220 印刷屋プラグイン共通CSSを追加

表形式の作成例：複数枚の帳票作成が可能
- rex0220 印刷屋プラグインテーブル複数ページ

カード形式の作成例

複数レコードをまとめた作成例

画像とQRコードの表示例
- rex0220 印刷屋プラグイン QRコード表示

テーブル＋カード形式の表示例
- rex0220 印刷屋プラグインテーブル+カード表示

書式画像を背景にした表示例
- rex0220 印刷屋プラグイン書式画像を背景に

一覧画面の表示例
- rex0220 印刷屋プラグイン一覧画面のPDF作成

一覧画面の合計欄
- rex0220 印刷屋プラグイン一覧画面の合計欄

一覧画面をカード形式で表示
- rex0220 印刷屋プラグイン一覧画面をカード形式で表示

kintone グラフの埋め込みタグの作成例
- rex0220 印刷屋プラグイン kintoneグラフの埋め込みタグ表示

PDF 作成手順

添付ファイルに PDF を保存する設定での手順です。

詳細画面

PDF 作成手順
- 詳細画面で、「見積書」ボタンクリック
- 見積書プレビュー画面で確認し、「見積書」ボタンクリック
- 添付ファイル項目（見積書ファイル）に PDF が保存される
  - プラグイン設定により、レコードに保存かダウンロードを指定
- 詳細画面で、見積書ファイルの PDF ファイルをダウンロードし確認

プレビューを出さずに作成する
- HTML 設定の「ボタンを押したとき」で「確認してから作成する」または「すぐに作成する」を選ぶと、詳細画面のボタンでプレビューを出さずに PDF を作成
- 一覧画面の一括処理は進捗表示のみ、一覧帳票は常にプレビュー

スマートフォン版

スマートフォン版のレコード詳細画面でも、PC と同じボタンから個別帳票を作成できます。一覧の一括処理と一覧帳票は PC 版だけです。
ボタンは、プラグイン設定の「Web フォント」が有効なときだけ出ます（PC と同じ書体にして、スマートフォンで帳票が崩れないようにするため）。

PDF 作成手順
- 詳細画面で、「見積書」ボタンをタップ
- プレビューは画面の幅に合わせて縮小表示。「−」「+」「幅に合わせる」「100%」と 2 本指のピンチで拡大縮小
- 「見積書」ボタンをタップすると、添付ファイル項目（見積書ファイル）に PDF が保存される
  - 保存先の設定が無いボタンは「PDF を作成しました」→「共有」で、端末の共有シート（ファイルに保存、メールなど）に PDF を渡す
  - Android の kintone モバイルアプリは共有もダウンロードも使えないため、保存先の添付ファイル項目を設定する

「Web フォント」の設定は下記を、しくみは rex0220 印刷屋プラグイン — Web フォントのしくみとスマートフォン対応を参照してください。

一覧画面

PDF 作成手順
- 一覧画面で、対象レコードを選択して「見積書」ボタンクリック
- ダイアログでレコード数を確認し、「実行」ボタンクリック
- 添付ファイル項目（見積書ファイル）に PDF が保存される

印刷屋プラグインの PDF 作成のしくみ

HTML, CSS, 計算処理で作成された帳票をブラウザー上に表示
ブラウザー上の帳票を画像として取得
PDF に、画像として帳票を追加
PDF ファイルとして、レコードの添付ファイルに追加、またはダウンロード

※PDFの帳票は画像として設定されるため、テキスト情報は PDF にありません。

印刷屋プラグイン設定

プラグイン有効
行制御
多言語
画面
- ボタンを表示する詳細画面、一覧画面を指定
レコード選択
- 一覧画面でレコード選択を指定
メニュー：　ボタンをメニュー形式で表示
- メニューボタンを有効にする
メニューボタン：　メニューに表示する名称を設定
共通CSS：　帳票に共通CSSを適用する
共通CSS：　共通CSSの設定
Web フォント：　PC・Mac・スマホで同じ書体にしたいときに指定（チェックと、書体名のボタン）
ゲスト：　ゲストスペースで、ゲストユーザーを定義
ボタン名：　帳票作成のボタン名
概要：　帳票作成時のダイアログで表示
備考：　メモ用
一覧：　一覧画面のレコードを対象にして、帳票を作成
HTML：　帳票の HTML, CSS を設定
更新項目：　帳票作成時に更新する項目を指定
?：　設定の説明
i：　プラグインの概要と変更履歴
設定をクリップボードにコピー：　設定を Markdown でコピー（対象のボタンと内容を選択）
他のボタンから設定を取り込む：　行制御で、別のボタンの設定を取り込む

HTML 設定と更新項目の並び替えは、行のドラッグで行います。

画面

ボタンを表示する一覧画面、詳細画面を指定します。

設定方法
- プラグイン設定画面で、「画面」をチェック
- 編集ボタンをクリックして、「一覧別、詳細画面設定」を開く
- ボタンを表示する「詳細画面」「一覧画面」をチェックして、保存
  - すべてのチェックが無い場合、すべての「詳細画面」「一覧画面」にボタンを表示
- プラグイン設定の「保存する」をクリックして、アプリに反映

「詳細画面」のみにボタンを表示する例

メニュー

メニュー欄をチェックしたボタンがまとめて表示されます。
帳票の種類が多いときに、ご利用ください。

共通CSS

汎用的に使うCSS　を設定します。
table, card, common, invoice が設定されます。
よく使うクラスを追加設定できます。
同じクラス名の属性を定義した場合、あとから設定された方が有効。
ただし、!important を指定した場合は、そちらが優先される。

編集エリアが小さいので、CSS の編集はエディターを使って、コピペをお勧めします。

初期化：　既定の共通CSSに戻す
NAME：　名称
DESC：　メモ用
CSS：　CSS
- table：　表形式
- card：　カード形式
- common：　右寄せなどの汎用的なクラス
- invoice：　請求書等のクラス

共通CSS.css


/* css table */
.table-header {
    font-size: 24px;
    text-align: center;
    margin-bottom: 4px;
}

.pcraft-table-table {
    width: 100%;
    border: 2px solid #000;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pcraft-table-table th,
.pcraft-table-table td {
    border: 1px solid #000;
    padding: 10px;
}

.pcraft-table-table th {
    white-space: nowrap;
    background: #f0f0f0;
    font-weight: bold;
}

.pcraft-table-table tr:nth-child(even) {
    background: #f9f9f9;    /* 偶数行の背景色を変更 */
}

.pcraft-table-footer {
    background-color: #e9f7f7 !important;
}


/* css card */
.pcraft-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.pcraft-card-header {
    font-size: 24px;
}

/* .pcraft-card-header-left {
    text-decoration: underline;
} */

.pcraft-card-header-right {
    position: absolute;
    right: 60px;
    font-size: 20px;
}

.pcraft-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 400px;
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pcraft-card-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #777;
}

.pcraft-card-item:last-child {
    border-bottom: none;    /* 最後の項目は線を消す */
}

.pcraft-card-label {
    font-weight: bold;
    color: #333;
    white-space: nowrap;    /* 折り返しを防ぐ */
    width: 200px;
}

.pcraft-card-value {
    color: #111;
    width: 180px;
}



/* css common */
.value-left {
    text-align: left;
}
.value-center {
    text-align: center;
}
.value-right {
    text-align: right;
}



.pcraft-inv-header {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.pcraft-inv-info {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.pcraft-inv-info p {
  margin: 5px 0;
}

.pcraft-inv-left {
  text-align: left;
  flex: 1;
  min-width: 420px;
}

.pcraft-inv-left p {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #000;
  display: inline-block;
  padding-bottom: 2px;
  margin-bottom: 10px;
}

.pcraft-inv-right {
  position: relative;
  text-align: right;
  flex: 1;
}

.pcraft-inv-seal {
  position: absolute;
  right: 100px;
  bottom: 0;
  width: 100px;
  height: auto;
  z-index: 10;
  opacity: 0.8;
}

.pcraft-inv-left .pcraft-inv-validity {
  font-size: 16px;
  font-weight: normal;
  border-bottom: none;
  display: block;
  margin-top: 5px;
}

.pcraft-inv-left .pcraft-inv-estimate-amount {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-top: 5px;
  width: 240px;
}

.pcraft-inv-estimate-amount span {
  margin-left: 20px;
}

table.pcraft-inv-item-table {
  width: 100%;
  border: 2px solid #000;
  border-collapse: collapse;
}

table.pcraft-inv-item-table th,
table.pcraft-inv-item-table td {
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 5px 10px;
}

table.pcraft-inv-item-table th {
  text-align: center;
}

table.pcraft-inv-item-table td:nth-child(1) {
  text-align: center;
}

table.pcraft-inv-item-table td:nth-child(3),
table.pcraft-inv-item-table td:nth-child(4),
table.pcraft-inv-item-table td:nth-child(5) {
  text-align: right;
}

.pcraft-inv-item-table th:nth-child(1) {
  width: 40px;
}

.pcraft-inv-item-table th:nth-child(2) {
  width: 288px;
}

.pcraft-inv-item-table th:nth-child(3) {
  width: 90PX;
}

.pcraft-inv-item-table th:nth-child(4),
.pcraft-inv-item-table th:nth-child(5) {
  width: 130px;
}

.pcraft-inv-summary-section {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.pcraft-inv-remarks-section {
  border: 2px solid #000;
  padding: 5px 10px;
  box-sizing: border-box;
  width: 400px;
}

.pcraft-inv-total-section table {
  width: 100%;
  border: 2px solid #000;
  border-collapse: collapse;
}

.pcraft-inv-total-section th,
.pcraft-inv-total-section td {
  border: 1px solid #000;
  padding: 6px 10px;
  text-align: right;
  width: 133px;
  box-sizing: border-box;
}

.pcraft-inv-total-section th {
  text-align: left;
}

.pcraft-inv-footer {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 2px solid #000;
  text-align: left;
}

.pcraft-inv-footer p {
  margin-block: initial;
  font-size: 15px;
}

Web フォント

PC・Mac・スマホで同じ書体にしたいときに指定します。スマートフォン版のボタンは、これが有効なときだけ出ます。
端末ごとに書体がずれるしくみと、Web フォントの読み込みの流れは rex0220 印刷屋プラグイン — Web フォントのしくみとスマートフォン対応にまとめています。

設定方法
- プラグイン設定画面のツールバーで「Web フォント」をチェック
- 右の書体名のボタンを押し、言語（日本語 / 英語 / 中国語）と書体を選ぶ
  - 候補は Google Fonts の書体（いずれも SIL Open Font License）
  - 「その他」で、CSS の URL と font-family を直接指定できる
- 例文がその書体で表示され、読み込めたかが分かる（例文は書き換えて言語ごとに保存できる）
動き
- 帳票を作るときに、帳票を作る人のブラウザーが書体の配信元（Google Fonts など）に接続して書体を読み込む
- 読み込めないときは OS の書体で作る（待ちは 10 秒まで）
- 帳票の CSS で font-family を指定している部分はそちらが優先
- Google Fonts に接続できない環境（China 版など）では、「その他」で接続できる配信元を指定する

HTML

帳票を作成する HTML, CSS と　計算式を設定します。
編集エリアが小さいので、編集はエディターを使って、コピペをお勧めします。

ページサイズ： A1-A5, B1-B5, Letter, Legal, Tabloid
向き：　縦・横
解像度：　96 dpi / 150 dpi
ファイル：　PDF を保存する添付ファイル項目を指定。指定が無ければダウンロード
- 同一レコードで、同じ帳票を作成すると添付ファイル項目にPDFファイルを追加
- テーブル内添付ファイル項目を指定した場合
  - 添付ファイルが無い最終行にPDFファイルを追加
  - 最終行に添付ファイルがある場合は、テーブル行を追加してPDFファイルを追加
ボタンを押したとき：　プレビューを表示する（既定）/ 確認してから作成する / すぐに作成する
- 詳細画面（PC とスマートフォン）のボタンだけに効く。一覧画面の一括処理は進捗表示のみ、一覧帳票は常にプレビュー
設定名：　識別用
備考：　メモ用
CSS：　帳票に適用するCSS
- 帳票には、共通CSSと帳票別に設定されたCSSを適用
HTML：　帳票に適用するHTMLテンプレート
計算式：　帳票に適用する計算式
- ボタン表示条件：　
- ファイル名：　PDFのファイル名

更新項目

PDF 作成時に更新する項目を指定します。

備考：　メモ用
計算式：　更新内容を指定

ページの考え方

class="rex0220-pcraft-page"で、囲まれた部分を1ページとして扱います。
class="rex0220-pcraft-page"を増やすと、ページを追加できます。
ページ内で、いろいろタグを指定して、帳票を組み立てます。
計算式のループ処理で、ページ数を増やすこともできます。

※class="rex0220-pcraft-page"からはみ出した部分は、PDF化の対象外になります。

1ページ.html

<div class="rex0220-pcraft-page">
Hello world
</div>

A5横サイズの設定

2ページの設定例

2ページ.html

<div class="rex0220-pcraft-page">
Hello world(1page)
</div>
<div class="rex0220-pcraft-page">
Hello world(2page)
</div>

style 指定例

.html

<div class="rex0220-pcraft-page">
  <span style="color:red; font-size:32px;">Hello world</span>
</div>

class 指定例

.css

.custom-blue {
  color: blue;
  font-size: 64px;
}

.html

<div class="rex0220-pcraft-page">
  <span class="custom-blue">Hello world</span>
</div>

計算式のループ処理による複数ページ

"A-PAGE","B-PAGE","C-PAGE"のページをARRAY_MAP関数のループ処理で作成

.js

TAGS_HTML(
  ARRAY_MAP(ARRAY("A-PAGE","B-PAGE","C-PAGE"),xx,
    PAGE_HTML(
       TAG("div", xx)
    )
  )
)

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

生成される html

.html

<div class="rex0220-pcraft-page">
    <div>A-PAGE</div>
</div>
<div class="rex0220-pcraft-page">
    <div>B-PAGE</div>
</div>
<div class="rex0220-pcraft-page">
    <div>C-PAGE</div>
</div>

複数設定の結合

複数ページを別々に設定して、結合することが出来ます。
なお CSS は、個別に設定しても複数ページ全体に適用されます・

ページ番号・ページ数

ページ番号・ページ数は、#{&p/&n} で指定できます。
"rex0220-pcraft-page"クラスでページをカウントして、#{}で囲まれた &p をページ番号、&n をページ数に置き換えます。

.html

<div class="rex0220-pcraft-page">
    <div class="custom-blue">
        Hello world (page #{&p/&n})
    </div>
    <div>TEST1</div>
</div>
<div class="rex0220-pcraft-page">
    <div class="custom-blue">
        Hello world (page #{&p/&n})
    </div>
    <div>TEST2</div>
</div>

画像ファイルの表示（fileKey 指定）

html に #{&f(nnnn...) で、添付ファイルの fileKey を指定することで、画像を表示できます。
帳票に合わせて、width 等で大きさを指定します。
他のアプリの添付ファイルも fileKey を指定することで表示できます。

.css

.custom-blue {
  color: blue;
  font-size: 32px;
}
.custom-image {
  width:300px;
}

.html

<div class="rex0220-pcraft-page">
    <div class="custom-blue">添付ファイルの画像</div>
    <img class="custom-image" src="#{&f(20250225231826FA160C409E7046218B41929C02088738177)}">
</div>

画像を読み込めない時の表示

間違った添付ファイルの fileKey を指定したり、読み込めない場合は、下記のような画像を表示します。
※ゲストスペース内アプリで、ゲストスペース外アプリの添付ファイルは、読み込めません。

.js

<div class="rex0220-pcraft-page">
    <div class="custom-blue">ゲストスペース内 添付ファイルの画像</div>
    <img class="custom-image" src="#{&f(20250225231826FA160C409E7046218B41929C02088738177)}">
    <div class="custom-blue">ゲストスペース外 添付ファイルの画像</div>
    <img class="custom-image" src="#{&f(2025012113294151BDBB6048DF4A7985DCE6C4709DD326217)}">
</div>

fileKey の確認方法

計算式プラグインの計算式ツールで、添付ファイルを指定して実行すると、実行結果欄に表示されます。

添付ファイル指定

IMGSRC(添付ファイル) 指定

IMGSRC 関数を利用すると、#{&f(nnnn...) 形式で表示されます。

画像ファイルの表示（IMGSRC 関数指定）

レコード内の画像ファイルを、IMGSRC 関数で指定できます。

IMGSRC(fieldcode[,pos])
画像表示用に添付ファイルの fileKey を返す
- fieldcode: 添付ファイル
- pos: 画像位置(-1は、最終画像)
  - pos を指定しない場合は、最初の画像ファイルの fileKey を取得

.html

<div class="rex0220-pcraft-page">
    <div class="custom-blue">添付ファイルの画像 IMGSRC 関数版</div>
    <img class="custom-image" src="${IMGSRC(添付ファイル)}">
</div>

画像ファイルの表示（BASE64形式版）

社印等で小さな画像ファイルであれば、BASE64形式に変換して、HTML に直接指定することが出来ます。
※プラグイン設定の最大容量が、256KB なので、それを超えるような指定はできません。
※BASE64 ：バイナリデータ（画像や音声など）を文字列（テキストデータ）に変換するエンコード方式です。

.html

<div class="rex0220-pcraft-page">
    <div class="custom-blue">画像 BASE64 版</div>
    <img class="custom-image" src="data:image/png;base64,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">
</div>

QRコードの表示

#{&q()} で、囲んだテキストを QRコード画像に変換します。
img タグの src に指定すると、QRコードのイメージになります。

名称を google 検索する URL の例

ARRAY("QR", "<img src='#{&q(" & URL("https","www.google.com/search?q="&名称) & ")}'>", "value-image")

kintone グラフ埋め込みタグ対応

HTML 内にグラフ埋め込みタグ対応(iframe) があれば、iframe 表示を待って、画像化してHTML内に追加します。
CSS の指定は、普通の img タグへの適用でOKです。

.pcraft-graph-title {
  font-size:32px;
}
.pcraft-graph1 img {
  width: 50%;
}
.pcraft-graph2 img {
  width: 100%;
}

<div class="rex0220-pcraft-page">
    <div class="pcraft-graph-title">グラフテスト</div>
    <div class="pcraft-graph1">
        <iframe width="800" height="600" frameborder="0"
            src="https://xxxxxxx.cybozu.com/k/guest/15/1688/report/portlet?report=11251214&amp;chartType=pie&amp;title=1"></iframe>
    </div>

    <div class="pcraft-graph2">
        <iframe width="800" height="600" frameborder="0"
            src="https://xxxxxxx.cybozu.com/k/guest/15/1688/report/portlet?report=11251220&amp;chartType=column&amp;stackType=clustered&amp;title=1"></iframe>
    </div>
</div>

プレビュー画面・PDF化の処理概要

PDF化のしくみを知っていると、問題発生時に対応しやすくなります。

CSS : 共通CSSと個別CSSを合わせて、HTMLの HEAD 部に追加
- class="xp-rex0220-print-craft-page-style"
- Web フォントを指定していれば、書体の CSS を先に読み込み、ページの基本 CSS に font-family を入れる
- PDF作成・キャンセル後に追加した CSS は削除
HTML：　
- HTML 指定の計算式部分"${}"を実行
- 計算式指定を実行
  - HTMLで指定された部分は、$html の変数に文字列として設定されるので、それに対して文字列変更や追加を行う
  - HTML 指定が無い場合は、HTML全体を関数で生成する
- #{} で、指定されたページ・画像指定を変換
  - class="rex0220-pcraft-page"で囲まれた部分をページ単位として処理
    - #{&p/&n}: ページ番号、ページ数として変換
    - #{&f(nnn...))： nnnn... の部分を fileKey として、ファイル取得し、BASE64変換して img タグの src に設定
- Web フォントを指定していれば、帳票の文字に要る分の書体の読み込みを待つ（10 秒まで）
- html 内に iframe があれば、iframe の表示を待って画像化
PDF：
- プレビュー画面で表示されている"rex0220-pcraft-page"をページ単位として取得し画像化
- PDF にページとして、各画像を追加
- 作成した PDF を設定により、レコードに反映またはダウンロード（スマートフォンで保存先が無ければ共有シート）

見積書の設定例

帳票の設定方法としては、「HTML+計算式で設定」と「計算式のみで設定」があります。
HTMLについては、HTML テンプレートという扱いになります。
ただし、表形式のように行数が不定な場合は、計算式で生成します。

「HTML+計算式で設定」と「計算式のみで設定」は、とりあえず試行錯誤して扱いやすい方を選んでください。

CSSは、共通CSSの"pcraft-inv-header"を利用しており、個別のCSSはありません。
文字の大きさや背景色の変更等が必要な場合は、個別CSSを設定してください。

全体の構成や社印の位置指定などについては、下記をご覧ください。
参考：rex0220 印刷屋プラグイン見積書の HTML,CSS について

HTML+計算式で設定

見積のヘッダー部とフッター部はHTML。明細行は、計算式で生成という組み合わせ

\${宛名}のように、\${}で囲まれた部分は、計算式として処理されます。

${宛名}：「宛名」の値に置換
${FVAL(合計金額)}：　「合計金額」をFVAL 関数で、「￥」付きのカンマ区切りで表示
- 「￥」付きやカンマ区切りは、項目の設定に従う
${DATE_FORMAT(見積有効期限,"YYYY年M月D日")}：　"YYYY年M月D日"形式で見積有効期限を表示
<img class="pcraft-inv-seal" ：　社印イメージは、データ（data:image）で指定
- kintone の添付ファイル項目の画像を指定することも可能
  - #{&f(nnnn...)}：　nnnn... は、ファイルキー(fileFey)
##table##：　計算式で表形式に置換するため識別するため"##table##"とする
- html,REPLACE(html, "##table##", table)
##備考##：　文字列複数行は、brタグに変換して改行させるが、HTMLテンプレート内で変換するとタグがエスケープされて"<br>"が表示されるため、計算式側で変換させる
- html,REPLACE(html, "##備考##", FVAL(備考))

.html

<div class="rex0220-pcraft-page">
    <div class="pcraft-inv-header">見積書</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_FORMAT(見積有効期限,"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;charset=utf8,%20%3Csvg%20class%3D%22pcraft-inv-seal%22%20width%3D%22250%22%20height%3D%22120%22%20viewBox%3D%220%200%20250%20120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22230%22%20height%3D%22100%22%20rx%3D%2220%22%20ry%3D%2220%22%20stroke%3D%22red%22%20stroke-width%3D%225%22%20fill%3D%22none%22%2F%3E%20%3Ctext%20x%3D%22125%22%20y%3D%2250%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2234%22%20font-weight%3D%22bold%22%20text-anchor%3D%22middle%22%20fill%3D%22red%22%3E%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%3C%2Ftext%3E%20%3Ctext%20x%3D%22125%22%20y%3D%2290%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2234%22%20font-weight%3D%22bold%22%20text-anchor%3D%22middle%22%20fill%3D%22red%22%3E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%3C%2Ftext%3E%20%3C%2Fsvg%3E">
        </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>
                <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>
            </table>
        </div>
    </div>
</div>

HTMLで指定された内容は、「$html」という変数に設定されるので、それを文字列として必要な変換を行います。
※REPLACE 関数で置換している例

テーブルの生成.js

LET(
  table, TABLE_HTML(見積明細,
    OPT("pref","pcraft-inv-item-"),
    ARRAY("#",ROWNO(見積明細)+1),
    商品名,数量,単価,金額
  ),
  html,$html,
  html,REPLACE(html, "##table##", table),
  html,REPLACE(html, "##備考##",  FVAL(備考)),
  html
)

計算式のみで設定

「HTML+計算式で設定」と同じ内容を計算式で指定した例です。
結果的に、同じ構造を持つ html を生成します。

.js

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_FORMAT(見積有効期限, "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;charset=utf8,%20%3Csvg%20class%3D%22pcraft-inv-seal%22%20width%3D%22250%22%20height%3D%22120%22%20viewBox%3D%220%200%20250%20120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22230%22%20height%3D%22100%22%20rx%3D%2220%22%20ry%3D%2220%22%20stroke%3D%22red%22%20stroke-width%3D%225%22%20fill%3D%22none%22%2F%3E%20%3Ctext%20x%3D%22125%22%20y%3D%2250%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2234%22%20font-weight%3D%22bold%22%20text-anchor%3D%22middle%22%20fill%3D%22red%22%3E%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%3C%2Ftext%3E%20%3Ctext%20x%3D%22125%22%20y%3D%2290%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2234%22%20font-weight%3D%22bold%22%20text-anchor%3D%22middle%22%20fill%3D%22red%22%3E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%3C%2Ftext%3E%20%3C%2Fsvg%3E"))
    )
  ),

  // 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(合計金額))))
        )
      )
    )
  )
)

注意事項

既に、JavaScript によるカスタマイズを行っているアプリの場合、処理が競合して、エラーになる場合があります。その場合は、該当するアプリでプラグインの使用を中止してください。
帳票の HTML / CSS と ${式} の値は、エスケープせずにそのまま帳票に入れます。帳票の内容はアプリ管理者とレコードを編集できる人の範囲で管理してください。
Web フォントを指定すると、帳票を作る人のブラウザーが書体の配信元（Google Fonts など）に接続します。
Web フォントを有効にすると、帳票の表示が変わります。書体が変わると文字の幅が変わるので、折り返しの位置や行の高さ、ページに収まる量が変わることがあります。有効にしたら、使っている帳票をプレビューで確かめてください（PC の帳票にも効きます）。
Android の kintone モバイルアプリでは PDF のダウンロードと共有が使えないため、スマートフォンで使うボタンには保存先の添付ファイル項目を設定してください。
スマートフォン版の PDF は、ブラウザーの canvas の上限のため、A1 / A2 / B1 / B2 の 150 dpi は描画の倍率を半分にします。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up