Garoon カスタマイズで、移動時間を含めた複数の予定を調整しよう

jQuery UI は v1.13 をもってメンテナンスモードになりました。
この記事で紹介しているカスタマイズでは、ダイアログの表示に jQuery UI を利用しています。
SweetAlert や Micromodal などのダイアログを表示するその他のライブラリを使うよう、コードの書き換えを検討してください。

Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

• はじめに
• 完成イメージ
  • できること
  • 使い方
• 注意事項
• Garoon の設定
• おわりに
• 変更履歴

はじめに

Garoon では 予定の調整を使うと、複数の日時でスケジュールを仮押さえできます。
ただ、往訪などの外出を含む場合、移動時間を含めて予定を調整するのはひと手間です。

今回のカスタマイズでは、移動時間を含めた予定を仮押さえできるので、移動時間を考慮した往訪の予定調整が楽になります。

完成イメージ

できること

このカスタマイズでは、以下のことがGaroon スケジュールでできるようになります。

• 予定の日時候補を複数登録する
• 予定前後の移動時間を設定した場合は、移動時間も含めた予定を登録する
• 予定の変更画面で、予定の日時候補の時間を変更する
• 予定を確定し、不要な他の日時候補を自動で削除する

予定の日時候補の登録

予定の時間変更

使い方

予定の登録

1. スケジュールの週表示画面を開きます。
2. 「複数予定登録」を「ON」にします。
   
3. 日時選択画面が表示されます。次の内容を設定します。
   • 予定の参加者
   • 予定（イベント）の所要時間と前後の移動時間
   
4. 設定したい時間の空欄部分をクリックし、予定の日時候補を選択します。選び終わったら、[登録画面を表示]ボタンをクリックします。
   • 青色がイベント時間、予定前後の水色が移動時間を表しています。
   • 選択を解除するには、青色部分をもう一度クリックします。
   
5. 予定の詳細を入力します。入力が終わったら、[登録する]ボタンをクリックして予定を登録します。
   
   

   項目名	設定値
   日時候補	前の画面で選んだ日時候補です。 括弧内の時間は、移動時間を含めた時間です。 不要な候補がある場合は、チェックボックスを外してください。
   タイトル	予定名を入力します。 「登録方法」が「候補登録」の場合、 [候補予定]という文言がタイトルの冒頭に自動で挿入されます。
   公開方法	予定の公開・非公開を選択します。
   登録方法	「候補登録」を選択します。
   メモ	予定のメモを入力します。

6. 「候補登録」で登録した予定は、予定の詳細画面で次のように表示されます。
   
   • 「タイトル」の冒頭に [候補予定]」という文言が自動で挿入されます。
   • 「日時候補」の欄に、他の日時候補の予定が表示されます。
     • 予定の書式は、イベント日時 [移動時間を含めた全体の時間] を表しています。

予定の変更

1. 日時を変更したい予定のタイトルをクリックします。
2. 日時を変更します。
   •  予定（イベント）自体の時間を変更する場合は、「日時」の「イベント時間」欄で、変更後の時間を選択します。
     
   • 移動時間を含めた全体の時間を変更する場合は、「日時」で変更後の時間を選択します。
     
3. [変更する]ボタンをクリックし、確定します。

※ 同じイベントに紐づく他の候補予定の時間を変更したい場合は、それぞれの予定の詳細画面から変更してください。

※ 「タイトル」「参加者」「メモ」の変更は、同じイベントに紐づく他の候補予定には反映されません。変更する場合は、それぞれの予定の詳細画面から変更を行ってください。

予定の確定

1. 確定させる予定のタイトルをクリックします。
2. 確定したい日時候補の[このスケジュールで確定する]ボタンをクリックし、確定します。
   
   
   • 「タイトル」の [候補予定] という文字は削除されます。
   • 「日時」には、移動時間を含む予定全体の時間が設定されます。
     • イベント前に移動時間を含む予定では、「タイトル」の冒頭にイベント自体の開始時間（H:mm）が追加されます。
       例：11:00 〜 12:00 [10:30 - 12:30] という予定の場合、「[11:00]予定のタイトル」 になります。
       
   • 他の日時候補の予定は削除されます。
     ※ 他の候補日時の予定にて、スケジュールのメモやファイル添付、コメントのやり取りを行っていた場合、これらの情報は削除されます。ご注意ください。

その他

• 確定前の予定の詳細画面で[コピーする]リンクをクリックすると、クリップボードへ日時候補の一覧を文字列としてコピーできます。
  
• 予定の登録時、「登録方法」で「通常登録」を選択して登録すると、予定を一括で登録できます。
  ※ 通常予定登録した予定の詳細画面で、「日時候補」欄は表示されません。
  
  

注意事項

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

