Garoon スケジュールとOutlook 予定表を使って予定を調整する

はじめに

営業は Outlook の予定表をメインに使っているけど、他の部署は Garoon スケジュールを使っている。
違う部署のメンバーとの打ち合わせをするときは、Garoon と Outlook それぞれにログインしてにらめっこ…。

そんな問題を Garoon カスタマイズで解決しませんか？
この記事で紹介するカスタマイズでは、Garoon 上で次のことを行なえます。

• Garoon と Outlook の両方の予定を参照して予定を登録する
• Garoon 上で予定を登録・変更・削除したときに、Outlook 予定表に自動で同期する
  ※ このカスタマイズでは、Outlook に登録された予定の Garoon への同期はできません。

必要なもの

• Garoon クラウド版
• Microsoft Office365 アカウント

完成イメージ

予定の登録・変更

• Garoon の「予定の登録」「予定の変更」画面に[空き予定照会]ボタンが追加されます。
• [空き予定照会]ボタンをクリックすると、参加者の Garoon に登録された予定と Outlook 予定表に登録された予定を同時に確認できます。
• Garoon 予定を登録すると、Outlook 予定表にも予定が登録されます※
  予定のタイトルのほか、「メモ」の内容も予定に反映されます。

予定の削除

• 「予定の詳細」画面で、[Outlook スケジュールの削除]ボタンをクリックすると、Outlook の予定表から予定が削除されます※
  
  • Garoon のスケジュールから予定を削除する場合は、[削除する]リンクで予定を削除する必要があります。

※ Outlook 予定表の設定で、共有先の編集を許可している場合のみ

システム構成

このカスタマイズのシステム構成と仕組みは次のとおりです。

1. Garoon から OAuth 認証を用いて Azure AD V2 Endpoint へサインインします。
   Microsoft Authentication Library for JavaScript （MSAL.js）を利用することで、OAuth を使った認可フローを実現します。
2. Azure からアクセストークンを取得します。
3. User API を実行します。
4. cybozu.com のユーザー情報から、参加者の Office365 のログイン ID を取得します。
5. アクセストークンを使って、Microsoft Graph API を実行します。
   Microsoft Graph API（以降、Graph API）は、Microsoft 365 サービスの情報を利用するAPIです。
6. Outlook 予定表を取得します。
7. Garoon REST API を実行して、参加者の予定を取得します。
8. アクセストークンを使って、ユーザーの操作（予定の登録・変更・削除）に応じた Graph API を実行します。

注意事項

• このカスタマイズには、クラウド版 Garoon の環境が必要です。
• スケジュールのカスタム項目（additionalItems）を利用するカスタマイズは、同時に適用できません。
• カスタマイズプログラムは、その動作を保証するものではありません。
• カスタマイズプログラムの技術的なサポート等は行っていません。

Azure Active Directory の設定

アプリケーションの作成

Garoon から Graph API を利用するため、Azure Active Directory にアプリケーションを登録します。
この設定は、管理者のみ行う作業です。利用者が個々に設定する必要はありません。

「Garoon ポータル x Outlook 未読メール数表示」記事 の手順と同様に、Azure ポータルでアプリケーションを登録します。

• この記事では、作成するアプリケーション名を「garoon-outlook-schedule」としています。
• アプリケーション作成後、作成したアプリケーションの詳細画面が表示されます。
  「Application (client) ID (アプリケーション(クライアント)ID)」の値をメモしてください。
  Garoon カスタマイズファイルで利用します。
  ※ 詳細画面は、Azure ポータル > [Azure Active Directory] > [App registrations]の手順でも開くことができます

アプリケーションの設定

手順1. リダイレクト URI の設定

1. 作成したアプリケーションの詳細画面の左サイドメニューから、[Authentication]（[認証]）を選択します。
   
