検索
Close
カテゴリー内の他の記事

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

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

Index

はじめに

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

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

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

動作環境と注意事項

  • このカスタマイズには、クラウド版 Garoon の環境が必要です。
  • モバイル画面および KUNAI では利用できません。
  • 一部のカスタマイズ機能において Garoon がサポートしない DOM 操作を行っています。Garoon のアップデートにより、機能が利用できなくなる可能性があります。
  • スケジュールのカスタム項目（additionalItems）を利用するカスタマイズは、同時に適用できません。
  • カスタマイズプログラムは、その動作を保証するものではありません。
  • カスタマイズプログラムの技術的なサポート等は行っていません。
  • このカスタマイズを利用するには、サイボウズ 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で確認したものになります。

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
けけんしろ

調整さんへのURLが不正になるのですがどうしたら良いでしょうか。

それ以外の機能は問題なく動作していると思うのですがうまくいきません。

ご教示いただければ幸いです。

けけんしろにより編集されました
Avatar
エフざわ

早速、試してみました。

特に迷った所はありませんが、強いて言えば、grn_kit.css はzip内にあったものではなく、GitHub よりダウンロードしたものを使用しました。

>※ Garoon に表示される出欠回答結果（後述）は、調整さんでの入力結果を表示します。

>社内の人（Garoon のユーザー）の出欠情報を出欠回答結果に反映させるには、

>共有 URL から調整さんで出欠を入力してください。

社内ユーザはGaroonから入力できれば、さらに嬉しいです。

 

Avatar
cybozu Development team

けけんしろ様

> 調整さんへのURLが不正になるのですがどうしたら良いでしょうか。
> それ以外の機能は問題なく動作していると思うのですがうまくいきません。
> ご教示いただければ幸いです。

調整さんのURLが、イベントページにリンクされない場合
APIのcreateChouseisanEventにて、tokenの設定が
ボディではなくパラメーターに設定している可能性があります。
プロキシAPI の設定を確認いただけますでしょうか。
解決しない場合には、不正になっている状態(URLの内容)を
教えていただきたいです。

エフざわ様

> 社内ユーザはGaroonから入力できれば、さらに嬉しいです。
 
ご意見ありがとうございます。
今後検討したいと考えます。基本的には、社外の人との時間調整に
調整さんを使う想定であったため、社内で使う場合には Garoon だけで
完結する方法を考えたいです。
Avatar
けけんしろ

ありがとうございます！

おかげさまで無事動作確認できました！

お恥ずかしいミスでした。。。

 

 

 

Avatar
Shinichiro Mori

連携設定を行い、ガルーンでは候補予定が登録できるのですが、

いざガルーン上で「調整さんを使う」をクリックしたところ、

「URLで共有する」とポップアップがでてきて、

https://chouseisan.com/s?h=

が表示される状態です。

URLに飛ぶと、

「お探しのページが見つかりません
※ イベントは存在しないか、期限切れで削除されています。」

なにか設定が間違っているのでしょうか。
ご教授いただけますと幸いです。

Avatar
Shinichiro Mori

こちらの件「利用申込で取得した調整さんの API トークン」にメールで来た値を入れていなかったことが原因でした。。
お騒がせして失礼いたしましたm(_ _)m

Avatar
SHI

少しお聞きいたいのですが、パッケージ版ガルーンでは、このカスタマイズは

動作しませんでしょうか。もし、動作可能であれば検証したいのですが。

Avatar
cybozu Development team

SHI様

確認が遅くなりました。パッケージ版ガルーンは動作対象外となっております。

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