Garoon の設定

カスタマイズグループを作成し、スケジュールのカスタマイズファイルを適用します。
手順の詳細は「スケジュールのカスタマイズ設定」をご参照ください。

カスタマイズファイルの適用には、Garoon の管理者権限が必要です。

このカスタマイズでは、以下のライブラリを利用しています。

• jQuery v3.4.1
• jQuery UI v1.12.1
• Moment.js v2.22.1
• Moment Timezone v0.5.23
• Vue.js v2.5.22
• Garoon html/css/image-Kit for Customize

手順

1. Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
2. [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
3. [JavaScript/CSSによるカスタマイズ]を選択します。
4. [カスタマイズグループを追加する]をクリックします。
5. 次の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
   
   

   項目名	設定値
   カスタマイズ	「適用する」を選択します。
   カスタマイズグループ名	任意の値を入力します。 今回は「往訪予定調整」とします。
   適用対象	カスタマイズを適用するユーザー・グループを選択します。
   JavaScript カスタマイズ	以下の順で、URL およびファイルを指定します。 https://js.cybozu.com/jquery/3.4.1/jquery.min.js https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js https://js.cybozu.com/momentjs/2.22.1/moment-with-locales.min.js https://js.cybozu.com/moment-timezone/0.5.23/moment-timezone-with-data.min.js https://js.cybozu.com/vuejs/v2.5.22/vue.min.js adjustVisitSchedule.js（カスタマイズファイル）※1
   CSS カスタマイズ	以下の順で、URLおよびファイルを指定します。 https://js.cybozu.com/jqueryui/1.12.1/themes/base/jquery-ui.css grn_kit.css（Garoon html/css/image-Kit for Customize）※2 adjustVisitSchedule.css（カスタマイズファイル）※1

※1 adjustVisitSchedule.js / adjustVisitSchedule.css（カスタマイズファイル）の入手方法

1. https://github.com/garoon/adjustVisitSchedule/releases にアクセスします。
2. 「Assets」の「adjustVisitSchedule-x.x.zip」をクリックしてダウンロードします。
   「x.x」はバージョン番号です。
3. ダウンロードした zip ファイルを解凍します。
4. 解凍したフォルダー以下の「adjustVisitSchedule.js」「adjustVisitSchedule.css」を利用します。

※2 grn_kit.css（Garoon html/css/image-Kit for Customize）の入手方法

1. https://github.com/garoon/css-for-customize にアクセスします。
2. [Clone or download]ボタンをクリックして、「Download ZIP]を選択します。
3. ダウンロードした zip ファイルを解凍します。
4. 解凍したファイルの「css」フォルダー以下の「grn_kit.css」を利用します。

おすすめ！ Garoon のヘッダーメニューに、往訪予定調整のメニューアイコンを追加する

往訪予定調整のメニューアイコンを追加しておくと、ヘッダーメニューから往訪予定調整機能を利用できて便利です。

手順の詳細は「メニューの追加」をご参照ください。

1. Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
2. [基本システムの管理]タブを選択し、[画面]を選択します。
3. [アプリケーションメニュー一覧]を選択します。
4. [メニューを追加する]をクリックします。
5. 次の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
   
   

   項目名	設定値
   ー	「任意のURLへのリンク」を選択します。
   タイトル	任意の値を入力します。 今回は「往訪予定調整」とします。
   URL	https://{subdomain}.cybozu.com/g/schedule/personal_week.csp?multiple=&event= ※ {subdomain} の部分は、お使いの Garoon 環境に合わせてください。
   アイコンのURL  または アイコンファイル	メニューアイコンにしたい画像ファイルか URL を指定します。 記事のアイコンと同じにしたい場合は、以下の画像を右クリックしてファイルを保存し、「アイコンのファイル」に指定してください。

おわりに

今回の記事では、移動時間を考慮した往訪の予定調整を行うカスタマイズを紹介しました。

developer network では、他にもさまざまなGaroon スケジュールカスタマイズ例を紹介しています。
ぜひご参考ください。

変更履歴

• 2019年12月3日 v1.1
  • 予定の詳細画面の「日時候補」行を、予定の詳細画面のテーブルに行を追加する APIを使用して追加するように修正しました。
    それにともない、「日時候補」行の表示位置が、「メモ」行の下から「日時」行の下に変更されています。
• 2021年7月1日 v1.2
  • スケジュールの付加情報の保存先を、カスタム項目（additionalItems）からカスタム項目（Schedule datastore）に変更しました。
• 2022年9月27日 v1.3
  • カスタム項目（additionalItems）に保存された情報をカスタム項目（Schedule datastore）に保存し直す機能を修正しました。
• 2022年10月18日
  • 適用する JavaScript の一覧に、jQuery を追記しました。

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