カテゴリー内の他の記事

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

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

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

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-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 を便利に扱うことができるライブラリです。詳しくはコチラの紹介記事をご覧ください。
    • 入手方法
      •  https://github.com/kintone-labs/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で確認したものになります。

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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)大阪、札幌、東京」になっているか、お手数おかけしますがご確認いただけないでしょうか?

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

Avatar
naka

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

こちらのサンプルを適用し、挙動を確認したところ、

Microsoft Edgeでは一覧画面でのOutlookへのサインインが成功しませんでした。

こちらはMicrosoft Edgeは非対応のカスタマイズとなるのでしょうか。

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

Avatar
cybozu Development team

naka様

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

こちらでも動作検証を行なった結果、Microsoft Edge最新版から正常にサインインすることができました。

>Microsoft Edgeでは一覧画面でのOutlookへのサインインが成功しませんでした。
どのタイミング(メールアドレス入力時、など)で、どのように失敗するか、(「このユーザー名は間違っている可能性があります。」と警告が出る、など)
より詳細にご記載いただけますでしょうか?

また、他のブラウザからのサインインは試されましたか?
もし、他のブラウザからも正常にサインインできないようでしたら、Azure Active Directory のアプリケーションの登録などの段階で、問題がある可能性があります。
今一度、本記事の手順に沿っているかご確認いただければと思います。

ご確認よろしくお願いいたします。

Avatar
naka

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

Microsoft Edgeでも利用可能とのこと、ご案内ありがとうございます。

 

再度確認してもMicrosoft Edgeではログインできなかったのですが、

他ブラウザからのログインを試したところ、こちらでログインできたため、

こちらで運用していくことになりました。

Microsoft Edgeの利用が必要となった際は再度こちらの記事の手順等確認させていただきます。

Avatar
KKunio

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

すべて本記事の通り設定しました(したつもり)

が「outlookにログイン」のボタンが表示されません。

すべての設定画面の保存ボタンは押していますし

アプリの変更もしました。

デバッグしたいのですが、まずどこからどのように確認すればよいでしょうか?

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

 

 

Avatar
cybozu Development team

KKunio 様

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

こちらでも動作検証を行なった結果、
プログラムの配置の順番が記事と異なる場合に、
「outlookにログイン」のボタンが表示されない状況を再現できました。

理由として、ボタンの表示に関係する「kintone-connect-outlook-schedule.js」から、
他にファイルの処理を呼び出す内容があり、
それらのファイルの前に「kintone-connect-outlook-schedule.js」が呼び出される場合、
「kintone-connect-outlook-schedule.js」から処理の呼び出しが正常に行えず、
ボタンの表示に影響が出てしまいます。

※その場合に、一例ですが、
 ブラウザのコンソールからこういったエラーメッセージを確認できます。
「Uncaught TypeError: Cannot read property 'kintone' of undefined」

KKunio 様のプログラムの配置順番を、一度ご確認頂いてもよろしいでしょうか?

また、上記と異なる状況である場合、デバッグの方法は下記の記事が参考になります。
動かない?そんな時はデバッグをしてみよう!入門編を参考にし、
コンソール上にエラーが表示されているか、ご確認いただけますでしょうか。

どうぞよろしくお願いいたします。

Avatar
KKunio

早速のご回答感謝いたします。

kintone-connect-outlook-schedule.jsはPC向けJSの一番最後においてあるのを確認しました。jsの並び全体を確認しましたが全く本記載と同じでした。

ご案内いただいているようなデバッグの手法でどのようにエラーが出ているのか

確認いたします。ありがとうございました。

 

 

Avatar
KKunio

コンソールのメッセージについて

Windos10 Pro 64bit

Google Chrome
バージョン: 84.0.4147.105(Official Build) (64 ビット)

で本記事の内容を実行すると

コンソールに

Uncaught SyntaxError: Unexpected token '<'

Uncaught ReferenceError: kintoneJSSDK is not defined

   at download.do?・・・・・・・

   at download.do?・・・・・・・

 

