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

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

1. [Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - AI Builder編 -](https://qiita.com/miokawa/items/17d84d8811fe38ff4704)
2. [Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Power Apps編 -] (https://qiita.com/miokawa/items/0f3dc6ac6a1be01984d6)
3. [Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Common Data Service編 -](https://qiita.com/miokawa/items/da330e778afabf46579d)
4. [Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Power Automate編 -](https://qiita.com/miokawa/items/2ca2c75fdb52fcc90e78)
5. [Power Platformでノンコーディングで筋トレ成果を記録するアプリを作ってみた - Power BI編 -](https://qiita.com/miokawa/items/c7afe408e076cb9f7578)←コレ

人恋しさと運動不足解消のため、定期的にオンラインフィットネス（Teams繋ぎながらyoutubeのトレーニング動画を流してみんなでやる）を会社の人とやり始めたことがきっかけで作りました。

最終的な成果物はこんな感じ（細かいデザイン方法については触れません）。
<img width="250" alt="サンプルスクショ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/5369c570-2e83-4f8e-c113-e0be8f557090.jpeg"> <img width="250" alt="サンプルスクショ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/badb9fb8-1fea-ea0e-387b-f1a46ac248b9.jpeg"> <img width="250" alt="サンプルスクショ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ed233619-7794-1379-2ef0-c5e85ac2b356.jpeg">

※試行錯誤した結果、こうしたらできた！って感じなので、これが一番スマートなのかどうかは不明ですのでご注意ください。

# 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/17447ad0-bd5a-0f5f-e48a-20bddeeb914e.png)

# 3.開発環境
今回はこちらの無料ライセンスを使いました。
[Power Apps Community Plan](https://powerapps.microsoft.com/ja-jp/communityplan/)


# 4.実現したいこと
[Common Data Service編](https://qiita.com/miokawa/items/da330e778afabf46579d)、[Power Automate編](https://qiita.com/miokawa/items/2ca2c75fdb52fcc90e78)を経てCommon Data Serviceに蓄積された筋トレデータをPower BIで表示する。

# 5.作成過程
## 5.1 Common Data Serviceとの接続
まず、[Power BI Desktop（クライアントアプリ）](https://powerbi.microsoft.com/ja-jp/desktop/)をダウンロードし、起動します。**データを取得**から、**Common Data Service**を検索、選択し、**接続**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/86feba46-b5c6-8d18-c574-58c88e01a677.png)
<img width="500" alt="サンプルスクショ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/f7c39a5f-0119-5ba5-51f0-4a99b3bcd083.png">

すると、接続する**サーバーURL**を聞かれます。
これはどこでわかるかというと、[Power Apps](https://make.powerapps.com/)にログインし、右上の**設定ボタン**から、**詳細設定**をクリックしてリンクする先のURLの`https://xxxxxxxxxxx.crm.dynamics.com/`の部分になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ea1d6830-b867-b6ae-4b57-cfd5aa267e1e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/954fcd17-13a5-6ca0-6e44-c6e6bb4b3391.png)

コピーしたURLを張り付け、**OK**をクリックします。
<img width="500" alt="サンプルスクショ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/4eb07f11-3b82-b9c0-78c3-73689c3cbaed.png">

どのテーブルのデータを見るか聞かれるので、**エンティティ**を展開したあと、[Common Data Service編](https://qiita.com/miokawa/items/da330e778afabf46579d)で作成したテーブルを検索、チェックを入れて、**読み込み**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/fe2b8a26-3b8a-0d8a-c035-126a4c5190a1.png)

こんな感じの画面になったら、レポート作成スタートです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/721c4c67-0aef-ebfa-dddf-c95e0f0b8655.png)

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

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

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

<img width="500" alt="サンプルスクショ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/1875f191-9402-f032-305a-53c55f5cdd42.png">

この時点で、自動的に何か出ますので、グラフを拡大しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/98c81f1d-9d65-f492-a626-8679ff98e9b6.png)


## 5.3 視覚化
ここからは好みとセンスだと思うのですが、視覚化の部分で**折れ線グラフおよび集合縦棒グラフ**を選択し、**Avg.Heart Rate**を**線の値**に移動させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/603acbab-cc74-868d-cc20-59c6e4aa3e91.png)

タイトルが自動生成されていますが、ちょっとわかりにくいので、**書式**の**タイトル**から**タイトルテキスト**のボックスに適切な文言を入力し、中央揃えします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ba635f89-4db7-fbb5-5a18-2b58965e8958.png)

同じように、**Y軸のタイトル**もわかりにくいので、変更しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/dacf9312-1e40-72fe-ef16-9c010fae05bf.png)

あと、凡例もわかりにくいのですが、こちらはフィールドの部分の各データの名前を変更したら連動して変更できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/a17fee2b-f925-c536-8c74-c3f7c378631e.png)

他にもいろいろできるのだと思いますが、一旦は一連の動作を確認するためこのくらいにして、ファイルから名前を付けて保存をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ba769306-2962-b305-cf50-8614d5c2294e.png)

そしてファイルから**発行**、**Power BIへ発行**、を選択します。Power BIへのサインインと、ワークスペースの選択もします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/5a2a8789-623d-75fc-4955-9c48bf8ee93f.png)


## 5.4 ダッシュボード
ここから先は、**Power BI（ウェブアプリ）**で作業をします。[こちら](https://powerbi.microsoft.com/ja-jp/landing/signin/)からサインインし、左側の**ワークスペース**から先ほどPower BIに発行の際に選んだワークスペースとレポートを選択します。先ほどPower BI Desktopで作成、発行したレポートが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/86c4438a-8972-42c7-7e8c-fff2c152109b.png)


Power Apps上で見られるようにするためには、**ダッシュボードにピン留め**を選んで、タイルとして登録する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/3ec016fa-8b76-08be-14b5-d66e3596575e.png)

**新しいダッシュボード**を選択し、ダッシュボードの名前を入れたら、**ライブをピン留めする**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/01eb5a05-84d3-fa54-9467-ea87398fcc94.png)

すると、**ダッシュボード**の下に、作成したダッシュボードが出てきて、タイルが表示されます。
これちょっと見ずらいんですが、「ダッシュボード」～「レポート」の間に出ているのがダッシュボードとして登録されたもので、「レポート」～「ブック」の間に出ているものがレポートとしてしか登録されていないものっぽいです。見出し（レポート/ダッシュボード）と各アイテム（作ったレポートやダッシュボードの名前）のフォントが似ているからぱっと見わかりにくい…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/e97c6271-a64f-bd2d-d1df-32bffe0c5dd8.png)

タイルの左上にタイトルが出ているのがちょっと邪魔なので、消そうと思います。
タイル右上の三点リーダボタン（マウスホバーで出てきます）から、**詳細設定**を選び、**タイトルとサブタイトルの表示**のチェックボックスをオフにして、**適用**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/812c64db-f789-63ab-108b-25358fea5fa3.png)


## 5.5 Power Appsにタイルを設定
ここで、[Power Apps編](https://qiita.com/miokawa/items/0f3dc6ac6a1be01984d6)で作ったPower Appsの編集画面に移動し、空っぽだったPower BIの部品に、先ほど作ったPower BIのダッシュボードとタイルを参照するように設定し、保存、発行します。
これで一連の作業は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/5e7bb44a-e58c-c9e7-9d15-b74ded5a5278.png)

# 6.次のステップ
iPhoneに[Power Appsをダウンロード](https://apps.apple.com/jp/app/power-apps/id1047318566)し、実際にスクショアップロード～Power BIでデータ確認まで試してみたり、（私はセンスがないのであまりできないですが…）デザインに凝ってみたりしてみましょう！