チュートリアル:組織向けのアプリケーションに Power BI コンテンツを埋め込むTutorial: Embed Power BI content into an application for your organization

Power BI では、ユーザー所有データを使用して、レポート (Power BI またはページ分割された)、ダッシュボード、またはタイルをアプリケーションに埋め込むことができます。In Power BI, you can embed reports (Power BI or Paginated), dashboards, or tiles into an application by using user owns data. ユーザー所有データを使用すれば、アプリケーションで埋め込み分析を使用できるように Power BI サービスを拡張できます。User owns data lets your application extend the Power BI service so it can use embedded analytics. このチュートリアルでは、レポート (Power BI またはページ分割された) をアプリケーションに統合する方法を取り上げます。This tutorial demonstrates how to integrate a report (Power BI or Paginated) into an application. Power BI .NET SDK と Power BI JavaScript API を使用して、組織向けのアプリケーションに Power BI を埋め込みます。You use the Power BI .NET SDK with the Power BI JavaScript API to embed Power BI into an application for your organization.

Power BI 埋め込みレポート

このチュートリアルでは、以下のタスクについて説明します。In this tutorial, you learn the following tasks:

  • Azure にアプリケーションを登録します。Register an application in Azure.
  • Power BI テナントを使用して、Power BI またはページ分割されたレポートをアプリケーションに埋め込みます。Embed a Power BI or Paginated report into an application using your Power BI tenant.

前提条件Prerequisites

始めるにあたり、必要なもの:To get started, you're required to have:

Power BI Pro にサインアップしていない場合は、無料の試用版にサインアップしてください。If you're not signed up for Power BI Pro, sign up for a free trial before you begin.

Azure サブスクリプションをお持ちでない場合は、始める前に無料アカウントを作成してください。If you don't have an Azure subscription, create a free account before you begin.

埋め込み分析開発環境を設定するSet up your embedded analytics development environment

アプリケーションへのレポート、ダッシュボード、タイルの埋め込みを開始する前に、使用している環境で Power BI での埋め込みが許可されていることを確認する必要があります。Before you start embedding reports, dashboard, or tiles into your application, you need to make sure your environment allows for embedding with Power BI.

埋め込みセットアップ ツールを使うと、環境の作成とレポートの埋め込みを段階的に行うのに役立つサンプル アプリケーションをすぐに使い始めたり、ダウンロードしたりできます。You can go through the Embedding setup tool, so you can quickly get started and download a sample application that helps you walk through creating an environment and embedding a report. ページ分割されたレポートを埋め込む場合、作成したワークスペースに少なくとも P1 容量を割り当てる必要があります。In the case of embedding a paginated report you need to assign at least a P1 capacity to the created workspace.

手動で環境をセットアップする場合は、以下を続行できます。If you choose to set up the environment manually, you can continue below.

Azure Active Directory にアプリケーションを登録するRegister an application in Azure Active Directory

Azure Active Directory にアプリケーションを登録すると、アプリケーションは Power BI REST API にアクセスできるようになります。Register your application with Azure Active Directory to allow your application access to the Power BI REST APIs. アプリケーションを登録すると、アプリケーションの ID を設定し、Power BI REST リソースへのアクセス許可を指定することができます。Registering your application allows you to establish an identity for your application and specify permissions to Power BI REST resources.

サーバー側の Web アプリケーション アプリの登録を続行する必要があります。You need to proceed with registering a server-side web application app. アプリケーション シークレットを作成するには、サーバー側 Web アプリケーションを登録します。You register a server-side web application to create an application secret.

Azure でアプリケーションを作成した後、Azure でアプリケーションを開き、 [認証] に移動し、 [リダイレクト URI][リダイレクト URI] に「 /Redirect」を追加します。After creating your application in Azure, open your application in Azure, navigate to Authentication and in the Redirect URIs add /Redirect to the Redirect URI.

Power BI 環境を設定するSet up your Power BI environment

ワークスペースの作成Create a workspace

