Power BI ユーザーのために埋め込むときに (ユーザーがデータを所有している)、REST API の呼び出しと Power BI JavaScript API を使って Web アプリにタイルを統合する (埋め込む) 方法を説明します。

Web アプリケーションに埋め込まれたタイル

このチュートリアルを開始するには、Power BI アカウントが必要です。 Power BI アカウントをお持ちでない場合、無料で新規登録できます。あるいは、テスト目的で独自の Azure Active Directory テナントを作成できます。

メモ:

代わりに EmbedToken を使って Power BI ユーザーではないユーザー (アプリがデータを所有している) のためにタイルを埋め込む場合は、 「ダッシュボード、タイル、レポートをアプリケーションに統合する (アプリがデータを所有)」をご覧ください。

タイルを Web アプリに統合するには、Power BI REST API または Power BI C# SDK と、Azure Active Directory (AD) 承認アクセス トークンを使って、タイルを取得します。 そして、同じアクセス トークンを使って、タイルを読み込みます。 Power BI API は、特定の Power BI リソースへのプログラムによるアクセスを提供します。 詳しくは、「Power BI REST API の概要」と「Power BI JavaScript API」(Power BI の JavaScript API) をご覧ください。

サンプルをダウンロードする

この記事では、GitHub の「User Owns Data sample - integrate-tile-web-app」(ユーザー所有データ サンプル - integrate-tile-web-app) で使われているコードを示します。 このチュートリアルの手順を試してみるには、サンプルをダウンロードできます。

ステップ 1 - Azure AD にアプリを登録する

REST API の呼び出しを行うには、Azure AD にアプリケーションを登録する必要があります。 詳しくは、「Azure AD アプリを登録して Power BI コンテンツを埋め込む」をご覧ください。

User Owns Data sample - integrate-tile-web-app」(ユーザー所有データ サンプル - integrate-tile-web-app) をダウンロードした場合は、サンプルが Azure AD に対して認証を実行できるように、登録した後で取得するクライアント IDクライアント シークレットを使います。 サンプルを構成するには、cloud.config ファイルでクライアント IDクライアント シークレットを変更します。

ステップ 2 - Azure AD からアクセス トークンを取得する

アプリケーションでは、Power BI REST API の呼び出しを行う前に、まず、Azure AD からアクセス トークンを取得する必要があります。 詳しくは、「ユーザーを認証し、Power BI アプリ用の Azure AD アクセス トークンを取得する」をご覧ください。

ステップ 3 - タイルを取得する

Power BI タイルを取得するには、タイルの取得操作を使って、指定したダッシュボードから Power BI タイルの一覧を取得します。 タイルの一覧から、タイル ID を取得し、URL を埋め込むことができます。

タイルを取得する前に、ダッシュボード ID を取得する必要があります。 ダッシュボードを取得する方法については、「ダッシュボードをアプリに統合する (ユーザーがデータを所有)」をご覧ください。

アクセス トークンを使ってタイルを取得する

ステップ 2 で取得したアクセス トークンを使って、タイル取得操作を呼び出すことができます。 タイル取得操作は、タイルの一覧を返します。 タイルの一覧から 1 つのタイルを取得できます。 タイルを取得するための完全な C# メソッドを以下に示します。 Power BI REST API の使用例については、Apiary での Power BI REST API に関するページを参照してください。

REST API 呼び出しを行うには、Authorization ヘッダーを "ベアラー {アクセス トークン}" の形式で含める必要があります。

REST API でタイルを取得する

Default.aspx.cs

using Newtonsoft.Json;

//Get a tile from a dashboard. In this sample, you get the first tile.
protected void GetTile(string dashboardId, int index)
{
    //Configure tiles request
    System.Net.WebRequest request = System.Net.WebRequest.Create(
        String.Format("{0}Dashboards/{1}/Tiles",
        baseUri,
        dashboardId)) as System.Net.HttpWebRequest;

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

    //Get tiles 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
            PBITiles tiles = JsonConvert.DeserializeObject<PBITiles>(reader.ReadToEnd());

            //Sample assumes at least one Dashboard with one Tile.
            //You could write an app that lists all tiles in a dashboard
            if (tiles.value.Length > 0)
                tileEmbedUrl.Text = tiles.value[index].embedUrl;
        }
    }
}

//Power BI Tiles used to deserialize the Get Tiles response.
public class PBITiles
{
    public PBITile[] value { get; set; }
}
public class PBITile
{
    public string id { get; set; }
    public string title { get; set; }
    public string embedUrl { get; set; }
}

.NET SDK を使ってタイルを取得する

REST API を直接呼び出すのではなく、.NET SDK を使ってダッシュボードの一覧を取得することもできます。

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 will be used to call Power BI APIs.
using (var client = new PowerBIClient(new Uri(ApiUrl), tokenCredentials))
{
    // Get a list of dashboards your "My Workspace"
    ODataResponseListDashboard tiles = client.Dashboards.GetDashboards();

    // Get a list of dashboards from a group (app workspace)
    ODataResponseListDashboard dashboards = client.Dashboards.GetDashboardsInGroup(groupId);

    Dashboard dashboard = dashboards.Value.FirstOrDefault();

    // Get the first tile from the above dashbaord
    ODataResponseListTile tiles = client.Dashboards.GetTiles(dashboard.Id);

    Tile tile = tiles.Value.FirstOrDefault();
}

ステップ 3 - JavaScript を使ってタイルを読み込む

JavaScript を使って、Web ページの div 要素にタイルを読み込むことができます。

Default.aspx

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

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

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

Site.master

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

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

// update embed tile
function updateEmbedTile() {

    // 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: 'tile',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

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

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

    // tile.on will add an event handler which prints to Log window.
    tile.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/>";
    });
}

User Owns Data sample - integrate-tile-web-app」(ユーザー所有データ サンプル - integrate-tile-web-app) をダウンロードして実行した場合、サンプルは次のようになります。

Web アプリケーションに埋め込まれたタイル

グループの使用 (アプリ ワークスペース)

グループ (アプリ ワークスペース) からタイルを埋め込むには、次の REST API 呼び出しを使って、グループのダッシュボードで使用可能なすべてのタイルの一覧を取得する必要があります。 この REST API 呼び出しについて詳しくは、「タイルを取得する」をご覧ください。 要求から結果が返るようにするには、グループでのアクセス許可が必要です。

https://api.powerbi.com/v1.0/myorg/groups/{groupId}/dashboards/{dashboard_id}/tiles

上記の API は、使用可能なタイルの一覧を返します。 各タイルには EmbedUrl プロパティがあり、グループの埋め込みをサポートするように既に構成されています。

https://app.powerbi.com/embed?dashboardId={dashboard_id}&tileId={tile_id}&groupId={group_id}

次の手順

GitHub でサンプル アプリケーションを入手して確認できます。 詳しくは、「User Owns Data sample - integrate-tile-web-app」(ユーザー所有データ サンプル - integrate-tile-web-app) をご覧ください。

JavaScript API について詳しくは、「Power BI JavaScript API」(Power BI の JavaScript API) もご覧ください。

他にわからないことがある場合は、 Power BI コミュニティで質問してみてください