このカスタマイズで利用している kintone Utility Library for JavaScript は現在推奨されていません。今後は kintone JS SDKを利用するように書き換えてください。
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アプリでは以下のフィールドを配置してください。
フィールド名 | フィールドタイプ | フィールドコード |
---|---|---|
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とします) |
サポートされているアカウントの種類 | 必要に応じて、以下のいずれかを選択します。
|
リダイレクトURI |
|
作成したアプリケーションで、「認証」メニューを選択します。
「暗黙の付与」の「アクセストークン」と「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 ディレクトリ内にあります。
- common-js-functions.min.js
- kintoneUtility.min.js
- https://kintone.github.io/kintoneUtility/kintoneUtility.min.js
- kintoneを便利に扱うことができるライブラリです
- 詳しくはコチラの紹介記事をご覧ください
CSS
- kintone-connect-outlook_mail.css
- 生成するボタンの見た目を記述するプログラムです
- outlook-mail ディレクトリ内にあります。
また、今回は上記プログラム以外にライブラリ(Cybozu CDN)として下記の2つ利用します。
- 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で確認したものになります。
記事に関するフィードバック
直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。