【Power BI】都道府県データ比較クイズ

概要

昨年に続き Power BI を使った知育アプリとして、都道府県クイズを作成しました。

↑「おわりに」で、知育アプリは Power Apps で作ろう、とか言ってるのに、懲りてない…

コンセプト

コンセプトは下記のとおり。

10月に、Power BI で「ヒットアンドブロー」を作成して参加した 【JPPGB】ゲーム作成コンテスト #2 の時点で固めていました。

ゲームとしては単純なものになりますが、ブックマークや条件付き書式を利用した UI 作りと、外部データ取り込みを活かした出題について、重点的に取り組もうと考えていました。

プレイ動画

作成したレポートを Power BI Service で実行した動画です。

画面構成

解答未選択状態：問題文、解答の選択肢、問題番号を選ぶ 5 つのボタンを表示

解答選択済み状態：正誤判定、各都道府県の人口を追加で表示

主な仕様

• 人口が多い方を答える
  • 面積や人口密度のバージョンも作りたい
• 選択肢は 2 つ
• 問題数は 5 問
  • セマンティックモデルの更新を行うことで、内容が更新される
• 正解数の記録機能はなし

データ準備

e-Statの準備

都道府県の人口や面積のデータは、e-Stat から取得してきます。Power BI から e-Stat に接続する API を利用するためには、e-Stat の利用登録(無料)が必要です。利用登録・ログイン後、アプリケーションID を発行しましょう。

人口データは、国勢調査(2020) から下記を取得しました。同年のデータにも同じようなデータが多数あって、正直どれを使うのが正解なのかわかってません…

DB のボタンを押すと、項目を選択してフィルターできる画面に遷移します。表示項目選択を見てみると、3 の項目が全表示になっており、全国の合計から市区町村レベルまでのデータがすべて含まれている状態になっています。

使わないデータは取得しないのが鉄則。3 の「項目を選択」から、全解除 → 北海道を選択 → 同一階層の選択 で、都道府県レベルだけを選択して絞り込みます。

ビューを調整したら、画面右側の API ボタンを押すと、指定した条件に基づいたリクエスト URL が表示されます。ファイル形式は CSV にしています。

表示された URL は、appId= のところが空欄になっています。先ほど発行したアプリケーションID を = の後ろに追記して、データを取得する URL が完成。ひとまずブラウザで実行すると、下記のようなデータを取得できることが確認できました。

取り込み・データ整形

Power BI の Power Query から、作成した URL を呼び出します。ソースは Web で。

不要な列や余計なヘッダー行を削除して、シンプルに整形しました。

問題作成

やりたいことは、作成した都道府県テーブルからランダムで 2 行抽出することです。

今回は、都道府県人口テーブルをランダムに並び替えて、

• 1 問目：1 番目 と 2 番目で比較
• 2 問目：3 番目 と 4 番目で比較
• 3 問目：5 番目 と 6 番目で比較
• 4 問目：7 番目 と 8 番目で比較
• 5 問目：9 番目 と 10 番目で比較

の形で出題することにしました。

乱数テーブル

都道府県テーブルを並び替えるために、乱数テーブルを作成します。ランダムな数値の作り方は、下記を参照。

都道府県コード(1～47) に対して、乱数が割り当てられるような形にしました。

問題選択用パラメータ

問題番号 1 ～ 5 から選択できるように、パラメータを作成します。

問題番号 = GENERATESERIES(1, 5, 1)

スライサー

パラメータを作成すると、同時にスライサーも作成してくれます。

スライサーの弱点

が、このスライサーというビジュアル、選択済みの色を指定できなかったり、フォントの色を条件付き書式で変化させることができなかったり、見た目のカスタマイズができない箇所が意外と多いんです。(普段は困らないですが)

さらに、スライサーを選択したときに他のビジュアルの表示・非表示を切り替える、といったことができません。問題 1 に解答したあと、問題 2 に切り替えると、問題 1 の解答状態や表示した正誤判定が残ってしまうわけです。

こういった表示・非表示の切り替えを細かく制御したい場合は、後述のブックマークを使う必要があります。

都道府県名の表示

問題に選ばれた都道府県名を表示する方法として、下記のメジャーで乱数テーブルから都道府県コードを取得してきます。TOPNSKIP が想定したように動作せず、TOPN の二段構え。なんか他にやりようがあるんじゃないかという気はしてます…

対象1_都道府県コード = 
VALUE(
    TOPN(
        1,
        SELECTCOLUMNS(
            TOPN(
                VALUE(SELECTEDVALUE('問題番号'[問題番号]) * 2 - 1),
                'ランダム47',
                'ランダム47'[Rand],
                ASC
            ),
            [Number]
        )
    )
)

正誤判定

ブックマークの説明の前に、正誤判定のロジックを作成しておきます。

