該当箇所:外部ライブラリ(MSAL.js)内のアクセストークン保存部分
はじめに
この記事では、Garoon のポータル機能を利用して、Office 365 Outlook で受信したメールの最新情報を表示する Garoon カスタマイズポートレットを紹介します。
スケジュールや掲示板は Garoon を使っているけれど、メーラーは Office 365 Outlook を利用している。そんな場合でも、Garoon をチェックするだけで未読メールを確認できます!
必要なもの
- クラウド版 Garoon
- Microsoft アカウント
完成イメージ
Garoon のポータルに、Office 365 Outlook の受信トレイにある未読メール件数を表示します。
Outlook サインイン
未読確認
システム構成図
このカスタマイズの構成と仕組みは次のとおりです。
- Garoon から OAuth 認証を用いて Azure AD V2 Endpoint へサインインします。
Microsoft Authentication Library for JavaScript (MSAL.js)を利用することで、OAuth を使った認可フローを実現します。 - Azure からアクセストークンを取得します。
- アクセストークンを使って、Microsoft Graph API を実行します。
Microsoft Graph API(以降、Graph API)は、Microsoft 365 サービスの情報を利用するAPIです。 - Outlook メール情報を取得します。
- HTMLポートレット側で未読メール件数をチェックして表示します。
Azure Active Directory の設定
Garoon から Graph API を利用するため、Azure Active Directory にアプリケーションを登録します。この設定は、管理者のみ行う作業です。利用者が個々に設定する必要はありません。
アプリケーションの作成
- Azure ポータルにアクセスします。
- 左サイドメニューから [Azure Active Directory] を選択します。
- Azure Active Directory のメニューから [App registrations]([アプリの登録])を選択します。
- [New registration]([アプリケーションの登録])をクリックします。
- 作成するアプリケーション情報を次のように入力します。
入力後、[Register]([登録])ボタンをクリックし、アプリケーションを登録します。
項目 値 備考 Name
(名称)任意の値を入力してください。
この記事では「garoon-outlook-mail」とします。作成するアプリケーション名です。 Supported account types
(サポートされているアカウントの種類)「Account in any organization directory(Any Azure AD directory - Multitenant)」(「任意の組織のディレクトリ内のアカウント」)
を選択ー - アプリケーション作成後、作成したアプリケーションの詳細画面が表示されます。
「Application (client) ID」(「アプリケーション(クライアント)ID」)の値をメモしておいてください。
Garoon カスタマイズファイルで利用します。
米 詳細画面は、Azure ポータル > [Azure Active Directory] > [App registrations]の手順でも開くことができます。
アプリケーションの設定
作成したアプリケーションに対し、次の設定を行います。
- リダイレクト URI の設定
- OAuth 認証スコープの設定
手順1. リダイレクト URI の設定
- 作成したアプリケーションの詳細画面の左サイドメニューから、[Authentication]([認証])を選択します。
- 次の内容を入力します。入力後、[Save]([保存])ボタンをクリックし、保存します。
項目 値 備考 Redirect URIs
(リダイレクトURI)次の3つの URI を入力します。
Type(種類)は、すべて「Web」を選択します。
- https://{subdomain}.cybozu.com/g/portal/index.csp
- https://{subdomain}.cybozu.com/g/
- https://{subdomain}.cybozu.com/g/index.csp
{subdomain} の部分は、利用環境に合わせてください Implicit grant
(暗黙の付与)以下の項目を選択します。
- Access tokens
- ID tokens
ー
手順2. OAuth 認証スコープの設定
- 作成したアプリケーションの詳細画面の左サイドメニューから、 [API permissions]([APIのアクセス許可])を選択します。
- [Add a permission]([アクセス許可の追加])ボタンをクリックします。
- [Microsoft Graph] を選択します。
- [Delegated permissions]([委任されたアクセス許可])を選択します。
「Mail」欄の次の権限を選択し、[Add permission]([追加])ボタンをクリックして追加します。- Mail.Read
- 「Mail.Read」「User.Read」(デフォルトで設定されている権限)が一覧に表示されていればOKです。
Garoon の設定
Garoon では、以下の設定を行います。
- Graph API を利用するためのプロキシ API を設定
- ポートレットに表示する画像ファイルを、画像アセットへ追加
- HTML ポートレットの作成・カスタマイズの適用
- ポータルへの配置
なお、このカスタマイズでは、次の外部ライブラリを利用しています。
- Microsoft Authentication Library for JavaScript(MSAL) v0.1.2
- jQuery v3.3.1(Cybozu CDNを利用)
- https://js.cybozu.com/jquery/3.3.1/jquery.min.js
- SweetAlert2 v8.2.1(Cybozu CDNを利用)
- https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.js
- https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.css
手順1. プロキシ API 設定
手順の詳細は、Garoon ヘルプ -プロキシAPIの設定をご参照ください。
- 「Garoon システム管理」画面を開きます。
- 「基本システムの管理」タブをクリックし、[API] を選択します。
- [プロキシAPIの設定]をクリックします。
- [追加する]をクリックします。
- 以下の内容を入力します。入力後、[追加する]ボタンをクリックして、設定を追加します。
項目 値 ステータス 「有効」を選択します。 プロキシコード GET_OUTLOCK_MAILBOX メソッド 「GET」を選択します。 URL https://graph.microsoft.com/
手順2. 画像ファイルを画像アセットへ追加
ポートレットに表示するメールアイコンの画像ファイルを、画像アセットに保存します。
手順の詳細は、Garoon ヘルプ -画像アセットの追加をご参照ください。
- 「Garoon システム管理」画面を開きます。
- 「各アプリケーションの管理」タブをクリックし、[画像アセット] を選択します。
- [画像アセット一覧]をクリックします。
- [画像アセットを追加する]をクリックします。
- 以下の内容を入力します。入力後、[追加する]ボタンをクリックして画像を追加します。
項目 値 ファイル こちらからダウンロードしたファイルを追加します。 ファイルキー OUTLOOK_UNREAD_MAIL
手順3. HTML ポートレットの作成・カスタマイズの適用
カスタマイズポートレットを作成します。
手順の詳細は、Garoon ヘルプ -画像アセットの追加をご参照ください。をご参照ください。
- 「Garoon システム管理」画面を開きます。
- 「各アプリケーションの管理」タブをクリックし、[ポータル]をクリックします。
- [HTMLポートレット]をクリックします。
- [HTMLポートレットを追加する]をクリックします。
- 以下の内容を入力します。入力後、[追加する]をクリックします。
項目 値 ポートレット名 任意の値を入力してください。
この記事では、「Outlook メール未読件数」とします。ポートレットの内容 - 「テキスト」を選択します。
- 内容は後述の「サンプルコード(ポートレット HTML)」を入力してください。
- 追加した「HTML ポートレットの詳細」画面で、[JavaScript / CSSによるカスタマイズ]をクリックします。
- 次のように入力します。入力後、[設定する]ボタンをクリックして設定します。
項目 値 カスタマイズ 「適用する」を選択します。 JavaScript カスタマイズ 次の順で指定します。 - Microsoft Authentication Library for JavaScript(msal.min.js)※
- https://js.cybozu.com/jquery/3.3.1/jquery.min.js
- https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.js
- カスタマイズファイル(outlook_mail.js)
詳細は、後述の「サンプルコード(outlook_mail.js)」をご参照ください
CSS カスタマイズ 次の順で指定します。 - https://js.cybozu.com/sweetalert2/v8.2.1/sweetalert2.min.css
- カスタマイズファイル(outlook_mail.css)
詳細は、後述の「サンプルコード(outlook_mail.css)」をご参照ください
※ Microsoft Authentication Library for JavaScript(msal.min.js)の入手方法
- GitHub のリポジトリ にアクセスします。
- [Source code (zip)]から zip ファイルをダウンロードします(バージョンは 0.1.2 を利用します)。
- zip ファイルを解凍します。
- 解凍したフォルダーの「out」フォルダー以下の「msal.min.js」を利用します。
手順4. ポータルへの配置
手順の詳細は、Garoon ヘルプ -ポートレットの配置をご参照ください。
- 「Garoon システム管理」画面を開きます。
- 「各アプリケーションの管理」タブをクリックし、[ポータル]をクリックします。
- [ポータルの一覧]をクリックします。
- 作成したポートレットを配置したいポータル名をクリックします。
ポータルを新規に作る場合は、Garoon ヘルプ -ポートレットの配置を参考に作成してください。 - 左メニューのポートレット一覧から、作成したポートレット(Outlook メール未読件数)を、右側のレイアウトにドラッグして配置します。
- 配置したポートレット右上の「未公開」ボタンをクリックして「公開中」に変更します。
動作確認
- Garoon で、カスタマイズしたHTMLポートレットを配置したポータルを開きます。
- サインインを求めるダイアログが表示されます。
Office 365 Outlook を利用しているアカウントでサインインします。
※「ポップアップウィンドウをブロックする」設定がされている場合があります。その場合は、ブロック設定を解除してください。
その後、ポートレットの「ログインする」リンクをクリックすると、サインインのダイアログを再表示できます。
- Garoon のポータルに未読メール数が表示されます。
サンプルコード
ポートレットHTML
outlook_mail.js
※ 12行目のCLIENT_IDを、「Azure Active Directory の設定:アプリケーションの作成」でメモした「アプリケーション(クライアント)ID」に変更してください。
次の値は、必要に応じて変更してください。
- 15行目 TIME_INTERVAL_SEC:未読件数を取得する間隔(秒)
- 16行目 UNREAD_CHECK_BUTTON_TEXT:未読件数を再取得するボタンの文字
- 17行目 GAROON_PROXY_CODE:Garoon の「プロキシ設定」で設定したプロキシコード
- 18行目 IMAGE_ASSETS_KEY:Garoonの「画像アセット」で設定したファイルキー
- 19行目 MAIL_FOLDER_NAME:未読件数を取得する対象のメールフォルダ名
outlook_mail.css
おわりに
この記事では、Office 365 Outlook の未読件数を Garoon ポータルでチェックできるカスタマイズを紹介しました。
他にも cybozu developer network では、様々な Garoon ポータルカスタマイズを紹介しています。ぜひご参照ください。
このカスタマイズでは次の API を利用しています。
- Garoon API
- Microsoft Graph API(外部サイト)
![]() |
このカスタマイズは、サイボウズ オフィシャル SI パートナー クロス・ヘッド株式会社による有償サポートの対象カスタマイズです。
詳細はこちらをご参照ください。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。