Power BI公式サンプルの「Intro」画面を作る方法：魅力的な導入画面の作り方２／２

前回「Power BI公式サンプルの「Intro」画面を作る方法：魅力的な導入画面の作り方１／２」の続きです。

長いため、２記事に分けました。

●前回「Power BI公式サンプルの「Intro」画面を作る方法：魅力的な導入画面の作り方１／２」
・はじめに
・「Intro」のページ概要
・データの取り込み
・テーマを参照
・背景壁紙
・説明文言
・Download PBIX ボタン
・縦棒
・輪っか

●今回の記事
・Design Factors
・ブックマーク
・縞模様の行の色

Microsoft Power BI Desktop

バージョン: 2.116.622.0 64-bit (2023 年 4 月)

サンプルデータ：Sales_20_26_20Returns_20Sample_20v201912.pbix

で確認しました。バージョンにより、状況が異なる可能性があります。

Design Factors

右側の 「Design Factors」 部分を作り込みます。

何もないところをクリックして、
視覚化 > ビジュアルにデータを追加する > マトリックス
にて、マトリックスを配置します。

視覚化 > ビジュアルにデータを追加する > 行
のところに、Details テーブルの Design Factor 列、Topic 列を追加します。

行に追加した Design Factor と Topic について、× ボタンの隣のボタンをクリックして、この視覚エフェクトの名前変更 をクリックします。

以下のように名前を変更します。
Design Factor→Design Factors
Topic→Category

Design Factor→Design Factors の変更は、マトリックスの見た目（一番上の "Design Factors" という文字）に影響します。

Topic→Category の変更は、特に意味は無さそうでした。

各設定を以下のように設定していきます。

書式 > 全般 > プロパティ > サイズ > 高さ
760

書式 > 全般 > プロパティ > サイズ > 幅
500

書式 > 全般 > プロパティ > 位置 > 横
764

書式 > 全般 > プロパティ > 位置 > 縦
0

書式 > 全般 > プロパティ > パディング
上0

書式 > 全般 > タイトル > タイトル
ON

書式 > 全般 > タイトル > テキスト > fx
データ形式スタイル：フィールド値
基準にするフィールド：最初の Empty（Tooltip Info の Empty 列）
概要：第１

この設定により、"Design Factors" の上に空白の隙間を作ります。ただ、必須ではなく、なぜ、Empty 列を読み込ませているのか意図が分かりませんでした。

書式 > 全般 > 効果 > 背景 > 色
#061738（かなり暗い青）

書式 > 全般 > 効果 > 背景 > 透過性
61%

書式 > 全般 > ヘッダー アイコン
OFF

書式 > ビジュアル > スタイルのプリセット
なし

書式 > ビジュアル > グリッド > 罫線 > カラー
白

書式 > ビジュアル > グリッド > 罫線 > 幅
4

書式 > ビジュアル > グリッド > 罫線 > セクション
列ヘッダー
下のチェック無し

書式 > ビジュアル > グリッド > 罫線 > セクション
行見出し
右へ移動→下

書式 > ビジュアル > 値 > 値 > フォント
Segoe UI 12

書式 > ビジュアル > 値 > 値 > テキストの色
#FFFFFe

この設定、白（#FFFFFF）ではないのがかなり重要です。後の別セクションで説明します。

書式 > ビジュアル > 値 > 値 > 代替テキストの色
白

書式 > ビジュアル > 値 > オプション > 値を行に切り替えます
ON

書式 > ビジュアル > 列見出し > テキスト > フォント
Segoe UI Bold 13

書式 > ビジュアル > 列見出し > テキスト > テキストの色
白

書式 > ビジュアル > 列見出し > テキスト > テキストの折り返し
OFF

書式 > ビジュアル > 列見出し > オプション > Auto-size width
OFF

旧バージョンでは、「幅の自動サイズ調整」のようですが、なぜか英語に戻ったようです。

書式 > ビジュアル > 行見出し > テキスト > テキストの色
#605E5C

書式 > ビジュアル > 行見出し > テキスト > 縞模様の行の色
ON

最初からなっています。

書式 > ビジュアル > 行見出し > テキスト > テキストの折り返し
OFF

書式 > ビジュアル > 行見出し > +/- アイコン > カラー
#5B7BD6（青系）

