「Custom Vision Service」と「Power Apps」でAIアプリを完成させる

2021年07月19日 11時00分更新

文● 池田英永、廣原花音／FIXER　編集● 大塚／TECH.ASCII.jp

　皆さんこんにちは！ FIXERの新卒1年目、コーディング初心者の池田と廣原です！今回は「連載：誰でもAIが使える『Azure Cognitive Services』をみんなで学ぶ」の第5回として、「Custom Vision Serviceについて知ろう！」をテーマに記事を書かせていただきます。

　前回までの前編、中編記事では、独自の画像識別モデルを作成できる「Custom Vision Service」の概要を説明し、実際にそれを使用して「衣類の画像を分類するモデル」を作成しました。

　今回の後編記事では、前回作成したこのモデルと「Power Apps」を活用して、スマートフォンカメラで撮った衣類の判別と、その洗い方を教えてくれるアプリを作っていきます。

作成するスマホアプリの完成イメージ。撮影した画像から衣服の種類を判別し、洗い方を提案します！

アプリ作成の準備作業

　今回のアプリ作成であらかじめ用意する必要があるのは次の2つです。Custom Vision Serviceと同様に、Power Appsにも30日間の無料トライアルが用意されていますので、皆さんも一緒に作ってみてください。

　・Power Appsのアカウント
　・Custom Vision Serviceで作成したモデル（前回記事を参照）

　また、Power Appsでアプリを作成していくうえでは以下のサイトを参考にさせていただきました。Power Appsの立ち上げから詳しく説明されています。こちらもぜひご参照ください。

■参考サイト：Power Apps

■参考サイト：Custom Vision Service＋Power Apps

　それではさっそくアプリを作っていきましょう！

　まずPower Appsのサイトにサインインして、アプリの画面を作成するための「キャンバスの追加」を選択します。今回はスマートフォンのカメラ機能を用いるモバイルアプリなので、携帯用サイズのキャンバスで作成します。

　撮影するためのカメラ機能を追加します。上のメニューから「メディア」→「カメラ」を挿入し、「OnSelect」プロパティの数式バーに以下を入力します。なお「カメラ名」の部分には、挿入したカメラの名前（筆者の場合は「Camera1」でした）を入力してください。

プロパティ名	数式バー
OnSelect	Navigate("遷移ページ名"); Set(tmpimg,"カメラ名".Photo);

　撮影した画像を表示する画面を作成します。「メディア」メニュー→「画像」と「ボタン」を挿入します。画像の「Image」プロパティの数式バーに以下を入力して、カメラで撮影した画像が画面に表示されるようにします。

プロパティ名	数式バー
Image	tmpimg

　以上の簡単な操作だけで、画面の遷移と画像の表示ができます！

前へ 1 2 次へ