ドキュトーン・アンバサダーのヒロさんです。

オプログをご覧いただき、誠にありがとうございます。

「kintone活用シリーズ」では、いますぐできるkintone＋ドキュトーンの活用情報をたっぷりご紹介しますので、最後までどうぞご覧ください。

第２回 - ドキュトーン裏技

「kintoneの一覧ビューからレコードを選択して一括印刷したい」

今回は、「kintoneアプリの一覧ビューからレコードを選んでまとめて印刷できたら便利なんだけど・・・」とお困りの方にぜひお試しいただきたいお役立ち記事です。

ドキュトーンというkintoneで利用できる帳票アプリを使いますので、「そもそもドキュトーンって何？」という方は、まずはこちらをご覧ください。

記事の後半では、kintoneの使い勝手がさらによくなるサンプルJavaScriptも紹介していますので、こちらもぜひご覧ください。

kintoneの顧客リストアプリを使って設定してみよう

kintoneの一覧ビューからのレコードを選択して一括印刷するには、kintoneのインライン編集機能をうまく利用することで簡単にできます。

この記事では、kintoneサンプルアプリの「顧客リスト」を例にとって設定手順を説明します。手順通りにお試しいただく場合は、事前に顧客リストアプリをkintoneにインストールしてください。

①チェックボックスフィールドを追加

インストールした顧客リストアプリの一覧ビューを見てみます。

オレンジ枠の箇所がインライン編集です。ペンアイコンをクリックすると、そのレコードの編集を同じ画面上で行えます。

一覧ビュー上で印刷したいレコードをインライン編集で選択できるようにするために、フィールドの追加が必要ですので以下の手順で設定していきます。

顧客リストアプリにチェックボックスフィールド（フィールドコード名：印刷）を追加します。

チェックボックスは↓こちらの画面を参考に設定してみてください。

②一覧ビューの追加

設定が終わったら、「フォーム」タブの横の「一覧」タブに移ります。

顧客リストアプリをはじめてインストールした状態では、次の画面のような内容がデフォルトで設定されています。

ここに「印刷選択一覧」と「印刷対象一覧」の2つの一覧ビューを追加していきます。

まず、作成済みの一覧から「顧客一覧」を複製し、複製したビューに「印刷」フィールドを追加しましょう。一覧名は「印刷選択一覧」と登録します。

こちらが設定した内容です。

次に、選択したレコードだけを表示する一覧ビューも作りましょう。
一覧名は「印刷対象一覧」と登録しました。

今回は一覧ビューに表示するフィールドをあえて変更してみました。実際に印刷する際は、印刷対象一覧ビューから行うのですが、他のビューと見分けをつけるために説明上、以下のように変更しています。

③任意のレコードを選択

ここまで設定が終わったら、実際にどのように動作するか見てみましょう。一覧ビューを「印刷選択一覧」に変えてレコード一覧を表示します。

インライン編集のペンアイコンをクリックすると編集モードになるので、印刷したいレコードにチェックを入れてください。ここでは4件のレコードにチェックを入れました。

チェックを入れたら、一覧ビューを「印刷対象一覧」に変えて、表示するレコードを絞り込みます。先程チェックを入れた4件のレコードのみが表示されます。

あとは、この一覧ビュー上でドキュトーンを使って印刷すればOKです。設定は以下の手順をご確認ください。（ドキュトーンのインストール方法やテンプレートの設定方法は省略しています）

④ドキュトーンで選択したレコードを一括印刷

顧客リストアプリの設定からプラグインに移動し、ドキュトーンプラグインの設定画面を開きます。設置場所項目は「リストページボタン」を選択して保存してください。その後、忘れずにアプリを更新してください。

すると、一覧ビューにドキュトーンの印刷ボタンが表示されます。

一覧ビュー「印刷対象一覧」が選択されていることを確認し、印刷ボタンをクリックすると、チェックを入れたレコード件数分（今回であれば4件）の帳票が出力されます。

設定は以上です。

たったこれだけで、一覧ビューから印刷したいレコードを選んで、一括で印刷できるようになります。

まれに印刷したいレコードのチェックを間違えて、そのまま印刷してしまうオペレーションミスを防ぐためにも、あえて「印刷選択一覧」ビューと「印刷対象一覧」ビューを分けたほうが運用面で良いかと思います。

「印刷対象一覧」ビューから印刷選択のチェックを外せば、外されたレコードが非表示になりますので、二重チェックができてオペミスの防止にも有効ですね。

【おまけ】kintoneにJavaScriptを追加して印刷対象レコードの色を変える

ここからはさらに便利に利用するために、選択されたレコードの文字色を変えるサンプルJavaScriptをご紹介します。文字色を変えることで、印刷対象のチェックを付けたレコードがさらに見やすくなります。

(function() {
   "use strict";
   // 一覧画面の表示イベントを設定
   kintone.events.on("app.record.index.show", function(event) {
       updateRowColors(event.records);
       // チェックボックスの変更イベントを設定
       const checkboxes = kintone.app.getFieldElements("印刷");
       checkboxes.forEach(function(checkbox, index) {
           checkbox.addEventListener("change", function() {
               updateRowColors(event.records);
           });
       });
   });
   // インライン編集後のリロードを設定
   kintone.events.on("app.record.index.edit.submit.success", function(event) {
       // 保存成功後にリロードを実行
       setTimeout(function() {
           location.href = location.href;
       }, 50);  // 少し遅延させてリロードを行う
       return event;
   });
   function updateRowColors(records) {
       records.forEach(function(record, index) {
           const checkboxField = record["印刷"].value;
           const rowElement = kintone.app.getFieldElements("印刷")[index].closest('tr');
           if (checkboxField.includes("印刷")) {
               rowElement.style.color = "red";
           } else {
               rowElement.style.color = "black";
           }
       });
   }
})();

このJavascriptでは、印刷フィールドにチェックを付けた対象レコードの文字色が赤色に変わるよう記述しています。

チェックが付いていないレコードは、元の文字色のままです。

以下がJavaScriptを反映した場合の一覧ビューです。

印刷したい対象レコードにチェックを付けると、画面が自動で再読み込みされ文字色が赤色に変わります。

「印刷対象一覧」ビューを開くと、絞り込まれた4件のレコードだけが表示されます。

まとめ

いかがでしょうか？

アイデア次第でコストを抑えた業務アプリを構築できるのが、kintoneの素敵なところです。

kintoneとドキュトーンを組み合わせることで、今回のような「選択したレコードだけを一括で印刷する」という、できそうでできなかったお悩みを解決することができます。

ドキュトーンは用途に応じた帳票を内製で電子化できるサービスです。

少しでもドキュトーンに興味を持っていただけましたら、ぜひ無料トライアルをお試しください。

今回の記事内容について設定をご希望の場合は、

申込みフォームの備考欄に、「オプログを見た」と記載いただければ、ウェブ会議で丁寧に説明させていただきます。

▶ドキュトーン・トライアル

https://docutone.opro.net/trial/

今後もkintoneをさらに便利にするドキュトーンの活用例を紹介していきますのでお見逃しなく！

次回もお楽しみに！