Miro更新botを作ってみた

Last updated at 2023-07-14Posted at 2023-07-14

はじめに

社内活動でMiroを使用しており、隔週で特定の場所のお天気マークを更新しているので、更新忘れ防止とスマホからでも簡単に更新できたらいいなと思いbotを作ってみることにしました。

bot概要

PowerAutomateからスケジュール実行でTeamsにアダプティブカードを投稿し、選択したお天気マークをMiroに付箋で貼り付けるbotを作成します。

アダプティブカード作成

アダプティブカードデザイナーでお天気マークがボタンになっているカードを作成します。
作成できたら[Copy Card Payload]をクリックしてJSONをコピーしておきます。
（詳しい手順はこちらがとてもわかりやすかったので割愛します）

作成したカード
- 右上のTargetVersionは1.5だとTeams非対応なので1.4以下に変更
- １つ目のTextBlockのtextはあとでメンションを編集するためブランクのまま
JSON

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "お天気マーク更新してください",
            "wrap": true
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.Submit",
                                    "title": "🌤",
                                    "id": "🌤"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.Submit",
                                    "title": "🌥",
                                    "id": "🌥"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.Submit",
                                    "title": "🌧",
                                    "id": "🌧"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.Submit",
                                    "title": "⛈",
                                    "id": "⛈"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

MiroAPIのAccessToken発行

下記手順でAccessTokenを発行し、発行したAccessTokenを退避しておきます。

Miro Developer Platformにアクセスし、[Start Building now →]をクリック
チェックを入れて[Create a team]をクリック
[＋]ボタンをクリック
適当なアプリ名を入力し[アプリを作成する]をクリック
boards:read、boards:writeにチェックがついていることを確認し、[アプリをインストールしてOAuthトークンを取得する]をクリック
Dev teamを選択し、[Add]をクリック
AccessTokenが取得できた

MiroAPIリクエスト作成

絵文字を作成するAPIはないようなので、付箋にお天気マークを書いて投稿することにしました。
付箋作成のAPIリファレンスでリクエストを作成します。
下記入力できたら[Try It!]をクリックするとリクエストが発行されるので、更新先のMiroボードにいい感じに付箋が作成されたら、リクエストを退避しておきます。

Bearer：取得したAccessToken
board_id：更新先のMiroボードID（https://miro.com/app/board/[ここがboard_id]/）
BODY PARAMS：指定したいところを入力（positionはparent指定しない場合は絶対位置を指定）

PowerAutomate作成

下記手順でPowerAutomateを作成します。

作成からスケジュール済みクラウドフローをクリック
フロー名、開始日時、繰り返し間隔、設定曜日を指定して[作成]をクリック
タイムゾーン、設定時刻を入力
ユーザーの@mentionトークンを取得するステップを追加し、ユーザーにメンションしたい人のメールアドレスを入力
アダプティブカードを投稿して応答を待機するステップを追加し、下記を入力
- 投稿者：フローボットを選択
- 投稿先：Channelを選択
- メッセージ：アダプティブカード作成でコピーしたJSONを貼り付け、一つ目のTextBlockのtextに動的なコンテンツの追加から@mentionを追加
更新メッセージにアダプティブカードのお天気マークボタンクリック後のメッセージを入力し、Team、Channelは投稿先を指定
HTTPステップを追加し、下記を入力
- 方法：POST
- URI、ヘッダー：退避しておいたMiroAPIリクエストから入力
- 本文：退避しておいたMiroAPIリクエストから入力し、contentにはアダプティブカードで選択したお天気マークを入れるため、動的なコンテンツの追加から式でoutputs('アダプティブ_カードを投稿して応答を待機する')?['body/submitActionId']を追加
- 認証：未加工
- 値：退避しておいたMiroAPIリクエストから入力