サードパーティシステムにレポートを埋め込む方法 - Quick BI

Quick BI を使用すると、グループスペースのレポート (ダッシュボード、ワークブック) を外部システムに統合し、ビジネスプロセスを効率化できます。このガイドでは、サードパーティシステムへのレポートの埋め込みについて詳しく説明します。Pro Edition と Professional Edition の両方に関連する内容です。

制限事項

Basic Edition では、ダッシュボードとワークブックの埋め込みのみがサポートされています。
ワークブックのレポートページをサードパーティ環境に埋め込む場合、一部のブラウザではクロスオリジンの iframe 埋め込みがブロックされることがあります。これにより、cookie の書き込みが妨げられ、複雑なワークブックのレポートページでデータ送信が失敗する可能性があります。たとえば、iOS システムの WeCom 組み込みブラウザでは、複雑なワークブックのレポートページを埋め込んでデータを送信しようとすると、データ送信の問題が発生する場合があります。
そのため、ワークブックのレポート機能は Quick BI プラットフォームで直接利用することを推奨します。

背景情報

ご利用のシステム内で Quick BI レポートを埋め込んで利用するには、レポートの埋め込み機能を設定する必要があります。
- Quick BI Pro では、サードパーティレポートの埋め込み時にデータベース権限は区別されません。埋め込み後、行レベルの権限は無効になり、権限はデフォルトでレポート作成者のものになります。セキュリティ強化ソリューションはサポートされていません。
- 一方、Quick BI Professional Edition では、サードパーティシステムにレポートを埋め込む際にデータベース権限を区別できます。このエディションでは、異なるユーザーが同じレポートを異なるデータで表示でき、埋め込み用のセキュリティ強化ソリューションもサポートされています。詳細については、「レポートにおけるデータ権限管理とパラメーター伝達のためのセキュリティ強化ソリューション」をご参照ください。
5 つの国際サイトがあり、それぞれに独自のドメイン名があります：
- シンガポール： bi-ap-southeast-1.data.aliyun.com
- 香港 (中国)： bi-cn-hongkong.data.aliyun.com
- マレーシア (クアラルンプール)： bi-ap-southeast-3.data.aliyun.com
- ドイツ (フランクフルト)： bi-eu-central-1.data.aliyun.com
- インドネシア： bi-ap-southeast-5.data.aliyun.com

説明

このガイドでは、リンクの連結例として香港 (中国) のドメイン名を使用しています。他の場所の場合は、該当するサイトのドメイン名に置き換えてください。

ステップ 1: 埋め込み対象レポートの有効化

レポートの埋め込みは、公開ステータスのレポートでのみサポートされています。

レポートの埋め込みを有効にするには、オープンプラットフォームモジュールにアクセスします：

Quick BI プロダクトのホームページから、下図のように埋め込みレポートページに移動します。
[埋め込みレポートの追加] ページで、目的のワークスペースとデータオブジェクトタイプを選択し、リストからデータオブジェクト名を選択して [埋め込みを有効にする] をクリックします。レポート名検索機能を使用すると、埋め込みたいレポートをすばやく見つけることができます。
説明
ワークブックのレポートページをサードパーティ環境に埋め込む場合、一部のブラウザではクロスオリジンの iframe 埋め込みがブロックされることがあります。これにより、cookie の書き込みが妨げられ、ワークブックのレポートページでデータ送信が失敗する可能性があります。そのため、ワークブックのレポート機能は Quick BI プラットフォームで直接利用することを推奨します。

埋め込み設定

レポート埋め込み設定のデバッグ機能は、拡張スキームを対象としています。

重要

このデバッグは機能テスト専用です。実際のデプロイメントでは、「ステップ 2: HTTPS インターフェース経由での AccessTicket の取得」と「ステップ 3: ログイン不要 URL の構築」を完了してください。

埋め込みを有効にした後、実際の統合における基本スキームと拡張スキームの機能は異なります。詳細は以下の表をご参照ください：

