LoginSignup
1
2

More than 3 years have passed since last update.

@miokawa

Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - 5.Power BI編 -

Last updated at Posted at 2020-12-22

1.やったこと

iPhoneのアクティビティアプリのスクショを画像認識して、筋トレ結果を抽出、データを格納してダッシュボードで表示する…までを、Power Platformの各種サービスを駆使してノンコーディングでやってみたことのうち、Power BIでやったことのメモです。

  1. Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - AI Builder編 -
  2. Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Power Apps編 -
  3. Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Common Data Service編 -
  4. Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Power Automate編 -
  5. 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に格納された筋トレ成果たちをそれっぽく表示する

図にすると以下のような感じです。
気づいたら割といろいろ使ってた。わお。

筋トレアプリ図解.png

3.開発環境

今回はこちらの無料ライセンスを使いました。
Power Apps Community Plan

4.実現したいこと

Common Data Service編、Power Automate編を経てCommon Data Serviceに蓄積された筋トレデータをPower BIで表示する。

5.作成過程

5.1 Common Data Serviceとの接続

まず、Power BI Desktop（クライアントアプリ）をダウンロードし、起動します。データを取得から、Common Data Serviceを検索、選択し、接続をクリックします。
image.png
サンプルスクショ

すると、接続するサーバーURLを聞かれます。
これはどこでわかるかというと、Power Appsにログインし、右上の設定ボタンから、詳細設定をクリックしてリンクする先のURLのhttps://xxxxxxxxxxx.crm.dynamics.com/の部分になります。
image.png
image.png

コピーしたURLを張り付け、OKをクリックします。
サンプルスクショ

どのテーブルのデータを見るか聞かれるので、エンティティを展開したあと、Common Data Service編で作成したテーブルを検索、チェックを入れて、読み込みをクリックします。
image.png

こんな感じの画面になったら、レポート作成スタートです。
image.png

Common Data Serviceに格納した、トレーニングカテゴリごとのアクティブキロカロリー、合計時間、平均心拍数を日ごとに見てみようと思います。

5.2 フィールド

以下画像のとおり、必要なデータにチェックを入れていきます。

  • Active Kilocalories
  • Avg. Heart Rate
  • Date
    • 日
  • Total Training Minutes
  • Training Category

サンプルスクショ

この時点で、自動的に何か出ますので、グラフを拡大しておきます。
image.png

5.3 視覚化

ここからは好みとセンスだと思うのですが、視覚化の部分で折れ線グラフおよび集合縦棒グラフを選択し、Avg.Heart Rateを線の値に移動させます。
image.png

タイトルが自動生成されていますが、ちょっとわかりにくいので、書式のタイトルからタイトルテキストのボックスに適切な文言を入力し、中央揃えします。
image.png

同じように、Y軸のタイトルもわかりにくいので、変更しました。
image.png

あと、凡例もわかりにくいのですが、こちらはフィールドの部分の各データの名前を変更したら連動して変更できました。
image.png

他にもいろいろできるのだと思いますが、一旦は一連の動作を確認するためこのくらいにして、ファイルから名前を付けて保存をします。
image.png

そしてファイルから発行、Power BIへ発行、を選択します。Power BIへのサインインと、ワークスペースの選択もします。
image.png

5.4 ダッシュボード

ここから先は、Power BI（ウェブアプリ）で作業をします。こちらからサインインし、左側のワークスペースから先ほどPower BIに発行の際に選んだワークスペースとレポートを選択します。先ほどPower BI Desktopで作成、発行したレポートが表示されます。
image.png

Power Apps上で見られるようにするためには、ダッシュボードにピン留めを選んで、タイルとして登録する必要があります。
image.png

新しいダッシュボードを選択し、ダッシュボードの名前を入れたら、ライブをピン留めするをクリックします。
image.png

すると、ダッシュボードの下に、作成したダッシュボードが出てきて、タイルが表示されます。
これちょっと見ずらいんですが、「ダッシュボード」～「レポート」の間に出ているのがダッシュボードとして登録されたもので、「レポート」～「ブック」の間に出ているものがレポートとしてしか登録されていないものっぽいです。見出し（レポート/ダッシュボード）と各アイテム（作ったレポートやダッシュボードの名前）のフォントが似ているからぱっと見わかりにくい…
image.png

タイルの左上にタイトルが出ているのがちょっと邪魔なので、消そうと思います。
タイル右上の三点リーダボタン（マウスホバーで出てきます）から、詳細設定を選び、タイトルとサブタイトルの表示のチェックボックスをオフにして、適用をクリックします。
image.png

5.5 Power Appsにタイルを設定

ここで、Power Apps編で作ったPower Appsの編集画面に移動し、空っぽだったPower BIの部品に、先ほど作ったPower BIのダッシュボードとタイルを参照するように設定し、保存、発行します。
これで一連の作業は完了です。
image.png

6.次のステップ

iPhoneにPower Appsをダウンロードし、実際にスクショアップロード～Power BIでデータ確認まで試してみたり、（私はセンスがないのであまりできないですが…）デザインに凝ってみたりしてみましょう！

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2