Garoon ポータルで Outlook の未読メール数をチェックしよう

はじめに

この記事では、Garoon のポータル機能を利用して、Office 365 Outlook で受信したメールの最新情報を表示する Garoon カスタマイズポートレットを紹介します。

スケジュールや掲示板は Garoon を使っているけれど、メーラーは Office 365 Outlook を利用している。そんな場合でも、Garoon をチェックするだけで未読メールを確認できます！

必要なもの

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

完成イメージ

Garoon のポータルに、Office 365 Outlook の受信トレイにある未読メール件数を表示します。

Outlook サインイン

未読確認

システム構成図

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

1. Garoon から OAuth 認証を用いて Azure AD V2 Endpoint へサインインします。
   Microsoft Authentication Library for JavaScript （MSAL.js）を利用することで、OAuth を使った認可フローを実現します。
2. Azure からアクセストークンを取得します。
3. アクセストークンを使って、Microsoft Graph API を実行します。
   Microsoft Graph API（以降、Graph API）は、Microsoft 365 サービスの情報を利用するAPIです。
4. Outlook メール情報を取得します。
5. HTMLポートレット側で未読メール件数をチェックして表示します。

Azure Active Directory の設定

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

アプリケーションの作成

1. Azure ポータルにアクセスします。
2. 左サイドメニューから [Azure Active Directory] を選択します。
   
3. Azure Active Directory のメニューから [App registrations]（[アプリの登録]）を選択します。
   
4. [New registration]（[アプリケーションの登録]）をクリックします。
   
5. 作成するアプリケーション情報を次のように入力します。
   入力後、[Register]（[登録]）ボタンをクリックし、アプリケーションを登録します。
   
   
   

   項目	値	備考
   Name （名称）	任意の値を入力してください。 この記事では「garoon-outlook-mail」とします。	作成するアプリケーション名です。
   Supported account types （サポートされているアカウントの種類）	「Account in any organization directory(Any Azure AD directory - Multitenant)」（「任意の組織のディレクトリ内のアカウント」） を選択	ー

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

アプリケーションの設定

作成したアプリケーションに対し、次の設定を行います。

1. リダイレクト URI の設定
2. OAuth 認証スコープの設定

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

1. 作成したアプリケーションの詳細画面の左サイドメニューから、[Authentication]（[認証]）を選択します。
   
2. 次の内容を入力します。入力後、[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 認証スコープの設定

1. 作成したアプリケーションの詳細画面の左サイドメニューから、 [API permissions]（[APIのアクセス許可]）を選択します。
   
2. [Add a permission]（[アクセス許可の追加]）ボタンをクリックします。
   
3. [Microsoft Graph] を選択します。
   
4. [Delegated permissions]（[委任されたアクセス許可]）を選択します。
   「Mail」欄の次の権限を選択し、[Add permission]（[追加]）ボタンをクリックして追加します。
   • Mail.Read
   
5. 「Mail.Read」「User.Read」（デフォルトで設定されている権限）が一覧に表示されていればOKです。
   

Garoon の設定

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

1. Graph API を利用するためのプロキシ API を設定
2. ポートレットに表示する画像ファイルを、画像アセットへ追加
3. HTML ポートレットの作成・カスタマイズの適用
4. ポータルへの配置

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

• 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 設定

手順の詳細はこちらをご参照ください。

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

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

手順2. 画像ファイルを画像アセットへ追加

ポートレットに表示するメールアイコンの画像ファイルを、画像アセットに保存します。
手順の詳細はこちらをご参照ください。

1. 「Garoon システム管理」画面を開きます。
2. 「各アプリケーションの管理」タブをクリックし、[画像アセット] を選択します。
3. [画像アセット一覧]をクリックします。
4. [画像アセットを追加する]をクリックします。
5. 以下の内容を入力します。入力後、[追加する]ボタンをクリックして画像を追加します。
   
   

   項目	値
   ファイル	こちらからダウンロードしたファイルを追加します。
   ファイルキー	OUTLOOK_UNREAD_MAIL

手順3. HTML ポートレットの作成・カスタマイズの適用

カスタマイズポートレットを作成します。
手順の詳細はこちらをご参照ください。

1. 「Garoon システム管理」画面を開きます。
2. 「各アプリケーションの管理」タブをクリックし、[ポータル]をクリックします。
3. [HTMLポートレット]をクリックします。
4. [HTMLポートレットを追加する]をクリックします。
5. 以下の内容を入力します。入力後、[追加する]をクリックします。
   
   

   項目	値
   ポートレット名	任意の値を入力してください。 この記事では、「Outlook メール未読件数」とします。
   ポートレットの内容	「テキスト」を選択します。 内容は後述の「サンプルコード（ポートレット HTML）」を入力してください。

6. 追加した「HTML ポートレットの詳細」画面で、[JavaScript / CSSによるカスタマイズ]をクリックします。
7. 次のように入力します。入力後、[設定する]ボタンをクリックして設定します。
   
   
   

   項目	値
   カスタマイズ	「適用する」を選択します。
   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）の入手方法

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

手順4. ポータルへの配置

手順の詳細はこちらをご参照ください。

1. 「Garoon システム管理」画面を開きます。
2. 「各アプリケーションの管理」タブをクリックし、[ポータル]をクリックします。
3. [ポータルの一覧]をクリックします。
4. 作成したポートレットを配置したいポータル名をクリックします。
   ポータルを新規に作る場合は、こちらを参考に作成してください。
5. 左メニューのポートレット一覧から、作成したポートレット（Outlook メール未読件数）を、右側のレイアウトにドラッグして配置します。
6. 配置したポートレット右上の「未公開」ボタンをクリックして「公開中」に変更します。

動作確認

1. Garoon で、カスタマイズしたHTMLポートレットを配置したポータルを開きます。
2. サインインを求めるダイアログが表示されます。
   Office 365 Outlook を利用しているアカウントでサインインします。
   ※「ポップアップウィンドウをブロックする」設定がされている場合があります。その場合は、ブロック設定を解除してください。
   その後、ポートレットの「ログインする」リンクをクリックすると、サインインのダイアログを再表示できます。
   
3. 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
  • ファイルキーから画像URLを取得する
  • 外部APIの実行
• Microsoft Graph API（外部サイト）
  • mailFolders を一覧表示する

 

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