初めに
前回、「Enhanced Scatter」というカスタムビジュアルを利用し、架空製造工場で設備を配置するフロアマップを作成してみました。
今回の記事では、よりユーザーインタフェース優れて、より使いやすいフロアマップを、「Enhanced Scatter」を拡張してカスタムビジュアルの作成で実現しに行きたいと思います。
※前回の記事はまだご覧にならなかったら方は、こちら『いくつか有用なカスタムビジュアルの利用ヒント』へどうぞ。
また、今回の記事に利用するサンプルソースやデータセットについても、前回記事で利用したものを使い続けますので、併せて上記のリックからご入手ください。
カスタマビジュアル開発概要
- カスタムビジュアル開発の流れ
MS社が提供している、D3、jQuery などの有名な JavaScript ライブラリや R 言語スクリプトにも基づく Power BI ビジュアル SDKを使用してカスタムビジュアルのプロジェクトを開発できます。
https://powerbi.microsoft.com/ja-jp/developers/custom-visualization/
カスタムビジュアルを作成した後に、pbiviz ツールを利用して、開発したプロジェクトをパッケージ化することができます。
パッケージ化したカスタムビジュアルをMS社のAppSource（ビジュアルの市場）に発行し、他のユーザーがそれを探して使用できるようにすることができます。
https://docs.microsoft.com/ja-jp/power-bi/developer/visuals/office-store
さらに、一定条件に満たした場合、ソースコードをMS社に認定させますと、「認定済み」マークがAppSourceにつけられてより信頼度高いビジュアルと認めらます。
https://docs.microsoft.com/ja-jp/power-bi/developer/visuals/power-bi-custom-visuals-certified
カスタマビジュアルの実現内容
前回の記事では「Enhanced Scatter」を使って、各機器の配置場所を表すフロアマップを作成しましたが、ユーザビリティの観点から下記の改善ポイントを残っていました。
① 機器アイコンをクリックした場合に下記の既存表現を改善したい
アイコン選択済状態では拡大表示で強調したい。
②フロアマップで機器の選択状態を保持したい。
データセットは、前回の記事で作成したものを利用したいと考えています。
サンプルカスタムビジュアル作成の手順ー開発環境構成
カスタムビジュアルの開発環境は下記通りです。
- Windows 10 Professional
- Visual Studio Code
- Power BI Pro
- Node.js LTS 推奨 [https://nodejs.org/ja/]
上記の開発プラットフォームをそろえましたら、まず下記の必要なパッケージやツールをインストールします。
1. Power BI Visual Tools (pbiviz) をインストールします。
pbiviz は、PowerBIカスタムビジュアルの開発に必要なすべてのスクリプトとリソースを含むのプロジェクトです。
2.「pbiviz 」コマンドを実行し、Pbivizパッケージが正しくインストールされたことを確認します
3. 証明書を作成してインストールします。
PowerBIサービス間とSSL通信のみをサポートするため、クライアント証明書を構成する必要があります。
pbiviz --install-cert
ウィザードが起動されると、「現在のユーザー」の「信頼されたルート証明機関」を選択してインストールします。
※この証明書はデバッグ時に必要です。
4. Powerサービスからカスタムビジュアル開発の有効化とサンプルデータ取得します。
開発者メニューより、カスタムビジュアルデバッグモードを有効します。
5.下記の開発用ライブラリをインストールします。
D3 JavaScript ライブラリ
D3 は、Web ブラウザーに動的で対話型のデータ視覚化を生成するための JavaScript ライブラリです。 広く実装されているスケーラブル ベクター グラフィックス (SVG)、HTML5、CSS の各標準に依存します。
npm i d3@^5.0.0 --save
TypeScript定義をインストールします。
VS CodeにTipeScriptで開発するには、TypeScript 定義をインストールします。
npm i @types/d3@^5.0.0 –save
core-jsをインストールします。
ECMAScript 用のポリフィルが含まれる JavaScript 用のモジュール型標準ライブラリです。
npm i core-js@3.2.1 --save
Power BI Visuals API の定義をインストールします。
MS社が提供するカスタムビジュアル開発に必要な既定コンポーネントを提供するパッケージです。
npm i powerbi-visuals-api --save-dev
カスタマビジュアル開発プロジェクトの構造
新しいビジュアルを作成するには、Power BI ビジュアルを配置するディレクトリに移動し、次のコマンドを実行します。
pbiviz new <visual project name>
今回は、既存「Enhanced Scatter」ビジュアルを拡張開発しますので、GitHubに公開した「Enhanced Scatter」ソースコードをVS Codeにインポートし、それをベースにして開発します。
※ 「Enhanced Scatter」ソースコードをこちらからダウンロード
- 「Enhanced Scatter」のプロジェクト構造を下記で示す。
今回の変更対象となるリソースファイルは下記になります。
「src\settings.ts」： カスタムビジュアルのプロパティを定義するリソースファイル。
「src\behavior.ts 」 ： ビジュアルのイベント（操作時の表現）を実装するソースファイル。
「 src\visual.ts 」 ： ビジュアルの描画処理を実装するソースファイル。
拡張例紹介 - ①アイコン選択済状態の拡大表示
- pbehavior.tsの変更
ビジュアルのカレント定義や選択状態、およびフィルターを保持するために
変更前 変更後
- setting.tsの変更
ビジュアルのフィルター状態を保持するためのグローバル変数を追加する。
- pbehavior.tsの変更
- visual.tsの変更
カスタマビジュアルのパッケージングと適用
Visual Studio Codeのターミナルを使って上記の拡張したソースコードを下記のコマンドでパッケージングします。
pbiviz package
作成したPKGをPowerBIレポート画面にインポートします。
インポートされたカスタムビジュアルのアイコンがパーネルに表示されることを確認し、既存作成したフロアマップグラフを指定した状態で、アイコンをクリックすれば、カスタムビジュアルが適用されます。
おわりに
最後は、作成した「EnhancedScatterChartEx.pbiviz」ファイルをデモレポートに適用した改善効果を下記に御覧ください。
①機器アイコンをクリックした場合にアイコンが拡大表示できていること。
②フロアマップの選択状態(フィルター)が保持されていること。
