Outlook アドインを使って Outlook の中に kintone のデータを表示する

Tips

Outlook アドインを使って Outlook の中に kintone のデータを表示する

固定リンクがコピーされました

著者名：及川紘旭（Microsoft MVP for Office Development）

はじめに

固定リンクがコピーされました

Outlookアドインをご存じでしょうか？
Outlookアドインは、OutlookにプチWebアプリを組み込むためのしくみで、Web版のOutlookとクライアント版のOutlookの両方に対応しています。
現時点でWeb版のOutlookをカスタマイズするための唯一の方法となっており、同じようなアーキテクチャでExcelやSharePointなど他のOffice 365サービスもカスタマイズができるようになっています。
今回はこのOutlookアドインを使って、kintoneに蓄積されたデータをOutlookで表示するサンプルを開発したいと思います。

サンプル開発に必要なサービスとソフトウェア

固定リンクがコピーされました

今回はOffice 365に同梱のOutlookとPower Automateを使用します。
開発にはVisual Studio 2017コミュニティエディションを使用します。
Visual Studio 2017コミュニティエディションは、マイクロソフトのサイトから無償でダウンロード可能です。
https://visualstudio.microsoft.com/ja/free-developer-offers/

完成イメージ

固定リンクがコピーされました

サンプルの完成イメージです。
Outlookで新しい予定を作成するページを表示し、メニューにある青いアドインボタン（下図赤枠内）をクリックすると、ページ右側に今回開発する訪問履歴検索Webアプリが表示されます。
訪問履歴検索Webアプリの「kintone検索」ボタンをクリックすることで、予定のタイトルに入力された値を使用して、kintoneの訪問履歴アプリから履歴データを取得し、それをOutlook上に一覧表示します。
一覧をクリックすると、kintoneの訪問履歴アプリの該当レコードが別タブで表示されます。

kintoneの訪問履歴アプリには、顧客名や訪問日時が登録されています。

システムの連携イメージは下図のとおり、OutlookアドインがPower Automateを経由してkintone訪問履歴アプリからデータを取得しています。

kintone の設定

固定リンクがコピーされました

アプリの作成

固定リンクがコピーされました

訪問履歴を保存するため、以下のフィールドをもつアプリを作成します。

フィールド名	フィールドタイプ	フィールドコード
顧客名	文字列（1行）	CustomerName
部署名	文字列（1行）	Department
担当者名	文字列（1行）	ContactPerson
訪問日時	日時	VisitDateTime
訪問者	ユーザー選択	Staff
訪問目的	文字列（複数行）	Memo

アプリIDの取得

固定リンクがコピーされました

今後の設定で利用するので、アプリIDをメモ帳などに貼り付けてメモしましょう。
アプリIDはURLから確認できます。先ほど作成したアプリを開きます。
そのURLがhttps://{subdomain}.cybozu.com/k/1/の場合、「1」がアプリIDになります。

APIトークンの生成

固定リンクがコピーされました

同様にAPIトークンもメモします。
アプリの設定メニューから、[設定]タブ >[APIトークン]をクリックして、APIトークン作成ページを開きます。
アクセス権のチェックボックスで[レコード閲覧]にチェックを付けて、[生成する]ボタンをクリックするとAPIトークンが生成されます。
生成できたら[保存]ボタンを押し、[アプリを公開]または[アプリを更新]ボタンを押しましょう。

Microsoft Power Automate の設定

固定リンクがコピーされました

Outlookアドインから直接kintoneに接続できないので、Office 365のPower Automateを経由します。
Power Automateでは、OutlookアドインからのHTTPリクエストを受け付けて、kintoneのREST APIを呼び出し、結果をOutlookアドインに返却するフローを作成します。

フローを新規作成して、トリガーとして「要求」を追加します。
Outlookの予定に入力されたタイトル（訪問先の顧客名）をパラメーターで受け取るようにするため、次のコードをコピーして、要求本文のJSONスキーマに貼り付けます。

1
2
3
4
5
6
7
8


{
    "type": "object",
    "properties": {
        "Title": {
            "type": "string"
        }
    }
}

続いて、kintone REST APIを呼び出すため、アクションとして「HTTP」を追加します。
URLには複数のレコードを取得する APIのURLを指定します。
Outlookアドインから渡されてくる顧客名でレコードを検索できるように、「要求」トリガーの「Title」をクエリ文字列に指定します。

上記の結果、URLは以下のようになります。

1

https://{subdomain}.cybozu.com/k/v1/records.json?app={appId}&query=CustomerName like "Title" order by VisitDateTime desc

{subdomain}はご自身の利用環境に合わせて変更してください。
{appId}は先ほどメモしたアプリIDに変更してください。
Power Automateに設定する際にはURLエンコードしてください。
今回の場合は半角スペースを「%20」に、ダブルクオートを「%22」に変換します。
Titleは「要求」トリガーの「Title」を埋め込んでください。

ヘッダーに「X-Cybozu-API-Token」を追加して、値にコピーしたAPIトークンを指定します。