顧客向けのレポート、ダッシュボード、またはタイルを埋め込む場合は、コンテンツをワークスペース内に配置する必要があります。If you're embedding reports, dashboards, or tiles for your customers, then you have to place your content within a workspace. 設定可能なワークスペースには、従来のワークスペース新しいワークスペースがあります。There are different types of workspaces that you can set up: the traditional workspaces or the new workspaces.

Power BI レポートを作成して発行するCreate and publish your Power BI reports

Power BI Desktop を使用して、レポートとデータセットを作成することができます。You can create your reports and datasets by using Power BI Desktop. その後、そのレポートをワークスペースに発行できます。Then you can publish those reports to a workspace. レポートを発行するエンド ユーザーには、ワークスペースに発行するための Power BI Pro ライセンスが必要です。The end user publishing the reports needs to have a Power BI Pro license to publish to a workspace.

  1. GitHub からサンプルの Demo をダウンロードします。Download the sample Demo from GitHub.

    デモをダウンロードする

  2. Power BI Desktop でサンプルの .pbix レポートを開きます。Open the sample .pbix report in Power BI Desktop.

    サンプルの Power BI Desktop レポート

  3. ワークスペースに発行します。Publish to the workspace.

    Power BI Desktop レポートを発行する

    Power BI サービスを使ってオンラインでレポートを表示できるようになります。Now you can view the report in the Power BI service online.

    Power BI Desktop レポートを表示する

ページ分割されたレポートを作成して発行するCreate and publish your paginated reports

Power BI レポート ビルダーを使用して、ページ分割されたレポートを作成できます。You can create your paginated reports by using Power BI Report Builder. その後、少なくとも P1 容量に割り当てられているワークスペースにレポートをアップロードできます。Then you can upload the report to a workspace assigned to at least a P1 capacity. レポートをアップロードするエンドユーザーがワークスペースに発行するには、Power BI Pro ライセンスを持っている必要があります。The end-user uploading the report must have a Power BI Pro license to publish to a workspace.

サンプル アプリケーションを使用してコンテンツを埋め込むEmbed your content by using the sample application

このサンプルは実演目的から意図的に単純に作られています。This sample is deliberately kept simple for demonstration purposes.

次の手順に従い、サンプル アプリケーションを使用してコンテンツの埋め込みを開始します。Follow the steps below to start embedding your content using the sample application.

  1. Visual Studio (バージョン 2013 以降) をダウンロードします。Download Visual Studio (version 2013 or later). 必ず最新の NuGet パッケージをダウンロードしてください。Make sure to download the latest NuGet package.

  2. 最初に、GitHub から User Owns Data サンプルをダウンロードします。Download the User Owns Data sample from GitHub to get started.

    User Owns Data アプリケーションのサンプル

  3. サンプル アプリケーションで Cloud.config ファイルを開きます。Open the Cloud.config file in the sample application.

    アプリケーションを実行する目的で入力必須となるフィールドがあります。There are fields you need to fill in to run the application.

    フィールドField
    アプリケーション IDApplication ID
    ワークスペース IDWorkspace ID
    レポート IDReport ID
    AADAuthorityUrlAADAuthorityUrl

    Cloud.config ファイル

アプリケーション IDApplication ID

applicationId 情報には、Azureアプリケーション ID を入力します。Fill in the applicationId information with the Application ID from Azure. applicationId は、アクセス許可を要求しているユーザーに対して、アプリケーションが自身を識別するために使用します。The applicationId is used by the application to identify itself to the users from which you're requesting permissions.

applicationId を取得するには、次の手順に従います。To get the applicationId, follow these steps:

  1. Azure Portal にサインインします。Sign into the Azure portal.

  2. 左側のナビ ペインで、 [すべてのサービス][アプリの登録] の順に選択します。In the left-hand nav pane, select All Services, and select App Registrations.

  3. applicationId を必要とするアプリケーションを選択します。Select the application that needs the applicationId.

    アプリの選択

  4. アプリケーション ID が GUID として一覧表示されます。There's an Application ID that is listed as a GUID. このアプリケーション ID を、アプリケーションの applicationId として使用します。Use this Application ID as the applicationId for the application.

    applicationId

