Garoon 開発 Tips

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

目次

caution
警告

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

caution
警告

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

はじめに

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

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

完成イメージ

できること

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

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

予定の時間変更

使い方

予定の登録
  1. スケジュールの週表示画面を開きます。
  2. 「複数予定登録」を「ON」にします。

  3. 日時選択画面が表示されます。次の内容を設定します。
    • 予定の参加者
    • 予定（イベント）の所要時間と前後の移動時間

  4. 設定したい時間の空欄部分をクリックし、予定の日時候補を選択します。選び終わったら、[登録画面を表示]ボタンをクリックします。
    • 青色がイベント時間、予定前後の水色が移動時間を表しています。
    • 選択を解除するには、青色部分をもう一度クリックします。

  5. 予定の詳細を入力します。入力が終わったら、[登録する]ボタンをクリックして予定を登録します。

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

    • 「タイトル」の冒頭に[候補予定]という文言が自動で挿入されます。
    • 「日時候補」の欄に、他の日時候補の予定が表示されます。
      • 予定の書式は、イベント日時 [移動時間を含めた全体の時間] を表しています。
予定の変更
  1. 日時を変更したい予定のタイトルをクリックします。
  2. 日時を変更します。
    • 予定（イベント）自体の時間を変更する場合は、「日時」の「イベント時間」欄で、変更後の時間を選択します。

    • 移動時間を含めた全体の時間を変更する場合は、「日時」で変更後の時間を選択します。

  3. [変更する]ボタンをクリックし、確定します。
    information

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

予定の確定
  1. 確定させる予定のタイトルをクリックします。
  2. 確定したい日時候補の[このスケジュールで確定する]ボタンをクリックし、確定します。

    -「タイトル」の[候補予定]という文字は削除されます。 -「日時」には、移動時間を含む予定全体の時間が設定されます。 - イベント前に移動時間を含む予定では、「タイトル」の冒頭にイベント自体の開始時間（H:mm）が追加されます。
    例：11:00 〜 12:00[10:30 - 12:30] という予定の場合、[11:00]予定のタイトル になります。

    • 他の日時候補の予定は削除されます。
      information

      他の候補日時の予定にて、スケジュールのメモやファイル添付、コメントのやりとりを行っていた場合、これらの情報は削除されます。ご注意ください。

その他

  • 確定前の予定の詳細画面で[コピーする]リンクをクリックすると、クリップボードへ日時候補の一覧を文字列としてコピーできます。

  • 予定の登録時、「登録方法」で「通常登録」を選択して登録すると、予定を一括で登録できます。
    通常予定登録した予定の詳細画面で、「日時候補」欄は表示されません。

注意事項

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

Garoon の設定

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

カスタマイズファイルの適用には、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（カスタマイズファイル）
    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）
    • adjustVisitSchedule.css（カスタマイズファイル）
adjustVisitSchedule.js / adjustVisitSchedule.css（カスタマイズファイル）の入手方法
  1. https://github.com/garoon/adjustVisitSchedule/releases (External link) にアクセスします。
  2. 「Assets」の「adjustVisitSchedule-x.x.zip」をクリックしてダウンロードします。
    「x.x」はバージョン番号です。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したフォルダー以下の「adjustVisitSchedule.js」「adjustVisitSchedule.css」を利用します。
grn_kit.css（Garoon html/css/image-Kit for Customize）の入手方法
  1. https://github.com/garoon/css-for-customize (External link) にアクセスします。
  2. [Clone or download]ボタンをクリックして、「Download ZIP」を選択します。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「css」フォルダー以下の「grn_kit.css」を利用します。

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

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

手順の詳細は「 メニューの追加 (External link) 」を参照してください。

  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 スケジュールカスタマイズ例 を紹介しています。ぜひご参考ください。

サンプルコードで使用している API

このカスタマイズでは、次の API を利用しています。
お使いの Garoon で使用できる API かどうかは、各 API のドキュメントを参照してください。

変更履歴

  • 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 を追記しました。
information

この Tips は、2021 年 6 月版 Garoon で動作を確認しています。