1.やったこと
iPhoneのアクティビティアプリのスクショを画像認識して、筋トレ結果を抽出、データを格納してダッシュボードで表示する…までを、Power Platformの各種サービスを駆使してノンコーディングでやってみたことのうち、Power Appsでやったことのメモです。
- Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - AI Builder編 -
- [Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Power Apps編 -] (https://qiita.com/miokawa/items/0f3dc6ac6a1be01984d6)←コレ
- Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Common Data Service編 -
- Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Power Automate編 -
- Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Power BI編 -
人恋しさと運動不足解消のため、定期的にオンラインフィットネス（Teams繋ぎながらyoutubeのトレーニング動画を流してみんなでやる）を会社の人とやり始めたことがきっかけで作りました。
最終的な成果物はこんな感じ（細かいデザイン方法については触れません）。
※試行錯誤した結果、こうしたらできた！って感じなので、これが一番スマートなのかどうかは不明ですのでご注意ください。
2.本アプリでのPower Platformの各サービスの役割
- Power Apps：iPhoneのアクティビティアプリのスクショをアップロードする。Power BIで筋トレ記録見られる。
- AI Builder：アクティビティアプリのスクショに含まれる筋トレ時間、消費カロリー、日付などを画像認識する
- Power Automate：Power Appsのアップロードボタンをトリガーに、アップロードされたスクショをAI Builderに投げ、結果のデータをCommon Data Serviceに格納する
- Common Data Service：ひたすら筋トレ結果を格納する
- Power BI：Common Data Serviceに格納された筋トレ成果たちをそれっぽく表示する
図にすると以下のような感じです。
気づいたら割といろいろ使ってた。わお。
3.開発環境
今回はこちらの無料ライセンスを使いました。
Power Apps Community Plan
4.実現したいこと
デバイス内に格納されたアクティティアプリのスクショを選択し、アップロードボタンを押すと、Power Automateのフローをトリガーする。
5.作成過程
Power Appsにログインしアプリから新しいアプリを作成、キャンバスを選択。
今回はiPhoneからの画像アップロードを想定しているので、空のアプリから携帯電話レイアウトを選択。
まっさらなキャンバスアプリの画面が出てくるので、挿入からメディア、画像の追加を選択。
AddMediaWithImageという部品がキャンバスに出現します。これを開くと、AddMediaButton、UploadedImageという2つの部品が入っていることがわかります。
簡単に説明すると、AddMediaButtonは、その名の通りボタンになっていて、スマホのアルバムを開くことができるボタンです。UploadedImageは、アルバムで選択された画像を表示する部品です。
ここでUploadedImageを選択し、詳細設定タブから、ImagePositionをImagePosition.FillからImagePosition.Fitにしておきます。
これにより、枠より画像が大きい場合でも、枠内に収まるようにうまく調整してくれるようになります。
続いて、選択した画像をアップロードするためのトリガーとなる、アップロードボタンを追加します。
挿入からボタンを選択すると、キャンバスにボタンが出現しますので、適当に移動させておきます。
また、ボタンに表示されるテキストをボタンからアップロードに変更しておきます。
次に、ゆくゆくは溜まった筋トレデータをPower BIで見られるようにしたいので、Power BIへリンクする用の画面を用意しておきます。新しい画面から空の画面を選びます。Screen2が追加されると思います。
この時点では、Screen2に配置するPower BI側が何もできていないのですが、Power BIを呼び出す部品だけ配置したいと思います。
挿入タブからグラフ、Power BIタイルを選び、配置します。
更に、Screen1とScreen2を行き来できるようにボタンを配置します。
挿入タブからアイコン、次へ（画面移動ができるとわかるアイコンならなんでもOKです）を選び、アイコンを適当な場所に配置します。
Icon1を選択した状態で、アクションタブから移動を選択し、移動先となるscreen2を選びます。
すると、Icon1のOnselect（クリック時の動作）にScreen2への移動が設定されます。
同じことをScreen2→Screen1でもやり、行き来ができるようにします。
これで一通り必要な部品は揃いましたので、試しに動かしてみたいと思います。右上の▷ボタンでプレビューができます。
タップまたはクリックして画像を追加となっていた部分をクリックすると、ファイルダイアログが出てきます。
ここでローカルの画像を選択すると、枠内に収まる形で画像が表示されます。
画面移動用のアイコンをクリックすると、Power BIを確認する画面に移動できます。
なお、アップロードボタンにはクリック時の動きを何も設定していないので、まだ押しても何も起きませんので、この部分の処理を追加していきます。
アップロードボタンを選択した状態でアクションからPower Automateを選択し、新しいフローを作成を選択します。
Power Automateのテンプレートのうち、Power Appsのボタンをトリガーとしたものがずらっと出てきます。
今回はPower Appsボタンを選択します。
こんな感じの画面が出てきたら、新しいステップからAI Builderを選択し、フォームの情報を処理して保存するというアクションを設定しておきます。
ここで、AI Builder編で作成したAIモデルを選択し、フォームの種類をJPEG画像（スクショがJPEGなので）にし、フォームは動的なコンテンツからPowerAppsで確認を選択します。
これは、PowerAppsからの入力を利用しますという意味です。
こんな感じの状態になったらOKです。
わかりやすく、このフローに名前を付けます。今回は筋トレアプリとしました。
左上の名前の部分をクリックして、変更し、保存をクリックします。
ここでPower Appsに戻ってみると、先ほど作成したPower Automateのフローが出てきていると思いますので、そちらを選択します。
アップロードボタンにPower Automateのフローが紐づけられると、アップロードボタンの詳細設定、OnSelectにPower Automateのフロー名.Run(と自動入力されます。OnSelectはその部品がクリックされたときの動作を入れるところになり、Power Automate名.Run()という関数でPower Automateが呼び出せるということを教えてくれています。
また、上の方にRun（フォームの情報を処理して保存する_フォーム）とあるのは、Power Automate側で待ち構えている値（引数）を教えてくれています。
Power Automate側を見ると、確かに待ち構えているのがわかります。
ここに入れるべきは、Power Appsでアップロードしようと選ばれた画像です。以下の通り入力します。
<Power Automateフロー名>.Run(Substitute(JSON(UploadedImage1.Image, IncludeBinaryData),"""", ""))
画像の受け渡しがちょっと厄介なのですが、UploadedImage1.Imageで、UploadedImageの部品に表示されている画像を表しています。しかし、画像をそのままPower Automateに渡すことができないので、一度JSON関数で受け渡しができる形に変換します。
また更に、JSON関数で変換したままだと、最初と最後に"がついてしまうので、それを排除するためにSubstitute関数を使っています。
結果、以下のような形になります。
ここまできたらPower Apps→Power Automateの動作が試せますので、右上の▷アプリのプレビューボタンから、画像を選んで、アップロードボタンクリックを試してみます。
ちなみに、アプリのデザイン画面のままでも、Altを押しながらクリックすることで同様に試すことが可能です。
Power Automateの画面に戻り、左上の←ボタンから筋トレアプリの概要ページに移ります。
実行履歴より、このフローの呼び出された履歴が確認できます。
実行日時をクリックすると詳細が見られますのでクリックします。
フォームの情報を処理して保存するアクションを展開すると、必要な情報がきちんと画像から抽出できていることが確認できます。
ここまで確認ができたら、Power Appsの画面に戻り、ファイルから保存か、Ctrl+Sでアプリに名前を付けて保存します。
6.次のステップ
ここまでで、今回作ったPower AppsのボタンをトリガーにPower Automateを起動し、AI Builder編で作ったAIモデルを使って画像から情報を抽出することができました。
次はCommon Data Service編で、抽出したデータを格納する場所を用意していきたいと思います。