デレステ MV 画像収集 bot をコーディングレスでつくる ② Logic Apps でシステム構築

本記事では、半年以上前に公開したデレステ MV 画像収集 bot をコーディングレスでつくる ① Custom Vision Service でモデルを構築に引き続き、Microsoft Azure の Logic Apps を使用して画像収集 bot を完成させます。

(bot自体は前記事公開時点で完成していたのですが、なかなか筆が進まず。そうこうしているうちに、Custom Vision に物体検出機能が実装され、物体検出で遊びたくなってしまったので、遊ぶ前に記事を完結させておこうというのが本記事公開の経緯です)

デレステは今でもやっています。

Logic Apps

Azure には Logic Apps というサービスがあります。

Logic Apps では、フローチャートを描くようにサービスやアプリどうしを接続することで、コードを一行も書かずにシステムを構築することができます。

今回は、この Logic Apps を使用して、

  1. Twitter から画像を取得し、
  2. 取得した画像がMVのスクショかどうかを Custom Vision で判別し、
  3. MVのスクショと判別された場合は Slack へ送信する

というシステム(ロジックアプリ)を構築していきます。

ロジックアプリを作成

まず、Marketplace から Logic App を検索し、作成します。

customvision21

ワークフローを作成

ロジックアプリが作成されると、Logic Apps デザイナーが表示されます。そのデザイナー上で、作成したロジックアプリの動作を決めるワークフローを設定します。

まず、ワークフローには、特定のイベントが起きたときにワークフローの処理を開始するためのトリガーを設定する必要があります。

今回は、新しいツイートが投稿されたときに処理を開始したいため、「新しいツイートが投稿されたら」をトリガーにします(本記事のキャプチャ画像が途中まで英語表記なのは昔に撮影したものを使っているからです……今は日本語になっていると思います)。

customvision22

「新しいツイートが投稿されたら」を選択すると、次の画面のようにトリガーが設定されます。

「サインイン」を選択して Twitter と連携します。

customvision23

その後、検索テキストを設定します。今回は、主に鷺沢文香さんのMVスクショを集めたかったため

文香 filter:images exclude:retweets

を検索テキストに設定しました。

trigger

トリガーの設定を終えたら「ツイートから取得した画像を Custom Vision に送信する」処理を設定していきます。

ツイートには複数枚の画像が含まれている場合があるため、For Eachで1枚ずつ取り出す必要があります。

For Eachを使用するには「新しいステップ」→「さらに追加…」→「For Each の追加」と選択します。そして、For Eachのループ対象として「メディアURL」を選択します。

これで、画像1枚(のURL)に対する処理を定義できるようになります。

customvision25

そして、ツイートから取り出した画像のURLを Custom Vison に送信するために「HTTP」を追加します。

HTTP の設定は以下の通りです。

  • 方法(メソッドのこと)は POST を選択
  • URI には Custom Vision の「Prediction URL」を選択すると表示されるペインの「If you have an image URL:」の下にある URL を入力
  • ヘッダーもそのペインに表示されているとおりに設定
  • ボディには
    {"Url": "@items('For_each')"}

    を入力(@items~の部分は「MediaUrls – 項目」と表示されるはず)

designer-http

最後に、POST のレスポンス(画像の判別結果)にしたがって Slack に通知する処理を設定します。

「条件の追加」を選択して、「値の選択」に「式」として次のものを入力します。

json(body('HTTP'))['predictions'][0]['tagName']

condition

この式は、前段のアクションで返された JSON レスポンスの ['predictions'][0]['tagName'] の値を示しています。

その値は画像に対して付けられたラベル(ここでは Positive か Negative)になるはずです。

よって、全体の条件は次の画像のように設定します。

condition

このように条件を設定することで、画像が Positive と判別されたときは条件の「true の場合」のアクションが実行され、そうでないときは「false の場合」のアクションが実行されます。

 

今回は、画像が Positive と判別されたときにその画像を Slack に投稿したいので、「true の場合」に対するアクションとして Slack の「投稿メッセージ」を設定します。

「投稿メッセージ」の「チャンネル名」には任意のチャンネルを設定し、「メッセージテキスト」には「MediaUrls – 項目」を設定します。

slack

以上で Logic Apps の設定は終わりです。

 

動作確認

ワークフローを「保存」して、しばらく放置してみましょう。

条件に合致するツイートが投稿されたら Slack に通知が届くと思います(自分でツイートしてみるのもありです)。

 

私はこのシステムを開発したことで、毎日がとても楽しいです。

result

 

参考

コメントを残す

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>