このページの本文へ

前へ 1 2 3 次へ

松本典子の「Azure Logic Apps」超入門 ~AI編~第2回

Azure Logic Appsから「Computer Vision API」を使う

AIで「alt属性」文章を自動生成しよう!もちろんノンコーディングで

2018年09月05日 11時30分更新

文● 松本典子 編集 ● 羽野/TECH.ASCII.jp

  • この記事をはてなブックマークに追加
  • 本文印刷

こんにちは。Azure MVPの松本典子です。今回は、Cognitive Servicesの画像認識AI API「Computer Vision API」の機能を利用し、会社の広報活動やWeb制作現場でも活かせる仕組みをご紹介します。もちろん、Logic Appsを使ってノンコーディングで。

 私は長年Webデザイナーとしてサイト制作に携わってきたのですが、制作関連作業の中でも「alt属性」を毎回作成するのは大変だなぁと感じていました。alt属性(オルト属性)とは、HTMLのimg要素の中に記述される画像の代替となるテキスト情報です。例えば、テキストブラウザや音声読み上げブラウザでは、画像ではなくalt属性に記載された内容がテキストとして表示、または読み上げられることになります。アクセシビリティの観点からも、画像を説明する文章(alt属性)を適切に入れることが推奨されています。

 ここで、Cognitive ServicesのComputer Vision APIの機能の1つである「Analyze Image(画像解析)」を活用すれば、alt属性の文章を自動生成できます。

 今回は、「企業の公式Twitterアカウントがツイートした内容を企業サイトに掲載する」というケースを想定し、「ツイートしたとき」をLogic Appsのトリガーにしてツイート内容をWeb制作側でも流用させてもらおうという方法を紹介します。様々なサービスとつながるLogic Appsの利点を生かして、AIによる画像解析結果をGoogleスプレッドシートに格納、Dropboxにツイート時に投稿した画像を格納するワークフローを作成していきます。広報活動の一環として、自社イベントの様子をツイートしている企業も多いと思いますので、ご参考にしてください。

 手順は、以下の3ステップです。

  1. 利用するサービスの事前準備(Twitter、Googleスプレッドシート、Dropbox)
  2. Computer Vision APIの作成
  3. Azure Logic Appsの作成

1. 事前準備

 画像解析の結果を出力するためのGoogleスプレッドシートと、画像格納用のDropboxを用意します。また、トリガーに使うTwitterへのログイン情報を確認しておいてください。

Googleスプレッドシートの項目
  • Googleスプレッドシート:わかりやすい名前で作成し、図のようなタイトルを入力します(今回は「Alt-text-list」を作成)。
  • Dropbox:わかりやすい名前のフォルダを作成します(今回は「alt-text-box」を作成)。

2. Computer Vision APIの作成

 次に、Computer Vision APIを用意します。

2-1. Azure ポータルからComputer Vision APIを新規作成

Computer Vision API新規作成

 Azureの管理ポータルの左メニュー項目「+リソースの作成」→「AI+Machine Learning」をクリックすると、項目にComputer Vision APIが表示されます。表示された「Create」に、次の1~5の情報を入力し、作成します。

  1. Name:作成するComputer Vision APIの名前を入力します(日本語の使用不可)。
  2. サブスクリプション:サブスクリプションが複数ある場合にのみ表示されるメニューです。複数ある場合、利用するサブスクリプション名を選択します。
  3. 場所:Computer Vision APIを作成する場所(リージョン)を選択します。Logic Appsのコネクタで利用する場合、「米国西部」を必ず選択してください。
  4. 価格レベル:F0(フリープラン)を選択します(F0は1リージョンに1つ作成できます。既に作成している場合は有料プランを選択してください)。
  5. Resource Group:リソースグループは、リソースをまとめて管理できる機能です。「どういったグループなのか?」がわかりやすい名前を入力します(日本語の使用不可)。
  6. 「作成」ボタンをクリック

2-2. Computer Vision APIの情報確認

NameとKeyの確認

 Computer Vision APIが作成できたらリソースに移動し、「Keys」をクリックして赤枠内の「NAME」と「KEY 1」の情報を控えておきます。Logic Apps でコネクタを利用するために利用します。

3. Azure Logic Appsを作成する

 最後に、Logic Appsを作成していきましょう。

前へ 1 2 3 次へ

この特集の記事
ピックアップ