ワークスペース IDWorkspace ID

workspaceId 情報には、Power BI のワークスペース (グループ) の GUID を入力します。Fill in the workspaceId information with the workspace (group) GUID from Power BI. この情報は、Power BI サービスにサインインしたときに URL から取得するか、PowerShell を使用して取得できます。You can get this information either from the URL when signed into the Power BI service or using PowerShell.

URLURL

workspaceId

PowerShellPowerShell

Get-PowerBIworkspace -name "User Owns Embed Test"

PowerShell の workspaceId

レポート IDReport ID

reportId には、Power BI からレポートの GUID を設定します。Fill in the reportId information with the report GUID from Power BI. この情報は、Power BI サービスにサインインしたときに URL から取得するか、PowerShell を使用して取得できます。You can get this information either from the URL when signed into the Power BI service or using PowerShell.

Power BI レポート URLPower BI Report URL

PBI reportId

ページ分割されたレポートの URLPaginated Report URL

ページ分割されたレポートの ID

PowerShellPowerShell

Get-PowerBIworkspace -name "User Owns Embed Test" | Get-PowerBIReport

PowerShell の reportId

AADAuthorityUrlAADAuthorityUrl

組織のテナント内に埋め込むか、またはゲスト ユーザーに埋め込むことのできる URL を使用して、AADAuthorityUrl 情報を入力します。Fill in the AADAuthorityUrl information with the URL that either allows you to embed within your organizational tenant or embed with a guest user.

組織のテナントに埋め込む場合は、URL - https://login.microsoftonline.com/common/oauth2/authorize を使用します。For embedding with your organizational tenant, use the URL - https://login.microsoftonline.com/common/oauth2/authorize.

ゲストに埋め込む場合は、URL - https://login.microsoftonline.com/report-owner-tenant-id を使用します。ここで、report-owner-tenant-id に置き換えて、レポート所有者のテナント ID を追加します。For embedding with a guest, use the URL - https://login.microsoftonline.com/report-owner-tenant-id - where you add the tenant ID of the report owner in replacement of report-owner-tenant-id.

アプリケーションの実行Run the application

  1. Visual Studio[実行] を選びます。Select Run in Visual Studio.

    アプリケーションの実行

  2. 次に、 [Embed Report] を選びます。Then select Embed Report. テスト対象に選んだコンテンツ (レポート、ダッシュボード、タイル) に応じて、アプリケーションでそのオプションを選びます。Depending on which content you choose to test with - reports, dashboards or tiles - then select that option in the application.

    コンテンツを選択する

  3. サンプル アプリケーションでレポートを表示できるようになります。Now you can view the report in the sample application.

    アプリケーションでレポートを表示する

アプリケーション内にコンテンツを埋め込むEmbed your content within your application

コンテンツを埋め込む手順は Power BI REST API で行うことはできますが、この記事で説明するコード例は .NET SDK で作成されています。Even though the steps to embed your content can be done with the Power BI REST APIs, the example codes described in this article are made with the .NET SDK.

Web アプリにレポートを統合するには、Power BI REST API または Power BI C# SDK を使用します。To integrate a report into a web app, you use the Power BI REST API or the Power BI C# SDK. Azure Active Directory 認証アクセス トークンを使用してレポートを取得することもできます。You also use an Azure Active Directory authorization access token to get a report. その後、同じアクセス トークンを使ってレポートを読み込みます。Then you load the report by using the same access token. Power BI Rest API では、特定の Power BI リソースへのプログラムによるアクセスが提供されます。The Power BI Rest API provides programmatic access to specific Power BI resources. 詳細については、「Power BI REST API」 (Power BI REST API) と Power BI JavaScript API に関するページを参照してください。For more information, see Power BI REST APIs and the Power BI JavaScript API.

Azure AD からアクセス トークンを取得するGet an access token from Azure AD

