Power BI ワークスペースコレクションのサンプルの使用

[アーティクル]
09/25/2017

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

重要

Power BI ワークスペースコレクションは非推奨となっており、2018 年 6 月または契約に定める日までに限り利用できます。アプリケーションの中断を避けるため、Power BI Embedded への移行をご検討ください。 Power BI Embedded にデータを移行する方法については、Power BI ワークスペースコレクションコンテンツを Power BI Embedded に移行する方法に関するページを参照してください。

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

注意

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

サンプルアプリの構成

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

GitHub でサンプル Power BI ワークスペースコレクション - Web アプリへのレポートの統合をダウンロードして解凍します。
Visual Studio で PowerBI-embedded.sln を開きます。このソリューションで使用されるパッケージを更新するには、NuGet パッケージマネージャーコンソールで Update-Package コマンドを実行する必要がある場合があります。
ソリューションをビルドします。
ProvisionSample コンソールアプリを実行します。サンプルのコンソールアプリで、ワークスペースのプロビジョニングを行って、PBIX ファイルをインポートします。
新しいワークスペースをプロビジョニングするには、オプション 1 の [Collection management (コレクション管理)] を選択し、オプション 6 の [Provision a new Workspace (新しいワークスペースをプロビジョニングする)] を選択します。
新しいレポートをインポートするには、オプション 2 の [Report management (レポート管理)] を選択し、オプション 3 の [Import PBIX Desktop file into a workspace (ワークスペースに PBIX デスクトップファイルをインポートする)] を選択します。
ワークスペースコレクション名とアクセスキーを入力します。これらは、Azure portalで取得できます。 アクセスキーを取得する方法の詳細については、「Microsoft Power BI Embedded の概要」の「 Power BI API のアクセスキーの表示」をご覧ください。
新しく作成された ワークスペース ID を、この記事の後半で使用するためにコピーして保存します。 ワークスペース ID が作成されたら、Azure portalを見つけることができます。
PBIX ファイルをワークスペースにインポートするには、オプション 6 を選択します。PBIX Desktop ファイルを既存のワークスペースにインポートします。 PBIX ファイルがない場合は、Retail Analysis Sample PBIX をダウンロードできます。
メッセージが表示されたら、分かりやすい データセット名を入力します。

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

Checking import state... Publishing
Checking import state... Succeeded

注意

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

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

サンプル Web アプリの実行

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

PowerBI-embedded Visual Studio ソリューションで EmbedSample Web アプリケーションを右クリックして、[スタートアッププロジェクトに設定] を選択します。

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>

EmbedSample Web アプリケーションを実行します。

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

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

アプリケーション内で表示されるレポートのサンプル

サンプルコードの検証

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

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

注意

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

モデル

サンプルには、ReportsViewModel と ReportViewModel があります。

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

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

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

public class ReportViewModel
{
    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>

コントローラー

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<ActionResult> 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 ワークスペースコレクションサンプルのpowerbi.jsのコードスニペットを次に示します。

init: function() {
    var embedUrl = this.getEmbedUrl();
    var iframeHtml = '<iframe style="width:100%;height:100%;" src="' + embedUrl + 
        '" scrolling="no" allowfullscreen="true"></iframe>';
    this.element.innerHTML = iframeHtml;
    this.iframe = this.element.childNodes[0];
    this.iframe.addEventListener('load', this.load.bind(this), false);
}

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

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

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

注意

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

Power BI ワークスペースコレクションのサンプルの使用

サンプルアプリの構成

サンプル Web アプリの実行

サンプルコードの検証

モデル

接続文字列

表示

コントローラー

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

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

関連項目

その他のリソース

Power BI ワークスペース コレクションのサンプルの使用

サンプル アプリの構成

サンプル Web アプリの実行

サンプル コードの検証

モデル

接続文字列

表示

コントローラー

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

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

関連項目

その他のリソース

Power BI ワークスペースコレクションのサンプルの使用

サンプルアプリの構成

サンプルコードの検証