Garoon スケジュールと「調整さん」を連携して、社外の方と日程調整する

はじめに

会議やランチ会などの予定を調整する時、複数の候補日時をスケジュールでおさえつつ、参加者の出欠を確認するーー…
Garoon には、そういったあるあるシチュエーションに対応した便利な機能（「予定の調整」や「予定の出欠確認」）があります。

しかし、当然ですが Garoon のユーザーではない人、たとえば社外の方との日程調整にはこの機能を利用できません。
社外の方と日程調整をするときは、「Garoon で予定候補日時をスケジュール登録し、メールなどに転記や整形して、相手先に日程を確認する。
返信がきたらその内容を Garoon へ反映する」といった作業を行っている方もいるのではないでしょうか？

この Tips では、無料でスケジュール調整できるサービス「調整さん」と Garoon を連携し、 Garoon ユーザーではない社外の方とでも楽に日程調整できるカスタマイズを紹介します。

動作環境と注意事項

• このカスタマイズには、クラウド版 Garoon の環境が必要です。
• 一部のカスタマイズ機能において Garoon がサポートしない DOM 操作を行っています。Garoon のアップデートにより、機能が利用できなくなる可能性があります。
• カスタマイズプログラムは、その動作を保証するものではありません。
• カスタマイズプログラムの技術的なサポート等は行っていません。
• このカスタマイズを利用するには、サイボウズ x 調整さん 連携サービスβ版のご利用申込みが必要です。申込みについては サイボウズ x 調整さん 連携サービスβ版のご利用申込み をご参照ください。

完成イメージ

できること

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

• 予定の候補日時を複数登録する
• 調整さんの出欠表をボタン1つで作成する
• 調整さんの出欠回答結果を確認する
• 予定を確定し、不要な他の候補日時を自動で削除する

使い方

候補日時の登録

1. 個人の「週表示」画面を表示します。
2. 「複数予定登録」項目を ON にします。
   
3. 候補日時のチェックボックスにチェックを入れ、[登録] ボタンをクリックします。
   ※ 予定は30分刻みで 1時間単位で登録できます。チェックを入れると対象日時が青色に反転します。
   
4. 他の参加者を追加する場合や施設予約したい場合は、[＋] ボタンをクリックします。
   [＋] ボタン横に表示された入力欄に追加したい参加者や施設名を入力し、Enter キーで確定します。
   
5. 予定の内容を入力し、[登録する] ボタンをクリックします。チェックを入れた候補日時の予定が登録されます。
   ※ Garoon の通常予定として登録されます。
   
   

   項目名	Garoon スケジュールに反映される項目
   日時候補	3. でチェックを入れた候補日時 不要な日時候補が含まれていた場合は、チェックを外してください。
   タイトル	スケジュールタイトル
   公開方法	スケジュールの公開先
   登録方法	候補登録 を選択
   メモ	予定のメモ

6. 調整さんの出欠表を作成しましょう。
   「予定の詳細」画面で、[調整さんを使う] ボタンをクリックします。
   
7. 必要に応じて「タイトル」「候補日程」「メモ」を編集し、[作成する] ボタンをクリックします。
   
   

   項目名	調整さんに反映される項目
   タイトル	イベントタイトル
   候補予定	日にち候補
   メモ	メモ

8. 調整さんの出欠表が作成され、共有URLが表示されます。
   [調整さんで見る] ボタンをクリックすると、調整さんで、作成された出欠表を確認できます。
   
   
9. 生成された共有URLを社外の方に共有します。あとは出欠を入力してもらうのを待つのみです！
   ※ Garoon に表示される出欠回答結果（後述）は、調整さんでの入力結果を表示します。社内の人（Garoon のユーザー）の出欠情報を出欠回答結果に反映させるには、共有 URL から調整さんで出欠を入力してください。
   ※ 共有URLのリンク先は「調整さん」のウェブサイトです。「調整さん」サイトでは、ネット広告が表示されます。あらかじめご了承ください。
   ※ 「コピーする」リンクをクリックすると、予定候補日時の一覧をクリップボードにコピーできます。
   

出欠回答結果の確認

1. 「スケジュール」画面で予定のタイトルをクリックします。
2. 「予定の詳細」画面の「調整さん」項目に、調整さんで入力された出欠回答結果が表示されます。
   ※ 出欠回答結果（○ / △ / ☓）の集計結果や、回答者ごとの回答内容を確認できます。
   

予定の確定

1. 出欠回答結果が出揃ったら、予定を確定させましょう。
   「日時候補」項目で、確定したい予定候補日時の [確定] ボタンをクリックします。
   
2. 予定が確定されます。
   ※ 他の予定候補日時は自動で削除されます。予定のタイトルの「[候補予定]」という文字も削除されます。
   

設定手順

このカスタマイズを利用するには、サイボウズ x 調整さん 連携サービスβ版のご利用申込みが必要です。
詳細は サイボウズ x 調整さん 連携サービスβ版のご利用申込み をご参照ください。

プロキシ API の設定

プロキシ API の設定を行います。
ここでは、調整さんを利用するための「イベント取得 API」と「イベント作成 API」用の2つのプロキシ API 設定を行います。

• この設定には、Garoon の管理者権限が必要です。
• 調整さんの API トークンは、サイボウズ x 調整さん 連携サービスβ版のご利用申込み後に発行しています。

1. Garoon メニュー右側の歯車アイコンをクリックし、[Garoon システム管理] を選択します。
2. [基本システム] タブを選択し、[API] を選択します。[プロキシAPIの設定] をクリックします。
   