機能	基本スキーム	拡張スキーム
ユーザーのバインド	レポートのオーナー、変更不可	カスタマイズをサポート、各ユーザーにパーソナライズ
アクセス回数	チケットあたり最大 100,000 回	無制限、カスタム設定をサポート
ウォーターマーク	サポートされていません	サポート (ウォーターマークをサポートしない大画面を除く)
有効期間	最大 240 分	カスタマイズをサポート
グローバルパラメーター	サポートされていません	サポート
ブロックの埋め込み	サポートされていません	サポートされています
ジャンプ回数説明ジャンプ先のレポートも埋め込みを有効にする必要があります。	1 回のみジャンプ可能例：レポート A がレポート B にジャンプした後、レポート B はレポート C にジャンプできません。	無制限のジャンプをサポート例：レポート A がレポート B にジャンプした後、レポート B はレポート C にジャンプでき、C はさらにジャンプを続けることができます。

ステップ 2: HTTPS インターフェース経由での AccessTicket の取得

このセクションでは、グループスペースのダッシュボードをサードパーティシステムに埋め込む例を使用します。

ダッシュボードへのアクセスを有効にするアカウントが開発者または分析権限を持つ場合、そのアカウントが作成したダッシュボードへのアクセスのみを有効にできます。
アカウントが管理権限を持つ場合、そのワークスペース内のすべてのレポートへのアクセスを有効にできます。
1. 以下の手順に従って、AccessKey ID と AccessKey Secret (それぞれ accessId と accessKey と呼ばれます) を取得します。
  1. Quick BI コンソールにログインします。
  2. Quick BI のホームページで、下図の指示に従って AccessKey ID と AccessKey Secret を取得します。
2. Alibaba Cloud アカウント ID (aliyunUid とも呼ばれます) を取得します。
  Alibaba Cloud アカウントにログインし、右上隅のプロフィール画像をクリックしてアカウント ID を表示します。
3. レポート編集ページで、レポート ID (worksId とも呼ばれます) を取得します：
4. accessTicket の取得
  前のステップで取得した accessId、accessKey、aliyunUid、および worksId パラメーターを以下のリクエストアドレスに組み込み、GET リクエストを送信して accessTicket を取得します。
  https://bi-cn-hongkong.data.aliyun.com//openapi/ac3rd/ticket/create?worksId=xx&aliyunUid=xx&accessKey=xx&accessId=xx&validityTime=xx
  説明
  accessTicket を取得するために使用されるアカウントには、以下の制限があります：
  アカウントが [テナント管理] > [ユーザー管理] で無効になっている場合、新しい accessTicket を生成することはできません。ただし、既存の accessTicket は有効なままです。
  アカウントが [テナント管理] > [ユーザー管理] で削除された場合、新しい accessTicket を生成することはできません。既存の accessTicket は無効になります。
  aliyunUid は、accessTicket を生成する際に、現在のロールが組織レポートのシングルサインオンを有効にする権限を持っているかどうかを検証するためにのみ使用されます。サードパーティの埋め込みレポートの ID をバインドするものではありません。
  validityTime はオプションのパラメーターで、有効値の範囲は 1 から 240、デフォルトは 240 です。単位は分です。
  accessTicket を直ちに無効にするには、対応する aliyunUid、accessId、accessKey、および accessTicket の値を含む POST リクエストを送信します。
  http://bi-cn-hongkong.data.aliyun.com//openapi/ac3rd/ticket/invalid?aliyunUid=xx&accessId=xx&accessKey=xx&accessTicket=xx

ステップ 3: ログイン不要 URL の構築

説明

このスキームはユーザー認証のバインドをサポートしていません。デフォルトでは、レポートのオーナーの権限でレポートにアクセスします。

連結プロセスと例については、以下の表をご参照ください。

プロセス	ダッシュボードの例	ワークブックの例
1. Quick BI ドメイン名の取得	`bi-cn-hongkong.data.aliyun.com/`	`bi-cn-hongkong.data.aliyun.com/`
2. プレビューレポート URL の取得	`token3rd/dashboard/view/pc.htm`	`token3rd/report/view.htm`
3. レポート ID の取得	`dd0****83f`	`42****18ef6`
4. AccessTicket の取得	`fd138bcb-****-4fde-b413-81bcee59bdb6`	`fd138bcb-****-4fde-b413-81bcee59bdb6`