書式 > ビジュアル > 行見出し > +/- アイコン > サイズ
9

書式 > ビジュアル > 列の小計 > 値 > テキストの色
#2E3E6B（暗い青）

書式 > ビジュアル > 列の小計 > 値 > 背景色
白

書式 > ビジュアル > 列の小計 > 値 > ラベルに適用
ON

書式 > ビジュアル > 行の小計 > 設定を適用する > 行レベル当たり
ON

書式 > ビジュアル > 行の小計 > 設定を適用する > 行レベル
すべて

書式 > ビジュアル > 行の小計 > 値 > テキストの色
#2E3E6B（暗い青）

書式 > ビジュアル > 行の小計 > 値 > 背景色
白

書式 > ビジュアル > 行の小計 > 値 > ラベルに適用
ON

書式 > ビジュアル > 行の小計 > 設定を適用する > 行レベル
Design Factors

書式 > ビジュアル > 行の小計 > 行 > 小計の表示
OFF

ここで、行レベルの選択に Category を出現させるために＋ボタンで開いておきます。

書式 > ビジュアル > 行の小計 > 設定を適用する > 行レベル
Category

書式 > ビジュアル > 行の小計 > 行 > 小計の表示
OFF

フォーカスモードへ移って、列幅調整を行います。

レポートに戻る をクリックして、戻ります。

このままの場合、"ANALYSIS", "AUDIENCE", "PLATFORM", "UI/UX" の並び順がサンプルと異なります。
データの並び替え設定を行います。

データビュー へ移動して、Details テーブルの Design Factor 列をクリックし、

列ツール > 列で並べ替え > DFSort
をクリックします。

Design Factor 列の項目が DFSort の数字順に並び替えられます。

同様に、Topic 列をクリックし、
列ツール > 列で並べ替え > TSort
をクリックします。

ブックマーク

輪っか作成の時にスキップした アクション > ブックマーク について、設定していきます。

まず、ブック―マークとは、表示機能の一部で、表示設定を覚えておく機能です。

ブック―マークは、表示 > ブックマーク で表示できて、サンプルは、大量に作成されています。

今回、
上の輪っかをクリックしたときに発動するブック―マーク：IntroT1
真ん中の輪っかをクリックしたときに発動するブック―マーク：IntroT2
２つのブック―マークを作成します。

ブック―マーク IntroT1 は、現在の画面（右側に"Design Factors"表示）のブック―マーク、
ブック―マーク IntroT2 は、以下の画面（右側に動画 gif 表示）のブック―マーク
とします。

まず、右側に動画 gif 表示の画面を作り込みます。

サンプルの方は、Image Pro by CloudScope が使われていて、Image url が設定されていませんでした。そのため、正常に表示されません。

「Microsoft Power BI ブログ」を見ると、円の中に画像が表示されています。

この画像は、
データビュー > Details 右クリック > 新しいメジャー

Info Tooltip = "https://imagizer.imageshack.com/img923/4052/lLHy3U.gif"
Info Tooltip 2 = "https://imagizer.imageshack.com/img921/2483/uMs9ZQ.gif"

で URL を登録すると思われますので、登録しておきます。

Info Tooltip 2 は、一番下の輪っかをクリックしたときの画像と思われ、今回、一番下の輪っかの作成は見送るため、使いません。

ビジュアルは、カスタムビジュアルの
Apps > Image Pro by CloudScope
を使っていると思われるのですが、これを使うと、

Remote images not supported
This is the certified version of the Image by CloudScope visual.
Because of ...
とエラーになり、よく分かりませんでした。（サンプルの方は、プロパティを見ることができないため、想像でやるしかない状況です。）

Apps > Image by CloudScope
を使うことにしました。
とりあえず、ファイルからインポートして、配置します。

視覚化 > ビジュアルにデータを追加する > Image url に
Info Tooltip を設定します。

その後、以下のようにプロパティを設定します。

書式 > 全般 > プロパティ > サイズ > 高さ
760

書式 > 全般 > プロパティ > サイズ > 幅
500

書式 > 全般 > プロパティ > 位置 > 横
764

書式 > 全般 > プロパティ > 位置 > 縦
0

書式 > 全般 > プロパティ > パディング
上 0

書式 > 全般 > 効果 > 背景 > 色
#061738（かなり暗い青）

