Outlook連携 - kintoneからOutlookスケジュールを登録しよう！！

2020年8月改訂のセキュアコーディング ガイドラインに抵触する内容が含まれています。認証情報が漏洩した場合の影響を考慮して慎重に検討してください。
該当箇所：外部ライブラリ（MSAL.js）内のアクセストークン保存部分

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

Index

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

はじめに

kintoneからOutlookのスケジュールを登録できるサンプルです。

Outlookスケジュールの「イベントタイトル」「開始日時」「終了日時」「詳細内容」「添付ファイル」をkintoneから登録することが出来ます。
また、kintoneのレコードを変更した場合や、レコードを削除した場合にも、Outlookのイベントも更新されます。

Outlookのイベントを変更した場合は、kintoneのレコードには反映されません。

メリットとしては、kintoneに登録したレコードに基づいたイベントをOutlookのスケジュールに登録して共有することができます。
また、kintoneのプロセス管理機能を使用してステータスの管理を行うことができます。

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

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

概要

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

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

• kintoneからOAuth認証を用いてAzure AD V2 Endpoint へサインイン
• kintoneからAzureへアクセストークンを取得
• アクセストークンを使って Graph API を叩く
• kintoneからデータをOutlookスケジュールに登録

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

kintone アプリの作成

kintoneアプリストア にある「To Do」アプリを使います。
アプリに以下のフィールドを追加してください。

フィールド名	フィールドタイプ	フィールドコード
イベントID	文字列（1行）	EventId

また、アプリストアの「To Do」アプリは「開始日」「終了日」が「日付」フィールドとなっているため、「日時」フィールドに変更してください。

フィールド名	フィールドタイプ	フィールドコード
開始日時	日時	From
終了日時	日時	To

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

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

事前準備

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

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

アプリケーションの登録

こちらの記事の「Azure Active Directory アプリケーションの登録」を参考に作成します。

プログラムの説明

今回使用するプログラム

• 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-schedule-common.js
      
      • kintoneアプリ/Microsoftアプリの設定を記述するプログラムです。
      • 環境に合わせて修正する部分があります（後述）
      • outlook-schedule ディレクトリ内にあります。
    • oauth.js
      
      • OAuth2.0を利用してAzureへの認証処理を行うプログラムです。
      • common ディレクトリ内にあります。
    • kintone-connect-outlook-schedule.js
      
      • アクセストークンを用いてOutlookへスケジュールデータの登録/更新/削除するプログラムです。
      • outlook-scheduleディレクトリ内にあります。
• 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-schedule-common.js を修正します。

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

プログラムの配置

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

プログラムの解説

Azureへの認証処理 (oauth.js )

Azureとの認証部分の処理をまとめています。

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

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

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

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

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

レコード保存成功後イベント

レコード削除前イベント

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

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

MSAL.jsのインスタンス化

userAgentApplicationとしてインスタンス化し、以降の処理に利用します。
「oauth.js」の処理を呼び出しています。

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

サインイン処理では、まずAzureからIDトークンを取得します。
「oauth.js」の処理を呼び出しています。

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

取得したアクセストークンを用いてスケジュールデータを登録する

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

動作確認

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

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

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

ログインに成功した場合、先ほどまで『Outlookにログイン』だったボタンが『Outlookからログアウト』に変わります。

kintoneのレコードを追加します。
 

レコードを保存すると、レコード詳細画面の上部に『予定を登録』というボタンが表示されるので、ボタンをクリックすればイベントを登録することができます。

無事、kintoneのレコードの内容がOutlookのスケジュールに登録されました。

変更履歴

• 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年10月版 kintoneで確認したものになります。