Power BI カスタムビジュアル開発 その１: 事前準備編

※ 2019/07/15 ツールが 3.0 になりいくつか内容が変わったため記事を編集します。
[参考: Migrating to powerbi-visuals-tools 3.x](https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/migrating-to-powerbi-visuals-tools-3-0/)

Power BI をより自分好みに変えましょうということで、カスタムビジュアルを開発してみます。今回は準備編で
す。

# 環境
クロスプラットフォームで開発できます。この記事では以下環境を使っています。

-　Windows 10
-　Visual Studio Code
-　Power BI Pro 試用版
-　Node.js LTS 推奨 [https://nodejs.org/ja/]

# 事前準備
まず開発に必要なツールや Power BI サービスの設定を行います。

1\. 以下コマンドで Power BI Visual Tools (pbiviz) をインストール

```shell 
npm install -g powerbi-visuals-tools
```

2\. インストール完了後、pbiviz を実行して、インストールされたことを確認。

<img width="661" alt="Capture.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/214116/d335b04d-7225-3978-2aea-02a6b7160540.png">

3\. 以下コマンドで証明書のインストール。証明書がない場合は作成してインストールが実行される。

```shell
pbiviz --install-cert
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/c31446fd-db31-54d1-3883-b490e26796e8.png)

4\. 証明書インストールウィザードが起動するので、上記パスフレーズを使用して、現在のユーザーの「信頼されたルート証明機関」を選択してインストール。
※この証明書はデバッグ時に必要です。

<img width="373" alt="Capture.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/214116/b100cf2d-26e7-eb8e-7b2a-e6ef9640d3e2.png">

# Power BI でカスタムビジュアル開発の有効化とサンプルデータ取得

1\. Power BI サービスにログインして、設定アイコンより設定を選択。

<img width="500" alt="Capture.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/cffc48a2-7135-8d8a-1781-c1d55e9a3086.png">

2\. 開発者メニューより「開発者向けビジュアルを使用して、カスタムビジュアルデバッグを有効にします」をチェック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/6c9d6854-aa7a-35d8-9d05-d962cecf89b8.png)

3\. 画面左下の「データを取得」より「サンプル」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/7608b8e4-226a-9ab2-3972-d7d2720a4efb.png)

4\. IT 支払い分析のサンプルを選択して「接続」をクリック。

# カスタムビジュアルプロジェクトの作成と動作確認

1\. pbiviz を使ってプロジェクトを作成。MyFirstVisual フォルダが作成されるのでフォルダに移動して依存をインストール。

```shell
pbiviz new MyFirstVisual
cd myFirstVisual
npm install
```

2\. pbiviz サービスの実行。既定ではポート 8080 で実行される。

```shell
pbiviz start
```
3\. Power BI サービスの画面より「マイワークプレース」より既存のデータセットを選択。
<img width="200" alt="Capture.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/c4e9a8e0-6518-ac0b-f8b0-ac6108f85789.png">

4\. 「開発者向けビジュアル」を選択。レポート画面にカスタムビジュアルが表示される。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/775448d0-abdd-ac19-b2c3-31725badc963.png">
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/1801b5b4-e598-c9e6-3eec-1b0c841ff86a.png">

5\. 任意のフィールドをビジュアルに設定して、ビジュアルの大きさを変更。ビジュアルの大きさが変わるたびに、黄色でハイライトされた数字が更新されることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/6f3e3348-bc69-38dd-a13c-fd1fa993e78b.png)


# コード変更時の動作確認
コードの変更は動的に検知されて反映される仕組みとなっているので、動作を確認しておきます。

1\. myFirstVisual フォルダを Visual Studio Code で開き、「Capability.json」を開く。

2\. 以下のように Category Data を日本語化して、ファイルを保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/515e6d3b-0209-4d60-fe77-649d2fb8ed9d.png)

3\. 保存すると同時に pbiviz サーバーで変更が検知されてコンパイルされる。
<img width="600" alt="Capture.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/2d11f1d7-cb99-0367-cf4b-0d287a362ecb.png">

4\. Power BI サービス上で、「ビジュアル コードの再読み込み」ボタンをクリック。
<img width="600" alt="Capture.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/e899b3e0-e784-1b94-df08-244c45fc41de.png">

5\. 項目名が変更されていることを確認。
<img width="500" alt="Capture.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/2acaf552-d280-cb33-d096-7ceed2b53d11.png">


# D3 ライブラリの追加
以前と異なり、既定のプロジェクトで既に D3 が含まれるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/35aad424-2e6b-a98f-89e6-bf9af51a3f78.png)


これで開発の準備が整いました。次回から具体的な開発を行っていきます。

[次の記事へ](https://qiita.com/kenakamu/items/76c4169657122aa7878e)
[目次へ戻る](https://qiita.com/kenakamu/items/f57ab7f73d6ea10bc9d9)

# 参照
[Migrating to powerbi-visuals-tools 3.x](https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/migrating-to-powerbi-visuals-tools-3-0/)
[PowerBI Visual Tools (pbiviz) - Installation](https://github.com/Microsoft/PowerBI-visuals/blob/master/tools/README.md)
[HTTPS Certificate Setup](https://github.com/Microsoft/PowerBI-visuals/blob/master/tools/CertificateSetup.md)
[PowerBI Visual Tools (pbiviz) - Usage Guide](https://github.com/Microsoft/PowerBI-visuals/blob/master/tools/usage.md)