代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。
Index
はじめに
営業は Outlook の予定表をメインに使っているけど、他の部署は Garoon スケジュールを使っている。
違う部署のメンバーとの打ち合わせをするときは、Garoon と Outlook それぞれにログインしてにらめっこ…。
そんな問題を Garoon カスタマイズで解決しませんか?
この記事で紹介するカスタマイズでは、Garoon 上で次のことを行なえます。
- Garoon と Outlook の両方の予定を参照して予定を登録する
- Garoon 上で予定を登録・変更・削除したときに、Outlook 予定表に自動で同期する
※ このカスタマイズでは、Outlook に登録された予定の Garoon への同期はできません。
必要なもの
- Garoon クラウド版
- Microsoft Office365 アカウント
完成イメージ
予定の登録・変更
- Garoon の「予定の登録」「予定の変更」画面に[空き予定照会]ボタンが追加されます。
- [空き予定照会]ボタンをクリックすると、参加者の Garoon に登録された予定と Outlook 予定表に登録された予定を同時に確認できます。
- Garoon 予定を登録すると、Outlook 予定表にも予定が登録されます※
予定のタイトルのほか、「メモ」の内容も予定に反映されます。
予定の削除
- 「予定の詳細」画面で、[Outlook スケジュールの削除]ボタンをクリックすると、Outlook の予定表から予定が削除されます※
- Garoon のスケジュールから予定を削除する場合は、[削除する]リンクで予定を削除する必要があります。
※ Outlook 予定表の設定で、共有先の編集を許可している場合のみ
システム構成
このカスタマイズのシステム構成と仕組みは次のとおりです。
- Garoon から OAuth 認証を用いて Azure AD V2 Endpoint へサインインします。
Microsoft Authentication Library for JavaScript (MSAL.js)を利用することで、OAuth を使った認可フローを実現します。 - Azure からアクセストークンを取得します。
- User API を実行します。
- cybozu.com のユーザー情報から、参加者の Office365 のログイン ID を取得します。
- アクセストークンを使って、Microsoft Graph API を実行します。
Microsoft Graph API(以降、Graph API)は、Microsoft 365 サービスの情報を利用するAPIです。 - Outlook 予定表を取得します。
- Garoon REST API を実行して、参加者の予定を取得します。
- アクセストークンを使って、ユーザーの操作(予定の登録・変更・削除)に応じた 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 の設定
- 作成したアプリケーションの詳細画面の左サイドメニューから、[Authentication]([認証])を選択します。
- [Add a Platform](プラットフォームを追加)ボタンをクリックします。
- [Single-page application](シングルページアプリケーション)を選択します。
- 次の内容を入力します。入力後、[Configure](構成)ボタンをクリックします。
項目 値 備考 Redirect URIs
(リダイレクトURI)次のURI を入力します。
Type(種類)は、「Web」を選択します。
- https://{subdomain}.cybozu.com/g/schedule/add.csp
{subdomain} の部分は、利用環境に合わせてください - 「Add URI」(URIの追加)をクリックし、「Redirect URIs」(リダイレクトURI)に次の内容を入力します。入力後、[Save](保存)ボタンをクリックします。
- https://{subdomain}.cybozu.com/g/schedule/modify.csp
- https://{subdomain}.cybozu.com/g/schedule/view.csp
手順2. OAuth 認証スコープの設定
- 作成したアプリケーションの詳細画面の左サイドメニューから、 [API permissions]([APIのアクセス許可])を選択します。
- [Add a permission]([アクセス許可の追加])ボタンをクリックします。
- Microsoft Graph API を利用可能に設定します。[Add permission]([追加])ボタンをクリックし、[Microsoft Graph] を選択します。
- [Delegated permissions]([委任されたアクセス許可])を選択します。
- Calendars.ReadWrite
- Calendars.ReadWrite.Shared
- User.Read.All(デフォルトで設定されている権限 である User.Read はチェックを外してください)
- 次の権限が、Configured permissions(構成されたアクセス許可)画面の一覧に表示されていればOKです。
- Microsoft Graph
- Calendars.ReadWrite
- Calendars.ReadWrite.Shared
- User.Read.All
- Microsoft Graph
- Configured permissions(構成されたアクセス許可)画面で、[Grant admin consent for xxx] ([xxx に管理者の同意を与えます])をクリックし、処理を実行します。
※ xxx は Azure AD のディレクトリ名です。
Outlook の設定
- Outlook にログインします。
- カレンダーアイコンをクリックして、予定表を開きます。
- 「個人用の予定表」「予定表」の […]をクリックし、[共有とアクセス許可]をクリックします。
- 組織内の連絡先、または共有したいユーザを入力し、以下のいずれかの権限に設定します。
- すべての詳細を表示可能:
- 編集が可能:他の人の Outlook スケジュールを予定を登録する場合は、「編集が可能」を選択してください。
- ユーザーに共有した場合は、共有先に設定したメールアドレス宛に「予定表へのアクセス権が追加されました」というメールが届きます。[承諾]ボタンをクリックして、相手のOutlook 予定表から予定が見えるようにします。
Garoon の設定
Garoon では、以下の設定を行います。
- Graph API を利用するためのプロキシ API 設定を追加
- cybozu.com 共通管理でユーザーのカスタマイズ項目を追加
- スケジュールアプリにカスタマイズファイルを適用
なお、このカスタマイズでは、次の外部ライブラリを利用しています。
- Microsoft Authentication Library for JavaScript(MSAL) v2.12.1, ドキュメント
- 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.2.5, ドキュメント
- https://js.cybozu.com/es6-promise/v4.2.5/es6-promise.auto.min.js
手順1.プロキシ API 設定
手順の詳細は「プロキシAPIの設定を追加する」をご参照ください。
- 「Garoon システム管理」画面を開きます。
- 「基本システムの管理」タブをクリックし、[API] を選択します。
- [プロキシAPIの設定]をクリックします。
- [追加する]をクリックします。
- 以下の内容を入力します。入力が終わったら、[追加する]ボタンをクリックして、設定を追加します。
項目 値 ステータス 「有効」を選択します。 プロキシコード GET_GAROON_OUTLOOK メソッド 「GET」を選択します。 URL https://graph.microsoft.com/ - 4.〜の手順と同様に、POST 用およびDELETE 用のプロキシAPIを設定します。
POST
項目 値 ステータス 「有効」を選択します。 プロキシコード POST_GAROON_OUTLOOK メソッド 「POST」を選択します。 URL https://graph.microsoft.com/
DELETE
項目 値 ステータス 「有効」を選択します。 プロキシコード DELETE_GAROON_OUTLOOK メソッド 「DELETE」を選択します。 URL https://graph.microsoft.com/
PATCH
項目 値 ステータス 「有効」を選択します。 プロキシコード PATCH_GAROON_OUTLOOK メソッド 「PATCH」を選択します。 URL https://graph.microsoft.com/
手順2. ユーザーのカスタマイズ項目
cybozu.com 共通管理で、Office365 ログイン ID を設定するユーザのカスタマイズ項目を作成します。
手順の詳細は「ユーザー情報の項目を追加する(カスタマイズ項目)」をご参照ください。
- 「cybozu.com 共通管理」画面を開きます。
- 「ユーザー管理」の[組織/ユーザー]を選択します。
- [プロフィール項目の設定]ボタンをクリックします。
- [カスタマイズ項目の設定」の[追加]ボタンをクリックします。
- 次の内容を入力します。入力が終わったら[保存]ボタンをクリックし、保存します。
項目 値 項目名 Office365ログインID 項目コード office365_loginId タイプ 「文字列(1行)」を選択します。 公開/非公開 「公開する」を選択します。 ユーザーによる変更 任意でチェックを入れてください。 - 設定が完了したら、「cybozu.com 共通管理」からユーザー情報を編集します。
Outlook 予定表を利用しているユーザーアカウントの「Office365ログインID」を設定してください(参考:ユーザー情報を編集する)
手順3.カスタマイズファイルの適用
カスタマイズグループを作成し、スケジュールのカスタマイズファイルを適用します。
手順の詳細は「スケジュールのカスタマイズ設定」をご参照ください。
- Garoon メニュー右の歯車アイコンをクリックし、[Garoonシステム管理]を選択します。
- [各アプリケーションの管理]タブを選択し、[スケジュール]を選択します。
- [JavaScript/CSSによるカスタマイズ]を選択します。
- [カスタマイズグループを追加する]をクリックします。
- 次の内容を入力します。入力が終わったら、[追加する]ボタンをクリックします。
項目名 設定値 カスタマイズ 「適用する」を選択します。 カスタマイズグループ名 任意の値を入力します。
今回は「Outlook予定表連携」とします。適用対象 カスタマイズを適用するユーザー・グループを選択します。 JavaScript カスタマイズ 以下の順で、URL およびファイルを指定します。 - https://alcdn.msauth.net/browser/2.12.1/js/msal-browser.min.js
- 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 ※1
- fullcalendar-daygrid-main.min.js ※1
- fullcalendar-timegrid-main.min.js ※1
- fullcalendar-core-locales_all.min.js ※1
- 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 ※1
- fullcalendar-daygrid-main.min.css ※1
- fullcalendar-timegrid-main.min.css ※1
- カスタマイズファイル(schedule_garoon_outlook.css)
詳細は、後述の「サンプルコード(schedule_garoon_outlook.css)」をご参照ください。
※1 FullCalendar ライブラリの入手方法
- lib_fullcalendar-4.0.1.zip からファイルをダウンロードします。
- ダウンロードした zip ファイルを解凍します。
- 解凍したファイルの「js」「css」フォルダー以下にあるファイルを利用します。
動作確認
予定の登録
事前に Outlook 予定表に、予定を登録しておいてください。
- Garoon で、スケジュールの「予定の登録」画面を開きます。
- Microsoft アカウントのログイン画面が表示されます。Microsoft アカウントでログインします。
- 登録したい予定の日付を入力し、「参加者」にユーザーを追加します。
- [空き時間照会]ボタンをクリックします。
- モーダルが表示されます。
入力した日付の「参加者」に追加しているユーザーの Garoon および Outlook の予定タイトルが同時に表示されます。
※ 予定タイトル冒頭の[Gr][OI]は、次の意味です。
[Gr]:Garoon スケジュールに登録された予定
[OI]:Outlook 予定表に登録された予定 - 任意の時間を入力し、予定を登録します。
- Garoon に予定が登録されます。
- Outlook の設定で、共有先の権限に「編集が可能」を設定しているユーザーの場合、Outlook 予定表に予定が追加されます。
予定の変更
変更時も同様に、[空き予定照会]ボタンから、「参加者」に追加しているユーザーの Garoon と Outlook の予定を同時に確認できます。
共有先の権限に「編集が可能」を設定しているユーザーの場合、変更した内容が Outlook の予定表にも反映されます。
予定の削除
- 削除したい予定の詳細画面を開きます。
- [Outlook スケジュールの登録]ボタンをクリックします。
- 「Outlook スケジュールを削除します」ダイアログが表示されます。[はい]ボタンをクリックすると、Outlook 予定表から予定が削除されます。
- [OK]ボタンをクリックし、ダイアログを閉じます。
- Garoon のスケジュールから予定を削除したい場合は、[削除する]リンクをクリックします。
サンプルコード
schedule_garoon_outlook.js
以下の項目の値を利用環境に合わせて変更してください。
- 13行目 CLIENT_ID:Azure Active Directory の設定 - アプリケーションの作成でメモしたアプリケーション(クライアント)ID
- 15行目 HOST_NAME:利用している cybozu.com 環境のホスト名(xxx.cybozu.com の xxx 部分)
- 21行目 CUSTOMIZE_ITEM_KEY:Schedule Datastoreのカスタム項目名(スケジュールのカスタム項目の命名規則をもとに、「X .Y.Z」を変更してください)
schedule_garoon_outlook.css
おわりに
この記事では、Garoon スケジュール上で、予定の参加者の Outlook 予定表に登録された予定を確認したり、登録・変更・削除した予定を同期するカスタマイズを紹介しました。
他にも、Garoon と Office365 などの外部サービスと連携したカスタマイズがあるので、ぜひご参考ください。
このカスタマイズでは、次の API を利用しています。
- Garoon API
- REST API
- JavaScript API
- User API
- Microsoft Graph API(外部サイト)
このカスタマイズは、サイボウズ オフィシャル SI パートナー クロス・ヘッド株式会社による有償サポートの対象カスタマイズです。
詳細はこちらをご参照ください。
変更履歴
- 2021年8月19日 v1.1
- スケジュールの付加情報の保存先を、カスタム項目(additionalItems)からカスタム項目(Schedule datastore)に変更しました。
Outlook REST API の廃止がアナウンスされたことにより、
[サポートされるレガシ API] に Exchangeが表示されなくなりました。
https://techcommunity.microsoft.com/t5/exchange-team-blog/outlook-rest-api-beta-and-outlook-rest-api-v2-0-deprecation/ba-p/1898162
そのため、手順2の3~4を飛ばして設定したところ、動作がユーザーによって異なる状況となっています。
・スムーズに設定でき、動作を確認できた
・処理中の表示から一向に進まなかったが、しばらく時間をおいたら設定でき、動作を確認できた
・処理中の表示から一向に進まず、時間をおいても解消しない
いずれも複数名で発生しており、Garoonの権限設定、365の権限設定の違いではないようなのですが、
原因はなにか分かりますでしょうか。
AI 様
お世話になっております。
cybozu developer network 運営局です。
Exchange API の非推奨について、ご共有ありがとうございます。記事への反映は少々お待ち下さい。
おっしゃるとおり、手順2の3〜4 を飛ばして設定いただくことで問題ない認識でおります。
以下、2点ご教示いただけないでしょうか。
毎回同じユーザーが同現象になるのか、うまくいくときもあるのか、などご教示いただきたいです。
開発者ツールの確認方法は、https://developer.cybozu.io/hc/ja/articles/207613916 をご確認ください。
ご担当者様
ブラウザが原因と分かりました。
早急にご確認いただき、ありがとうございました。
○ Google Chrome
○ Microsoft Edge
× Internet Explorer11 →処理中表示から進まない。エラーなし。
× Mozilla Firefox →処理中表示が消えるが動作しない。エラーあり。
Token renewal operation failed due to timeout: null
undefined
× Safari →処理中表示が消えるが動作しない。エラー不明。
各ブラウザの設定は、すべて推奨設定にして確認しております。
https://jp.cybozu.help/ja/settings/browser/webbrowser/windows.html
モバイル(iOS)では動作しないのでしょうか?
AI 様
cybozu developer network 運営局です。
ご連絡が遅くなり失礼いたしました。
Chrome や Edge 以外で動かない件につきまして、本記事を修正を行いました。
修正内容としては次のとおりです。
Chrome や Edge 以外のブラウザで利用する場合は、Azure Active Directory を含めた設定変更が必要です。
よろしくお願いたします。
なお、iOS で動作するブラウザおよび KUNAI は対象外になっております。ご了承ください。
cybozu developer network 運営局 ご担当者様
他ブラウザにも対応していただき、ありがとうございます。
iOS で動作するブラウザは対象外との事でしたが、SafariでPC表示にしたところ動作しました。
大変便利になり助かりました。ありがとうございました!