このカスタマイズで利用している kintone JS SDK は現在推奨されていません。今後は kintone JavaScript Client (@kintone/rest-api-client) を利用するように書き換えてください。

Index

はじめに

MicrosoftのOutlookといえばビジネス利用でお世話になっている方も多いはず。
そのOutlookメールがkintone上で送受信できるサンプルです。

メリットとしては、メールをkintoneに取り込むことで、他のkintoneアプリとの連携がしやすくなります。
また、kintoneのプロセス管理機能を使用してステータスの管理を行うことができます。

Outlook側への認証にOAuth2.0を利用しています。少し敷居が高く感じられるかもしれませんが、
詳しい手順の解説とサンプルコードを公開しておりますのでぜひ参考にしてください。

サンプルコードは GitHub上に公開しています。

概要

今回の注目部分はなんといっても認証部分です！Microsoftが提供している MSAL.js (外部サイト) を利用することで、Outlook(Microsoftアカウント)とのOAuth2.0を利用した認証をkintone上で行うことができます。

連携の流れは以下となっています。

• kintoneからOAuth認証を用いてAzure AD V2 Endpoint へサインイン
• kintoneからAzureへアクセストークンを取得
• アクセストークンを使って Graph API を叩く
• レスポンスを kintone のアプリに登録

Graph APIはMicrosoft Cloudサービスリソースへのアクセスを可能にするAPIです。

kintone アプリの作成

kintoneアプリでは以下のフィールドを配置してください。

こちらがアプリの配置したフィールドのフォーム画面です。

Azure Active Directory アプリケーションの登録

事前準備

Outlook と kintone を連携させるため、Azure Active Directory へアプリケーションを登録する必要があります。
事前に以下を行ってください。

1. Microsoft アカウントの取得
2. 1. で取得したアカウントで Azure Portal へログイン

アプリケーションの登録

左メニューの「Azure Active Directory」を選択します。

「アプリの登録」を選択します。

「アプリケーションの登録」ボタンをクリックします。

次のように入力します。入力が終わったら「登録」ボタンをクリックします。

作成したアプリケーションで、「認証」メニューを選択します。
「暗黙の付与」の「アクセストークン」と「IDトークン」にチェックを入れ、「保存」ボタンをクリックします。

アプリケーションIDは、作成したアプリケーションの「概要」メニューで確認できます。
kintone に適用する カスタマイズファイルに利用するので、メモしておいてください。

 以上で登録は完了です。

※ 認証時のリクエストにアクセス権のスコープを含めているため、アプリ登録画面での「Microsoft Graph のアクセス許可」の設定は不要です。 

プログラムの説明

今回使用するプログラム

• SAMPLE-kintone-connect-azure
  サンプルプログラム一式です。
  • 入手方法
    1. https://github.com/kintone-samples/SAMPLE-kintone-connect-azure/releases/tag/1.1.0 へアクセスします。
    2. [Assets] の 「Source code（zip）」をクリックし、zip ファイルをダウンロードします。
    3. ファイルを解凍します。利用するプログラムファイルは下記をご参照ください。
• 利用するプログラムファイル
  • common-js-functions.min.js
    
    • 共通処理を記述するプログラムです
    • common ディレクトリ内にあります。
  • kintone-connect-outlook_mail_common.js
    
    • kintoneアプリ/Microsoftアプリの設定を記述するプログラムです
    • 環境に合わせて修正する部分があります（後述）
    • outlook-mail ディレクトリ内にあります。
  • oauth.js
    
    • OAuth2.0を利用してAzureへの認証処理を行うプログラムです。
    • common ディレクトリ内にあります。
  • kintone-connect-outlook_mail.js
    
    • アクセストークンを用いてOutlookからメールデータを取得するプログラムです
    • outlook-mail ディレクトリ内にあります。

• kinotne JS SDK v0.7.0
  kintone REST API を便利に扱うことができるライブラリです。詳しくはコチラの紹介記事をご覧ください。
  • 入手方法
    1.  https://github.com/kintone-labs/kintone-js-sdk にアクセスします。
    2. [Clone or download]ボタンをクリックし、zip ファイルをダウンロードします。
    3. ファイルを解凍し、「dist」下の「kintone-js-sdk.min.js」を利用します。
