警告
Moment.js はメンテナンスモードになり、
日付処理できる代替ライブラリへの移行
が推奨されています。
代替ライブラリのひとつ
Luxon
については、
kintone カスタマイズでの導入方法の紹介記事
があります。
はじめに
今回は、スケジュールのカスタマイズにより、「受け付け管理業務」を実現します。
想定するシナリオは次のとおりです。
-
「応対ユーザー」がお客様の来訪予定を登録する。
-
お客様が定刻に来社する。
-
「受け付けユーザー」は、来訪予定からお客様のアポイントを確認する。
-
「受け付けユーザー」は、お客様の来社を「応対ユーザー」へ通知する。
-
「応対ユーザー」は、通知を確認し、お客様と面会する。
受け付け管理業務を実現する上での要件は次のようなものでしょう。
- 受け付けユーザーがその日に来訪予定を一覧等で簡単に確認できる。
- 応対ユーザーへの来訪通知が簡単に行える。
これらの Garoon で実現するために、次のような機能を作りこんでいきます。
- 受け付けユーザーが来訪者を確認できるよう、打ち合わせ参加者として受け付けユーザーを強制的に自動設定する機能
- 受け付けユーザーを参加者として含む、当日の来訪予定を一覧表示する機能(ポータル)
- 簡単なクリック操作で来訪を通知する機能(コメント登録による通知)
- その他便利機能(関連情報の照会、来訪登録の取消等)
前提事項と注意事項
- このカスタマイズには、クラウド版 Garoon の環境が必要です。
完成イメージ
スケジュールとポートレットのカスタマイズで受け付け管理業務を実現します。
予定登録/編集時
受け付けユーザーのポータル
スケジュールの詳細
リソースの準備
受け付けユーザーの定義
受け付けユーザー情報は、ファイル管理に配置することにより、ポータル、スケジュールの双方から共有できるようにします。
- 受け付けユーザーとして使用するユーザーの情報を確認します。
まず、Garoon システム管理画面の[各アプリケーションの管理]>[メール]>[ユーザーアカウント]をクリックします。- ログイン名:cybozu.com 共通管理の「ユーザーの管理」の[組織/ユーザー]をクリックし、ログイン名を確認します。
- ユーザーID:該当するユーザーをクリックし、「ユーザーアカウント一覧」画面の URL を確認します。
URL のuid=数字
の数字部分がユーザー ID です。
- ログイン名:cybozu.com 共通管理の「ユーザーの管理」の[組織/ユーザー]をクリックし、ログイン名を確認します。
- 次の サンプルコード をテキストエディターに貼り付けます。
サンプルコード
3 行目と 5 行目を、 受け付けユーザーの定義 1. で確認した内容に置き換えます。ファイル名を「attendee.js」、文字コードを「UTF-8」で保存します。
|
|
受け付けユーザーの定義 1. の画面を例とすると、記載内容は次のようになります。
|
|
サンプルのため、受け付けユーザーの定義はグローバル変数を使用しています。実運用の際は、CSV ファイルでの管理に変更するなどを推奨します。
ライブラリ
- jQuery
-
https://github.com/jquery/jquery/releases/tag/3.6.0
にアクセスします。
- 「Assets」の「Source code(zip)」をクリックし、zip ファイルをダウンロードします。
- zip ファイルを解凍します。
- 「dist」フォルダー内の
jQuery.min.js
を利用します。
-
https://github.com/jquery/jquery/releases/tag/3.6.0
- SweetAlert2
-
https://github.com/sweetalert2/sweetalert2/releases/tag/v11.0.16
にアクセスします。
- 「Assets」の sweetalert2.min.js と sweetalert2.min.css をクリックし、ファイルをダウンロードします。
- ダウンロードした
sweetalert2.min.js
とsweetalert2.min.css
を利用します。
-
https://github.com/sweetalert2/sweetalert2/releases/tag/v11.0.16
- Moment.js
-
https://github.com/moment/moment/releases/tag/2.29.1
にアクセスします。
- 「Assets」の「Source code(zip)」をクリックし、zip ファイルをダウンロードします。
- zip ファイルを解凍します。
- 「min」フォルダー内の
moment.min.js
とmoment-with-locales.min.js
を利用します。
-
https://github.com/moment/moment/releases/tag/2.29.1
- Garoon html/css/image-Kit for Customize
-
https://github.com/garoon/css-for-customize
にアクセスします。
- [Code]ボタン >「Download ZIP」を選択し、zip ファイルをダウンロードします。
- zip ファイルを解凍します。
- 「css」フォルダー内の
grn_kit.css
を利用します。
-
https://github.com/garoon/css-for-customize
- css for SweetAlert on Garoon
-
https://github.com/garoon/css-for-SweetAlert
にアクセスします。
- [Code]ボタン >「Download ZIP」を選択し、zip ファイルをダウンロードします。
- zip ファイルを解凍します。
- 「css」フォルダー内の
sweetalert_button_grn.css
を利用します。
-
https://github.com/garoon/css-for-SweetAlert
カスタマイズの適用
スケジュール参加者を自動設定する機能
-
次の サンプルコード をエディタにコピーして、ファイル名を「add-attendee.js」、文字コードを「UTF-8」で保存します。
-
スケジュールにカスタマイズグループを追加し、JavaScript / CSS によるカスタマイズを適用します。
カスタマイズグループを追加する手順は、 スケジュールのカスタマイズを参照してください。
適用するファイルおよびリンクは次のとおりです。
- JavaScript カスタマイズ
- jQuery:ダウンロードした
jQuery.min.js
- 受け付けユーザー定義:作成した
attendee.js
- スケジュール参加者を自動設定する機能:作成した
add-attendee.js
- jQuery:ダウンロードした
- CSS カスタマイズ:
- Garoon html/css/image-Kit for Customize:ダウンロードした
grn_kit.css
- Garoon html/css/image-Kit for Customize:ダウンロードした
カスタマイズグループを追加した後の画面は、次のようになります。
- JavaScript カスタマイズ
サンプルコード
ファイル名を「add-attendee.js」、文字コードを「UTF-8」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
|
|
来訪予定ポートレット
-
次の HTML のサンプルコード をコピーして、HTML ポートレットを作成します。
ポートレットを作成する手順は、 HTML ポートレットの設定 - ポートレットの作成を参照してください。
-
次の JavaScript のサンプルコード をエディタにコピーして、ファイル名を「attendee-portlet.js」、文字コードを「UTF-8」で保存します。
-
作成したポートレットに、JavaScript / CSS によるカスタマイズを適用します。
カスタマイズを適用する手順は、 ポータルのカスタマイズを参照してください。
適用するファイルおよびリンクは次のとおりです。
- JavaScript カスタマイズ
- jQuery:ダウンロードした
jQuery.min.js
- SweetAlert2:
sweetalert2.min.js
- Moment.js:ダウンロードした
moment.min.js
とmoment-with-locales.min.js
- 受け付けユーザー定義:作成した
attendee.js
- 来訪予定ポートレット:作成した
attendee-portlet.js
- jQuery:ダウンロードした
- CSS カスタマイズ:
- SweetAlert2:ダウンロードした
sweetalert2.min.css
- Garoon html/css/image-Kit for Customize:ダウンロードした
grn_kit.css
- css for SweetAlert on Garoon:ダウンロードした
sweetalert_button_grn.css
- SweetAlert2:ダウンロードした
カスタマイズを適用した後の画面は、次のようになります。
- JavaScript カスタマイズ
-
作成したポートレットをポータルへ配置します。
ポートレットへのアクセスは、適宜アクセス権を設定してください。
例:My ポートレットでの利用を許可しない、ポートレットを配置したポータルへのアクセスを受け付けユーザーのみに限定する、ポートレットへのアクセスを受け付けユーザーのみに限定する、など。
HTML のサンプルコード
|
|
JavaScript のサンプルコード
ファイル名を「attendee-portlet.js」、文字コードを「UTF-8」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
|
|
解説
利用しているライブラリー
-
jQuery
v3.6.0, ドキュメント
- ボタンやクリックイベントの登録などに利用しています。
-
SweetAlert2
v11.0.16, ドキュメント
- 来訪予定リストポートレットで、対応連絡を行う際のコメント入力ダイアログで使用しています。
-
Moment.js
v2.29.1, ドキュメント
- 来訪予定リストポートレットで、日時のフォーマット等、日付操作を簡略化するために使用しています。
-
Garoon html/css/image-Kit for Customize
- Garoon ライクな UI で表示するためのライブラリーです。スケジュール参加者を自動設定する機能の「対応完了」ボタンや、来訪予定リストポートレットの表示で利用してます。
-
css for SweetAlert on Garoon
- Garoon で SweetAlert2 を利用するとき、レイアウト崩れを防ぐ css です。
スケジュール参加者を自動設定する機能
サンプルコード 13 行目では、「受け付けユーザー」を追加する予定メニューを定義しています。
「来訪」以外の予定メニューで「受け付けユーザー」を追加したい場合、変更してください。
|
|
15 行目では、受け付けを完了したときタイトルに付ける文言を定義しています。適宜変更してください。
|
|
27 行目では、 予定の登録画面を表示した後のイベント、 予定の変更画面を表示した後のイベント を使用しています。
|
|
30〜33 行目では、選択された予定メニューが「来訪」のとき、「受け付けユーザー」を予定の参加者に追加します。
|
|
このカスタマイズでは、スケジュールの受け付けの処理状況を、カスタム項目(Schedule datastore)で管理しています。
35〜45 行目では、
カスタム項目(Schedule datastore)の値を取得する API を使って、このスケジュールのカスタム項目(Schedule datastore)の値を取得します。
カスタム項目の値が取得できなければ、
カスタム項目(Schedule datastore)の値をセットする API を使って初期値を設定します。
|
|
カスタム項目(Schedule datastore)は、他サービスと API 連携して取得した値の保存などに利用できる項目で、画面には表示されません。
このカスタマイズでは、受け付け処理状況を保存するためにカスタマイズ項目を利用しています。
54 行目では、
予定の登録画面を表示した後のイベント を使用しています。
既存のスケジュールを再利用した場合、タイトルへの付加された【受け付け対応済み】の文言やカスタム項目での受け付け処理済みかのフラグが設定されたままなので、それらをクリアする必要があります。
|
|
58~74 行目がクリアを行っている箇所です。
受け付け処理済みのスケジュールを再利用して新規スケジュールを作成した場合、カスタム項目(Schedule datastore)の内容も引き継がれ、受け付け処理済の状態で登録されてしまうため、それを防止しています。
|
|
来訪予定リストポートレット
13 行目では、リスト表示する予定メニューを定義しています。
「来訪」以外の予定を一覧に表示したい場合は変更してください。
|
|
15 行目と 17 行目は、対応連絡を行った際に更新する内容の定義です。スケジュールのタイトルに 15 行目の文言を付加し、17 行目の文言をコメントとして登録します。
|
|
90~104 行目で、
複数の予定を取得する API を使って表示する予定を取得する処理です。
開始・終了日時が本日かつ、受け付けユーザーを参加者として含むスケジュールを取得します。
|
|
106~114 行目が表示対象の
予定のカスタム項目(Schedule datastore)を取得する 処理です。
一覧に表示するスケジュールが受け付け処理済みかを取得しています。
|
|
127〜140 行目は、スケジュールにコメントを投稿する処理です。
コメント登録 は SOAP API を利用するため、jQuery の ajax 関数を利用して HTTP リクエストを送信します。
|
|
142 行目から、対応連絡登録するためのダイアログを作成しています。
|
|
167~190 行目が受け付け処理済み登録をする処理です。
受け付け対応済みの処理では、
予定を更新する API を使ってスケジュールのタイトルを更新し、
予定のカスタム項目(Schedule datastore)を更新する API を使って、受け付け処理済みを設定します。
これらの API は REST API なので、
Garoon REST API リクエストを送信する API を使って、HTTP リクエストを送信します。
|
|
205 行目から、画面の読み込みが完了した際に発行するイベントを定義しています。来訪予定リストを表示します。
|
|
206~217 行目で、予定を取得とカスタム項目(Schedule datastore)を取得しています。
予定の取得 API は予定メニューで絞り込めないため、予定を取得したあとに絞り込みます。
|
|
218~247 行目で、スケジュールをリストに出力します。
|
|
258~267 行目は、「対応連絡」ボタンをクリックした際のイベント処理です。クリックされたスケジュールの ID、タイトルを元に、コメント登録ダイアログを表示します。
|
|
269~280 行目が表示対象のスケジュールを切り替えるためのイベント処理です。押されたボタンによって、その日のすべての来訪予定あるいは未処理の予定を表示します。
|
|
おわりに
ぜひ、自社の受け付け業務への適用が可能か検討の上、活用してみてください。
API を利用したカスタマイズにより、Garoon の利便性はさらに向上できます。今後も Tips を定期的に公開していきますので、ご期待ください。
サンプルコードで使用している API
このカスタマイズでは、次の API を利用しています。
お使いの Garoon で使用できる API かどうかは、各 API のドキュメントを参照してください。
- Garoon JavaScript API
- Garoon REST API
- Garoon SOAP API
変更履歴
- 2021 年 6 月 9 日
- スケジュールの付加情報の保存先を、カスタム項目(additionalItems)からカスタム項目(datastore)に変更するなど、サンプルコードの修正をしました。
この修正で、利用しているライブラリやリソースの適用先を変更しています。
カスタム項目(additionalItems)を利用するカスタマイズを Garoon に適用している場合は、 リソースの準備 を参考に、カスタマイズを再適用してください。
- スケジュールの付加情報の保存先を、カスタム項目(additionalItems)からカスタム項目(datastore)に変更するなど、サンプルコードの修正をしました。
この Tips は、2021 年 5 月版 Garoon で動作を確認しています。