2. 次の内容を入力します。入力後、[Save]（[保存]）ボタンをクリックし、保存します。
   
   

   項目	値	備考
   Redirect URIs （リダイレクトURI）	次のURI を入力します。 Type（種類）は、「Web」を選択します。 https://{subdomain}.cybozu.com/g/schedule/personal_day.csp	{subdomain} の部分は、利用環境に合わせてください
   Implicit grant （暗黙の付与）	以下の項目を選択します。 Access tokens ID tokens	ー

手順2. OAuth 認証スコープの設定

1. 作成したアプリケーションの詳細画面の左サイドメニューから、 [API permissions]（[APIのアクセス許可]）を選択します。
   
2. [Add a permission]（[アクセス許可の追加]）ボタンをクリックします。
   
3. Supported legacy APIs（サポートされているレガシ API）の「Exchange」を選択します。
   
4. [Delegated permissions]（[委任されたアクセス許可]）を選択します。
   「Calendars」欄の次の権限を選択し、[Add permission]（[追加]）ボタンをクリックして追加します。
   • Calendars.ReadWrite.All
   • Calendars.ReadWrite.Shared
   
5. 同様に Microsoft Graph API も利用可能に設定します。[Add permission]（[追加]）ボタンをクリックし、[Microsoft Graph] を選択します。
   
6. [Delegated permissions]（[委任されたアクセス許可]）を選択します。
   • Calendars.ReadWrite
   • Calendars.ReadWrite.Shared
   • User.Read.All（デフォルトで設定されている権限 である User.Read はチェックを外してください）
   
7. 次の権限が、Configured permissions（構成されたアクセス許可）画面の一覧に表示されていればOKです。
   • Exchange
     • Calendars.ReadWrite.All
     • Calendars.ReadWrite.Shared
   • Microsoft Graph
     • Calendars.ReadWrite
     • Calendars.ReadWrite.Shared
     • User.Read.All
8. Configured permissions（構成されたアクセス許可）画面で、[Grant admin consent for xxx] ([xxx に管理者の同意を与えます])をクリックし、処理を実行します。
   ※ xxx は Azure AD のディレクトリ名です。
   

Outlook の設定

1. Outlook にログインします。
2. カレンダーアイコンをクリックして、予定表を開きます。
   
3. 「個人用の予定表」「予定表」の […]をクリックし、[共有とアクセス許可]をクリックします。
   
4. 組織内の連絡先、または共有したいユーザを入力し、以下のいずれかの権限に設定します。
   • すべての詳細を表示可能：
   • 編集が可能：他の人の Outlook スケジュールを予定を登録する場合は、「編集が可能」を選択してください。
   
5. ユーザーに共有した場合は、共有先に設定したメールアドレス宛に「予定表へのアクセス権が追加されました」というメールが届きます。[承諾]ボタンをクリックして、相手のOutlook 予定表から予定が見えるようにします。

Garoon の設定

Garoon では、以下の設定を行います。

1. Graph API を利用するためのプロキシ API 設定を追加
2. cybozu.com 共通管理でユーザーのカスタマイズ項目を追加
3. スケジュールアプリにカスタマイズファイルを適用

なお、このカスタマイズでは、次の外部ライブラリを利用しています。

• Microsoft Authentication Library for JavaScript（MSAL） v0.1.2, ドキュメント
• jQuery v3.3.1, ドキュメント
  • https://js.cybozu.com/jquery/3.3.1/jquery.min.js
• Moment.js v2.24.0, ドキュメント
  • https://js.cybozu.com/momentjs/2.24.0/moment-with-locales.min.js
• SweetAlert2 v8.2.1, ドキュメント
  • https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.js
  • https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.css
• FullCalendar v4.0.1, ドキュメント
• ES6-Promise v4.0.5, ドキュメント
  • https://js.cybozu.com/es6-promise/v4.0.5/es6-promise.auto.min.js

手順1.プロキシ API 設定

手順の詳細は「プロキシAPIの設定を追加する」をご参照ください。

