カテゴリー内の他の記事

Outlook連携 - kintoneからOutlookメールの送受信をしよう!!

フォローする

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です。

image1.png

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

 

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

image2.png

Microsoftアプリの設定

事前準備

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

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

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

を行ってください。

Microsoftアプリの作成

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

image3.png

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

image4.png

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

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

image5.png

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

image6.png

※認証時にリクエストにスコープ範囲を含めているため、アプリ登録画面での「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

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

  • 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でカスタマイズ」下に配置します

image7.png

プログラムの解説

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』というボタンが表示されるので、ボタンをクリックします。

image8.png

 

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

image9.png

 

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

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

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

image10.png

 

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

image11.png

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

 

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

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

image12.png

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

 

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

image13.png

 

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

image14.png

おわりに

いかがでしょうか。

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

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

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

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

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

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