連結のフォーマットとレポート URL は以下の通りです：

ダッシュボードの場合、このフォーマットを使用します： https://<Quick BI ドメイン名>/<プレビューレポート URL>?pageId=<レポート ID>&accessTicket=<AccessTicket>。結果の URL は次のようになります：
```
https://bi-cn-hongkong.data.aliyun.com//token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
```
ワークブックの場合、このフォーマットを使用します： https://<Quick BI ドメイン名>/<プレビューレポート URL>?id=<レポート ID>&accessTicket=<AccessTicket>。結果の URL は次のようになります：
```
https://bi-cn-hongkong.data.aliyun.com//token3rd/report/view.htm?id=<42****18ef6>&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
```

Quick BI ドメイン名を決定します。
たとえば、Quick BI の香港 (中国) サイトのドメイン名は bi-cn-hongkong.data.aliyun.com/ です。ご利用の環境のドメイン名を使用してください。
プレビューレポート URL を特定します。
レポートタイプに対応するプレビューページの URL は以下の通りです。要件に応じて選択してください。
- ダッシュボードの場合： token3rd/dashboard/view/pc.htm
- ワークブックの場合： token3rd/report/view.htm
レポート編集ページでレポート ID を取得します。
- ダッシュボード ID の場合
  ダッシュボード編集ページで、アドレスバーにあるダッシュボードの pageId の値を見つけます。
- ワークブック ID
  ワークブック編集ページで、アドレスバーにあるワークブック ID の値を見つけます。
Quick BI ドメイン名、プレビューレポート URL、レポート ID、およびステップ 2 で取得した AccessTicket パラメーターを以下のリクエストアドレスに結合します。
- ダッシュボードの場合、https://<Quick BI ドメイン名>/<プレビューレポート URL>?pageId=<レポート ID>&accessTicket=<AccessTicket> のフォーマットを使用します。
- ワークブックの場合、https://<Quick BI ドメイン名>/<プレビューレポート URL>?id=<レポート ID>&accessTicket=<AccessTicket> のフォーマットを使用します。

埋め込みレポートの管理

埋め込み済みのサードパーティレポートに対して、以下の操作を実行できます：

埋め込みレポートをクエリするには、レポートリストページの検索ボックスにレポート名のキーワードを入力し、アイコンをクリックします。
レポートのワークスペースやタイプを選択して、検索を絞り込むことができます。
埋め込みレポートの数を表示するには、「埋め込みレポート数の表示」をご参照ください。
埋め込みレポートを削除するには、レポートの横にあるアイコンをクリックします。

埋め込みレポート数の表示

Quick BI プロダクトのホームページで、[オープンプラットフォーム] をクリックします。
左側のナビゲーションウィンドウで、[埋め込み分析] をクリックします。
[レポートの埋め込み] ページに、サードパーティシステムに埋め込まれたレポートの数が表示されます。

レポート埋め込み時の「access report_tree unauthorized」エラーの解決方法

問題の説明

レポートをサードパーティシステムに埋め込む際に、以下のエラーメッセージが表示されることがあります。

原因

このエラーは、対応するグループスペースでレポートの権限が有効になっていない場合に発生します。

ソリューション

下図の手順に従って、レポートの権限を有効にします。

サードパーティに埋め込んだ Quick BI レポートの高さ (PC) を自動調整する方法

問題の説明

Iframe を使用して Quick BI ダッシュボードを埋め込む際、ブラウザのクロスドメインセキュリティ制限によりダッシュボードの高さを取得できず、スクロールバーが表示されることがあります。

ソリューション

Quick BI は、読み込み時に postMessage を使用してダッシュボードの高さを外部ページに送信します。外部ページはこのイベントをリッスンして、ダッシュボードの高さと ID を取得できます。

