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/ (External link)

完成イメージ

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

サンプルの完成イメージです。
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 トークンを指定します。

information

リクエスト 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アドイン開発入門 (External link) （slideshare）

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

展開

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

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

終わりに

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

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

information

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