[Power BI Tips] Power BI レポートのページを縦長にしたい - ページサイズの話

# よく聞かれるのでまとめておきます
今回紹介するのは新しい機能ではありません。ずいぶん前からできることなんですが、最近よく聞かれるので、まとめておきます。

なお、今回の内容が記載されている公式ドキュメントはこちらです。

**Power BI レポートにページ表示設定を適用する**
[https://docs.microsoft.com/ja-jp/power-bi/create-reports/power-bi-report-display-settings](https://docs.microsoft.com/ja-jp/power-bi/create-reports/power-bi-report-display-settings?WT.mc_id=DP-MVP-5002429)


# レポートのページは狭い
**Power BI** でレポートを日常的に作っていると感じることなのですが、レポートのページはデフォルトだとそんなに広くなく、むしろ狭いと感じます。デフォルト設定では **Power BI レポート**のページは **1280 x 720 (pixel)** です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/84cffdf0-b061-05d8-5a24-3c1eabe8d188.png)
ページの **[書式] - [ページサイズ]** を開くと、デフォルトでは上記のように **型 = 16:9** になっています。グレーアウトされていますが、その下に **幅 = 1280, 高さ = 720** と書いてあるのがわかります。つまり、型が **16:9** だと、**幅 = 1280, 高さ = 720** というプリセットされた値になるというわけです。

# あれ？でもレポートを Power BI Service で見るとレスポンシブじゃね？
ここまで読んで不思議に思われた方もいるかもしれません。Pwoer BI Service に発行されたレポートを日常的に見ている方は、レポートがいつも画面いっぱいに表示されているはずです。フルHDのディスプレイだろうと、4Kのディスプレイだろうと、画面いっぱいに表示されますよね。

そう、つまりデフォルトで**レスポンシブ**になっています。レスポンシブとは、いま表示されている物理的な画面サイズ（正確にはブラウザのサイズ）に合わせて、レポートの縦横のバランスが壊れないように調整して表示してくれるということです。なので、さきほどの **[ページサイズ]** の型が **16:9** と比率で表されていたのです。

でも、この設定だけではレスポンシブにはなりません。もうひとつ **[ページ表示]** という設定があります。これはレポート (pbix) のページに対する設定ですが、Power BI Desktop のリボンにあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/89e1d8c4-c612-90a2-2cda-b024a82cceb0.png)
リボンの [表示] - [ページ表示] の中です。

ここに以下3つの表示があります。

- ページに合わせる
- 幅に合わせる
- 原寸大

## ページに合わせる
デフォルトではこれが **ページに合わせる** になっています。ページに合わせるというのは、縦か横の内、どちらか一方がブラウザの表示領域に達したら、それ以上拡大しないということです。これは言葉で説明するよりも、試していただくとわかります。

例えば 
https://bit.ly/COVID-19-JP-2 
を開いてください。

※このレポートはデフォルトの設定（**型 = 16:9**）のまま発行されています

私が日本の新型コロナウイルスの状況をまとめて公開している Power BI レポートですが、いまブラウザで表示されたはずです。では表示されているブラウザそのもののサイズを変えてみてください。まずはブラウザの高さを縮める。次にブラウザの横幅を縮めてみる。いかがでしょうか。そうすると、

**縦か横の内、どちらか一方がブラウザの表示領域に達したら、それ以上拡大しない**

という意味がお分かりいただけたかと思います。これが **ページに合わせる** ということです。
言い換えると、**ブラウザがどんなサイズにされても常に1ページ全体を表示する**モードとも言えます。

![image_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/f7ac12f0-c6b1-dbcf-8a82-3c37873035ea.png)
![image_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/c0bf33d9-140d-4b12-3213-dbcf523faf11.png)

その際、**型 = 16:9** になっているページは、常に **16:9** という比率を守って、バランスが崩れないようにページ全体を拡大縮小してくれるということになります。

それでは他の2つはどんなもんでしょうか？

## 原寸大
わかりやすいのは**「原寸大」**ですね。ページのサイズを **型 = 16:9** のままで、**[ページ表示]** を**「原寸大」**にすると、常に **1280 x 720** で表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/e2cf1eb4-9dcf-d13e-160c-8d9138e661a9.png)
フルHDのディスプレイを使用していると **1920 x 1080** ですから、ブラウザの表示領域はそれより狭くなるくらいです。
**1280 x 720** のレポートを**「原寸大」**で表示すると、ページの上下左右にページの壁紙が見えることになります。

## 幅に合わせる
最後のひとつが**「幅に合わせる」**です。
これは何があっても、レポートの幅をブラウザの表示領域の横幅まで目一杯拡大して、表示します。
つまりこうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/a4b39c91-08a0-b6ed-9a4a-b30c53807288.png)
レポートの横幅をブラウザの表示領域の横幅に合わせて表示した結果、ページの下部が見えなくなってしまっていますが、同時にブラウザの右端に縦スクロールバーが表示されており、縦にスクロールすることができるようになります。

# 以上が基本。ここからが本題「レポートのページを縦長にしたい」
おそらく感のよい方なら、ここまでの仕様がわかればページを縦長にすることはできるはずです。
**「うむ、わかった。」**という方は、ここで離脱していただいて、もちろん構いません。

ここまでを応用すると、レポートのページを縦長にするには、

