（著者：サイボウズ 竹内 能彦）
はじめに
kintone で綺麗に印刷できたらな～と思っている方へ、
JavaScriptで印刷画面をカスタマイズすることができます！
（詳細はレコード印刷画面表示イベントをご確認ください。）
「印刷したくないフィールドが印刷される・・・」、「フィールドの枠線まで印刷されて綺麗じゃない・・・」
といった問題をカスタマイズで解決できるようになります。
今回の記事では上記の問題を解決してみたいと思います。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/259/show#record=1
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
結果
まずは結果からご覧いただきましょう。
これまで
印影などを添付して表示しても、各フィールドに枠線が表示されて不格好です。
おまけに画面下部には印刷したくないメモ欄が表示されています。
JavaScriptカスタマイズ後
枠線とメモ欄を非表示にし、綺麗に印刷できます。
また、8月版で追加されたDATE_FORMAT関数を使って、「見積日」、「見積有効期限」を「年月日」形式で表示しています。
アプリの準備
フォームの配置
スペースフィールドやラベルフィールドを活用することで、以下のフォーム配置になっています。
フィールドの設定（今回のカスタマイズで必要なフィールドのみを抜粋）
| フィールド名 | フィールドタイプ | フィールドコード | 備考 |
| 見積日（加工用） | 日付 | quotation_date | |
| 見積有効期限（加工用） | 日付 | expiration_date | |
| メモ | 文字列（複数行） | memo | |
| 会社名 | 文字列（1行） | company_name | 見た目をよくするためにフィールド名は非表示 |
| 見積番号 | 文字列（1行） | quotation_no | 見た目をよくするためにフィールド名は非表示 |
| 見積日 | 文字列（1行） | pretty_quotation_date |
見た目をよくするためにフィールド名は非表示 見積日（加工用）を使って整形 計算式：DATE_FORMAT(quotation_date, "YYYY年M月d日", "Asia/Tokyo") |
| 印影 | 添付ファイル | seal | 見た目をよくするためにフィールド名は非表示 |
| 見積有効期限 | 文字列（1行） | pretty_expiration_date |
見た目をよくするためにフィールド名は非表示 見積有効期限（加工用）を使って整形 計算式：DATE_FORMAT(expiration_date, "YYYY年M月d日", "Asia/Tokyo") |
| 小計 | 文字列（1行） | sub_total | 見た目をよくするためにフィールド名は非表示 |
| 消費税 | 文字列（1行） | tax | 見た目をよくするためにフィールド名は非表示 |
| 合計 | 文字列（1行） | grand_total | 見た目をよくするためにフィールド名は非表示 |
JS/CSS設定
「アプリの設定 > JavaScript / CSSでカスタマイズ」に以下のサンプルコードを設定します。
サンプルコードはエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8N」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください
終わりに
kintone単体で綺麗に印刷する方法を紹介させていただきました。
複数レコードの一括印刷やテーブルのページング対応（1枚目と2枚目以降で画面設計を変える）には帳票サービスとの連携が必要になりますが、簡単な印刷であれば使えそうですよね。
JavaScriptのコードを見ていただければわかる通り、簡単なカスタマイズなので是非トライしてみてください。
このTipsは、2022年10月版 kintone で確認したものになります。
こちらの記事を参考に、印刷画面をカスタマイズしておりますが、
フォームに配置した入力項目の説明の「ラベル」が印刷画面で非表示にできないことに気づきました。
ラベルのように利用できて、印刷画面で非表示にできるフィールドタイプはどれを選ぶのが良いでしょうか？
また、レコード追加や詳細編集画面でラベルのように見せるための制御をご教示いただければありがたいです。
yamatamiさん
ご質問いただきありがとうございます。cybozu developer network運営チームです。
書いて頂いた通り、フィールドの表示/非表示の操作は、ラベル/罫線/スペースフィールドには対応しておりません。
ラベル同様のフィールドはないのですが、代用で使えるとしたら「グループ」フィールドでしょうか？
グループフィールドは、通常複数のフィールドをまとめて開閉できるようにする機能を持ったものですが、
使いようによってはグループの中にフィールドを入れずにラベルのように使うことも可能かと思います。
このフィールドであれば表示/非表示の切り替えも可能です。
ご検討ください。
ご回答ありがとうございます。
「グループ」！なるほど！盲点でした。
大変助かりました。
今後ともよろしくお願いいたします。
「カテゴリを有効化」にした場合、印刷画面には選択したカテゴリが出てしまうのですが、これを非表示にすることは可能でしょうか？
（フィールド以外の要素についての質問で恐縮ですが。。。）
N.Munechika さん
ご質問いただきありがとうございます。cybozu developer network運営チームです。
カテゴリーも他のフィールドと同様に、setFieldShownで非表示にすることが可能です。
サンプルコードに下記を追加してお試しください。
kintone.app.record.setFieldShown('カテゴリー', false);今後ともよろしくお願いいたします。
早速の回答ありがとうございます。
アドバイスいただいた形でカテゴリーも非表示にすることができました！
助かりました。ありがとうございました。
こちらの記事の方法で、テーブルの一部の列だけを非表示にすることは可能でしょうか？
（記事の例でいうと「単価｣の列だけを印刷されないようにするイメージです）
kirimin様
setFieldShownはテーブル内フィールドに対応しておらず、この方法ではできません。お役に立てず、恐縮です。
レコード印刷画面表示イベント https://developer.cybozu.io/hc/ja/articles/209732286 にその旨の記載がありませんでしたので、記載するようにいたします。
早々のご回答ありがとうございます。
テーブル内は対応していないんですね…承知しました。
今後ともよろしくお願いいたします。
Hi,
Im new with cybozu developer and i tried this codes with our system.
The same, as it is. but it didnt work.
レコードに複数の添付ファイル（PDF）が存在している場合、そのPDFも合わせて印刷することは可能でしょうか。
イメージとしては、レコード詳細画面から「レコードを印刷」をした場合、
1枚目がレコードの情報、2枚目が添付ファイル1のPDF、3枚目が添付ファイル2のPDF、、、
というような形になっているのが理想です。
kk2020 様
お世話になっております。cybozu developer network運営チームです。
こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います
よろしくお願いいたします。
cybozu developer network運営チーム ご担当者様
ご確認いただき、ありがとうございました。
コミュニティの方で質問させていただきます。
cybozu developer network運営チーム ご担当者様
お尋ねしたいですが、
印刷時に、「全体背景を白で、個別フィールド背景を別色に」Jsの書き方を教えていただけますでしょうか。
よろしくお願いいたします
TL 様
お世話になっております。cybozu developer network 事務局です。
本コメント欄は、記事に対するフィードバックの欄となっております。
記事の内容から発展したご質問は、お手数ですがコミュニティにお願いいたします。
いつも拝見し参考にさせてもってています。
あるフィールドを一つ印刷画面時に隠したいのですが、動作しません。
検証のため、下記のようにすると他のedit画面等では隠れています。
～～
(function() {
'use strict';
// 印刷画面が表示されたときに動作
kintone.events.on(['app.record.print.show','app.record.detail.show','app.record.edit.show', 'app.record.create.show'], function(event){
// 画面下部の「id_kokyaku」を非表示
kintone.app.record.setFieldShown('id_kokyaku', false);
});
})();
～～
ここに来る前に、下記を拝見し、試したのですが、動作せず、あちらはコメントできなかったのでこちらに一緒に失礼します。
～～
「レコード印刷画面表示イベント」
kintone.events.on('app.record.print.show', (event) => {
window.alert('印刷画面を開きました');
return event;
});
～～
ブラウザはchormeを使っておりますが、edgeでもダメでした。
何かヒントはありませんでしょうか。
宜しくお願い致します。
ふれっくす 様
お世話になっております。cybozu developer network 運営でございます。
kintoneの「レコードを印刷する」を押し、印刷画面に遷移しても上記アラートさえでないということであれば、
何かしらの理由（プラグインやその他利用しているJavaScriptカスタマイズなど）で、エラーなどが出ておりませんでしょうか？
まずは下記記事のようにデバッグを試みてください。
kintoneカスタマイズの基本的なデバッグの流れを身につけよう
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
今回のご質問のような、記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。