印刷画面をメイクアップ - kintone 単体で綺麗に印刷 -

著者名:竹内 能彦(サイボウズ株式会社)

目次

はじめに

kintone できれいに印刷できたらな~と思っている方へ、JavaScript で印刷画面をカスタマイズできます!
参考: レコード印刷画面を表示した後のイベント

「印刷したくないフィールドが印刷される」、「フィールドの枠線まで印刷されてきれいじゃない」といった問題をカスタマイズで解決できます。
今回の記事では上記の問題を解決してみたいと思います。

デモ環境

デモ環境で実際に動作を確認できます。
デモ環境: https://dev-demo.cybozu.com/k/259/show#record=1 (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。

完成イメージ

まずは結果からご覧いただきましょう。

カスタマイズを適用しない場合

印影などを添付して表示しても、各フィールドに枠線が表示されて不格好です。
おまけに画面下部には印刷したくないメモ欄が表示されています。

カスタマイズを適用した場合

枠線とメモ欄を非表示にし、きれいに印刷できます。
また、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」にしてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*
 * Customize print screen sample
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';

  // 印刷画面が表示されたときに動作
  kintone.events.on('app.record.print.show', (event) => {
    // 画面下部の「見積日(加工用)」、「見積有効期限(加工用)」、「メモ」を非表示
    kintone.app.record.setFieldShown('quotation_date', false);
    kintone.app.record.setFieldShown('expiration_date', false);
    kintone.app.record.setFieldShown('memo', false);

    // 下記フィールドの枠線を非表示、背景色をkintone全体の背景色と同じに設定
    // 「会社名」、「見積番号」、「見積日」、「印影」、「見積有効期限」、「小計」、「消費税」、「合計金額」
    const fields = ['company_name', 'quotation_no', 'pretty_quotation_date', 'seal',
      'pretty_expiration_date', 'sub_total', 'tax', 'grand_total'];
    for (let i = 0; i < fields.length; i++) {
      const field = fields[i];
      const element = kintone.app.record.getFieldElement(field);
      element.style.backgroundColor = '#f5f5f5';
      element.style.borderWidth = '0px';
    }
  });
})();

おわりに

kintone 単体できれいに印刷する方法を紹介させていただきました。
複数レコードの一括印刷やテーブルのページング対応(1 枚目と 2 枚目以降で画面設計を変える)には帳票サービスとの連携が必要になりますが、簡単な印刷の場合は使えそうですよね。
JavaScript のコードを見ていただければわかるとおり、簡単なカスタマイズなのでぜひトライしてみてください。

information

この Tips は、2022 年 10 月版 kintone で動作を確認しています。