と表示されます。

「JavaScript / CSSでカスタマイズ」の設定を確認しましたが、本記事と全く同じでした。

どのあたりからデバックをすすめればよろしいいでしょうか?

 

Avatar
cybozu Development team

KKunio 様

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

KKunio 様と全く同じ環境で、正常に動作していることを確認しました。

kintone-js-sdk.min.jsをアップロードされているのでしょうか?
(こちらでJS SDKを削除して確認してみたら、同じエラーが出ました)

全てのファイル/リンクを追加している場合は次の通りになります。

お手数をおかけしまして申し訳ありませんが、もう一度ご確認いただけますでしょうか。

cybozu Development teamにより編集されました
Avatar
KKunio

cybozu developer network 運営局様

SDKを再度サイトからダウンロードしアプリにアップロードして

「OUTLOOKにログイン」のボタンが表示できるようになりました。

ありがとうございました。

「OUTLOOKにログイン」のボタンを押すとサインインのダイアログが表示されず

(若干ネゴシエーションしているような間があって)

Error!サインインできませんでした

のダイアログがでます。

kintone-connect-outlook-schedule-common.jsへのアプリケーションIDの設定は確認しました。

何かヒントをいただければありがたいです。

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

 

 

 

Avatar
KKunio

ご返信ありがとうございます。

上記少し状況が変わりました。

「OUTLOOKにログイン」を押すと

「組織のサインインページに移動します」

と出てサイインインの画面は出ました、

ただ

サインインすると同じアプリの画面がポップアップし背後にError!のダイアログが出ます。

認証で失敗しているようですが各種設定、JSのソースで確認する箇所があるでしょうか?

 

Avatar
cybozu Development team

KKunio 様

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

こちらで現象を再現していないので、何とも言えないですが、

サインインしてOutlookアプリの画面が表示されているのであれば、
認証の問題ではないと思います。Microsoft アカウント側の設定に問題があるかもしれません。

認証の問題を疑っているのであれば次のいくつかをご確認いただけますでしょうか?

1.kintone-connect-outlook-schedule-common.js 中の、clientIdが正しく記載されているか

config: {
  auth: {
  clientId: '####################',
  authority: 'https://login.microsoftonline.com/common'
},

2.MSAL.jsが正しくアップロードされているか(ファイルの順位も記事と同じなのか)

3.「Azure Active Directory アプリケーションの登録」は記事通りに設定されているか

4.Consoleにエラーが出ていないか

後、Microsoft アカウントは個人のアカウントを使えませんので、ご注意ください。

ご迷惑おかけしますが、よろしくお願いいたします。

 

cybozu Development teamにより編集されました
Avatar
KKunio

cybozu developer network 運営局様

ご指摘の様に「Azure Active Directory アプリケーションの登録」の手順で

「サポートされているアカウントの種類」の設定が本記事と異なっている

個所がありました。記事通りにするとchromeの環境で動作するようになりました。

IE11では一回目ログイン失敗しerrorのポップアップが出ます、ポップアップを閉じてもう一回ログインの

ボタンを押すとログインできました。ブラウザ事に何らかの解釈の違いがあるということでしょうか。

いろいろとご対応いただき、ありがとうございました。

私のような初心者でもなんとか動かく事ができるようになりました。

 

 

Avatar
KKunio

cybozu developer network 運営局様

本記事非常に参考になりました。

ありがとうございます。

少しカスタマイズをしたく思っております。

Outolookカレンダーは新規スケジュール登録時、「終日」という設定がありますが

本記事の内容に「終日」の設定を加えたく思います。

修正を加えるJavaScriptなど何かヒント、注意事項等ありましたらお願いします。

基本、こういったことは自力で解決すべきとは思いますので、何かお気づきのことが

あればおねがいします。

Avatar
cybozu Development team

KKunio 様

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

申し訳ありませんが、個別のカスタマイズの質問につきましては、
コミュニティをご活用いただきますようお願いいたします。

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

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