無料でできる!画像をDropBoxにアップロードすると自動でalt属性を作る仕組みをノンコーディングで作った話(Microsoft Flow)

Pocket


以前、Logic AppsのComputer Vision API Analyze Imageコネクターを利用し「DropBoxに画像をアップロードすると自動でalt属性を作成する仕組み」を作ったのですが、これはAzureのアカウントを持っていることが前提になっていました。
Logic Appsを利用したバージョンはこちら。

Cognitive Servicesの画像解析を使って自動でalt属性を作る仕組みをノンコーディングで作ってみた話(LogicApps+Computer Vision API Analyze image)
https://zuvuyalink.net/nrjlog/archives/3599

もっと手軽に試す方法ないかな?と考えて、今回はMicrosoft Flowを使って作成してみました。無料でできます!
まずはコレを試していただいて「ええやん!」ってなったらLogic Appsで構築いただければと。

事前準備

最低限、以下のものが必要です。

  • Microsoft アカウント(個人アカウントで可)

Microsoft Flowの準備

Microsoft Flowhttps://japan.flow.microsoft.com/ja-jp/)でサインアップします。
ちなみに、Microsoft Flowはアカウントの種類によって価格とできることが決まります。

個人アカウントの場合は「Freeプラン」。(使えるコネクターに制限あり)
また、Dynamics 365 プランやOffice 365 プランによってMicrosoft Flowが利用できるものもあるので、企業で使っている場合は確認してみてください。
プランと価格について → https://japan.flow.microsoft.com/ja-jp/pricing/

Computer Vision API

Computer Vision APIも試用版が提供されていますので、今回はそれを利用します。

Cognitive Services を試すhttps://azure.microsoft.com/ja-jp/try/cognitive-services/)の「API取得」ボタンをクリック。


赤枠内のエンドポイントキー1を使うのでメモしておきます。
また、試用版は「30日間」の使用になるので、実務で使うのはあまりオススメできません…。
実務で利用する場合はLogic Appsを利用した方法をオススメします。

今回やったこと


全体のFlowはこのような感じ。Logic Appsと同じコネクターが利用できます。
トリガーは「DropBoxにファイルが追加されたとき」です。


Computer Vision API – Analyze Imageコネクターを選択。
「接続名」はわかりやすい名前(任意)を入力、「Account Key」「キー1」の内容、「Site URL」はエンドポイントの「https://westcentralus.api.cognitive.microsoft.com」を入力。
特に「Site URL」は必須項目になっていませんが、今回のようにComputer Vision APIの試用版を使う場合は指定しないとエラーが出てしまうので注意!(気付くまで時間かかった…)


うまく接続できるとこの表示に変わるので、このように入力。


テキスト翻訳コネクターを選択。
英語でCaption Textが出力されるので翻訳します。
カテゴリのところは「generalnn」と入れておきます。これのある無しで翻訳精度が変わるので!


SlackにComputer Vision APIで画像分析したときの文章(Caption Text)と翻訳文章を投稿するように設定します。
以上でFlowは完成!

実行してみる


この2枚の画像をアップロードしてみます。


Slackに出力されたのはこちら。キチンと画像の説明がされています。
翻訳精度の違いもわかりますね!

最後に

今回の仕組みを構築する上で、Computer Vision APIにもお試し用に無料版があると知らなかったのですが @twit_ahf さんに教えていただきました。
いつもありがとうございます!!(五体投地)

さて、9月13日開催の「webっちゃ! Vol.20」で今回の記事を元に少しお話します。アクセシビリティに関しての勉強会なので、興味ある方ぜひお越しください!!

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください