【Power BI】Power BI で知育アプリを作る

# はじめに

### 知育アプリ作りが楽しい

**Power Apps で知育アプリを作って、娘にプレイさせるのが趣味**になっています。思いついたことをすぐに形にできる Power Apps は、シンプルな UI の知育アプリを作ることに活用できます。コントロールや関数の学習にもなるので、意外と侮れません。

* ★アイコンの色を変えるアプリ

https://techblog.ap-com.co.jp/entry/2023/09/06/171725

* 身支度チェックリストアプリ

https://techblog.ap-com.co.jp/entry/2023/11/28/104059

* 水族館の生き物を記録するアプリ

https://techblog.ap-com.co.jp/entry/2023/12/19/141017

* カタカナクイズアプリ
* 都道府県クイズアプリ
* 動物の鳴き声再生アプリ

### Power BI での可視化も楽しい

一方で、**今年は [Microsoft Power BI Advent Calendar 2023](https://qiita.com/advent-calendar/2023/powerbi) にも参加**させていただき、Power BI やデータサイエンスの学習にも手を出していました。

https://qiita.com/AnPanda/items/008182da73c2ff8d9448

https://qiita.com/AnPanda/items/9ec3964473a3215bcd49

### 知育アプリ × Power BI

こんな感じの活動をしていた結果、**「Power BI でも知育アプリが作れるんじゃね…？」** と思いついてしまったので、チャレンジしてみました。

# 作ってみるアプリ

**Power Apps で作った「★アイコンの色を変えるアプリ」を、Power BI でリメイク**します。Power Apps のスライダー コントロールが、Power BI のスライサーと同じような機能を持っており、リメイクできそうな感じがしたので。

https://techblog.ap-com.co.jp/entry/2023/09/06/171725

* Power Apps のスライダー コントロール(縦に4つ配置)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/b131e9b6-e687-0cdd-2223-290a9583587e.png)

* Power BI のスライサー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/3fa78248-4bfb-10f6-a748-5a923e619a1a.png)

# 諦めたこと

### 星形の図形がない

**Power BI では星形の図形が利用できなかったので、代わりにハート形**を使用しました。三角形を組み合わせて星形を自作することもできそうですが、本筋とは外れるのでハートで。

Power Apps と同様に、**テキストボックスでも★を表示させてみましたが、サイズが小さすぎ**て見栄えがしませんでした。テキストボックス内のフォントサイズは96まで、タイトルは60までの制約があるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/13a59342-b080-a173-c3a2-721ddd86234e.png)


### 図形の大きさが変えられない

**図形の大きさを変えるプロパティには、条件付き書式を設定することができません**でした。大きさを変更するスライダーは諦めることに。

**バブルチャートのサイズとスライサーを関連づければ実現できるかも**しれません。その場合の図形は、マーカーとして選択できる四角や丸になります。

# データ作成

**Power BI では、何はなくともデータが必要**です。今回のアプリに必要なデータを Excel のテーブルとして作成していきます。

### 必要なデータ：RGB

**まず、ユーザーが変更できる値として、Red, Green, Blue の値は必要**ですね。三原色それぞれの値の大きさによって、図形の色が決まります。

**Red, Green, Blue の各値を 0～7 の 8段階として作成**していきましょう。これで 8×8×8=512通りの色が表現できます。

### 必要なデータ：HEX値

**Power Apps では、スライダー コントロールで指定した Red, Green, Blue の各値を、`RGBA`関数を使って色に変換**していました。

`RGBA(Slider_Red.Value, Slider_Green.Value, Slider_Blue.Value, 1)`

**Power BI(DAX) には、RGB を指定して色を変える関数が見当たらない**ため、別の方法を考える必要があります。

調べてみると、**条件付き書式の色指定において、HEX値が利用可能**であることがわかりました。HEX値とは、色彩の表現方法の一種で、RGB の各要素が16進数で表記されています。たとえば`#FF0080`だったら、

* Red ： `0xFF` → 255
* Green ： `0x00` → 0
* Blue ： `0x80` → 128

を表しており、「赤が強く、緑はナシ、青は中間」で赤みの強い紫になります。

**HEX値が書かれたフィールドを条件付き書式の値として指定することで、その HEX値に対応した色に設定**できます。複雑な条件付き書式を設定するときには有用そうなテクニックです。

https://analytic-vba.com/power-bi/advanced-technique/multi-color/

上記より、**Red, Green, Blue の各要素と、それらの組み合わせに対応する HEX値を持ったテーブルを作る**ことで、色を表現できると考えました。Red, Green, Blue が入力値、HEX値が出力値になるイメージですね。

### テーブル作成：RGB

**必要なデータを持ったテーブルを、Excel で作成**します。できあがりはこのようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/086ea66b-7a87-cdaa-9fde-995cb604f5ed.png)

**Red, Green, Blue の各要素は、3桁の 8進数と捉えて小さい順になるように**並べました。小さい桁の Blue がひとつずつ増えていき、8になったら繰り上がって 0に戻って、次の Green の桁が1増える、みたいなイメージです。

**8段階(512レコード)程度なら手作業で作成することも可能ですが、Excel の関数で出力させる方が確実**です。過去の自分の投稿を参考に、`INT`・`MOD`・`ROW`関数を使って式を作成しました。

* Red：`INT( (ROW() - 2) / POWER(8, 2) )`
（8×8=64行ごとに1増える）
* Green：`MOD( INT( (ROW() - 2) / 8), 8)`
（8行ごとに1増える、を8回繰り返す）
* Blue：`MOD( ROW() - 2, 8)`
（0,1,…,7 を繰り返す）

https://qiita.com/AnPanda/items/ee6380885938b581de99

### テーブル作成：HEX値

