カテゴリー内の他の記事

Cisco Webex Teamsに投稿したファイルをkintoneアプリに登録する方法

フォローする

しばらく間が空きましたが、Cisco Webex Teams(旧称: Cisco Spark)om の連携シリーズ第5弾です!
今回は、Cisco Webex Teamsに投稿された添付ファイルをkintoneアプリに登録する方法をご紹介します。

Cisco Webex Teamsで共有した資料をkintoneアプリに添付する場合にも使えますし、スマートフォンのカメラで撮った写真をkintoneアプリにアップしたい場合などは、直接kintoneアプリに写真をアップするより手間がかからず便利です。

 

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

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

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

第3弾(kintone ⇒ Cisco Webex Teams 連携)kintoneのアプリデータをCisco Webex Teamsに投稿する方法

第4弾(Cisco Webex Teams ⇒ kintone 連携)Cisco Webex Teamsからkintoneにレコードを登録する方法

Cisco Webex Teamsについての詳しい説明は、こちらの「Cisco Webex Teamsとは」をご覧ください。

 

連携イメージ

Cisco Webex Teams(以下Webex Teams)のスペースで、写真を撮り、ファイル登録用のBotにメンションを投げると、kintoneアプリにファイルが登録されます。

2018-05-14_15h48_09.png

連携概要

ここ何回は、Webex Teamsとkintoneを連携する際にAzure Functionsを使っていましたが、今回はAWSを使ってみたいと思います。(特に深い意味はありません!)

2018-05-14_15h47_52.png

処理の流れは以下のようになります。

  1. Webex TeamsのWebhook によって、Amazon API Gateway側で投稿されたファイルのURL情報を取得する
  2. 添付ファイルの URL より、ファイルの本体を取得する
  3. 取得したファイルを、Lambda 内にコピーする
  4. コピーしたファイルを kintone に転送し、ファイル ID を取得する
  5. kintone アプリにファイル ID の情報をわたしてレコードを登録する

 

事前準備

※他のTipsに詳細が記載されている内容については、簡略して記載しています。詳細はリンク先をご参照ください。

kintoneアプリ

  • フィールドは自由に設定できますが、下記の2フィールドを必ず含めてください。
フィールド名 フィールドタイプ フィールドコード
タイトル 文字列(1行) title
添付ファイル 添付ファイル fl

APIトークンの作成

本TipsではAPIトークン認証を使うため、以下の手順でAPIを作成します。

作成したAPIトークンは、処理プログラムで必要になりますのでメモしておいてください。

  • 先ほど作成したkintoneアプリの管理画面を開き、「設定」のタブをクリックします。
  • 「カスタマイズ/サービス連携」の下の「APIトークン」をクリックします。

kintone_API____.png

  • 「生成する」ボタンをクリックし、アクセス権欄の「レコード追加」にチェックを入れ左上の「保存」ボタンをクリックします。

kintone_API_____.png

  • 「アプリを更新」クリックします。

Cisco Webex Teams用Bot

項目 設定例
Name 任意のbot名(bot) ※日本語可
Bot Username 任意文字列@sparkbot.io
Icon

Defaultから選択するか、任意のアイコンをアップロード

Description 任意の説明文

第3弾にMyAppsの画面ショット付きの説明を記載しています。

Cisco Webex Teams

  • 任意のスペース(タスクを表示させるスペース)のユーザーに作成したBotを追加する
  • 上記のスペースを利用するユーザーを1人以上登録する

 

AWSのアカウントセットアップ

AWSのアカウントをお持ちでない方は、AWS アカウントを設定して管理ユーザーを作成するを参考にして、AWSアカウントのセットアップと管理者ユーザーの作成を行ってください。

利用を開始してから1年間は、無料利用枠の範囲で利用することができます。

 

設定&実装

ここまでは過去のTipsを参照しながら説明してまいりましたが、この後はCisco Webex Teams連携が初めての方でも、なるべく本Tipsだけで設定と実装ができるようにしていますので、ご安心ください。

AWS Lambdaの設定

まず、Cisco Webex Teams に投稿されたファイルを取得して kintone アプリに登録する Lambda 関数の設定をしましょう。

① AWSのコンソールにログイン後、Lambdaを選択し「関数の作成」をクリックします。

Lamda______.png

 

② 関数の設定、Lambda 関数のコードについて以下の通り設定し「関数の作成」をクリックします。

  • 「一から作成」を選択します。
  • 「名前」は必須です。任意の名前を入力してください。
  • 「ランタイム」は設計図の選択で選択した言語「Node.js 6.10」を選択します。
  • 「ロール」は「既存のロール選択」を選択し、「lambda_basic_execution」を選択します。

Lamda______.png

 

③ 同じ画面で下にスクロールし、「関数コード」に処理プログラムを書きますが、詳細は後述します。

