Power BI Embedded の使用を開始するためのサンプル

Microsoft Power BI Embeddedを使用すると、Web アプリケーションやモバイル アプリケーションに Power BI レポートをすぐに統合することができます。 この記事では、 Power BI Embedded の使用を開始するためのサンプルを紹介します。

先に進む前に、次のリソースを保存することができます。 これらのリソースは、サンプル アプリや独自のアプリに Power BI レポートを統合する際に役立ちます。

メモ

Power BI Embedded の使用を開始するためのサンプルを構成して実行するには、Azure サブスクリプションで少なくとも 1 つの ワークスペース コレクション 作成する必要があります。 Azure ポータルで ワークスペース コレクション を作成する方法については、 Power BI Embedded の概要に関する記事をご覧ください。

サンプル アプリの構成

サンプル アプリの実行に必要なコンポーネントにアクセスするための Visual Studio 開発環境の設定手順を説明します。

  1. GitHub でサンプル Power BI Embedded - Integrate a report into a web app をダウンロードして解凍します。
  2. Visual Studio で PowerBI-embedded.sln を開きます。 NuGet パッケージ マネージャー コンソールで Update-Package コマンドを実行して、このソリューションで使用するパッケージを更新する必要のある場合があります。
  3. ソリューションをビルドします。
  4. ProvisionSample コンソール アプリを実行します。 サンプルのコンソール アプリで、ワークスペースのプロビジョニングを行って、PBIX ファイルをインポートします。
  5. 新しいワークスペースをプロビジョニングするには、オプション 1 の [Collection management (コレクション管理)] を選択し、オプション 6 の [Provision a new Workspace (新しいワークスペースをプロビジョニングする)] を選択します。
  6. 新しいレポートをインポートするには、オプション 2 の [Report management (レポート管理)] を選択し、オプション 3 の [Import PBIX Desktop file into a workspace (ワークスペースに PBIX デスクトップ ファイルをインポートする)] を選択します。

  7. ワークスペース コレクション名とアクセス キーを入力します。 これらは Azure ポータルで確認できます。 アクセス キーを取得する方法の詳細については、「Microsoft Power BI Embedded の概要」の「 Power BI API のアクセス キーの表示 」をご覧ください。

  8. 新しく作成された ワークスペース ID を、この記事の後半で使用するためにコピーして保存します。 作成されたワークスペース IDAzure Portal で確認できます。

  9. PBIX ファイルをワークスペースにインポートするために、オプション [6.Import PBIX Desktop file into an existing workspace] を選択します。 PBIX ファイルがない場合は、Retail Analysis Sample PBIX をダウンロードできます。
  10. メッセージが表示されたら、分かりやすい データセット名を入力します。

次のように、応答が表示されます。

Checking import state... Publishing
Checking import state... Succeeded
メモ

PBIX ファイルに直接クエリ接続が含まれている場合は、接続文字列を更新するオプション 7 を実行します。

これで、Power BI PBIX レポートをワークスペースにインポートできました。 次に、Power BI Embedded の使用を開始するためのサンプル Web アプリを実行する方法を説明します。

サンプル Web アプリの実行

サンプル Web アプリは、ワークスペースにインポートされたレポートを表示するサンプル アプリケーションです。 サンプル Web アプリを構成する方法は以下のとおりです。

  1. PowerBI-embedded Visual Studio ソリューションで EmbedSample Web アプリケーションを右クリックして、[スタートアップ プロジェクトに設定] を選択します。
  2. EmbedSample Web アプリケーションの web.config で、[appSettings][AccessKey][WorkspaceCollection] の名前、および [WorkspaceId] を編集します。

    <appSettings>
        <add key="powerbi:AccessKey" value="" />
        <add key="powerbi:ApiUrl" value="https://api.powerbi.com" />
        <add key="powerbi:WorkspaceCollection" value="" />
        <add key="powerbi:WorkspaceId" value="" />
    </appSettings>
    
  3. EmbedSample Web アプリケーションを実行します。

EmbedSample Web アプリケーションを実行すると、左側のナビゲーション パネルに [レポート] メニューが表示されます。 インポートしたレポートを表示するには、[レポート] を展開して、レポートをクリックします。 Retail Analysis Sample PBIX をインポートした場合、サンプル Web アプリは次のように表示されます。

レポートをクリックすると、EmbedSample Web アプリケーションは次のように表示されます。

サンプル コードの検証

Microsoft Power BI Embedded のサンプルは、アプリへの Power BI レポートの統合方法を示すサンプル Web アプリです。 このサンプルは、モデル ビュー コント ローラー (MVC) デザイン パターンを使用して、ベスト プラクティスを説明します。 このセクションでは、サンプル コードのうち、PowerBI-embedded Web アプリ ソリューション内で検証できる部分について説明します。 モデル ビュー コント ローラー (MVC) パターンは、ユーザー入力に基づいて、ドメイン、プレゼンテーション、およびアクションのモデリングをモデル、ビュー、およびコントロールという 3 つの個別クラスに分割します。 MVC の詳細については、ASP.NET の詳細に関するページをご覧ください。