**Excel での 10進数から 16進数への変換は、`DEC2HEX`関数**を使います。Red, Green, Blue の各値を 16進数に変換して、テキストとして連結しました。先頭の`#`は、HEX値を表す符丁のようなものです。

RGB の各要素が取りうる値は 0～255 の 256段階ですが、今回は 8段階にしているので、**1段階大きくなるごとに 256÷8=32 が加算される**形になります。また、最小の 0段階目では0、最大の 7段階目では 32×7=224 なので、全体的に低い方の値に寄っているといえます。1段階の半分 32÷2=16 を足すことで、最小16・最大240 とバランスが取れた分布になります。

```
="#" &
DEC2HEX(A2 * 32 + 16, 2) &
DEC2HEX(B2 * 32 + 16, 2) &
DEC2HEX(C2 * 32 + 16, 2)
```

**データができあがったら、Excel でテーブルとして設定**しておくのも忘れずに。

# データ取り込み

**先ほど作成した Excel ファイルを指定し、Power Query でテーブルを読み込み**ます。Red, Green, Blue 列が整数型、Hex 列がテキスト型になっていることを確認しておきましょう。他は特に整形する必要はありません。テーブルがひとつしかないので、リレーションシップも不要。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/595ab3f5-9e84-0d0b-6e16-413e0227ab13.png)

### メジャー作成

**最も大きな HEX値を返す、シンプルなメジャーを作成**しておきます。

```
Hex Max = MAX(color84[Hex])
```

**RGB の値をスライサーでフィルターしたとき、値が最大のものを返させる**ようにするためです。メジャーを作らなくても機能しますが、暗黙のメジャーを避けた方がいいかなと思いまして。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/602de81b-57a1-0881-31e1-c8268bef9b6c.png)

# ビジュアル作成

### スライサー

**まずは、RGB の値を決定するためのスライサーを作成**しましょう。挿入タブからスライサー ビジュアルを追加して、フィールドとして Red を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/8e17a82b-d765-18e7-b0f9-c30191d85453.png)

**スライサー設定 ＞ オプション ＞ スタイル を「以下」にすると、最小値が固定になり、最大値だけを設定できる**ような形になります。タイトルなどの余計なモノは非表示にしましたが、数値を入れるボックスは非表示にできず…

**Red のスライサーができたら、ビジュアルをコピー**して Green・Blue のスライサーも作成します。どの色のスライサーなのかがわかるように、スライダー ＞ カラー に色を設定してあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/5ff34686-bb01-7cbc-b30d-79c47dc51ad3.png)

### 図形

**続いて、挿入タブから、ハート形の図形を作成**します。矢印や吹き出しはありますが、星はないのがちょっと意外。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/9a20b15f-422f-bdb0-3451-844128a01d1d.png)

**塗りつぶしの色は、図形のスタイル＞フィル から変更**できます。単色の場合は色を選択すればよいですが、今回は *fx*ボタンから条件付き書式を設定していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/cebd1d9c-b3a4-7f55-7ee6-72afc8ef2e61.png)

**データ形式スタイルを「フィールド値」に、基準にするフィールドをメジャー「Hex Max」に設定**します。これで、この図形の塗りつぶしの色は Hex Maxメジャーの値(HEX値)になる、という条件付き書式を作成できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/b907c484-5ed1-61ef-9950-b18a857160c3.png)

# 動作確認

**スライダーを動かすと、ハート形の色が変化する**ことが確認できます。スライサー変更後、ちょっとタイムラグを感じますね…

![bi_chiiku.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/ef64732a-1d05-c2fd-7b3e-2487dd243431.gif)

**データがどのようにフィルターされているかを、カードやテーブルを使って確認**すると、Hex Maxメジャーの挙動がわかりやすくなります。Hex 列の値で降順ソートして、一番上に来ている(一番大きい)ものを取得している、といった動きです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/f95522f8-ddc0-eb33-9a03-0e065280bae6.png)

# モバイルレイアウト作成

**娘にプレイさせる知育アプリとしては、スマホの表示に最適化されている必要**があります。
タブレット買え


**Power BI では、スマホアプリでの表示に最適化したモバイルレイアウトを作成**することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/4b0786a8-344a-35b5-355d-83a6120a84a7.png)

**作成済みのビジュアルを左の画面上に配置**して、スマホでも表示されるレポート画面を作成していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/f713fe3c-36e6-a73b-671b-7795778018d4.png)

**レポートが完成したら、Power BI サービスに対して発行**します。これで、Webブラウザやモバイルアプリから Power BI サービスにアクセスした際に、レポートとして閲覧できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/c4ccf854-9ab9-b0c4-5608-1c9689b34aff.png)

**Power BI のモバイルアプリから実行してみる**と、こんな感じ。アプリ作成に特化した Power Apps での挙動と比べると、色々と気になるところはありますが、ひとまず形にはなったかなと！

![1704350753827.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/2b5edd38-0cef-4f97-b188-2ed946456e67.jpeg)

# おわりに

**本来は Power BI でやるべきでないことを無理矢理やってみることで、Power BI でできること・できないことを学ぶ機会になった**と思います。フィルター コンテキストとか、先に学ばなければならないことはたくさんあるんですけどね…

**データを Excel のテーブルから読み込むのではなく、Power Query を使ってゼロから作成する**ことにもチャレンジしてみます。今回は Power Query の出番がほとんどなかったので。

(2024/01/22 追記：チャレンジしました)

https://qiita.com/AnPanda/items/8d38a001e6b7447ec68d

JPPGB の過去資料を拝見していたら、**1～9 を順番に押していくゲームや、ヒット＆ブローなんかも Power BI で作れるのでは**と企んでいます。Power BI ではサウンドやタイマーが使えないので、エンターテインメント性の低い硬派なゲームになりそう…

https://jppgb.connpass.com/