アプリケーション内では、Power BI REST API の呼び出しを行う前に、Azure AD からアクセス トークンを取得する必要があります。Within your application, you must get an access token from Azure AD before you can make calls to the Power BI REST API. 詳しくは、「ユーザーを認証し、Power BI アプリ用の Azure AD アクセス トークンを取得する」をご覧ください。For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

レポートを取得するGet a report

Power BI またはページ分割されたレポートを取得するには、レポートの取得操作を使用し、Power BI レポートとページ分割されたレポートの一覧を取得します。To get a Power BI or paginated report, you use the Get Reports operation, which gets a list of Power BI and paginated reports. レポートの一覧から、レポート ID を取得できます。From the list of reports, you can get a report ID.

アクセス トークンを使ってレポートを取得するGet reports by using an access token

レポートを取得する操作により、レポートの一覧が返されます。The Get Reports operation returns a list of reports. レポートの一覧から 1 つのレポートを取得できます。You can get a single report from the list of reports.

REST API 呼び出しを行うには、Authorization ヘッダーを "ベアラー {アクセス トークン} " の形式で含める必要があります。To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

REST API でレポートを取得するGet reports with the REST API

以下のコード サンプルでは、REST API を使用してレポートを取得する方法を示します。The following code sample shows you how to retrieve reports with the REST API:

注意

埋め込むコンテンツ アイテムを取得するサンプルは、サンプル アプリケーションの Default.aspx.cs ファイルにあります。A sample of getting a content item that you want to embed is available in the Default.aspx.cs file in the sample application. たとえば、レポート、ダッシュボード、タイルです。Examples are a report, dashboard, or tile.

using Newtonsoft.Json;

//Get a Report. In this sample, you get the first Report.
protected void GetReport(int index)
{
    //Configure Reports request
    System.Net.WebRequest request = System.Net.WebRequest.Create(
        String.Format("{0}/Reports",
        baseUri)) as System.Net.HttpWebRequest;

    request.Method = "GET";
    request.ContentLength = 0;
    request.Headers.Add("Authorization", String.Format("Bearer {0}", accessToken.Value));

    //Get Reports response from request.GetResponse()
    using (var response = request.GetResponse() as System.Net.HttpWebResponse)
    {
        //Get reader from response stream
        using (var reader = new System.IO.StreamReader(response.GetResponseStream()))
        {
            //Deserialize JSON string
            PBIReports Reports = JsonConvert.DeserializeObject<PBIReports>(reader.ReadToEnd());

            //Sample assumes at least one Report.
            //You could write an app that lists all Reports
            if (Reports.value.Length > 0)
            {
                var report = Reports.value[index];

                txtEmbedUrl.Text = report.embedUrl;
                txtReportId.Text = report.id;
                txtReportName.Text = report.name;
            }
        }
    }
}

//Power BI Reports used to deserialize the Get Reports response.
public class PBIReports
{
    public PBIReport[] value { get; set; }
}
public class PBIReport
{
    public string id { get; set; }
    public string reportType { get; set }
    public string name { get; set; }
    public string webUrl { get; set; }
    public string embedUrl { get; set; }
}

.NET SDK を使ってレポートを取得するGet reports by using the .NET SDK

REST API を直接呼び出すのではなく、.NET SDK を使ってレポートの一覧を取得することもできます。You can use the .NET SDK to retrieve a list of reports instead of calling the REST API directly. 次のコード サンプルでは、レポートを一覧表示する方法を示します。The following code sample shows you how to list reports:

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

var tokenCredentials = new TokenCredentials(<ACCESS TOKEN>, "Bearer");

// Create a Power BI Client object. It is used to call Power BI APIs.
using (var client = new PowerBIClient(new Uri(ApiUrl), tokenCredentials))
{
    // Get the first report all reports in that workspace
    ODataResponseListReport reports = client.Reports.GetReports();

    Report report = reports.Value.FirstOrDefault();

    var embedUrl = report.EmbedUrl;
}

JavaScript を使ってレポートを読み込むLoad a report by using JavaScript

JavaScript を使って、Web ページの div 要素にレポートを読み込むことができます。You can use JavaScript to load a report into a div element on your web page. 以下のコード サンプルでは、指定したワークスペースからレポートを取得する方法を示します。The following code sample shows you how to retrieve a report from a given workspace:

