【Garoon REST API】スケジュールで受付管理業務を実現する

はじめに

今回は、スケジュールのカスタマイズにより、「受付管理業務」を実現したいと思います。

想定するシナリオは以下のとおりです。

1.「応対ユーザー」がお客様の来訪予定を登録する。
2. お客様が定刻に来社する。
3.「受付ユーザー」は、来訪予定からお客様のアポイントを確認する。
4.「受付ユーザー」は、お客様の来社を「応対ユーザー」へ通知する。
5.「応対ユーザー」は、通知を確認し、お客様と面会

受付管理業務を実現する上での要件は以下のようなものでしょう。

• 受付ユーザーがその日に来訪予定を一覧等で簡単に確認できること。
• 応対ユーザーへの来訪通知が簡単に行えること。

これらのGaroonで実現するために、以下のような機能を作りこんでいきます。

• 受付ユーザーが来訪者を確認できるよう、打ち合わせ参加者として受付ユーザーを強制的に自動設定する機能。
• 受付ユーザーを参加者として含む、当日の来訪予定を一覧表示する機能（ポータル）。
• 簡単なクリック操作で来訪を通知する機能（コメント登録による通知）。
• その他便利機能（関連情報の照会、来訪登録の取消等）。

前提事項と注意事項

• このカスタマイズには、クラウド版 Garoon または パッケージ版 Garoon 4.10以降の環境が必要です。
• サンプルでは一部の機能でGaroonがサポートしないDOM操作を行っています。Garoonのアップデートにより、機能が利用できなくなる可能性があります。
• サンプルプログラムは、その動作を保証するものではありません。
• サンプルプログラムの技術的なサポート等は行っていません。

完成イメージ

スケジュールとポートレットのカスタマイズで受付管理業務を実現します。

予定登録／編集時

受付ユーザーのポータル

スケジュールの詳細

リソースの準備

受付管理業務の実現にあたり、リソースの構成は以下のようになります。

それではリソースの準備を行っていきましょう。

受付ユーザーの定義

受付ユーザー情報は、ファイル管理に配置することにより、ポータル、スケジュールの双方から共有できるようにします。

1. 受付ユーザーとして使用するユーザーの情報を確認します。
システム管理画面の[各アプリケーションの管理]>[メール]>[ユーザーアカウント]をクリックし、cybozu.com共通管理の「ユーザーの管理」の[組織/ユーザー]をクリックしたユーザー一覧からログイン名、さらに該当するユーザーをクリックして表示した「ユーザーアカウント一覧」画面のURLからユーザーIDを確認できます。

2.以下のサンプルコードを作成し、ファイル名を「attendee.js」、文字コードを「UTF-8」で保存します。

上記画面を例とすると、記載内容は以下のようになります。

※ サンプルのため、受付ユーザーの定義はグローバル変数を使用しています。実運用の際は、CSVファイルでの管理に変更するなどを推奨します。

3. 作成したファイルを、Garoonのファイル管理に登録し、ダウンロードリンクをメモします。

ファイルの詳細からファイル名を右クリック→「リンクのアドレスをコピー」でダウンロードリンクが生成できます。

Garoon html/css/image-Kit for Customize

来訪予定のリスト表示をGaroonのスタイルに合わせるため、『Garoon html/css/image-Kit for Customize』を使用します。

1.grn_kit.cssをダウンロードしてください。

2. 作成したファイルを、Garoonのファイル管理に登録し、ダウンロードリンクをメモします。

ファイルの詳細からファイル名を右クリック→「リンクのアドレスをコピー」でダウンロードリンクが生成できます。

スケジュール参加者自動設定機能

1. 以下のサンプルコードをエディタにコピーして、ファイル名を「add-attendee.js」、文字コードを「UTF-８」で保存します。

※ ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

2. スケジュールに対して、JavaScript / CSSによるカスタマイズを追加します。

適用するファイルおよびリンクは以下のとおりです。

JavaScriptカスタマイズ

種別	設定方法	設定値
jQuery	リンク	https://js.cybozu.com/jquery/3.3.1/jquery.min.js
受付ユーザー定義	リンク	https://{subdomain}.cybozu.com/g/cabinet/download.csp/-/attendee.js?fid={受付ユーザー定義JavaScriptのfid}&ticket=&hid={受付ユーザー定義JavaScriptのhid}&.js Garoonのファイル管理に登録した「attendee.js」のダウンロードリンクです。 記事のサンプル画面を例とすると、記載内容は以下のようになります。 https://{subdomain}.cybozu.com/g/cabinet/download.csp/-/ attendee.js?fid=1&ticket=&hid=2&.js
機能本体	ファイル	作成したadd-attendee.jsをアップロード

