カテゴリー内の他の記事

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

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/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 を便利に扱うことができるライブラリです。詳しくはコチラの紹介記事をご覧ください。
    • 入手方法
      •  https://github.com/kintone/kintone-js-sdk にアクセスします。
      • [Clone or download]ボタンをクリックし、zip ファイルをダウンロードします。
      • ファイルを解凍し、「dist」下の「kintone-js-sdk.min.js」を利用します。
  • kintone UI Component v0.4.2
    kintone ライクなUIパーツをかんたんに作成できるライブラリです。詳しくは、コチラの紹介記事を御覧ください。
    • 入手方法
      • https://github.com/kintone/kintone-ui-component にアクセスします。
      • [Clone or download]ボタンをクリックし、zip ファイルをダウンロードします。
      • ファイルを解凍し、「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にログイン』というボタンが表示されるので、ボタンをクリックします。
Outlook_____.png

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

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

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

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

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

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

変更履歴

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

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

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

Avatar
hondah

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

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

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

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

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

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

Avatar
cybozu Development team

hondah 様

お世話になっております。cybozu developer network 運営局です。

返信が遅くなってしまいました。すでに解決済みでしたらご容赦ください。

>※outlookの予定表のタイムゾーンは(UTC+9:00)であり、webのoutlookでは問題なく、outlookアプリの時に起こります。
outlook アプリというのは、デスクトップのアプリ(PCにインストールすことで利用できるアプリ)で合っていますでしょうか?

手元の環境で確認しましたが、本記事の記載内容で(kintone-connect-outlook-schedule.js内のTimeZoneをUTCにすることなく)
Webアプリおよびデスクトップアプリにおいて、日本時間で表示されておりました。

デスクトップアプリ自体でも、タイムゾーンの設定があるようです。
https://support.office.com/ja-jp/article/-5ab3e10e-5a6c-46af-ab48-156fedf70c04
この設定が日本時間「(UTC+09:00)大阪、札幌、東京」になっているか、お手数おかけしますがご確認いただけないでしょうか?

よろしくお願いいたします。

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