Lamda______.png

 

④ 更に下にスクロールし、「基本設定」でタイムアウトを30秒に設定し、保存します。

Lamda_________.png

 

処理プログラム

ここまで設定できたら、Node.jsでCisco Webex Teamsに投稿された画像ファイルをkintoneに登録する処理を書きます。

AWSとkintone間でファイルのやり取りをする部分については、AWS Lambda 連携-PDF変換ツールを作ってみた- を参考にしました。

先ほどの「関数コード」のエディタ部分に以下のプログラムをコピーし、「XXX」となっている部分を環境に合わせて変更します。

 

Amazon API Gatewayの設定

次に Amazon API Gateway で、Cisco Webex Teams の Webhook を受けて Lambda 関数を呼び出す API を作成します。

① AWSのコンソールで、Amazon API Gatewayを選択し、「+API の作成」をクリックします。

APIGateway_API___.png

 

② 「API名」に任意のAPI名を入力し、「API の作成」をクリックします。「説明」欄は任意です。

APIGateway____API__.png

 

③ リソース画面でアクションのドロップダウンから「リソースの作成」を選択します。

 

④ 「リソース名」と「リソースパス」に任意の文字列を入力し、「リソースの作成」をクリックします。

 

⑤ 今回は、Cisco Webex TeamsからPOSTされるため、アクションのドロップダウンの「メソッドの作成」より、「POST」を選択し、横の✔マークをクリックします。

 

⑥ POSTのセットアップ画面にて、各設定をして「保存」をクリックします。

  • 「総合タイプ」はLambda関数を選択します。
  • 「Lambda リージョン」はご自身のAWSのリージョンを選択します。
  • 「Lambda 関数」にはLambdaで作成した関数名を入力します。

APIGateway_POST______.png

 

⑦ Lambda関数に権限を追加する設定画面が出るので「OK」を押します。

 

⑧ アクションのドロップダウンの「API のデプロイ」を選択し、各設定を行い「デプロイ」をクリックします。

  • 「デプロイされるステージ」は[新しいステージ]を選択します。
  • 「ステージ名」には任意の名称を記入します。ここは必須です。
  • 他の項目は任意入力です。

  

Cisco Webex Teams Webhook の設定

いよいよ大詰めです。次はCisco Webex TeamsのWebhookを設定します。

 Cisco Webex Teams for Developersにログインし、「Docs」からWebhookのCreate a Webhookを開き、「Test Mode」を「ON」にしたうえで、各設定を行って「Run」をクリックします。

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

 

※1 Botのアクセストークンは、以下の方法で取得できます。(Bot IDとは異なります)

  1. Cisco Webex Teams for Developerの「My Apps」から、先ほど作ったBotを選択します。
  2. 「Access token」のリンクをクリックし、アクセストークンをコピーします。

 

※2 Lambda 関数のURLは、以下の方法で取得できます。

  1. Amazon API Gatewayの作成したAPIのステージは以下のメソッドをクリックします。
  2. 「POST」をクリックすると、URL呼び出しが表示されます。

 

試してみよう

長かったですが、設定と実装はすべて完了です。早速、動かしてみましょう!

まず、Cisco Webex Teamsアプリを立ち上げ、用意したスペースを開きます。ちゃんとBotがメンバーにいることを確認して下さいね。

スマートフォンやカメラ付きのタブレットであれば、Cisco Webex Teamsアプリのカメラ機能を使って何か撮影してみましょう。PCをご利用の場合は何か適当な画像を添付します。

 

メンションで先ほど作ったBotを指定して、投稿します。

 

実際に登録されているか、kintoneアプリを確認してみましょう。

 

いかがでしたでしょうか?登録されていましたか?

もし登録に失敗しているようであれば、AWSのCloudWatchでログを確認してみてくださいね。

 

おわりに

今回は、スマートフォンで撮影した画像を簡単にkintoneアプリへ登録する方法を題材に、ファイルをCisco Webex Teamsからkintoneへ登録するやり方をご紹介しました。

この方法を応用すると、工事現場や店舗の商品展示の現状などを写真に撮って、kintoneの報告アプリにアップする事ができます。

他にも、Cisco Webex  Board を利用すると、会議中の手書きのメモをkintoneの議事録アプリに添付することもできます!

こんなイメージです。

会議が終ったら、さっと手書きした画像ファイルを会議に使ったスペースに添付して、連携Botにメンションすると、kintoneの議事録アプリに添付ファイルが登録された状態で、議事録のレコードが作成されます。

Cisco Webex Board を使うと、拠点間での会議や、リモートワーカーとの会議などが、より快適になりそうですね!

ここに挙げたいくつかの例以外にも、いろいろ便利な利用方法があると思います。是非是非、お試しください。

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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