リクエストURLが長くなる場合、「Request URL Too Large」エラーになる可能性があります。
そのような場合は、ヘッダーに「X-HTTP-Method-Override」を指定してPOSTメソッドでリクエストしてください。
詳細はリクエストヘッダーを参照してください。

最後に、Outlookアドインへkintone REST APIの結果を返送するため、「応答」アクションを追加します。
「本文」には、HTTPアクションの「本文」を指定します。

Outlook アドインの開発

固定リンクがコピーされました

Visual Studioを使ってOutlookアドインを開発します。
プロジェクトの種類として「Outlook Webアドイン」を選択しプロジェクトを作成します。

Outlook Webアドインのプロジェクトテンプレートが表示されていない場合は、Visual Studio 2017のインストーラーを起動して、「Office/SharePoint開発」を追加インストールしてください。

次にコードを書きますが、サンプルを完成させるために最低限実施することだけを記載します。
「MessageRead.html」を開き、bodyタグを以下のように書き換えます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!--
* Outlook アドインを使ったサンプル
* Copyright (c) 2018 Cybozu
*
* Licensed under the MIT License
-->
<body style="font-family: 'Meiryo UI'">
    <div id="content-header">
    </div>
    <div id="content-main" class="ms-Grid">
        <div>
            <button type="button" onclick="searchKintone();">kintone検索</button>
        </div>

        <div>
            <ul id="history">
            </ul>
        </div>
    </div>
</body>

MessageRead.jsを開き、以下のファンクションを4行目のconst messageBanner;の下に挿入します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


/*
* Outlook アドインを使ったサンプル
* Copyright (c) 2018 Cybozu
*
* Licensed under the MIT License
*/
function searchKintone() {

  const item = Office.context.mailbox.item;

  item.subject.getAsync((asyncResults) => {
    if (asyncResults.status === Office.AsyncResultStatus.Succeeded) {

      const keyword = {
        Title: encodeURIComponent(asyncResults.value)
      };

      $.ajax({
        url: 'Flowの要求URL',
        type: 'POST',
        data: JSON.stringify(keyword),
        dataType: 'json',
        contentType: 'application/json'
      }).done((data) => {

        let html = '';

        $.each(data.records, (index, value) => {
          const date = new Date(value.VisitDateTime.value);
          const dateString = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
          html += '<li><a target="_blank" href="https://{subdomain}.cybozu.com/k/{appId}/show#record=';
          html += value.レコード番号.value + '">' + dateString + '&nbsp;' + value.CustomerName.value + '</a></li>';
        });

        $('#history').empty();
        $('#history').append(html);

      }).fail((err) => {
        console.log('エラー');
      });
    }
  });
}

19行目のPower Automateの要求URLには、Power Automateの「要求」トリガーの[HTTP POSTのURL]を指定してください。
[HTTP POSTのURL]は、フローを初めて保存した際に自動生成されますので、それをコピーして貼り付けてください。

31行目のhref属性値の{subdomain}、{appId}は「Microsoft Power Automateの設定」と同様に変更してください。

最後にManifestファイルを編集します。

ファイル「プロジェクト名Manifest」を開き、以下のとおり修正してください。

52行目
- 変更前：<Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
- 変更後：<Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Edit" />
70行目
- 変更前：<ExtensionPoint xsi:type="MessageReadCommandSurface">
- 変更後：<ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">

テスト

固定リンクがコピーされました

いよいよ実行してみます。
Visual Studioでデバッグ実行を開始してください。
なお、デバッグ実行のやり方については以下のスライドに詳細を記載していますので、参考にしてください。
Outlookアドイン開発入門（slideshare）

手順どおりに行っても、配置エラーになる場合があります。
その場合は、ビルドおよび配置を続行せずにやめて、再度デバッグ実行を行ってください。

展開

固定リンクがコピーされました

デバッグが終わった後は、このOutlookアドインを社内の他の人たちにも使ってもらうため、会社内に展開する必要があります。
Outlookアドインの展開方法については、SharePointカタログに登録するやり方やネットワーク共有を使用するやり方など、目的に応じていくつかの方法が存在しますので、以下のサイトを参考に展開してください。
Officeアドインを展開し、発行する（Microsoft Officeデベロッパーセンター）

終わりに

固定リンクがコピーされました

Outlookアドインを組み合わせることで、Outlookを起点としたkintoneとの連携が可能になることをご理解いただけたかと思います。
発想次第でいろいろなOutlookアドインを作ることができると思いますので、ぜひチャレンジしてみてください。

このTipsは、2018年8月版kintoneで動作を確認しています。

Tips

Outlook アドインを使って Outlook の中に kintone のデータを表示する

目次

はじめに

サンプル開発に必要なサービスとソフトウェア

完成イメージ

kintone の設定

アプリの作成

アプリIDの取得

APIトークンの生成

Microsoft Power Automate の設定

Outlook アドインの開発

テスト

展開

終わりに