カテゴリー内の他の記事

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

フォローする

Index

はじめに

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

__.png

kintone アプリの作成

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

フィールド名 フィールドタイプ フィールドコード

イベントID

文字列(1行)

EventId

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

フィールド名 フィールドタイプ フィールドコード

開始日時

日時

From

終了日時

日時

To

 

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

______.png

Microsoftアプリの設定

事前準備

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

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

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

を行ってください。

Microsoftアプリの設定

こちらの記事の「Microsoftアプリの設定」を参考に作成します。

プログラムの説明

今回使用するプログラム

JavaScript

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

CSS

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

また、今回は上記プログラム以外にライブラリ(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-schedule-common.js にkintoneのフィールド情報や Microsoftアプリの設定でメモしておいたアプリケーションIDを記述します。

プログラムの配置

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

________.png

プログラムの解説

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

Outlook_____.png

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

_______.png

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

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

 

Outlook_______.png

 

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

________.png

 

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

_____.png

____.png

____.png

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

________.png

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

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

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

Avatar
hondah

お世話になっております。

上記のサンプルをもとに日時を追加して登録したところoutlookの予定表にスケジュール登録することができました。

ですが、予定の詳細を開くとタイムゾーンがUTCとなっており、日時が9時間マイナスとなって表示されています。

kintone-connect-outlook-schedule.js内のTimeZoneもUTC+9:00などいろいろ試したのですが変わらず。

対応方法がありましたら、ご教示いただけないでしょうか。

※outlookの予定表のタイムゾーンは(UTC+9:00)であり、webのoutlookでは問題なく、outlookアプリの時に起こります。

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