1. 「Garoon システム管理」画面を開きます。
2. 「基本システムの管理」タブをクリックし、[API] を選択します。
3. [プロキシAPIの設定]をクリックします。
4. [追加する]をクリックします。
5. 以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックして、設定を追加します。
   
   

   項目	値
   ステータス	「有効」を選択します。
   プロキシコード	GET_GAROON_OUTLOOK
   メソッド	「GET」を選択します。
   URL	https://graph.microsoft.com/

6. 4.〜の手順と同様に、POST 用およびDELETE 用のプロキシAPIを設定します。
   POST
   

   項目	値
   ステータス	「有効」を選択します。
   プロキシコード	POST_GAROON_OUTLOOK
   メソッド	「POST」を選択します。
   URL	https://graph.microsoft.com/

   
   DELETE
   

   項目	値
   ステータス	「有効」を選択します。
   プロキシコード	DELETE_GAROON_OUTLOOK
   メソッド	「DELETE」を選択します。
   URL	https://graph.microsoft.com/

手順2. ユーザーのカスタマイズ項目

cybozu.com 共通管理で、Office365 ログイン ID を設定するユーザのカスタマイズ項目を作成します。
手順の詳細は「ユーザー情報の項目を追加する（カスタマイズ項目）」をご参照ください。