• kintone UI Component v0.4.2
  kintone ライクなUIパーツをかんたんに作成できるライブラリです。詳しくは、コチラの紹介記事を御覧ください。
  • 入手方法
    1. https://github.com/kintone-labs/kintone-ui-component/releases/tag/v0.4.2 にアクセスします。
    2. 「Assets」の [Source code]をクリックし、zip ファイルをダウンロードします。
    3. ファイルを解凍し、「dist」下の「kintone-ui-component.min.js」「kintone-ui-component.min.css」を利用します。

また、今回は上記プログラム以外にライブラリとして以下を利用します。

• MSAL.js
  AzureからOAuth認証でアクセストークンを取得するプログラムです。
  • https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.js
• jQuery v3.4.1
  • https://js.cybozu.com/jquery/3.4.1/jquery.min.js
• Sweet Alert2 v8.17.6
  • https://js.cybozu.com/sweetalert2/v8.17.6/sweetalert2.min.js
  • https://js.cybozu.com/sweetalert2/v8.17.6/sweetalert2.min.css

プログラムの修正

kintone-connect-outlook_mail_common.js を修正します。

• Microsoftアプリの設定でメモしておいたアプリケーションID（7行目）を変更してください。
• kintone アプリのフィールドコードが kintone アプリの作成 に記載したフィールドコードと異なる場合には、28行目〜53行目を修正してください。

プログラムの配置

これらのプログラムを「アプリの設定>JavaScript/CSSでカスタマイズ」下に配置します

プログラムの解説

kintoneイベントの処理 (kintone-connect-outlook_mail.js )

kintoneの各イベント処理は以下となっています。

レコード一覧画面表示イベント

レコード詳細画面表示イベント

レコード作成/編集画面表示イベント

Outlookモジュール ( kintone-connect-outlook_mail.js )

kintoneとOutlookのコネクション部分を一部抜粋して説明します。

MSAL.jsのインスタンス化

userAgentApplicationとしてインスタンス化し、以降の処理に利用します。

Azureからトークンを取得する

サインイン処理では、まずAzureからIDトークンを取得します。

そして取得したIDトークンを用いてアクセストークンを取得します。

取得したアクセストークンを用いてメールデータを取得する

GraphAPIをkintone上で叩いてOutlookのメールデータを取得しています。
外部APIをkintone上で叩く方法はコチラのAPIドキュメントをご覧ください。

動作確認

kintoneアプリのレコード一覧画面に『Sign In Outlook』というボタンが表示されるので、ボタンをクリックします。

OAuth認証画面が表示されるので、 Microsoftアプリの設定で準備したMicrosoftアカウントでログインします。

メールアドレスを入力したあとにエラーが表示される場合、Microsoftアプリの設定が間違っている場合があります。もう一度設定内容をご確認ください。

ログインに成功した場合、先ほどまで『Sign In Outlook』だったボタンが『Receive Mail』『Sign out』に変わります。

『Receive Mail』ボタンをクリックすることで、Graph APIにリクエストを投げてレスポンス(メールデータ)をkintoneのレコードに登録します。

無事、Outlookのメールがkintoneに登録されました。 

※すでに取得済み（kintoneに登録済み）のメールは登録されません。

次に、送信の確認をします。

kintoneのレコード追加を選択し、必要な部分を記入します。

※本文はkintoneのリッチエディターフィールドを利用しているので、文字色や文字サイズの変更などもできます。 

レコードを保存すると、レコード詳細画面の上部に『Send Mail』というボタンが表示されるので、ボタンをクリックすればメールを送信することができます。

 きちんとメールが送信できたことが確認できます。

おわりに

いかがでしょうか。

Microsoftアプリの設定を事前にしておけば、kintone上だけでOutlookのメール確認ができてしまいます！

今回はOutlookメールのみのご紹介でしたが、Graph APIの項目によってスケジュールやその他の機能と連携することも可能です。

変更履歴

• 2019/11/18
  
  •  以下の変更に伴い、ソースコードを修正しました。
    
    • 利用ライブラリの変更
      kintone Utility Library for JavaScript ->  kintone JS SDK
      kintone UI Component を追加
    • jQuery v3.2.1 から v3.4.1 に変更
    • SweetAlert2 v6.10.1 から v8.17.6 に変更
    • Microsoft Graph v1 から v2 に変更

このTipsは、2019年11月版 kintoneで確認したものになります。