1. **[表示] - [ページ表示]** を **[幅に合わせる]** にする
1. ページサイズを **型 = カスタム** にして、高さをデフォルトの **720 ピクセル**以上にする

ということです。簡単ですよね。

さて、それでは確認してみましょう。
日本の人口と日本地図を表示した簡単なレポートを用意しました。ページは2ページあり、デフォルトのサイズ **型 = 16:9** で作成されたページと、**型 = カスタム、幅 = 1280、高さ = 1440** で作成したページです。

Power BI Service に発行して、表示するとこうなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/992c18f9-6a18-b3cb-7154-3d957e1a78cc.png)
↑ これがデフォルトのサイズ **型 = 16:9** で作成されたページ

![image_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/743ff52f-d197-57c5-3eab-f70f4c77ecc8.png)
↑ これが **型 = カスタム、幅 = 1280、高さ = 1440** で作成されたページ

2ページ目の縦長の方は、画像を繋げて1枚に見せていますが、実際には縦スクロールが発生してます。

# 覚えておいた方がよいこと
縦長のページの作り方がわかったら、あとは設定して **Power BI Service** に発行するだけ、なのですが、ここで押さえておいた方が良いと思うことを書いておきます。

1. ページのサイズはページごとの設定
1. **Power BI Desktop** で設定された状態が **Power BI Service** に発行されたレポートのデフォルトになる

慣れている方にとっては**「当たり前じゃん」**という内容ですが、レポートの定義に何が含まれ、**Power BI Service** での動作の何にどう影響するかって、皆さん意外に把握されていない印象です。
難しいことはなく、試せば誰でもわかることなので、ぜひ一度ご自身の手で試しておきましょう。

で、上記の１はいいですよね？
この記事で紹介した設定はページごとの設定です。レポート全体の設定ではありません。この記事の設定を今作成されているレポートの全ページに適用したいと思ったら、すべてのページで設定する必要があります。つまり、今作成されているレポートが全5ページで構成されているなら、5ページすべてで設定する必要があるということです。これから新規にレポートを作成するなら、1ページ作成してから、そのページをコピーすれば、設定が引き継がれるのでちょっと楽かもしれません。

続いて上記の２です。
今回紹介したページの設定だけではなく、**Power BI Desktop** でレポートを発行する際の設定は、基本的にすべて引き継がれて、**Power BI Service** に発行されます。つまり、そのレポートを **Power BI Service** で開いた時の初期表示時にこう表示されて欲しい、という設定をして、発行するべきだということです。これは、スライサーやフィルター、ブックマークの選択も含みます。

私もたまにやってしまうのですが、**Power BI Desktop** でテストをしていて、例えばスライサーでとある値を選択した状態で、発行すると、**Power BI Service** でレポートを開いた時に、その値でスライサーが選択された状態が初期表示になるということです。

この発行時に引き継がれる設定をひとつずつ挙げるのはちょっと面倒なので書きませんが、基本的に **Power BI Service** 上でレポートを見る人が変えられる選択は引き継がれると思っておいて、間違いないです。スライサーもフィルターもブックマークも、見る人が選択できるものです。そして、この記事で紹介した

- ページに合わせる
- 幅に合わせる
- 原寸大

も **Power BI Service** 上でレポートを見る人が切り替えることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/47e7bffd-7825-3d3d-e514-097989ac17ca.png)
画面右上の **[ビュー]** を開くと、ここで切替が可能です。

# 今回の内容を応用すると...
もうひとつ。これまた感のいい方なら、思い付くことですが、この記事で紹介した方法を応用すると、スマホ用のページを好きなように作成することも可能です。

**Power BI** にはモバイル用のページを作成する機能がもともと用意されています。

モバイル アプリ用に Power BI レポートを最適化する
[https://docs.microsoft.com/ja-jp/power-bi/create-reports/desktop-create-phone-report](https://docs.microsoft.com/ja-jp/power-bi/create-reports/desktop-create-phone-report?WT.mc_id=DP-MVP-5002429)

ですが、この機能はスマホの Power BI アプリで見るときに適用される設定です。つまり、この機能を設定してスマホ用のページを作成しても、スマホのブラウザで見ようとすると、適用されないということになります。通常、組織内でレポートを共有して利用する場合は、Power BI アプリで見ることになるでしょうから、特に問題はありません。

ただ、**[Web に公開 (パブリック)]** を設定して、広くインターネット上に公開する場合、この機能を使用してもスマホに最適化されたページにはならないということです。そういう場合、今回の記事で紹介した方法を応用すると、スマホのブラウザで見ても、綺麗に見えるように設定できるということです。

![20211024_055647000_iOS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152946/aabda24b-d41a-6ae9-b508-f16bc99bb374.jpeg)
例えば、さっきのレポートに3ページを作って、幅 = 800, 高さ = 1440 に設定し、iPhone 11 Pro のブラウザ (Safari) で表示するとこんな感じです。

# おわり
はい、ということで今回は以上です。
Power BI レポートのページを縦長にする方法をお伝えしました。

最後まで読んでいただきありがとうございました。また気が向いたら、Power BI Tips シリーズを書きます。
皆様からのリクエスト、お待ちしております。

何かリクエストがあれば、以下までー🤗
Twitter: https://twitter.com/yugoes1021
Facebook: https://www.facebook.com/yugoes1021
LinkedIn: https://www.linkedin.com/in/yugoes1021/