注意

埋め込むコンテンツ アイテムを読み込むサンプルは、サンプル アプリケーションDefault.aspx ファイルにあります。A sample of loading a content item that you want to embed is available in the Default.aspx file in the sample application.

<!-- Embed Report-->
<div> 
    <asp:Panel ID="PanelEmbed" runat="server" Visible="true">
        <div>
            <div><b class="step">Step 3</b>: Embed a report</div>

            <div>Enter an embed url for a report from Step 2 (starts with https://):</div>
            <input type="text" id="tb_EmbedURL" style="width: 1024px;" />
            <br />
            <input type="button" id="bEmbedReportAction" value="Embed Report" />
        </div>

        <div id="reportContainer"></div>
    </asp:Panel>
</div>

Site.masterSite.master

window.onload = function () {
    // client side click to embed a selected report.
    var el = document.getElementById("bEmbedReportAction");
    if (el.addEventListener) {
        el.addEventListener("click", updateEmbedReport, false);
    } else {
        el.attachEvent('onclick', updateEmbedReport);
    }

    // handle server side post backs, optimize for reload scenarios
    // show embedded report if all fields were filled in.
    var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox');
    if (accessTokenElement !== null) {
        var accessToken = accessTokenElement.value;
        if (accessToken !== "")
            updateEmbedReport();
    }
};

// update embed report
function updateEmbedReport() {

    // check if the embed url was selected
    var embedUrl = document.getElementById('tb_EmbedURL').value;
    if (embedUrl === "")
        return;

    // get the access token.
    accessToken = document.getElementById('MainContent_accessTokenTextbox').value;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

    // Grab the reference to the div HTML element that will host the report.
    var reportContainer = document.getElementById('reportContainer');

    // Embed the report and display it within the div container.
    var report = powerbi.embed(reportContainer, config);

    // report.on will add an event handler which prints to Log window.
    report.on("error", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Error<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    }
  );
}

Power BI Premium 専用容量の使用Using a Power BI Premium dedicated capacity

これでアプリケーションの開発が完了したため、専用の容量を持つワークスペースに戻ります。Now that you've completed developing your application, it's time to back your workspace with a dedicated capacity.

専用の容量を作成するCreate a dedicated capacity

専用の容量を作成することで、ワークスペースでコンテンツ専用のリソースを所有する利点が得られます。By creating a dedicated capacity, you can take advantage of having a dedicated resource for the content in your workspace. ページ分割されたレポートの場合は、少なくとも P1 容量を使用してワークスペースをバックアップする必要があります。For paginated reports you must back your workspace with at least a P1 capacity. Power BI Premium を使用して、専用の容量を作成できます。You can create a dedicated capacity by using Power BI Premium.

次の表は、Microsoft 365 で利用可能な Power BI Premium SKU の一覧です。The following table lists the Power BI Premium SKUs available in Microsoft 365:

容量ノードCapacity node 仮想コアの合計Total vCores
(バックエンド + フロント エンド)(back end + front end)
バックエンドの仮想コアBack-end vCores フロント エンドの仮想コアFront-end vCores DirectQuery/ライブ接続の制限DirectQuery/live connection limits
EM1EM1 1 仮想コア1 vCore 0.5 仮想コア、3 GB の RAM0.5 vCore, 3 GB of RAM 0.5 仮想コア0.5 vCore 1 秒あたり 3.753.75 per second
EM2EM2 2 仮想コア2 vCores 1 仮想コア、5 GB の RAM1 vCore, 5 GB of RAM 1 仮想コア1 vCores 1 秒あたり 7.57.5 per second
EM3EM3 4 仮想コア4 vCores 2 仮想コア、10 GB の RAM2 vCores, 10 GB of RAM 2 仮想コア2 vCores 1 秒あたり 1515 per second
P1P1 8 仮想コア8 vCores 4 仮想コア、25 GB の RAM4 vCores, 25 GB of RAM 4 仮想コア4 vCores 1 秒あたり 3030 per second
P2P2 16 仮想コア16 vCores 8 仮想コア、50 GB の RAM8 vCores, 50 GB of RAM 8 仮想コア8 vCores 1 秒あたり 6060 per second
P3P3 32 仮想コア32 vCores 16 仮想コア、100 GB の RAM16 vCores, 100 GB of RAM 16 仮想コア16 vCores 1 秒あたり 120120 per second
P4P4 64 仮想コア64 vCores 32 仮想コア、200 GB の RAM32 vCores, 200 GB of RAM 32 仮想コア32 vCores 1 秒あたり 240240 per second
P5P5 128 仮想コア128 vCores 64 仮想コア、400 GB の RAM64 vCores, 400 GB of RAM 64 仮想コア64 vCores 1 秒あたり 480480 per second

