Garoon ポータルで Outlook の未読メール数をチェックしよう
警告
2020 年 8 月改訂のセキュアコーディングガイドライン
に抵触する内容が含まれています。認証情報が漏洩した場合の影響を考慮して慎重に検討してください。
該当箇所:外部ライブラリ(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」の手順でも開くことができます。
アプリケーションの設定
作成したアプリケーションに対し、次の設定をします。
- リダイレクト URL の設定
- OAuth 認証スコープの設定
手順 1. リダイレクト URL の設定
- 作成したアプリケーションの詳細画面の左サイドメニューから、[Authentication]([認証])を選択します。
- 次の内容を入力します。入力後、[Save]([保存])ボタンをクリックし、保存します。
項目 値 備考 Redirect URIs
(リダイレクトURL)次の3つの URL を入力します。
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 設定
手順の詳細は、
プロキシAPIの設定
を参照してください。
- 「Garoon システム管理」画面を開きます。
- 「基本システムの管理」タブをクリックし、[API]を選択します。
- [プロキシ API の設定]をクリックします。
- [追加する]をクリックします。
- 以下の内容を入力します。入力後、[追加する]ボタンをクリックして、設定を追加します。
項目 値 ステータス 「有効」を選択します。 プロキシコード GET_OUTLOCK_MAILBOX メソッド 「GET」を選択します。 URL https://graph.microsoft.com/
手順 2. 画像ファイルを画像アセットへ追加
ポートレットに表示するメールアイコンの画像ファイルを、画像アセットに保存します。
手順の詳細は、
画像アセットの追加
を参照してください。
- 「Garoon システム管理」画面を開きます。
- 「各アプリケーションの管理」タブをクリックし、[画像アセット]を選択します。
- [画像アセット一覧]をクリックします。
- [画像アセットを追加する]をクリックします。
- 以下の内容を入力します。入力後、[追加する]ボタンをクリックして画像を追加します。
項目 値 ファイル こちら からダウンロードしたファイルを追加します。 ファイルキー OUTLOOK_UNREAD_MAIL
手順 3. HTML ポートレットの作成・カスタマイズの適用
カスタマイズポートレットを作成します。
手順の詳細は、
HTMLポートレットを追加する
を参照してください。
-
「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 システム管理」画面を開きます。
- 「各アプリケーションの管理」タブをクリックし、[ポータル]をクリックします。
- [ポータルの一覧]をクリックします。
- 作成したポートレットを配置したいポータル名をクリックします。
ポータルを新規に作る場合は、 ポータルの追加を参考に作成してください。
- 左メニューのポートレット一覧から、作成したポートレット(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 パートナー クロス・ヘッド株式会社による有償サポートの対象カスタマイズです。
詳細は
こちら
を参照してください。