すべてのプロダクト
Search

このプロダクト

    Quick BI:レポート埋め込みの基本ソリューション

    ドキュメントセンター

    Quick BI:レポート埋め込みの基本ソリューション

    最終更新日:Jun 24, 2026

    Quick BI では、ワークスペースからダッシュボードやワークブックなどのレポートをサードパーティシステムに埋め込み、シームレスなビジネス統合を実現できます。このソリューションは、Quick BI Pro と Quick BI Standard で利用できます。

    制限事項

    • 基本ソリューションは、ダッシュボードとワークブックの埋め込みにのみ対応しています。

    • ワークブックのデータ入力ページをサードパーティ環境に埋め込む場合、一部のシステムブラウザでは、クロスオリジンの iframe による Cookie の書き込みが妨げられることがあります。これにより、複雑なワークブックのデータ入力ページでデータ送信が失敗する可能性があります。例えば、iOS デバイスの WeCom の組み込みブラウザで埋め込みワークブックのデータ入力ページを開くと、データを入力して送信した後にデータ送信が失敗します。

      したがって、Quick BI プラットフォームで直接ワークブックのデータ入力機能を使用することを推奨します。

    背景情報

    • システムに Quick BI レポートを埋め込むには、レポートの埋め込みを設定する必要があります。

      • Quick BI Pro を使用する場合、レポートを埋め込んだ後にデータベースの権限を区別することはできません。行レベルの権限は埋め込みレポートには適用されず、権限はレポート所有者と同じになります。拡張ソリューションには対応していません。

      • Quick BI Standard を使用する場合、レポートを埋め込んだ後にデータベースの権限を区別できます。つまり、同じレポートでも、ユーザーごとに表示されるデータが異なります。拡張ソリューションにも対応しています。詳細については、「レポートにおける埋め込みデータ権限の制御とパラメーター転送のためのセキュリティ拡張ソリューション」をご参照ください。

    • Alibaba Cloud International には、次のドメイン名を持つ 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

    説明

    このトピックでは、URL 構築の例として香港 (中国) サイトのドメイン名を使用します。他のサイトを使用する場合は、ドメイン名をお使いのサイトのものに置き換えてください。

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

    レポートの埋め込みは、「公開済み」状態のレポートでのみ設定できます。

    Open Platform モジュールからレポートの埋め込みを有効にできます。

    1. Quick BI のホームページで、図の手順に従って [埋め込みレポート] ページに移動します。

      image

    2. [埋め込みレポートの追加] ページで、対象のワークスペースとオブジェクトタイプを選択します。リストで目的のレポートを選択し、[埋め込みを有効にする] をクリックします。リストが長い場合は、レポート名を入力して検索することもできます。

      image.png

      説明

      ワークブックのデータ入力ページをサードパーティ環境に埋め込む場合、一部のシステムブラウザではクロスオリジンの iframe による Cookie の書き込みが禁止されていることにご注意ください。これにより、データ送信が失敗する可能性があります。したがって、Quick BI プラットフォームで直接ワークブックのデータ入力機能を使用することを推奨します。

    3. 埋め込み設定

      レポート埋め込み設定のテスト機能は、拡張ソリューションにのみ対応しています。

      重要

      テスト機能は試用目的のみです。実際の使用には、「ステップ 2：HTTPS インターフェース経由での accessTicket の取得」と「ステップ 3：ログイン不要 URL の構築」を完了する必要があります。

      埋め込みを有効にすると、基本ソリューションと拡張ソリューションでは、統合時に提供される機能が異なります。

      機能

      基本ソリューション

      拡張ソリューション

      紐付けられたユーザー

      レポート所有者、変更不可

      カスタマイズ可能、パーソナライズされたビューが可能です

      アクセス回数

      チケットあたり最大 100,000 回

      無制限、カスタム設定に対応

      透かし

      非対応

      対応

      (データスクリーン自体が透かしに対応していない場合を除く)

      有効期間

      最大 240 分

      カスタマイズ可能

      グローバルパラメーター

      非対応

      対応

      埋め込みのブロック

      非対応

      対応

      ジャンプ回数

      説明

      ジャンプ先のレポートでも埋め込みが有効になっている必要があります。

      1 回のジャンプのみ可能です。

      例えば、レポート A からレポート B にジャンプした後、レポート B はレポート C にジャンプできません。

      無制限のジャンプに対応しています。

      例えば、レポート A からレポート B にジャンプした後、レポート B はレポート C にジャンプでき、以降も同様です。

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

    次の例では、ワークスペースのダッシュボードをサードパーティシステムに埋め込む方法を示します。

    • ダッシュボードへのアクセスを有効にするアカウントが開発者またはアナリストの権限を持つ場合、そのアカウントで作成されたダッシュボードの権限のみを有効にできます。

    • アカウントが管理者権限を持つ場合、ワークスペース内のすべてのレポートの権限を有効にできます。

      1. 次の手順に従って、AccessKey ID と AccessKey シークレットを取得します。これらは accessId と accessKey に対応します。

        1. Quick BI コンソールにログインします。

        2. Quick BI のホームページで、図の手順に従って AccessKey ID と AccessKey シークレットを取得します。

          image

      2. Alibaba Cloud アカウント ID を取得します。これは aliyunUid に対応します。

        Alibaba Cloud アカウントにログインし、右上のプロフィール画像をクリックしてアカウント ID を表示します。

        image.png

      3. レポート編集ページで、レポート ID を取得します。これは worksId に対応します。

        image

      4. accessTicket を取得します。

        前の手順で取得した accessId、accessKey、aliyunUid、worksId パラメーターを次のリクエスト URL に追加します。次に、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 を生成することはできませんが、既存のものは引き続き使用できます。image

          • アカウントが [組織管理] > [ユーザー管理] から削除された場合、新しい accessTicket を生成できず、既存のものも使用できなくなります。image

        • aliyunUid は、accessTicket を生成する際に、現在のロールが組織レポートのログイン不要アクセスを有効にする権限を持っているかどうかを検証するためにのみ使用します。サードパーティの埋め込みレポートでの ID バインディングには使用されません。

        • validityTime はオプションのパラメーターです。値の範囲は 1 から 240 です。デフォルト値は 240 です。単位は分です。

        • accessTicket を直ちに無効にするには、aliyunUid、accessId、accessKey、accessTicket に対応する値を指定して POST リクエストを送信します。

          https://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

    1. Quick BI ドメイン名を取得します。

      例えば、香港 (中国) の Quick BI サイトのドメイン名は bi-cn-hongkong.data.aliyun.com/ です。お使いの環境のドメイン名を使用する必要があります。

    2. レポートのプレビュー URL を取得します。

      レポートのプレビューページの URL は次のとおりです。必要なものを選択してください。

      • ダッシュボード：token3rd/dashboard/view/pc.htm

      • ワークブック：token3rd/report/view.htm

    3. レポート編集ページで、レポート ID を取得します。

      • ダッシュボード ID

        ダッシュボード編集ページで、アドレスバーから pageId の値を取得します。image

      • ワークブック ID

        ワークブック編集ページで、アドレスバーからワークブック ID の値を取得します。image

    4. ステップ 2 で取得した Quick BI ドメイン名、レポートプレビュー URL、レポート ID、および AccessTicket をリクエスト URL に追加します。

      • ダッシュボードの形式：https://<Quick BI ドメイン名>/<レポートプレビュー URL>?pageId=<レポート ID>&accessTicket=<AccessTicket>

      • ワークブックの形式：https://<Quick BI ドメイン名>/<レポートプレビュー URL>?id=<レポート ID>&accessTicket=<AccessTicket>

    埋め込みレポートの管理

    埋め込みレポートに対して、次の操作を実行できます。

    • 埋め込みレポートの検索：レポート一覧ページの検索ボックスにレポート名のキーワードを入力し、查询 アイコンをクリックしてレポートを検索します。

      レポートのワークスペースまたはタイプを選択して、検索範囲を絞り込むことができます。

    • 埋め込みレポート数の表示。詳細については、「埋め込みレポート数の表示」をご参照ください。

    • 埋め込みレポートの削除：レポートの横にある 删除 アイコンをクリックして削除します。

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

    1. Quick BI のホームページで、[Open Platform] をクリックします。

    2. 左側のナビゲーションペインで、[Embedded Analytics] をクリックします。

      [Report Embedding] ページで、サードパーティシステムに埋め込まれているレポートの数を表示できます。image

    「access report_tree unauthorized」エラーの解決方法

    問題の説明

    サードパーティのレポート埋め込み機能を使用すると、次の図に示すエラーメッセージが表示されます。1

    原因

    対応するワークスペースでレポートの権限が有効になっていません。

    ソリューション

    次の手順に従って、レポートの権限を有効にできます。image.png

    埋め込み Quick BI レポート高さの自動調整方法 (PC)

    問題の説明

    サードパーティシステムが iframe を使用して Quick BI ダッシュボードを埋め込む場合、クロスドメインのセキュリティ制限によりシステムが iframe コンテンツの高さを取得できないため、ダッシュボードにスクロールバーが表示されることがあります。

    ソリューション

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

    これには、次の 2 つの方法のいずれかを使用できます。

    • iframe コンテンツの高さを親ページに渡します。

      // Quick BI の URL。必要に応じて他の URL を追加できます。
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 の URL。必要に応じて他の URL を追加できます。
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> は、ページの body 高さを自動調整します。<page_Id> はダッシュボードのページ ID です。accessTicket はダッシュボードにアクセスするためのトークンです。 -->
        <script>
      // Quick BI の URL。必要に応じて他の URL を追加できます。
      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% には互換性の問題があります。 */
}