Power BI を使った開発

• Custom Visual 開発 (Visual Studio, Node.js 編)
• Custom Visual 開発 (Power BI Developer Tools 編)
• UI の iframe による表示 (統合)
• REST API を使ったデータ連携
• Power BI Embedded を使ったアプリ開発

こんにちは。

ISV 企業など、皆さんの Custom Application に Power BI の Report を表示 (統合) することができます。ただし、後述するように、Azure AD (Office 365 など) への SignIn が前提となります。(ISV 企業が提供する独自認証と組み合わせて Power BI のレポートを貼りつける場合は、Power BI Embedded を使用してください。)

今週は、ISV 企業からも要望の多い本機能 (API) を紹介します。

補足 : 不特定に (認証なしで) レポートを公開する場合には、Power BI Service (https://app.powerbi.com) で、[Publish to Web] (Web に公開) メニュー (下図) を選択します。(2016/02 追記)
また、コードを書かずに Azure AD で保護されたレポートの貼り付けをおこなうには、新しい [Embed] メニューを選択します。(この詳細は、Power BI 公式ブログ「Easily embed secure Power BI reports in your internal portals or websites」を参照してください。) (2019/01 追記)
本投稿では、プログラム コードと連携して、組織内の権限 (Azure AD によるサインイン) が必要な埋め込み方法を紹介しています。

Power BI の UI 統合の概要

Power BI Dashboard に張り付いた 1 つ 1 つのスナップショットを Tile と呼びますが (下図参照)、現在は、この Tile の UI 統合が可能です。(Tile は、Report、DataSet、別の Dashboard、Q&A box から生成されています。)
Tile の 1 つ 1 つを対象に iframe で統合できます。

Power BI の UI (Tile) を Custom Application に統合するには、大きく下記の 3 つの Step をプログラム コードで実装します。

1. Azure Active Directory (Azure AD) の OAuth の Flow を使って、access token を取得します。(この際、Azure AD のログイン画面が表示されます。)
2. 取得した access token を使って、Tile の Embed Url を取得します。
3. Tile の Embed URL を iframe で表示し、postMessage を使って Tile の load (表示) を促します。(この際、同時に access token を渡します。)

Azure AD への Application 登録と access token の取得

「Native Application (Mobile App) で Azure Active Directory に Login するプログラミング (OAuth 紹介)」で解説した手順で、Azure Portal (現在は Azure Classic Portal) を使って、Azure AD の Application 登録をおこないます。
この際、Application の Permission として、下図の通り [Power BI service] を追加して Delegated Permission を設定します。(今回は [View all Dashboard] の Permission を付与します。)

補足 : この Permission 設定をおこなう前に、ログインしているアカウントで Power BI Service (https://powerbi.com/) にアクセスして事前に Sign Up をおこなってください。(サインアップしていない場合、Power BI Service の Application が表示されません。)

あとは、OAuth の Flow で access token を取得します。
以下に、Web Application の場合の HTTP Flow の例 (サンプル) を記載しますが、この Flow 詳細については「Native Application (Mobile App) で Azure Active Directory に Login するプログラミング (OAuth 紹介)」を参照してください。(下記の通り、resource には https://analysis.windows.net/powerbi/api を指定します。)

補足 : SPA など JavaScript のみから処理する場合は、OAuth Implicit Grant を使用します。

1) Web Browser (または Web Browser Component) を使って下記 URL を表示します。(この際、Azure AD のログイン画面が表示されます。)

GET https://login.microsoftonline.com/common/oauth2/authorize?response_type=code&client_id=d36fd670-b5bf-44a5-896c-5d19b713c1d6&resource=https%3a%2f%2fanalysis.windows.net%2fpowerbi%2fapi&redirect_uri=https%3a%2f%2flocalhost%2ftest01

2) 表示されるログイン画面で、Azure AD (Office 365) のアカウントで Login すると、下記に Redirect されます。

GET https://localhost/test01?code=AAABAAAAiL...&session_state=...

3) 上記の code を使って、下記の HTTP POST を要求します。

POST https://login.microsoftonline.com/common/oauth2/tokenContent-Type: application/x-www-form-urlencodedgrant_type=authorization_code&code=AAABAAAAiL...&client_id=d36fd670-b5bf-44a5-896c-5d19b713c1d6&client_secret=y2Jlb0%2Br...&redirect_uri=https%3A%2F%2Flocalhost%2Ftest01

4) 上記の Response として、下記の通り access token が取得できます。

HTTP/1.1 200 OKContent-Type: application/json; charset=utf-8{  "expires_in": "3599",  "token_type": "Bearer",  "scope": "Dashboard.Read.All",  "expires_on": "1443172331",  "not_before": "1443168431",  "resource": "https://analysis.windows.net/powerbi/api",  "access_token": "eyJ0eXAiOi...",  "refresh_token": "AAABAAAAiL...",  "id_token": "eyJ0eXAiOi..."}

Tile の取得

