カテゴリー内の他の記事

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

フォローする

Index

はじめに

この記事では、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] を選択します。
    [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 カスタマイズファイルで利用します。
    クライアントIDをメモ
    米 詳細画面は、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のアクセス許可])を選択します。
    [APIのアクセス許可]を選択
  2. [Add a permission]([アクセス許可の追加])ボタンをクリックします。
    [アクセス許可の追加]をクリック
  3. [Microsoft Graph] を選択します。
    [Microsoft Graph]を選択
  4. [Delegated permissions]([委任されたアクセス許可])を選択します。
    「Mail」欄の次の権限を選択し、[Add permission]([追加])ボタンをクリックして追加します。
    • Mail.Read
    Mail.Read 権限を追加
  5. 「Mail.Read」「User.Read」(デフォルトで設定されている権限)が一覧に表示されていればOKです。
    Mail.ReadおよびUser.Read権限が必要

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. 以下の内容を入力します。入力後、[追加する]ボタンをクリックして、設定を追加します。
    プロキシAPIの設定
    項目
    ステータス 「有効」を選択します。
    プロキシコード 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. 以下の内容を入力します。入力後、[追加する]をクリックします。
    HTMLポートレットの設定
    項目
    ポートレット名 任意の値を入力してください。
    この記事では、「Outlook メール未読件数」とします。
    ポートレットの内容
  6. 追加した「HTML ポートレットの詳細」画面で、[JavaScript / CSSによるカスタマイズ]をクリックします。
  7. 次のように入力します。入力後、[設定する]ボタンをクリックして設定します。
    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 カスタマイズ 次の順で指定します。

※ 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 を利用しているアカウントでサインインします。
    ※「ポップアップウィンドウをブロックする」設定がされている場合があります。その場合は、ブロック設定を解除してください。
    その後、ポートレットの「ログインする」リンクをクリックすると、サインインのダイアログを再表示できます。
    garoon-potal-login.png
  3. Garoon のポータルに未読メール数が表示されます。
    _2019-08-07_9.36.41.png

サンプルコード

ポートレット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 を利用しています。

 

有償サポート

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

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

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

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