フォトレポートWebhookを利用し、フォトレポートの投稿・更新時に通知を受け取り、Teamsに通知する方法をご紹介します。
※画面はTeamsのバージョンや環境により異なる可能性がありますのでご了承ください。
前提
「Teams Workflows」を使った実現方法になります。Teamsの通知先チャネルがあること、フォトレポートWebhookの設定を実施していることが必要です。
ステップ
1. Teams Workflowsで新規フローを作成する
今回は次のようなフローを作成します。
- Workflowsを開き「＋新しいフロー」から新規作成します。
- Teamsテンプレートの「Webhook要求を受信するとチャネルに投稿する」を選択します
- フローに名前を設定し、「次へ」を選択します
- 通知するチャネルを設定し「フローの作成」を選択します
- ワークフローが作成されたら、表示されたURLをコピーします。
-
Shopらんで、システムの管理 > 連携アプリの設定 > Webhookの設定画面を開き、先ほどコピーしたURLをペイロードURLに設定します。
- イベント：「フォトレポート」
- ペイロードURL：先ほどコピーしたURL
- Teams Workflowsで「ワークフローを管理する」を選択し、ワークフローの変更を行います
2. Teams Workflowsのフローを変更する
- 作成したワークフローの管理画面から編集を選択し、フローの変更画面に移動します
- 「新しいステップ」を選び、「JSONの解析」操作を選択します。
- ここでお知らせWebhookの情報を使いやすいように設定します。コンテンツに「本文」を設定し、「スキーマ」にペイロードバージョンに合わせた以下の情報をセットしてください。
-
例）ペイロードバージョンv1の例はこちら。※最新のスキーマはガイドをご確認ください。
スキーマ定義例（クリックして展開してください）
{ "type": "object", "properties": { "event": { "type": "string", "description": "" }, "info": { "type": "object", "properties": { "reportId": { "type": "string", "description": "フォトレポートの内部ID" }, "title": { "type": "string", "description": "フォトレポートのタイトル" }, "description": { "type": [ "string", "null" ], "description": "説明" }, "dueDate": { "type": "string", "description": "〆切日時" }, "openDate": { "type": "string", "description": "公開日時" }, "recvStores": { "type": "array", "description": "対象店舗を個別の店舗に展開した結果", "items": { "type": "string" } } } }, "position": { "type": "object", "properties": { "position": { "type": "string", "description": "報告箇所の内部ID" }, "title": { "type": "string", "description": "報告箇所名" }, "description": { "type": [ "string", "null" ], "description": "報告箇所の説明" } } }, "post": { "type": "object", "properties": { "position": { "type": "string", "description": "報告箇所の内部ID" }, "target": { "type": "object", "description": "報告した店舗", "properties": { "type": { "type": "integer", "description": "報告した店舗の種別" }, "accountId": { "type": "string", "description": "報告した店舗のID" }, "storeCode": { "type": "string", "description": "報告した店舗の店舗コード" }, "name": { "type": "string", "description": "報告した店舗の店舗名" } } }, "caption": { "type": "string", "description": "説明" }, "altitude": { "type": [ "number", "null" ], "description": "位置情報の取得ができた場合は高度(m)" }, "latitude": { "type": [ "number", "null" ], "description": "位置情報の取得ができた場合は緯度" }, "longitude": { "type": [ "number", "null" ], "description": "位置情報の取得ができた場合は経度" }, "locationLabel": { "type": "string", "description": "位置情報の取得ができた場合は住所" }, "mediaType": { "type": "string", "description": "mediaのMIMEタイプ" }, "media": { "type": "object", "description": "報告された画像・動画", "properties": { "md5": { "type": "string", "description": "ファイルのMD5値" }, "length": { "type": "integer", "description": "ファイルのバイト数" }, "url": { "type": "string", "description": "ダウンロードURL" }, "caption": { "type": "string", "description": "常にブランク" } } }, "thumbnail": { "type": "object", "description": "サムネイル画像", "properties": { "md5": { "type": "string", "description": "サムネイル画像ファイルのMD5値" }, "length": { "type": "integer", "description": "サムネイル画像ファイルのバイト数" }, "url": { "type": "string", "description": "サムネイル画像ダウンロードURL" }, "caption": { "type": "string", "description": "常にブランク" } } } } }, "token": { "type": "string", "description": "Webhook検証およびファイルのダウンロード時に指定するトークン" } } }設定後のイメージ
- 「新しいステップ」を選び、Teamsの「チャットやチャネルにカードを投稿する」アクションを選択します
- 投稿者(Post as)、投稿先(Post in、チーム、チャネル、を設定し、アダプティブカード欄にカードの内容を記載します。
※投稿先のチャネルがプライベートの場合は投稿者(Post as）は「フローボット」ではなく「ユーザー」を選択してください。 -
カード記載例はこちら。通知内容については用途に合わせて設定してください。
{ "type": "AdaptiveCard", "$schema": "https://adaptivecards.io/schemas/adaptive-card.json", "version": "1.4", "msteams": { "width": "Full" }, "actions": [ { "url": "@{concat(body('JSON_の解析')?['post']?['media']?['url'],'?token=',body('JSON_の解析')?['token'])}", "title": "投稿された写真をダウンロード", "tooltip": "@{concat(body('JSON_の解析')?['post']?['media']?['url'],'?token=',body('JSON_の解析')?['token'])}", "type": "Action.OpenUrl" } ], "body": [ { "text": "@{body('JSON_の解析')?['info']?['title']}", "size": "medium", "weight": "bolder", "type": "TextBlock" }, { "facts": [ { "title": "報告店舗", "value": "@{body('JSON_の解析')?['post']?['target']?['storeCode']}：@{body('JSON_の解析')?['post']?['target']?['name']}" }, { "title": "報告箇所", "value": "@{body('JSON_の解析')?['position']?['title']}" } ], "type": "FactSet" }, { "inlines": [ { "text": "@{body('JSON_の解析')?['post']?['caption']}", "color": "dark", "type": "TextRun" } ], "type": "RichTextBlock" } ] } - 最後に、テンプレートの初期値である「Send each adaptive card」を削除します
- ワークフローを保存します
3. フォトレポートに投稿して通知を試す
Webhookを設定したフォトレポートに投稿もしくは更新を実施してください。設定したTeamsに通知されるはずです。
カード形式を利用した場合の通知イメージ