CSS カスタマイズ

種別	設定方法	設定値
Garoon html/css/image-Kit for Customize	ファイル	ダウンロードしたgrn_kit.cssをアップロード

※ 本記事では、適用対象をEveryoneとしているため、全てのGaroonユーザーの来訪予定で受付ユーザーが追加されることになります。業務要件に合わせて適宜設定してください。

来訪予定ポートレット

1. 以下のサンプルコードをエディタにコピーします。

以下のコードの26、27行目にある、grn_kit.cssのURL、受付ユーザーの定義JavaScriptのURLをご自身の環境に合わせて変更してください。

記事のサンプル画面を例とすると、記載内容は以下のようになります。

2. 編集した内容でHTMLポートレットを作成します。

3. 作成したポートレットをポータルへ配置します。

※ ポートレットへのアクセスは、Myポートレットでの利用を許可しない、ポートレットを配置したポータルへのアクセスを受付ユーザーのみに限定する、ポートレットへのアクセスを受付ユーザーのみに限定する等、適宜アクセス権を設定してください。

解説

スケジュール参加者自動設定機能

サンプルコード31行目では、強制的に参加者を設定する予定メニューを定義しています。
来訪以外で参加者を追加したい場合変更してください。

33行目では、受付を完了した際にタイトルに付加する文言を定義しています。適宜変更してください。

43行目では、予定の登録画面が表示されたときのイベント、予定の変更画面が表示されたときのイベントを使用しています。イベント発火時に、予定メニューの変更イベントを有効化します。

47~64行目が予定メニューの選択値変更時に発火するイベントです。選択された予定メニューが来訪であれば、受付ユーザーを参加者として追加します。

73行目では、予定の登録画面が表示されたときのイベントを使用しています。既存のスケジュールを再利用した場合、タイトルへの付加された【受付対応済み】の文言、カスタム項目での処理済のフラグが設定されたままですので、それらをクリアします。

78～88行目がクリアを行っている箇所です。受付処理済のスケジュールを再利用して新規スケジュールを作成した場合、カスタム項目※の内容も引き継がれ、受付処理済の状態で登録されてしまうため、それを防止しています。
※ カスタム項目（additionalItems）は、他サービスとAPI連携して取得した値の保存などに利用できる項目で、画面には表示されない項目です。このカスタマイズでは、受付登録状況を保存するためにカスタマイズ項目を利用しています。

来訪予定リストポートレット

25～30行目では使用する外部リソースを宣言しています。

25行目、28行目はjQuery UIに関する宣言です。対応連絡を行う際のコメント入力ダイアログで使用しています。
26行目は、Garoon html/css/image-Kit for Customizeに関する宣言です。来訪予定リストをGaroonライクなUIで表示するために使用しています。
29行目、30行目はMoment.jsに関する宣言です。日時のフォーマット等、日付操作簡素化のために使用しています。

37 行目では、リスト表示する予定メニューを定義しています。
来訪以外のリストを表示したい場合変更してください。

39行目、41行目は、対応連絡を行った際に更新する内容の定義です。タイトルに39行目の文言を付加し、41行目の文言をコメントとして登録します。

112～134行目が表示対象のスケジュールを取得する処理です。開始・終了日時が本日かつ、受付ユーザーを参加者として含むスケジュールを取得します。

136行目から、対応連絡登録を行うためのダイアログを作成しています。

139～190行目が対応連絡登録を確定した際の処理です。コメント登録、スケジュールのタイトル更新およびカスタム項目を利用した処理済設定を行います。現時点でのAPI提供状況の関係で、スケジュール更新はREST API、コメント登録はSOAP APIを使用しています。

210行目で画面の読み込みが完了した際に発火するイベントを記載しています。来訪予定リストを表示します。

211～282行目で検索結果のスケジュールをリストに出力します。

249～257行目は、「対応連絡」ボタンをクリックした際のイベント処理です。クリックされたスケジュールのID、タイトルを元に、コメント登録ダイアログを表示します。

258～281行目が表示対象のスケジュールを切り替えるためのイベント処理です。押されたボタンによって、その日の全ての来訪予定あるいは未処理の予定を表示します。

おわりに

いかがだったでしょうか？是非、自社の受付業務への適用が可能か検討の上、活用してみてください。

APIを利用したカスタマイズにより、Garoonの利便性はさらに向上することができます。今後もTipsを定期的に公開していきますので、ご期待ください。

このTipsは、2018年10月版 Garoonで確認したものになります。