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

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

Index

1. はじめに
2. サンプル開発に必要なサービスとソフトウェア
3. 完成イメージ
4. kintone の設定
5. Microsoft Power Automate の設定
6. Outlook アドインの開発
7. テスト
8. 展開
9. 終わりに

1. はじめに

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

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

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

3. 完成イメージ

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

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

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

4. 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トークンが生成されます。
生成できたら[保存]ボタンを押し、[アプリを公開]または[アプリを更新]ボタンを押しましょう。

5. Microsoft Power Automate の設定

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

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

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

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

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

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トークンを指定します。

※リクエストURIが長くなる場合はエラー(Request URI Too Large)が発生することがあります。
そのような場合は、ヘッダーに「X-HTTP-Method-Override」を指定してPOSTメソッドでリクエストしてください。
https://developer.cybozu.io/hc/ja/articles/201941754#step9

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

6. Outlook アドインの開発

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

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

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

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

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">

7. テスト

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

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

8. 展開

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

9. 終わりに

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

このTipsは、2018年8月版 kintone で確認したものになります。