cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

kintoneアプリのデータをCisco Webex Teamsに投稿する方法

作成日
更新日

記事内で利用しているライブラリ「request」「request-promise」は、非推奨（deprecated）になりました。
HTTP リクエストができる他のライブラリ（axios など）や、https.requst に書き換えることをおすすめします。

Cisco Webex Teams（旧称: Cisco Spark） と Cybozu.com の連携シリーズ第3弾として、kintoneと連携してみました。
第2弾のユーザー連携を応用したり、Cisco Webex TeamsのBot機能を使います。

kintoneのタスク管理アプリに登録されている残タスクリストを、Cisco Webex Teamsに呼び出す方法をご紹介します。
Cisco Webex Teamsはスマホアプリもありますので、出勤中や外出中の電車の中などで、素早く自分のタスクを確認することができるようになります。

これまでのCisco Webex Teams と Cybozu.com の連携シリーズはこちらです。

第1弾（Garoonとの連携）　Cisco Webex TeamsからGaroonスケジュールを予約する

第2弾（ユーザー連携）　Cisco Webex Teamsとcybozu.comでユーザー連結を行う

連携イメージ

Cisco Webex Teams（以下Webex Teams）のスペース（「会議室」から「スペース」に名称が変更しました）で、
タスク確認用のBotにメンションを投げると、kintoneのタスク管理アプリに登録されている自分の未完了タスクをBotがWebex Teamsに投稿します。

______.png

連携概要

____.png

これまでのWebex Teams と Cybozu.com の連携シリーズでは、AWSを使って連携する方法をご紹介していましたが、AWS以外でも動作する例としてAzureを使った方法でご紹介します。

Azure fuctions（Node.js）にて、以下の処理を行う

  • Webex TeamsのWebhookからPOSTされた投稿メッセージ、メールアドレスを取得
  • Webex Teamsとcybozu.comのユーザーをマッチング
  • kintoneへのリクエストデータを作成
  • kintone REST APIを実行し、タスク管理アプリのレコードを取得
  • Webex Teams投稿用のメッセージ（タスク一覧）を作成
  • Bot経由でメッセージをWebex Teamsに投稿

事前準備

kintoneアプリ

  • 担当者とステータスがわかるシンプルなタスク管理アプリを作成します。
フィールド名 フィールドタイプ フィールドコード
タスク 文字列（1行） task
ステータス ラジオボタン status
担当者 ユーザー選択 responsible
詳細 文字列（複数行） detail

 ※ステータスは「未着手」「着手」「完了」で設定してください。

Cybozu.com

  • Cybozu.comの管理権を有するユーザーを用意する（ユーザー情報を取得できる権限が必要）

Cisco Webex Teams用Bot

2018-05-15_10h55_06.png

  • 「Create a Bot」をクリックする

2018-05-15_10h45_01.png

  • 以下を参考に設定し、「Create Bot」をクリックする
項目 設定例
Name TaskList(bot)
Bot Username 任意文字列@sparkbot.io
Icon 任意（URL）
Description 任意


2018-05-15_10h45_53.png

Cisco Webex Teams

  • 任意のスペース（タスクを表示させるスペース）のユーザーに作成したBotを追加する
  • 上記のスペースを利用するユーザーを1人以上登録する
  • 登録するユーザーのメールアドレスは、Cybozu.comに登録されているメールアドレスと一致させる（注）

注：Cisco Webex Teamsとcybozu.comのユーザー連携は、メールアドレスで一致させています。

ユーザー連携の 詳細はCisco Webex Teamsとcybozu.comでユーザー連結を行うを参照

 

環境作成

Azure Functions

Azure Functionsの準備に関しては、kintoneとMicrosoft Azureを連携してみよう （Azure Functionsその1）の「Azure Functionsの準備」欄を参考にしてください。

ここでは簡単にポイントのみ記述します。（アカウント等の準備は省略）

  • 関数を作成
  1. Function Appの画面からクイックスタート画面を開く
  2. シナリオ選択は、「WebHook ＋ API」を選択
  3. 言語の選択は、「JavaScript」を選択
  • パッケージのインストール
  1. 「Function Appの設定」→ 「Kuduに移動」を選択
  2. 「site」→作成した関数のフォルダに移動
  3. npmコマンドを実行し、package.jsonを生成
  4. 「request」「request-promise」をインストール
  5. package.jsonを開いて下図の赤枠部分にインストールしたパッケージが表示されていることを確認

Cisco2-ss05.png

  • Node.js
  1. 下記のJavaScripプログラムをコピーし、作成した関数の「</>開発」のコード欄に貼付
  2. 「XXX」で記載されている各パラメーターをご自身の環境に合わせて記入
  3. 「保存」ボタンをクリック

Cisco Webex Teams Webhook の設定

項目 設定値
Authorization Bearer 「Botのアクセストークン」　※1
name 今回作成する Webhook の名前(任意)
targetUrl Azure Functionsの関数のURL　※2
resource messages(固定)
event created(固定)
filter mentionedPeople=me　※3

 

※1　Botのアクセストークンは、Botを作成したMy Appsから該当するBotを選択すとアクセストークンを取得できます。

 

※2　targetUrlは、Azure Functionsの「</>開発」画面の上部に記載があります。

 

※3　AuthorizationでBotのアクセストークンを指定しているためフィルターは基本的に不要ですが、今回はBotからの投稿を除外したいため、Botがメンション先に指定された場合のみとしています。meはAuthorizationで指定したトークンに対応するユーザでフィルターするという意味になります。

 

 試してみよう

実際にCisco Webex TeamsのスペースでTaskList（Bot）にメンションし、getを入力してみました。

※この機能はTaskList（Bot）に続いて「get」というキーワードを入力した場合に動作するようにしています。

関連技術情報

Webex Teamsにメッセージ（残タスク）を投稿する：Create a Message API

Webex Teamsに投稿されたメッセージ（Botへのメンション）を取得する：Get Message Details API

その他Webex Teamsへのメッセージを見やすくする：Formatting Messages

cybozu.comのユーザー情報を取得する：ユーザーエクスポート API（JSON）

kintoneアプリのレコードを取得する：レコードの一括取得（クエリで条件を指定）

 おわりに

今回のポイントは、以下の2点となります。

  • kintoneのデータをチャット感覚で手軽に確認できること
  • 既存スペースにタスク確認用のBotを追加するだけで使えること

特に2点目は、Botを使うことで、タスク確認用のスペースを新たに作る必要がなくなります。

ここではシンプルなシナリオでご紹介しましたが、当日期限のタスクだけとを表示するとか、毎日朝9時にBotから残タスクのお知らせが届くとか、応用することでより便利に使えます。

Webex Teamsはビジネスで使われることを前提としたコミュニケーションツールなので、セキュリティ面でも安心してお使いいただけます。
kintoneとも組み合わせることで、バーチャル会議やチャットだけではない、使い方もできます。
アイディア一つで、便利でユニークなアプリケーションにもなり得ますので、ぜひお試しください！

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

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

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