Power BI カスタムビジュアル開発 その6: カスタムビジュアルのデバッグとパッケージ化

前回までカスタムビジュアルを作成してきました。今回はデバッグの方法とパッケージ化して配布する手順を見ていきます。

デバッグ

カスタムビジュアルはデータが読み込まれる度に JavaScript も再ロードされるので、一度設定したブレークポイントが効きません。そこで debugger コードを使います。

1. 任意の場所に debugger コードを入れます。

Capture.PNG

2. カスタムビジュアルを読み込んでいるブラウザで F12 を押下して開発者ツールを起動します。

3. カスタムビジュアルを再読み込みします。ブレークポイントが自動的にヒットします。

Capture.PNG

パッケージの作成

パッケージは pbiviz ツールで行います。

1. 現在 pbiviz start でサーバー実行している場合は、一旦 Ctrl + C で停止。

2. 以下コマンドでパッケージ化

pbiviz package

3.\ dist フォルダ内に、<カスタムビジュアル名>.pbiviz ファイルが作成される。

このファイルの中身は最適化された JavaScript コードです。

カスタムビジュアルのインポート

Power BI デスクトップでも Power BI サービスでも手順は同じです。

1. 「視覚化」のビジュアル一覧最後にある「…」をクリックし、「ファイルからインポートする」を選択。

Capture.PNG

2. 警告が出るので、読んで「インポート」をクリック。

Capture.PNG

3. 作成された .pbiviz ファイルを選択。インポートが完了。

Capture.PNG

4. インポートされたビジュアルを選択して検証。

5. カスタムビジュアルを使って作成したレポートやダッシュボードが、他のユーザーからも別途カスタムビジュアルのインポートなしで見えることを確認。

Capture.PNG

まとめ

6回にわたって Power BI カスタムビジュアル開発の流れを紹介しました。D3 の知識は必要ですが、自由にビジュアルを作れるのは楽しいです。

是非時間を見つけてチャレンジしてください。

参考情報

GitHub: D3 API Reference
GitHub: Create Power BI Custom Visuals
Video: Power BI Custom Visual Fundamentals

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.