書式 > 全般 > 効果 > 背景 > 透過性
61%

以下、円部分の設定ですが、適当です。位置を上に持ってきて、円の左の欠けた部分をなくしたかったですが、やり方が分かりませんでした。

視覚化 > ビジュアルの書式設定 > ビジュアル > Image options
ON

視覚化 > ビジュアルの書式設定 > ビジュアル > Image options > Image fit
Horizontal

視覚化 > ビジュアルの書式設定 > ビジュアル > Image options > Border color
白

視覚化 > ビジュアルの書式設定 > ビジュアル > Image options > Border width
5

視覚化 > ビジュアルの書式設定 > ビジュアル > Image options > Show as circle
ON

挿入 > テキストボックス
でテキストボックスを配置して、とりあえず、文言をサンプルからコピー＆ペーストしておきます。

文字の色が白いため、選択しないと見えません。

追加したテキストボックスを選択して、以下のように設定します。

書式 > 全般 > プロパティ > サイズ > 高さ
176

書式 > 全般 > プロパティ > サイズ > 幅
419

書式 > 全般 > プロパティ > 位置 > 横
813

書式 > 全般 > プロパティ > 位置 > 縦
544

書式 > 全般 > プロパティ > 詳細設定オプション > レイヤー順序の維持
ON

書式 > 全般 > 効果 > 背景
OFF

ここまでで、以下のようになります。

前述の通り、動画gifと文字が重なって、本来の状態ではないですが、正確な再現方法が不明です。

ここまでで、右側に "Design Factors" と 動画 gif 表示部分が両方表示されています。
ここで、ようやく、ブックマークの話になります。

まず、ブック―マーク IntroT1 の画面、"Design Factors" だけの表示にします。

表示 > 選択項目
をクリックして、
テキスト ボックス
Image by CloudScope
のところの目のアイコンをクリックして、非表示にします。

"Design Factors" だけの表示になったため、
表示 > ブックマーク > 追加
をクリックして、ブック―マークを追加します。

ブックマーク名は、ダブルクリックして、IntroT1 と名前を変更します。

次に、ブック―マーク IntroT2 の画面、動画 gif 表示部分だけの表示にします。

表示 > 選択項目
をクリックして、
テキスト ボックス
Image by CloudScope
のところの目のアイコンをクリックして、表示にします。

"Design Factors"
のところの目のアイコンをクリックして、非表示にします。

何も書かれていないため、分かりにくいですが、マウスを当てると、どこの部分か分かります。

動画 gif 表示部分だけの表示になったため、
表示 > ブックマーク > 追加
をクリックして、ブック―マークを追加します。

ブックマーク名は、ダブルクリックして、IntroT2 と名前を変更します。

ブックマークを追加したら、上の輪っか、真ん中の輪っかをクリックして、ブックマーク切り替えが発動するようにします。

● 上の輪っか

書式 > ボタン > アクション
ON

書式 > ボタン > アクション > アクション > 型
ブックマーク

書式 > ボタン > アクション > アクション > ブックマーク
IntroT1

● 真ん中の輪っか

書式 > ボタン > アクション
ON

書式 > ボタン > アクション > アクション > 型
ブックマーク

書式 > ボタン > アクション > アクション > ブックマーク
IntroT2

完成です！

ここまでで、以下のようになります。

縞模様の行の色

これに気付くのに難儀したのですが、
書式 > ビジュアル > 行見出し > テキスト > 縞模様の行の色
ON
かつ、
書式 > ビジュアル > 値 > 値 > テキストの色
#FFFFFe（白ではないが、限りなく白に近い色）

書式 > ビジュアル > 値 > 値 > 代替テキストの色
白（#FFFFFF）

のため、文字全体が白く見えます。

例えば、
書式 > ビジュアル > 値 > 値 > テキストの色
を白（#FFFFFF）にしてしまうと、縞模様ではないため、

文字の色が

書式 > ビジュアル > 行見出し > テキスト > テキストの色
#605E5C

になってしまいました。

一方、
書式 > ビジュアル > 行見出し > テキスト > 縞模様の行の色
OFF
かつ、
書式 > ビジュアル > 行見出し > テキスト > テキストの色
白
で良いような気がしますが、なぜ、そうしていないのか、意図が分かりませんでした。

以上！