1. 「cybozu.com 共通管理」画面を開きます。
2. 「ユーザー管理」の[組織/ユーザー]を選択します。
3. [プロフィール項目の設定]ボタンをクリックします。
4. [カスタマイズ項目の設定」の[追加]ボタンをクリックします。
5. 次の内容を入力します。入力が終わったら[保存]ボタンをクリックし、保存します。
   
   

   項目	値
   項目名	Office365ログインID
   項目コード	office365_loginId
   タイプ	「文字列（1行）」を選択します。
   公開/非公開	「公開する」を選択します。
   ユーザーによる変更	任意でチェックを入れてください。

6. 設定が完了したら、「cybozu.com 共通管理」からユーザー情報を編集します。
   Outlook 予定表を利用しているユーザーアカウントの「Office365ログインID」を設定してください（参考：ユーザー情報を編集する）
   

手順3.カスタマイズファイルの適用

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

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

   項目名	設定値
   カスタマイズ	「適用する」を選択します。
   カスタマイズグループ名	任意の値を入力します。 今回は「Outlook予定表連携」とします。
   適用対象	カスタマイズを適用するユーザー・グループを選択します。
   JavaScript カスタマイズ	以下の順で、URL およびファイルを指定します。 Microsoft Authentication Library for JavaScript（msal.min.js）※1 https://js.cybozu.com/jquery/3.3.1/jquery.min.js https://js.cybozu.com/momentjs/2.24.0/moment-with-locales.min.js https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.js fullcalendar-core-main.min.js ※2 fullcalendar-daygrid-main.min.js ※2 fullcalendar-timegrid-main.min.js ※2 fullcalendar-core-locales_all.min.js ※2 https://js.cybozu.com/es6-promise/v4.2.5/es6-promise.auto.min.js カスタマイズファイル（schedule_garoon_outlook.js） 詳細は、後述の「サンプルコード（schedule_garoon_outlook.js）」をご参照ください。
   CSS カスタマイズ	以下の順で、URLおよびファイルを指定します。 https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.css fullcalendar-core-main.min.css ※2 fullcalendar-daygrid-main.min.css ※2 fullcalendar-timegrid-main.min.css ※2 カスタマイズファイル（schedule_garoon_outlook.css） 詳細は、後述の「サンプルコード（schedule_garoon_outlook.css）」をご参照ください。

※1 Microsoft Authentication Library for JavaScript（msal.min.js）の入手方法

1. GitHub リポジトリ にアクセスします。
2. [Source code (zip)]から zip ファイルをダウンロードします（バージョンは 0.1.2 を利用します）。
3. zip ファイルを解凍します。
4. 解凍したフォルダーの「out」フォルダー以下の「msal.min.js」を利用します。

※2 FullCalendar ライブラリの入手方法

1. lib_fullcalendar-4.0.1.zip からファイルをダウンロードします。
2. ダウンロードした zip ファイルを解凍します。
3. 解凍したファイルの「js」「css」フォルダー以下にあるファイルを利用します。

動作確認

予定の登録

事前に Outlook 予定表に、予定を登録しておいてください。

1. Garoon で、スケジュールの「予定の登録」画面を開きます。
2. Microsoft アカウントのログイン画面が表示されます。Microsoft アカウントでログインします。
3. 登録したい予定の日付を入力し、「参加者」にユーザーを追加します。
   
   
4. [空き時間照会]ボタンをクリックします。
   
5. モーダルが表示されます。
   入力した日付の「参加者」に追加しているユーザーの Garoon および Outlook の予定タイトルが同時に表示されます。
   ※ 予定タイトル冒頭の[Gr][OI]は、次の意味です。
   [Gr]：Garoon スケジュールに登録された予定
   [OI]：Outlook 予定表に登録された予定
   
6. 任意の時間を入力し、予定を登録します。
7. Garoon に予定が登録されます。
   
   • Outlook の設定で、共有先の権限に「編集が可能」を設定しているユーザーの場合、Outlook 予定表に予定が追加されます。

予定の変更

変更時も同様に、[空き予定照会]ボタンから、「参加者」に追加しているユーザーの Garoon と Outlook の予定を同時に確認できます。

共有先の権限に「編集が可能」を設定しているユーザーの場合、変更した内容が Outlook の予定表にも反映されます。

予定の削除

1. 削除したい予定の詳細画面を開きます。
2. [Outlook スケジュールの登録]ボタンをクリックします。
   
3. 「Outlook スケジュールを削除します」ダイアログが表示されます。[はい]ボタンをクリックすると、Outlook 予定表から予定が削除されます。
   
4. [OK]ボタンをクリックし、ダイアログを閉じます。
   
5. Garoon のスケジュールから予定を削除したい場合は、[削除する]リンクをクリックします。
   

サンプルコード

schedule_garoon_outlook.js

以下の項目の値を利用環境に合わせて変更してください。

• 13行目 CLIENT_ID：Azure Active Directory の設定 - アプリケーションの作成でメモしたアプリケーション（クライアント）ID
• 15行目 HOST_NAME：利用している cybozu.com 環境のホスト名（xxx.cybozu.com の xxx 部分）

schedule_garoon_outlook.css

おわりに

 この記事では、Garoon スケジュール上で、予定の参加者の Outlook 予定表に登録された予定を確認したり、登録・変更・削除した予定を同期するカスタマイズを紹介しました。
他にも、Garoon と Office365 などの外部サービスと連携したカスタマイズがあるので、ぜひご参考ください。

このカスタマイズでは、次の API を利用しています。

• Garoon API
  • REST API
    • 予定の一覧取得 / 予定の更新
  • JavaScript API
    • Garoon REST API リクエスト / 外部API の実行
    • 予定の値をセットする
    • 予定の詳細/登録/変更画面のヘッダー部分の空白要素を取得する
    • ログインユーザー情報の取得
    • 予定の登録イベント / 予定の変更イベント / 予定の詳細画面が表示された時のイベント / 日画面が表示された時のイベント
    • 予定の登録画面の保存実行前イベント / 予定の変更画面の保存実行前イベント
• User API
  • ユーザーエクスポート API（JSON）
• Microsoft Graph API（外部サイト）
  • イベントを作成する / イベントを更新する / イベントを削除する
  • calendarView を一覧表示する

このカスタマイズは、サイボウズ オフィシャル SI パートナー クロス・ヘッド株式会社による有償サポートの対象カスタマイズです。
詳細はこちらをご参照ください。