Power BI ビジュアル プロジェクトの構造

新しい Power BI ビジュアルを作り始める場合は、Power BI ビジュアル pbiviz ツールを使用することをお勧めします。

新しいビジュアルを作成するには、Power BI ビジュアルを配置するディレクトリに移動し、次のコマンドを実行します。

pbiviz new <visual project name>

このコマンドを実行すると、次のファイルを含む Power BI ビジュアル フォルダーが作成されます。

project
├───.vscode
│   ├───launch.json
│   └───settings.json
├───assets
│   └───icon.png
├───node_modules
├───src
│   ├───settings.ts
│   └───visual.ts
├───style
│   └───visual.less
├───capabilities.json
├───package-lock.json
├───package.json
├───pbiviz.json
├───tsconfig.json
└───tslint.json

フォルダーとファイルの説明

このセクションでは、Power BI ビジュアルの pbiviz ツールを使って作成されるディレクトリ内の各フォルダーとファイルについて説明します。

.vscode

このフォルダーには、VS Code プロジェクトの設定が含まれています。

ワークスペースを構成するには、.vscode/settings.json ファイルを編集します。

詳細については、「ユーザーとワークスペースの設定」を参照してください。

資産

このフォルダーには icon.png ファイルが含まれています。

Power BI ビジュアル ツールでは、このファイルが Power BI ビジュアル ペインの新しい Power BI ビジュアル アイコンとして使用されます。 このアイコンは、"20 x 20 ピクセル" の大きさの PNG ファイルにする必要があります。

src

このフォルダーには、ビジュアルのソース コードが含まれています。

このフォルダーには、Power BI ビジュアル ツールによって次のファイルが作成されます。

• visual.ts - ビジュアルの主要なソース コード。 Visual API に関する記事を参照してください。
• settings.ts - ビジュアルの設定のコード。 ファイルのクラスには、ビジュアルのプロパティを定義するためのインターフェイスが用意されています。

スタイル

このフォルダーには、ビジュアルのスタイルを保持する visual.less ファイルが含まれています。

capabilities.json

このファイルには、ビジュアルの主なプロパティと設定 (または機能) が含まれています。 これにより、ビジュアルは、サポートされている機能、オブジェクト、プロパティ、データ ビュー マッピングを宣言できます。

package-lock.json

このファイルは、npm によって node_modules ツリーまたは package.json ファイルのいずれかが変更されるすべての操作に対して、自動的に生成されます。

このファイルの詳細については、公式の npm-package-lock.json のドキュメントを参照してください。

package.json

このファイルには、プロジェクト パッケージが記述されています。 作成者、説明、プロジェクトの依存関係などのプロジェクトに関する情報が含まれます。

このファイルの詳細については、公式の npm-package.json のドキュメントを参照してください。

pbiviz.json

このファイルには、ビジュアルのメタデータが含まれています。

メタデータ エントリを説明するコメントを含む pbiviz.json ファイルの例については、「メタデータ エントリ」セクションを参照してください。

tsconfig.json

TypeScript の構成ファイルです。

このファイルには、pbiviz.json ファイルの visualClassName プロパティに指定されているように、ビジュアルのメイン クラスが配置されている *.ts ファイルのパスが含まれている必要があります。

tslint.json

このファイルには TSLint の構成が含まれています。

メタデータ エントリ

pbiviz.json ファイルの次のコード キャプションのコメントは、メタデータ エントリを説明するものです。 ビジュアルをパッケージ化する前に、特定のメタデータ (作成者の名前やメール アドレスなど) が必要です。

注意

• pbiviz ツールのバージョン 3.x.x から、externalJS はサポートされません。
• バージョン番号には、x.x.x.x の形式で 4 桁の数字を含める必要があります。
• ローカライズをサポートするには、ビジュアルに Power BI ロケールを追加します。

{
  "visual": {
     // The visual's internal name.
    "name": "<visual project name>",

    // The visual's display name.
    "displayName": "<visual project name>",

    // The visual's unique ID.
    "guid": "<visual project name>23D8B823CF134D3AA7CC0A5D63B20B7F",

    // The name of the visual's main class. Power BI creates the instance of this class to start using the visual in a Power BI report.
    "visualClassName": "Visual",

    // The visual's version number.
    "version": "1.0.0.0",
    
    // The visual's description (optional)
    "description": "",

    // A URL linking to the visual's support page (optional).
    "supportUrl": "",

    // A link to the source code available from GitHub (optional).
    "gitHubUrl": ""
  },
  // The version of the Power BI API the visual is using.
  "apiVersion": "2.6.0",

  // The name of the visual's author and email.
  "author": { "name": "", "email": "" },

  // 'icon' holds the path to the icon file in the assets folder; the visual's display icon.
  "assets": { "icon": "assets/icon.png" },

  // Contains the paths for JS libraries used in the visual.
  // Note: externalJS' isn't used in the Power BI visuals tool version 3.x.x or higher.
  "externalJS": null,

  // The path to the 'visual.less' style file.
  "style": "style/visual.less",

  // The path to the `capabilities.json` file.
  "capabilities": "capabilities.json",

  // The path to the `dependencies.json` file which contains information about R packages used in R based visuals.
  "dependencies": null,

  // An array of paths to files with localizations.
  "stringResources": []
}

関連するコンテンツ

• Power BI ビジュアルのシステム統合
• Power BI の円形カード視覚化を開発する