カテゴリー内の他の記事

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

フォローする

Index

はじめに

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

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

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

必要なもの

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

完成イメージ

予定の登録・変更

空き予定照会をクリック
Garoon/Outlook の予定を同時に表示

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

予定の削除

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のアクセス許可])を選択します。
    APIのアクセス許可を選択
  2. [Add a permission]([アクセス許可の追加])ボタンをクリックします。
    アクセス許可の追加をクリック
  3. Supported legacy APIs(サポートされているレガシ API)の「Exchange」を選択します。
    サポートされているレガシAPIのExchangeを選択
  4. [Delegated permissions]([委任されたアクセス許可])を選択します。
    「Calendars」欄の次の権限を選択し、[Add permission]([追加])ボタンをクリックして追加します。
    • Calendars.ReadWrite.All
    • Calendars.ReadWrite.Shared
    Calendarに対する権限を追加
  5. 同様に Microsoft Graph API も利用可能に設定します。[Add permission]([追加])ボタンをクリックし、[Microsoft Graph] を選択します。
    Microsoft Graph APIを選択
  6. [Delegated permissions]([委任されたアクセス許可])を選択します。
    • Calendars.ReadWrite
    • Calendars.ReadWrite.Shared
    • User.Read.All(デフォルトで設定されている権限 である User.Read はチェックを外してください)
    Calendarに対する権限を追加
  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. カレンダーアイコンをクリックして、予定表を開きます。
    Outlook予定表を開く
  3. 「個人用の予定表」「予定表」の […]をクリックし、[共有とアクセス許可]をクリックします。
    共有とアクセス許可をクリック
  4. 組織内の連絡先、または共有したいユーザを入力し、以下のいずれかの権限に設定します。
    • すべての詳細を表示可能:
    • 編集が可能:他の人の Outlook スケジュールを予定を登録する場合は、「編集が可能」を選択してください。
    共有先の権限を設定
  5. ユーザーに共有した場合は、共有先に設定したメールアドレス宛に「予定表へのアクセス権が追加されました」というメールが届きます。[承諾]ボタンをクリックして、相手のOutlook 予定表から予定が見えるようにします。

Garoon の設定

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

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

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

手順1.プロキシ API 設定

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

  1. 「Garoon システム管理」画面を開きます。
  2. 「基本システムの管理」タブをクリックし、[API] を選択します。
  3. [プロキシAPIの設定]をクリックします。
  4. [追加する]をクリックします。
  5. 以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックして、設定を追加します。
    プロキシAPI設定
    項目
    ステータス 「有効」を選択します。
    プロキシコード 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 予定表に登録された予定
    GaroonとOutlook の予定を同時に表示
  6. 任意の時間を入力し、予定を登録します。
  7. Garoon に予定が登録されます。
    • Outlook の設定で、共有先の権限に「編集が可能」を設定しているユーザーの場合、Outlook 予定表に予定が追加されます。

予定の変更

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

予定の変更画面を表示

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

予定の削除

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

サンプルコード

schedule_garoon_outlook.js

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

schedule_garoon_outlook.css

おわりに

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

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

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

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

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

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