カレンダーPlusを使った日報アプリのJavaScriptカスタマイズ例

kintoneのレコードを直感的なカレンダー形式で表示し、スケジュール確認や登録作業をスムーズにしてくれる「カレンダーPlus」。 導入するだけでも業務の視認性が向上する非常に便利なプラグインですが、カレンダーPlusの機能としてJavaScript APIが用意されているので、JavaScriptカスタマイズと組み合わせることでさらに現場の運用に合わせた独自の処理を加えることができます。

そこで本記事では、単なる出来事の記録にとどまらず、業務分析や改善に活かせる「日報アプリ」を例に挙げ、カレンダーPlusとJSカスタマイズを組み合わせた具体的な活用アイデアと実装ポイントをご紹介します。

「プラグイン導入から一歩進んだカスタマイズに挑戦したい」「日報の入力負担を減らしてデータを有効活用したい」とお悩みの方は、ぜひ参考にしてみてください！

カレンダーPlusを使った日報アプリの構成

日報アプリというと「その日の業務を自由形式に文字で記入する」ようなものが多いかと思いますが、ここでは次の内容を管理するようなアプリのイメージです。

• 「どのお客様に」「どの業務で」「どれぐらい時間をかけているか」を記録する
• 文字入力は最低限

目的は、「どのお客様に」「どの業務で」「どれぐらい時間をかけているか」を把握し、改善や価格改定につなげること。

よく使用される「日報」とは少し違いますが、日々の業務分析のためのアプリとして使用します。これをカレンダーPlusを使って表示することで、時間帯の範囲指定を簡単に行うことができるようになりつつ、登録が漏れている箇所も視覚的にわかるようになります。

主な入力項目は次の4つで、文字入力は最小限にしています。

• 開始日時・終了時日時：カレンダーPlusで自動設定
• 業務分類：業務分類アプリから選択
• 顧客コード：顧客マスタから選択
• タイトル：業務の概要

業務によってはどの顧客にも当てはまらないものもありますので、その場合は顧客を未入力とします。

プラグインで入力しやすくしたポイント

日報アプリの主な入力項目として「業務分類」と「顧客コード」がありますが、どちらも他アプリからルックアップして参照します。そこで、この2つについてはカスタマイズではなくプラグインを使用し、入力のしやすさを高めるような形としています。

業務分類の選択はドロップダウン形式に

どのような業務なのかを入力する際に、別アプリ（業務分類マスタ）からルックアップで選択する形としていますが、kintone標準だと少し絞り込みづらい部分があります。そこで、大分類⇒中分類⇒小分類のように階層的に選択できるようにするために、ぱんだ商会様の「ルックアップ/階層区分対応ドロップダウン変換プラグイン」を利用してドロップダウンで行えるようにしています。

顧客は名称でも絞れるように

顧客を選択する際は、別アプリ（顧客マスタ）からルックアップで参照し選択する形ですが、顧客コードをルックアップキーにしているため、kintone標準のルックアップ画面だと少々絞りこみにくい部分があります。そこで「ルックアップ動的絞り込みプラグイン」を使用して、名称（漢字とカナ）でも絞り込みしやすくなるような形にしています。

本アプリでは行っていませんが、入力した業務分類を条件に顧客を動的に絞り込むといった形でも利用可能です。

JavaScriptカスタマイズを加えたポイント

カレンダーPlus単体でももちろんアプリを使えますが、使いやすさ改善に次のようなJavaScriptカスタマイズを加えています。

特定の業務に一致するレコードをポップアップ表示

本サンプルアプリでは、特定の業務で設定されたデータをカレンダー上にポップアップ表示するようなカスタマイズを入れています。こうすることで、今日やるべきことで重要なものを視覚的に確認できるようになります。

本例では特定の業務に一致する本日分のデータをポップアップ表示するようなカスタマイズとしていますが、その他には「重要にチェックマークがついているレコードを表示する」など、業務に合わせて変更することができます。

レコード保存時の月末日付保持用フィールドへの設定

本サンプルアプリでは、開始日時の末日日付を「日付（検索用）」フィールドとして別フィールドに持ち、このフィールドをグラフ表示などの際の条件として使用しています。末日日付をフィールドに持っておくことで、条件指定がしやすくなるためです。

そこで、保存処理が行われた際に、開始日時の初日日付を「日付（検索用）」フィールドへ設定するような処理を入れています。「開始日時フィールド」が”2026-12-23 12:34″の場合、「日付（検索用）」フィールドには”2026-12-31″を設定するようなイメージです。

カレンダーPlusマウスドラッグ時のフィールドの値の更新

カレンダー上でデータをドラッグ＆ドロップすることが可能ですが、この操作では開始日時・終了日時は変わるものの、それ以外のフィールドの値は変わりません。

本サンプルアプリでは、開始日時フィールドに設定された日時の月末日を「日付（検索用）」フィールドに設定する処理を入れています。例えば、11月20日に登録していたデータを別の月（12月1日など）に移動した場合、「日付（検索用）」フィールドの値も11月30日から12月31日に変える必要があるのですが、カレンダPlusのプラグイン設定画面からはこの設定は行えません。

そこで、カレンダーPlusで提供されているJavaScript APIを用いて、カレンダー上でマウスドラッグ操作を行い別の日に移動した際に、「日付（検索用）」フィールドの値を更新するような処理を入れています。月が替わった際も「日付（検索用）」フィールドも連動するので、検索時にヒットしないということは無くなります。

任意日付へのまとめてコピー

カレンダー上で対象データを右クリックして複製することでカンタンにコピーをすることができますが、特定の複数の日にまとめてコピーしたいような場合、この操作では複数回行う必要があり、少々手間です。そこで、詳細画面に「まとめてコピー」ボタンを表示し、コピー先の日付を任意で指定できるようなJavaScriptカスタマイズ処理を入れています。

まとめてコピーボタンをクリックすると次のようにダイアログが表示され、コピー先とする日付をカレンダーから複数選択できるようにしています。

最後に実行ボタンをクリックすることで、別日にまとめてレコードが登録されます。この例では任意の日付を指定してのまとめてコピーですが、繰り返し行うような場合にも活用ができます。

まとめ

カレンダーPlusを使った日報アプリへのJavaScriptカスタマイズ例をご紹介しました。カレンダーPlusをそのまま使っても十分に見やすさや操作性の向上は可能ですが、さらに定着や活用に向けて1歩踏み込む場合、カスタマイズは手段の一つとなります。

ここで例として挙げたJavaScriptカスタマイズ以外にも、どのような課題があり解決したいのかといった目的次第で、例えばGoogleカレンダーと連携してみたり、他アプリから連携したデータを日報アプリに登録できるようにしたり、保存時に入力値による条件分岐した必須チェックなど、活用を広げるアイディアは色々とあるかと思いますので、是非お試しください。