3. 調整さんのイベント取得APIの設定を行います。
   「プロキシAPI設定」画面で、[追加する] をクリックします。
   「プロキシAPI設定の追加」画面で、以下の内容を入力し、[追加する] ボタンをクリックします。
   

   項目名	設定値
   ステータス	有効
   プロキシコード	getChouseisanEvent
   メソッド	GET
   URL	https://chouseisan.com/api/v1/events
   パラメータ	キー 値 token 利用申込で取得した調整さんの API トークン

4. 調整さんのイベント作成APIの設定を行います。
   「プロキシAPI設定」画面で、[追加する] をクリックします。
   「プロキシAPI設定の追加」画面で、以下の内容を入力し、[追加する] ボタンをクリックします。
   
   

   項目名	設定値
   ステータス	有効
   プロキシコード	createChouseisanEvent
   メソッド	POST
   URL	https://chouseisan.com/api/v1/events
   ボディ	キー 値 token 利用申込で取得した調整さんの API トークン

JavaScript / CSS によるカスタマイズ の設定

JavaScript / CSS によるスケジュールのカスタマイズ設定 を行います。
ここでは、「複数予定候補登録」と「調整さん連携」の2つのカスタマイズグループを作成します。

• この設定には、Garoon の管理者権限が必要です。
• このカスタマイズでは、以下の OSS を利用しています。
  • jQuery UI 1.12.1
    https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js
    https://js.cybozu.com/jqueryui/1.12.1/themes/base/jquery-ui.css
  • Moment.js 2.22.1
    https://js.cybozu.com/momentjs/2.22.1/moment-with-locales.min.js
  • Vue.js 2.5.22
    https://js.cybozu.com/vuejs/v2.5.22/vue.min.js
  • Garoon html/css/image-Kit for Customize
    Garoon のデザインと調和させるスタイルシートです。GitHub で配布しています。
• カスタマイズのソースコード（JavaScript ファイルおよび css ファイル）は、サイボウズ x 調整さん 連携サービスβ版のご利用申込み後に配布しています。

1. Garoon メニュー右側の歯車アイコンをクリックし、[Garoon システム管理] を選択します。
2. [各アプリケーションの管理] タブを選択し、[スケジュール] を選択します。[JavaScript / CSS によるカスタマイズ] をクリックします。
   
3. Garoon の「複数予定候補登録」用のカスタマイズグループを作成します。
   [カスタマイズグループを追加する]をクリックします。
   「カスタマイズグループの追加」画面で、以下の内容を入力し、[追加する] ボタンをクリックしてください。
   

   項目名	設定値
   カスタマイズ	適用する
   カスタマイズグループ名	複数予定候補登録
   適用対象	このカスタマイズを適用したいユーザ/組織/ロール を選択してください。
   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/vuejs/v2.5.22/vue.min.js garoonMultipleEvent.js
   CSS カスタマイズ	以下の URL およびファイルを設定します。 https://js.cybozu.com/jqueryui/1.12.1/themes/base/jquery-ui.css grn_kit.css garoonMultipleEvent.css

   • grn_kit.css は、Garoon のデザインと調和させるスタイルシートです。GitHub よりダウンロードしてください。
   • garoonMultipleEvent.js および garoonMultipleEvent.css は、本カスタマイズのソースコードです。
4. Garoon の「調整さん連携」用のカスタマイズグループを作成します。
   [カスタマイズグループを追加する]をクリックします。
   「カスタマイズグループの追加」画面で、以下の内容を入力し、[追加する] ボタンをクリックしてください。
   
   

   項目名	設定値
   カスタマイズ	適用する
   カスタマイズグループ名	調整さん
   適用対象	このカスタマイズを適用したいユーザ/組織/ロール を選択してください。
   JavaScript カスタマイズ	以下の URL およびファイルを設定します。 https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js https://js.cybozu.com/vuejs/v2.5.22/vue.min.js garoonChouseisan.js
   CSS カスタマイズ	以下の URL およびファイルを設定します。 grn_kit.css garoonChouseisan.css

   • grn_kit.css は、Garoon のデザインと調和させるスタイルシートです。GitHub よりダウンロードしてください。（「複数予定候補登録」用カスタマイズグループで指定したファイルと同じです。）
   • garoonChouseisan.js および garoonChouseisan.css は、本カスタマイズのソースコードです。

設定は以上です。

サイボウズ x 調整さん 連携サービスβ版のご利用申込み

このカスタマイズを利用するには、サイボウズ x 調整さん 連携サービスβ版のご利用申込みが必要です。ご希望の方は、以下のフォームよりお申込みください。

サイボウズ x 調整さん 連携サービスβ版のご利用申込み

申込み確認後、調整さんの API トークンおよびカスタマイズのソースコードをお送りします。

• 調整さん API トークンは、本カスタマイズの目的でのみご利用ください。
  また、.com 環境ごとに配布しているため、別環境の Garoon にも適用したい場合は、別途ご利用申込みをお願いいたします。

おわりに

普段、社内で Garoon の「予定調整」や「予定の出欠確認」機能を愛用していると、面倒だな…と感じるかもしれない社外の方との日程調整。
スケジュール調整できるサービス「調整さん」と連携すると、Garoon 上からボタン一つで調整さんの出欠表を作成でき、出欠の回答結果を Garoon スケジュールで確認してそのままスケジュールへ確定できます。

こんな風に、Garoon API でカスタマイズを行うと、Garoon をより便利に拡張できます。
cybozu developer network でも色々なカスタマイズをご紹介しているので、ぜひトライしてみてください。

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