注意

  • Microsoft Office アプリで埋め込もうとしている場合は、EM SKU を使用して、無料の Power BI ライセンスでコンテンツにアクセスできます。When you're trying to embed with Microsoft Office apps, you can use EM SKUs to access content with a free Power BI license. しかし、Powerbi.com または Power BI Mobile を使用する場合、無料の Power BI ライセンスでコンテンツにアクセスすることはできません。But you can't access content with a free Power BI license when you're using Powerbi.com or Power BI mobile.
  • Powerbi.com または Power BI Mobile を使用して、Microsoft Office アプリで埋め込もうとしている場合は、無料の Power BI ライセンスでコンテンツにアクセスできます。When you're trying to embed with Microsoft Office apps by using Powerbi.com or Power BI mobile, you can access content with a free Power BI license.

専用の容量にワークスペースを割り当てるAssign a workspace to a dedicated capacity

専用の容量を作成した後、ワークスペースをその専用の容量に割り当てることができます。After you create a dedicated capacity, you can assign your workspace to that dedicated capacity. このプロセスを完了するには、次の手順に従います。To complete this process, follow these steps:

  1. Power BI サービス内でワークスペースを展開し、コンテンツを埋め込むために使用しているワークスペースの省略記号を選択します。Within the Power BI service, expand workspaces and select the ellipsis for the workspace you're using for embedding your content. 次に、 [Edit workspaces](ワークスペースの編集) を選択します。Then select Edit workspaces.

    ワークスペースを編集する

  2. [詳細] を展開し、 [専用の容量] を有効にします。Expand Advanced and enable Dedicated capacity. 作成した専用の容量を選択します。Select the dedicated capacity you created. その後、 [保存] を選びます。Then select Save.

    専用の容量を割り当てる

  3. [保存] を選択すると、ワークスペース名の横にひし形が表示されます。After you select Save, you should see a diamond next to the workspace name.

    容量に関連付けられたワークスペース

管理者設定Admin settings

グローバル管理者または Power BI サービス管理者は、テナントに対して REST API を使う機能を有効または無効にできます。Global admins or Power BI service administrators can turn the ability to use the REST APIs on or off for a tenant. Power BI 管理者は、組織全体または個々のセキュリティ グループに対してこれを設定できます。Power BI admins can set this setting for the entire organization or for individual security groups. 既定では組織全体に対して有効になります。It's enabled for the entire organization by default. Power BI 管理ポータルでこれらの変更を行うことができます。You can make these changes in the Power BI admin portal.

次の手順Next steps

このチュートリアルでは、Power BI の組織アカウントを使用して、アプリケーションに Power BI コンテンツを埋め込む方法を説明しました。In this tutorial, you learned how to embed Power BI content into an application by using your Power BI organization account. これで、アプリを使用して、アプリケーションへの Power BI コンテンツの埋め込みを試すことができます。You can now try to embed Power BI content into an application by using apps. また、顧客のために Power BI コンテンツを埋め込むことができます (ページ分割されたレポートの埋め込みにはまだ対応していません)。You can also try to embed Power BI content for your customers (not supported yet for embedding paginated reports):

さらに質問がある場合は、Power BI コミュニティで質問してみてくださいIf you have more questions, try asking the Power BI Community.