選択用テーブル

都道府県名を左右に並べてどちらかを選択する、という UI なので、選択肢は左右の矢印としました。問題番号で利用したパラメータは数値型に限定されるため、こちらは新規テーブルとして作成してみました。

選択肢 = 
DATATABLE(
    "矢印", STRING,
    "順序", INTEGER,
    {
        {"←", 0},
        {"→", 1}
    }
)

2 つの都道府県名の間に、左右を選択するスライサーを配置して、どちらかを選ぶような UI を初期版として作成しました。

なお、完成版ではスライサーは表示せず、都道府県名を直接クリックする形になっています。

メジャー

矢印の選択と、出題の都道府県の人口比較の結果によって、正解か間違いかを出力するメジャーを作成します。どちらも選択されていない場合は、-を出力。

正誤 = 
VAR Arrow = SELECTEDVALUE('選択肢'[矢印])
RETURN
IF(
    OR(
        Arrow = "←" && [対象1_人口] > [対象2_人口],
        Arrow = "→" && [対象1_人口] < [対象2_人口]
    ),
    "正解！",
    IF(ISBLANK(Arrow), "-", "残念…")
)

カード

正誤メジャーを表示するカードを作成。メジャーの値によって文字色を変えています。

都道府県の人口を表示するカードも追加。

表示・非表示調整

表示・非表示の調整は、前述のとおりブックマークで行います。まずはブックマークを割り当てるためのボタンを作成していきます。

図形

プレイヤーがクリック・タップするボタンを図形として作成します。スライサーのボタンと同じ分だけ図形を作成するイメージで、問題選択で 5 つ、解答選択で 2 つの図形を作成しました。

対応するスライサーの選択された値によって、図形の色を変化させます。対応する値が選択されたときは緑系、そうでないときは灰色系に。

ブックマーク

図形が作成できたら、表示・非表示を調整したブックマークを作成します。先ほどの図形と同じく、問題選択で 5 つ、解答選択で 2 つのブックマークが必要です。

問題選択

• 正誤と人口：表示
• 矢印スライサー：無選択
• 問題スライサー：対応した問題を選択

解答選択

• 正誤と人口：非表示
• 矢印スライサー：対応した矢印を選択
• 問題スライサー：変更なし

解答選択のブックマークが、問題スライサーに影響を与えないようにするのがポイント。「選択したビジュアル」で、「データ」のチェックを外した状態で更新することで、対象のスライサーの選択内容を維持できます。

一方、矢印スライサーは対応した矢印が選択された状態にしたいので、「データ」のチェックを入れた状態で更新します。

矢印・問題スライサー

最終的には、この 2 つのスライサーは常時非表示にしました。非表示でもブックマークによるスライサーに対する値の選択はちゃんと実行され、表示されるデータにも反映されます。

背景

仕上げに、背景画像を設定しました。

Google Earth でいい感じの角度に調整して、画面キャプチャしたものです。

はじめは ChatGPT に作成してもらったんですが、頑なに北方領土を入れてくれなかったり、長崎県が島になったりと思うようにいかず。細かいところまで正確に描写することを AI に期待するのが間違ってました。

モバイルレイアウト

前作では未対応だったモバイルレイアウトも作成しました。背景画像を置いていない(置けない？)ため、不正解のときの文字色を少し濃くしています。

スマホで実際に動作させた画像。下に空間があるのは気になりますが、動作は特に問題ありませんでした。

今後

面積クイズ

今回は人口の多少を比較するだけですが、面積のデータも取得してあるので、面積比較モードも実装したいと考えています。フィールドパラメータでいけそう、と考えてはいますが、条件付き書式でフィールドパラメータが扱えるかなど要検証。

大都市データの追加

最も人口の少ない都道府県は鳥取県(52万人) で、これよりも人口が多い市は 24 あります。これらの市を追加するとまた新しい発見があっておもしろそうかなと思っています。かつて船橋市に住んでいたときに、船橋市の人口は鳥取県や島根県より多い、と知って驚愕だったので。

ひらがなモード

本作を知育アプリとして長女にプレイさせたいと思い、漢字表記とひらがな表記を切り替える仕組みを検討しています。スライサーで 漢字/ひらがな を選択させて、その選択に応じて表示を変える形になると思います。

ブックマークをコードで扱いたい

Power BI でアプリっぽいモノを作ろうとすると、表示・非表示の調整のためにブックマークを駆使する必要があります。今回もちょっと込み入った設定をしているので、ブックマークの設定内容をコードで確認したいと思ったんですが、確認する方法が Power BI Desktop 内には見つかりませんでした。

レポートファイルを .pbix → .zip にすると、Report フォルダの Layout ファイルに Bookmark の記載があるので、ここに書かれていそうです。確認・編集できる外部ツールがあるのでは、と思っているので要調査。