1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

kintoneとOutlookを連携してスケジュール管理をする#04

Last updated at Posted at 2021-06-16

経緯

kintoneのOutlookを連携してスケジュール管理をしたい。
けど検索して出てくる記事が古いため、アレンジしてなるべく最新のものに対応する。

要するに「Outlook連携 - kintoneからOutlookスケジュールを登録しよう!!」のOutlook連携をほぼサンプルのまま使っていたのだけど、先日急に動かなくなったので最新化対応したいということ。

やりたいこと

  • MSAL v2 に対応してkintoneとOutlookのスケジュールを連携させたい。
  • kintone UI Component v1 対応したUIを構築したい。
  • FullCalendar.js を導入してカレンダー表示させたい。

参考サンプル

こちらの2つのサンプルを参考にOutlook連携カスタマイズを行います。

  1. Outlook連携 - kintoneからOutlookスケジュールを登録しよう!!
  2. クイックスタート: PKCE 対応の承認コード フローを使用して JavaScript SPA 内でユーザーをサインインさせ、アクセス トークンを取得する

今回(本記事)のゴール

MS Graphを使用してOutlookスケジュールを取得

記事一覧

  1. #01.ボタンを表示
  2. #02.サインイン
  3. #03.サインアウトとボタン表示制御
  4. MS Graphを使用してOutlookスケジュールを取得 ← 当記事

実装

Microsoftのサンプルを流用します。

javascript

css

  • buttons.css

Azure AD の設定

スケジュールの取得に calendarview を使用するため、APIのアクセス許可に「Calendar.Read」と「Calendar.ReadWrite」を追加します。

azure.PNG

参考:https://docs.microsoft.com/ja-jp/graph/api/user-list-calendarview?view=graph-rest-1.0&tabs=http

Outlookのスケジュールを取得するためのエンドポイントの設定内容を記述します。
calendarviewには必須パラメータがあるので、必要な情報をひとまとめにし、エンドポイントURLを作成して返してくれる関数も追加しておきます。
日付は初期値を設定しています。確認用などで適宜入力してください。
ヘッダーにタイムゾーンを追加していますが、こちらは任意で設定してください。

graphConfig.js
let graphConfig = {
    // カレンダー取得設定
    graphCalView: {
        url: 'https://graph.microsoft.com/v1.0/me/calendarview',
        tokenRequest: {
            scopes: ['Calendars.Read', 'Calendars.ReadWrite'],
            forceRefresh: false
        },
        headers: {
            'Content-Type': 'application/json',
            'Prefer': "outlook.timezone=\"Tokyo Standard Time\", outlook.body-content-type=\"text\""
        },
        startPalam: 'startDateTime',
        startDate: '2021/04/01',
        startTime: 'T00:00:00.000Z',
        endPalam: 'endDateTime',
        endDate: '2021/04/01',
        endTime: 'T23:59:59.999Z',
    },

    // カレンダー取得のためのURLを取得
    getCalViewEndpoint: function () {
        return this.graphCalView.url + '?' + this.graphCalView.startPalam + '=' + this.graphCalView.startDate + this.graphCalView.startTime + '&' + this.graphCalView.endPalam + '=' + this.graphCalView.endDate + this.graphCalView.endTime;
    }
};

graph.jsはトークンの他にヘッダーを追加できるようにします。
コールバック用にスケジュール取得後に動く関数を追加しておきます。
現状は確認のためにコンソールに結果を返すようにしておきます。

graph.js
let graphService = {
    callMSGraph: function (endpoint, token, header, callback) {
        const headers = new Headers();
        const bearer = `Bearer ${token}`;

        // ヘッダー追加
        headers.append('Authorization', bearer);
        for (let key of Object.keys(header)) {
            headers.append(key, header[key]);
        }

        const options = {
            method: "GET",
            headers: headers
        };

        console.log('request made to Graph API at: ' + new Date().toString());

        fetch(endpoint, options)
            .then(response => response.json())
            .then(response => callback(response, endpoint))
            .catch(error => console.log(error));
    },

    // Outlookスケジュール取得
    getEvent: function (data, endpoint) {
        console.log(endpoint);
        console.log(data);
    }
}

authPopup.jsgrach.jscallMSGraphの呼び出しを追加します。

authPopup.js
let authPopupService = {
...
    // Outlookイベントを取得する
    getEvent: function () {
        this.getTokenPopup(graphConfig.graphCalView.tokenRequest)
            .then(function (response) {
                graphService.callMSGraph(graphConfig.getCalViewEndpoint(), response.accessToken, graphConfig.graphCalView.headers, graphService.getEvent);
            }).catch(function (error) {
                console.log(error);
            });
    }
...
}

予定を取得するためのボタンを追加し、今回追加した処理を登録します。

ui.js
    // サインイン後のボタン表示設定
    uiSignedCreateForIndex: function (kintoneHeaderSpace) {
...
        // 予定を取得ボタン
        this.data.ui.btnSignOut = this.createButton(this.setting.ui.buttons.getEvent, this.setting.i18n.button);
        this.data.ui.btnSignOut.addEventListener('click', function (event) {
            authPopupService.getEvent();
        });
        this.data.ui.HeaderSigned.appendChild(this.data.ui.btnSignOut);
...
},

「予定を取得」ボタンをヘッダーに表示するために設定を追加します。

buttonSettings.js
...
    setting: {
        lang: 'ja',
        i18n: {},
        ui: {
            buttons: {
                signIn: {
                    text: 'signIn',
                    type: 'submit',
                    className: 'header-not-signed'
                },
                signOut: {
                    text: 'signOut',
                    type: 'normal',
                    className: 'header-signed'
                },
                getEvent: {
                    text: 'getEvent',
                    type: 'submit',
                    className: 'header-signed'
                },
                sendEvent: {
                    text: 'addEvent',
                    type: 'submit',
                    className: 'header-signed'
                }
            }
        }
    },
...

確認

ボタンが表示されているので押下してみます。
sc1.PNG
コンソールを確認してスケジュールのデータがjson形式で取得できていたらOKです。
sc2.PNG

次回

取得したOutlookスケジュールをkintoneに登録

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?