Outlook連携 - kintoneからOutlookメールの送受信をしよう！！ – cybozu developer network

このカスタマイズで利用している kintone Utility Library for JavaScript は現在推奨されていません。今後は kintone JS SDKを利用するように書き換えてください。

Index

はじめに
概要
kintoneアプリの作成
Azure Active Directory アプリケーションの登録
プログラムの説明
動作確認
おわりに

はじめに

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アプリでは以下のフィールドを配置してください。

フィールド名	フィールドタイプ	フィールドコード
subject	文字列（1行）	subject
contents	リッチエディター	contents
from	文字列（1行）	from
TO	文字列（1行）	TO
CC	文字列（1行）	CC
BCC	文字列（1行）	BCC
messageId	文字列（1行）	messageId
mailAccount	文字列（1行）	mailAccount
attachFile	添付ファイル	attachFile

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

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

事前準備

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

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

アプリケーションの登録

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

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

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

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

項目	値
名前	任意のアプリ名（今回は kintone×Outlookとします）
サポートされているアカウントの種類	必要に応じて、以下のいずれかを選択します。任意の施設ディレクトリ内のアカウント（任意の Azure AD ディレクトリ・マルチテナント）任意の施設ディレクトリ内のアカウント（任意の Azure AD ディレクトリ・マルチテナント）と個人の Microsoft アカウント
リダイレクトURI	「Web」先ほど作成した kintone アプリの URL

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

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

以上で登録は完了です。

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

プログラムの説明

今回使用するプログラム

JavaScript

MSAL.js (外部サイト)
- AzureからOAuth認証でアクセストークンを取得するプログラムです
- Githubのzipファイル内のmsal.min.jsを利用します
SAMPLE-kintone-connect-azure (Githubからディレクトリごとダウンロードしてください)
- 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 ディレクトリ内にあります。
kintoneUtility.min.js
- https://kintone.github.io/kintoneUtility/kintoneUtility.min.js
- kintoneを便利に扱うことができるライブラリです
- 詳しくはコチラの紹介記事をご覧ください

CSS

kintone-connect-outlook_mail.css
- 生成するボタンの見た目を記述するプログラムです
- outlook-mail ディレクトリ内にあります。

また、今回は上記プログラム以外にライブラリ（Cybozu CDN）として下記の２つ利用します。

jQuery
- https://js.cybozu.com/jquery/3.2.1/jquery.min.js
SweetAlert 2
- https://js.cybozu.com/sweetalert2/v6.10.1/sweetalert2.min.js
- https://js.cybozu.com/sweetalert2/v6.10.1/sweetalert2.min.css

プログラムの修正

kintone-connect-outlook_mail_common.js にkintoneのフィールド情報や Microsoftアプリの設定でメモしておいたアプリケーションIDを記述します。

プログラムの配置

これらのプログラムを「アプリの設定>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の項目によってスケジュールやその他の機能と連携することも可能です。

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