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

Index

はじめに
概要
kintoneアプリの作成
Microsoftアプリの設定
プログラムの説明
動作確認
おわりに

はじめに

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

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

Microsoftアプリの設定

事前準備

Outlookとkintoneを連携させるために、Microsoftアプリを作成する必要があります。

Microsoftアプリを作成するために、

Microsoftアカウントを取得
1で取得したアカウントでApplication Registration Portalにログイン

を行ってください。

Microsoftアプリの作成

ログイン後の画面右上部の『アプリの追加』を選択し、

任意のアプリ名を設定(今回は kintone×Outlookとします)してCreateを選択します。

アプリケーションIDは後ほど利用するのでメモを取っておいてください。

プラットフォームの追加から『Web』を選択します。

リダイレクトURLに、先ほど作成したkintoneアプリのURLを記入してください。

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

以上でMicrosoftアプリの設定は完了です。一番下の保存ボタンを押して設定を保存してください。

プログラムの説明

今回使用するプログラム

JavaScript

MSAL.js (外部サイト)
- AzureからOAuth認証でアクセストークンを取得するプログラムです
- Githubのzipファイル内のmsal.jsを利用します
kintone-mail-service_outlook (Githubからディレクトリごとダウンロードしてください)
- common-js-function.min.js
  - 共通処理を記述するプログラムです
- kintone-o365-connect_common.js
  - kintoneアプリ/Microsoftアプリの設定を記述するプログラムです
  - 環境に合わせて修正する部分があります（後述）
- kintone-o365-connect.js
  - アクセストークンを用いてOutlookからメールデータを取得するプログラムです
kintoneUtility.min.js
- https://kintone.github.io/kintoneUtility/kintoneUtility.min.js
- kintoneを便利に扱うことができるライブラリです
- 詳しくはコチラの紹介記事をご覧ください

CSS

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

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

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

プログラムの修正

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

プログラムの配置

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

プログラムの解説

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

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

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

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

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

Outlookモジュール ( kintone-o365-connect.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で確認したものになります。