Microsoft Power BI Embedded のサンプル コードは以下のように区切られています。 サンプル内のコードを簡単に見つけることができるように、各セクションには PowerBI-embedded.sln ソリューションのファイル名が含まれます。

メモ

このセクションは、コードの作成方法を説明するサンプル コードの概要です。 完全なサンプルを表示するには、Visual Studio で PowerBI-embedded.sln ソリューションを読み込んでください。

モデル

サンプルには、ReportsViewModelReportViewModel があります。

ReportsViewModel.cs: 複数の Power BI レポートを表します。

public class ReportsViewModel
{
    public List<Report> Reports { get; set; }
}

ReportViewModel.cs: 1 つの Power BI レポートを表します。

public classReportViewModel
{
    public IReport Report { get; set; }

    public string AccessToken { get; set; }
}

接続文字列

接続文字列は次の形式にする必要があります。

Data Source=tcp:MyServer.database.windows.net,1433;Initial Catalog=MyDatabase

一般的なサーバーとデータベースの属性を使用すると失敗します。 たとえば、Server=tcp:MyServer.database.windows.net,1433;Database=MyDatabase を使用した場合です。

表示

ビューでは、複数の Power BI レポート の表示と 1 つの Power BI レポートの表示を管理します。

Reports.cshtml: ActionLink を作成するために Model.Reports を反復処理します。 ActionLink の構成は次のとおりです。

パーツ 説明
タイトル レポートの名前。
QueryString レポート ID へのリンク。
<div id="reports-nav" class="panel-collapse collapse">
    <div class="panel-body">
        <ul class="nav navbar-nav">
            @foreach (var report in Model.Reports)
            {
                var reportClass = Request.QueryString["reportId"] == report.Id ? "active" : "";
                <li class="@reportClass">
                    @Html.ActionLink(report.Name, "Report", new { reportId = report.Id })
                </li>
            }
        </ul>
    </div>
</div>

Report.cshtml: Model.AccessToken と、PowerBIReportFor のラムダ式を設定します。

@model ReportViewModel

...

<div class="side-body padding-top">
    @Html.PowerBIAccessToken(Model.AccessToken)
    @Html.PowerBIReportFor(m => m.Report, new { style = "height:85vh" })
</div>

Controller

DashboardController.cs: アプリ トークンを渡す PowerBIClient を作成します。 資格情報を取得するために、JSON Web トークン (JWT) が署名キーから生成されます。 資格情報は、PowerBIClient のインスタンスの作成に使用されます。 PowerBIClient のインスタンスを作成したら、GetReports() と GetReportsAsync() を呼び出すことができます。

CreatePowerBIClient()

private IPowerBIClient CreatePowerBIClient()
{
    var credentials = new TokenCredentials(accessKey, "AppKey");
    var client = new PowerBIClient(credentials)
    {
        BaseUri = new Uri(apiUrl)
    };

    return client;
}

ActionResult Reports()

public ActionResult Reports()
{
    using (var client = this.CreatePowerBIClient())
    {
        var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId);

        var viewModel = new ReportsViewModel
        {
            Reports = reportsResponse.Value.ToList()
        };

        return PartialView(viewModel);
    }
}

Task Report(string reportId)

public async Task<ActionResult> Report(string reportId)
{
    using (var client = this.CreatePowerBIClient())
    {
        var reportsResponse = await client.Reports.GetReportsAsync(this.workspaceCollection, this.workspaceId);
        var report = reportsResponse.Value.FirstOrDefault(r => r.Id == reportId);
        var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId, report.Id);

        var viewModel = new ReportViewModel
        {
            Report = report,
            AccessToken = embedToken.Generate(this.accessKey)
        };

        return View(viewModel);
    }
}

アプリへのレポートの統合

レポートを作成したら、IFrame を使用して Power BI レポートを埋め込みます。 Microsoft Power BI Embedded サンプルの powerbi.js のコード スニペットを次に示します。

アプリケーションに埋め込まれたレポートのフィルター

URL 構文を使用して、埋め込みレポートをフィルター処理できます。 そのためには、フィルターを指定した iFrame の src URL に、eq 演算子を使用した $filter クエリ文字列パラメーターを追加します。 フィルター クエリ構文を次に示します。

https://app.powerbi.com/reportEmbed
?reportId=d2a0ea38-...-9673-ee9655d54a4a&
$filter={tableName/fieldName}%20eq%20'{fieldValue}'
メモ

{tableName/fieldName} には、スペースや特殊文字を含めることはできません。 {fieldValue} は単一のカテゴリ値を受け入れます。

関連項目

Common Microsoft Power BI Embedded scenarios (Microsoft Power BI Embedded の一般的なシナリオ)
Power BI Embedded での認証と承認
レポートの埋め込み
データセットからの新しいレポートの作成
Power BI Desktop
JavaScript による埋め込みのサンプル
ご質問は、 Power BI コミュニティで尋ねてみてください。