カテゴリー内の他の記事

Garoon スケジュールをカスタマイズして、往訪予定を調整しよう

フォローする

Index

はじめに

調整さん連携に続く、Garoon スケジュールの予定調整カスタマイズ第2弾です!

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

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

完成イメージ

できること

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

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

予定の日時候補の登録

日時候補の登録

予定の時間変更

時間の変更

使い方

予定の登録

  1. スケジュールの週表示画面を開きます。
  2. 「複数予定登録」を「ON」にします。
    「複数予定登録」を「ON」
  3. 日時選択画面が表示されます。次の内容を設定します。
    • 予定の参加者
    • 予定(イベント)の所要時間と前後の移動時間
    予定の参加者と所要時間、移動時間を設定
  4. 設定したい時間の空欄部分をクリックし、予定の日時候補を選択します。選び終わったら、[登録画面を表示]ボタンをクリックします。
    • 青色がイベント時間、予定前後の水色が移動時間を表しています。
    • 選択を解除するには、青色部分をもう一度クリックします。
    予定候補を選択
  5. 予定の詳細を入力します。入力が終わったら、[登録する]ボタンをクリックして予定を登録します。
    予定を登録
    項目名 設定値
    日時候補 前の画面で選んだ日時候補です。
    • 括弧内の時間は、移動時間を含めた時間です。
    • 不要な候補がある場合は、チェックボックスを外してください。
    タイトル 予定名を入力します。
    • 「登録方法」が「候補登録」の場合、 [候補予定]という文言がタイトルの冒頭に自動で挿入されます。
    公開方法 予定の公開・非公開を選択します。
    登録方法 「候補登録」を選択します。
    メモ 予定のメモを入力します。
  6. 「候補登録」で登録した予定は、予定の詳細画面で次のように表示されます。
    日時候補として登録した予定(予定の詳細画面)
    • 「タイトル」の冒頭に [候補予定]」という文言が自動で挿入されます。
    • 「日時候補」の欄に、他の日時候補の予定が表示されます。
      • 予定の書式は、イベント日時 [移動時間を含めた全体の時間] を表しています。

予定の変更

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

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

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

予定の確定

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

その他

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

注意事項

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

Garoon の設定

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

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

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

  • 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/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 にアクセスします。
  2. README.md の「ダウンロード」に記載されたリンクをクリックし、zip ファイルをダウンロードします。
  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 を指定します。
    記事のアイコンと同じにしたい場合は、以下の画像を右クリックしてファイルを保存し、「アイコンのファイル」に指定してください。
    icon.png

おわりに

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

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

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。