これを実現するには 2 つの方法があります：

Iframe コンテンツの高さを能動的に外部ページに送信します。

// Quick BI のアドレス。他のアドレスを使用する場合は追加してください
const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com/'];
function messageListener(event) {
  if (quickBIURL.includes(event.origin)) {
    // postMessage を使用して送信される高さ
    console.log('Quick BI Dashboard Height:', event.data.height);
    // postMessage を使用して送信されるダッシュボードページ ID
    console.log('Quick BI Dashboard Id:', event.data.pageId);
  }
}
// ダッシュボードが読み込まれる前にリッスンする
window.addEventListener('message', messageListener);

外部ページが Iframe ページに postMessage を送信して、ダッシュボードの高さをリクエストします。

注：

Iframe は Quick BI ダッシュボードを埋め込んでいるものを指します。
メッセージには { getDashboardHeight: true } を含める必要があります。

以下はコードブロックの例です。

// Quick BI のアドレス。他のアドレスを使用する場合は追加してください
const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com/'];
function messageListener(event) {
  if (quickBIURL.includes(event.origin)) {
    // postMessage を使用して送信される高さ
    console.log('Quick BI Dashboard Height:', event.data.height);
    // postMessage を使用して送信されるダッシュボードページ ID
    console.log('Quick BI Dashboard Id:', event.data.pageId);
  }
}
// ダッシュボードが読み込まれる前にリッスンする
window.addEventListener('message', messageListener);
// Quick BI ダッシュボードの高さを能動的にリクエストする
// Quick BI ダッシュボードを埋め込む Iframe
const iframe = document.querySelector('iframe');
// メッセージで渡されるデータには { getDashboardHeight: true } を含める必要があります
iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');

説明

Quick BI ダッシュボードの幅は、外側のコンテナーに合わせて自動的に調整されるため、垂直スクロールバーや幅の適応は不要です。

完全な例

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </head>
    <body>
        <iframe 
        class="quickbi-iframe-demo"
    src="https://bi-cn-hongkong.data.aliyun.com//token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6"
      scrolling="no"
     frameborder="0" 
      width="100%" 
      height="600">
    </iframe>
   <!-- <useBodyAutoHeight=true> は本文の高さの自動調整用、<page_Id> はダッシュボードのページ ID、accessTicket はダッシュボードのアクセストークンです -->
        <script>
      // Quick BI のアドレス。他のアドレスを使用する場合は追加してください
      const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com'];
      function messageListener(event) {
        if (quickBIURL.includes(event.origin)) {
          // postMessage を使用して送信される高さ
          console.log('Quick BI Dashboard Height:', event.data.height);
          // postMessage を使用して送信されるダッシュボードページ ID
          console.log('Quick BI Dashboard Id:', event.data.pageId);
        }
      }
      // ダッシュボードが読み込まれる前にリッスンする
      window.addEventListener('message', messageListener);
      // Quick BI ダッシュボードを埋め込む Iframe
      const iframe = document.querySelector('iframe');
       // Quick BI ダッシュボードの高さを能動的にリクエストする
      // メッセージで渡されるデータには { getDashboardHeight: true } を含める必要があります
      iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');
        </script>
    </body>
</html>

モバイルページで Iframe を使用してサードパーティアプリケーションに埋め込む際の幅の設定方法

問題の説明

古い iOS バージョンでの Iframe の互換性の問題により、Iframe の実際の幅がオーバーフローし、ダッシュボードのスライド、固定リストテーブルのスクロール不可、チャートの切り捨て、クエリコントロールのポップアップボックスのずれなど、さまざまな表示の問題が発生する可能性があります。

ソリューション

Iframe のスタイルを適宜調整します。

変更には、以下のコード例を厳密に参照してください：

iframe {
    border-width: 0;
    min-width: 100%;
    width: 0;
    *width: 100%;
    height: 667px; /* 高さは静的フィールドを使用する必要があります。画面の高さを取得した後に動的に設定できます。height: 100% には互換性の問題があります */
}