はじめに

知育アプリ作りが楽しい

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

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

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

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

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

Power BI での可視化も楽しい

一方で、今年は Microsoft Power BI Advent Calendar 2023 にも参加させていただき、Power BI やデータサイエンスの学習にも手を出していました。

知育アプリ × Power BI

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

作ってみるアプリ

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

Power Apps のスライダーコントロール(縦に4つ配置)
Power BI のスライサー

諦めたこと

星形の図形がない

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

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

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

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

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

データ作成

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値に対応した色に設定できます。複雑な条件付き書式を設定するときには有用そうなテクニックです。

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

テーブル作成：RGB

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

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 を繰り返す）

テーブル作成：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 列がテキスト型になっていることを確認しておきましょう。他は特に整形する必要はありません。テーブルがひとつしかないので、リレーションシップも不要。

メジャー作成

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

Hex Max = MAX(color84[Hex])

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

ビジュアル作成

スライサー

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

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

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

図形

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

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

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

動作確認

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

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

モバイルレイアウト作成

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

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

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

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

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

おわりに

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

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

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

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