iframe に表示する Tile の Url (Embed Url) は、https://api.powerbi.com/beta/myorg/dashboards/{DashboardID}/tiles の REST API (GET) で取得できます。
なお、{DashboardID} は各 Dashboard に紐づいた ID で、下図の通り、Dashboard の URL から簡単に取得できます。(プログラム的に Dashboard ID を取得する際は、https://api.powerbi.com/beta/myorg/dashboards の REST API を使用します。)

この要求 (Request) の結果 (Response) として、下記の通り、Tile の Embed URL が取得できます。(Authorization Header には、上記で取得した access token を設定します。)

HTTP Request

GET https://api.powerbi.com/beta/myorg/dashboards/00190933-57c6-4071-9ae6-2462eb13d39a/tilesAccept: application/jsonAuthorization: Bearer eyJ0eXAiOi...

HTTP Response

HTTP/1.1 200 OKContent-Type: application/json; odata.metadata=minimal{  "@odata.context": "http://wabi-west-us-redirect.analysis.windows.net/beta/myorg/$metadata#tiles",  "value": [    {      "id": "036ae7c6-d69d-4007-a95a-1283e2e8d53e",      "title": "Opportunity Count",      "embedUrl": "https://app.powerbi.com/embed?dashboardId=00190933-57c6-4071-9ae6-2462eb13d39a&tileId=036ae7c6-d69d-4007-a95a-1283e2e8d53e"    },    {      "id": "70eb9feb-f6ad-4f9a-b90b-c7ac79504526",      "title": "Revenue",      "embedUrl": "https://app.powerbi.com/embed?dashboardId=00190933-57c6-4071-9ae6-2462eb13d39a&tileId=70eb9feb-f6ad-4f9a-b90b-c7ac79504526"    },    . . .  ]}

特定の Tile の embedUrl を取得する場合は、https://api.powerbi.com/beta/myorg/dashboards/{DashboardID}/tiles/{TileID} で取得できます。

iframe を使った Tile の表示

iframe では、上記で取得された https://app.powerbi.com/embed?dashboardId={DashboardID}&tileId={TileID} 形式の embedUrl を使用します。
ただし、この URL を iframe に設定しただけでは Tile は表示されません。postMessage を使って Tile の Load (表示) を促すことで、はじめて iframe 上に Tile が表示されます。そして、この際、一緒に access token を渡します。

下記の HTML (JavaScript) は、テキストボックス (input タグ) に入力された access token を使って、iframe 上に Tile の 1 つを表示する簡単なサンプルです。

<!DOCTYPE html><html><head>  <meta charset="utf-8" />  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>Test page</title>  <meta name="viewport" content="width=device-width, initial-scale=1"></head><body>  access token:<input type="text" id="txtToken" />  <button id="btnView">View Tile !</button>  <div id="divView">    <iframe id="ifrTile" width="100%" height="700"></iframe>  </div>  <script>    (function () {      document.getElementById('btnView').onclick = function() {        var iframe = document.getElementById('ifrTile');         iframe.src = 'https://app.powerbi.com/embed?dashboardId=00190933-57c6-4071-9ae6-2462eb13d39a&tileId=70eb9feb-f6ad-4f9a-b90b-c7ac79504526'          + '&width=500&height=722';         iframe.onload = function() {          var token = document.getElementById('txtToken').value;           var msgJson = {            action: "loadTile",            accessToken: token,            height: 500,            width: 722          };          var msgTxt = JSON.stringify(msgJson);          iframe.contentWindow.postMessage(msgTxt, "*");        };      };    }());  </script></body></html>

実行結果として、[View Tile !] ボタンを押すと、下図のように Tile の 1 つが iframe で表示されます。

標準の Power BI Dashboard では、Tile の 1 つを Click すると、それに応じた Detail の UI (元となる Report など) が表示されます。
これと同じ動きをこの統合された Application で実装する場合は、下記の通り、今度は iframe からの message (postMessage) を受信して処理します。

なお、下記では、例えば、https://app.powerbi.com/reports/… の形式の navigationUrl が渡されるので、この URL をブラウザーで表示して、通常の Power BI の Report ページを表示しています。(Web Browser 上で一度 Login している場合は、Single Sign-On により Report が表示されます。Login していない場合は、ID, Password を入力して Login する必要があります。)

. . .<body>  access token:<input type="text" id="txtToken" />  <button id="btnView">View Tile !</button>  <div id="divView">    <iframe id="ifrTile" width="100%" height="700"></iframe>  </div>  <script>    (function () {      document.getElementById('btnView').onclick = function() {        var iframe = document.getElementById('ifrTile');         iframe.src = 'https://...'          + '&width=...';        iframe.onload = function() {          ...        };                // added for click event        if (window.addEventListener) {          window.addEventListener("message", receiveMessage, false);        } else {          window.attachEvent("onmessage", receiveMessage);         }      };    }());        // added for click event    function receiveMessage(event) {      var msgJson = JSON.parse(event.data);      if (msgJson.event === "tileClicked") {         //alert(msgJson.navigationUrl);        window.open(msgJson.navigationUrl);       }    }      </script></body>

ここでは詳細を述べませんが、今回の更新で、pbix ファイル (Power BI Designer で publish したファイル) の Power BI Service への Import も、REST API で可能になっています。(「Power BI Developer Blog – Upload a local PBIX file using the import API」を参照。)
つまり、API のみを使って、Power BI の Artifacts (Report など) のセットアップや、今回のような Application への UI 組み込みが可能です。

これまで Power BI の REST API では、たいした「開発」(プログラミング) はできませんでしたが、今回の更新によって、例えば、Office 365 連携アプリなど Azure AD Account を使用する Application で、より現実的な BI 機能との連携が可能になっています。
Power BI はエンドユーザー (一般の利用者) がすぐに BI を扱えるように、というコンセプトですが、開発者 (プログラマー) にとっても、だいぶ扱いやすくなってきました。

※ 参考情報

MSDN : Integrate a Power BI tile into an app
https://msdn.microsoft.com/en-US/library/mt450498.aspx

MSDN : Power BI REST API
https://msdn.microsoft.com/en-us/library/dn877544.aspx