[Power BI] レポートのブックマークを使用して、横から飛び出るスライサーパネルを作成しよう🎈

# はじめに

Power BI には**レポートのブックマーク**機能があります。知っていればレポート上で様々な工夫ができます。そのなかでも、フィルターやヘルプ情報を１つの画面内に収めるアイデアを紹介します。

※Power BI Serviceに発行されたレポートで使う、**個人用ブックマーク**の話ではありません。ご注意ください。

# ブックマークとは

ビジュアルやフィルターの状態を保存しておく機能です。ブックマークをボタンに設定しておくと、すぐにその状態に戻ることができるようになります。

ドキュメントにも記載がありました。

https://docs.microsoft.com/ja-jp/power-bi/create-reports/desktop-bookmarks?tabs=powerbi-desktop

>Power BI Desktop および Power BI サービスでレポートを編集するときに、"レポートのブックマーク" を追加し、レポート ページの現在の状態をキャプチャできます。 ブックマークには、現在のフィルターとスライサー、クロス強調表示された視覚エフェクト、並べ替え順序などが保存されます。 他のユーザーがレポートを閲覧するときに、保存されたブックマークを選択することで、その状態に戻ることができます。

# ブックマークペインの出し方

ここを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/6e547d7d-bf51-b857-9f6b-a10f97b47f74.png)

ブックマークペインが出てきます。フィルターペインなど、使わないペインはここで閉じておきましょう。
ブックマークをまだ作成していないと、説明文が表示されているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/90de92f6-a8c7-0928-5e36-356a27e840e2.png)

# DEMOレポートを用意

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/36f7fdd4-3011-4365-a714-5a74b43e3d5e.png)

左側のピンクの部分は図形を追加して作成しています。PowerPointで事前に作成して、背景に設定するやり方も簡単ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/60f9ecd9-9d4c-89be-7550-c4b509464184.png)

# ブックマークを追加する

まずはこの状態でブックマークを追加します。あとでわからなくならないように、名前も変更しておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/9f6e0aef-ca47-2e17-10cc-ab99e119fe7f.png)

ブックマークを追加すると、

- ビジュアルの状態
- フィルターの状態
- ページの位置

を記憶してくれます。
実際に動かしてみると、こういう感じになります。右端の **「Top画面」** ブックマークボタンを押したときにブックマークに追加したときの状態にもどっていることが確認できます。

![2022-07-03_17-52-56.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/0d389887-d87e-1569-a905-9db5cce2b51b.gif)

# フィルターを画面端から表示させる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/4f288457-5b41-389d-4d5c-d81378dc7e9a.png)

まずはレポートに図形を追加します。
アイコンを入れている部分と同じ色で透明度だけ変えるといい感じになります。

**選択項目**から、表示レイヤーの順序を選択できます。「スライサー」を今追加したシェイプよりも上にもってきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/d004e2d4-fbbd-fd94-4078-c6ddf5b37af4.png)

### この状態でブックマークを追加する

この状態でブックマークを追加します。
また、先ほどの**TOP画面ブックマーク**のほうをクリックし、スライサーとシェイプを非表示にした状態でブックマークの更新をします。

![2022-07-03_18-57-44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/b5189335-1f95-8a4d-169e-a717806c0670.gif)

２つのブックマークを交互に押すとスライサーペインが出たり消えたりする動きをします。

# ボタンにアクション（ブックマーク）を追加する

次にフィルターボタンを押したときにフィルターペインが開くように設定しましょう。

フィルターボタンを選択して、**アクション**をONにします。型を**ブックマーク**にして、フィルターペインが開いた状態になっているブックマークを選択します（この場合は **「フィルターON」** ）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/c1d1c30b-f3b6-b2ac-cf99-c006ca4fc31f.png)

この設定をすることでフィルターを開く動作を実現することができました。

## 戻るためのボタンを用意する。

ひとつのシェイプ（図形）に複数のアクションを設定することはできません。ですので、フィルターペインを開いたら、閉じるためのボタンを用意する必要があります。

- アイデア①
    - 開いたフィルターに戻るボタンを用意する。
- アイデア②
    - 同じボタンを、同じ場所に用意。表示・非表示を組み合わせて、見かけ上は同じボタンを押しているようにみせる。

アイデア②を実装してみた動画を掲載しています。一見同じボタンをクリックしているようですが、クリックしたボタンは次の瞬間には非表示になっており、違うボタンが表示されています。選択項目を見るとよくわかります。

![2022-07-03_20-39-44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/90ab9c0c-6787-f6ff-2c49-72d98b0c200a.gif)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/abce5a3b-2f53-48c6-5983-d8f08c9589be.png)

大体できあがってきました。

# ひとつ課題が・・フィルターが元に戻ってしまう。

ブックマークは普通に追加すると、データやビジュアルの状態を保存する・・というのは前述したとおりです。そのままにしておくと、期待しない動作につながる場合もあります。

いま作成したフィルターも、フィルターを適用したあとにブックマークを切り替えると、データが初期状態に戻ってしまいます。

![2022-07-03_20-58-58.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/23a08d8c-f408-ea03-c1c4-04e556873d30.gif)

## ブックマークのオプションを変更する

ブックマーク名の右側、三点リーダーをクリックするとオプション画面が開きます。

- データ
- ディスプレイ
- 現在のページ

の中で、**データ** のチェックを外します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/9ee99491-3084-c24d-d74b-f0938cbc1cb7.png)

このチェックを外すことでデータ（フィルター）を保持しなくなります。
すると下の動画のような動作になります。図形の状態は期待した動きを維持していて、データは変化しなくなりました。

![2022-07-03_21-27-15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/aa7a6f26-879e-5a48-8176-c9ca2f4f80a5.gif)

これで完成です。

# まとめ

このテクニックは、YouTubeでたくさん紹介されていますので、いろいろ見てみると勉強になりますね😀

https://www.youtube.com/watch?v=GnPuU3X74SY

https://www.youtube.com/watch?v=XZOPriif6Pw