1. Oracle Analytics Serverでのデータのビジュアル化
  2. リファレンス
  3. Webページへの分析コンテンツの埋込み
  4. Webページへのコンテンツの埋込みの概要

Webページへのコンテンツの埋込みの概要

この項のトピックを使用して、必要な情報を収集し、前提条件タスクを実行し、HTMLページの作成を開始します。

トピック:

環境の登録

開発、本番およびテスト環境を安全ドメインとして登録する必要があります。

CORS保護のため、埋込みコンテンツを含むHTMLファイルをブラウザで直接開くことはできません。この問題を回避するには、Webサーバー(localhostまたは別のWebサーバー)を安全ドメインとして登録する必要があります。

localhost Webサーバーをテストに使用する場合は、http://localhost:<port>およびhttp://127.0.0.1:<port>への参照を追加することが必要な場合があります。

  1. Oracle Analyticsに移動し、「ナビゲータ」をクリックして、「コンソール」をクリックします。
  2. 「安全ドメイン」をクリックします。
  3. 「ドメインの追加」をクリックし、ドメインを入力します。たとえば、http://localhost:8080.のようになります
  4. 「埋込み」を選択します。

コンテンツのJavascriptおよびHTMLの検索

Oracle Analyticsでは、<script>タグとHTMLが生成されます。これをコピーして、カスタム・アプリケーションまたはポータルWebページのHTMLページに貼り付けることができます。

  1. Oracle Analyticsに移動し、埋め込むコンテンツが含まれているプロジェクトを開きます。
  2. 「オプション」をクリックし、「開発者」をクリックします。
  3. 「埋込み」タブをクリックします。
  4. 「含める埋込みスクリプト」フィールドを探し、「コピー」をクリックして<script>タグをコピーし、HTMLページに貼り付けます。
  5. (オプション)埋込みプロジェクトでプロジェクトのデフォルト・ビューを表示するには、「デフォルト」フィールドを探し、「コピー」をクリックしてHTMLをコピーし、それをHTMLページに貼り付けます。
  6. (オプション)埋込みプロジェクトで特定のキャンバスなどの項目を表示するには、項目のフィールドを探し、「コピー」をクリックしてHTMLをコピーし、それをHTMLページに貼り付けます。

HTMLページの準備

分析コンテンツを埋め込むには、HTMLページを作成または更新し、必要なDOCTYPE宣言、dirグローバル属性、embedding.js JavaScriptソースへの参照および埋込みプロジェクトのURLを含め、埋込みモード(JETまたはスタンドアロン)を指定し、認証方法を指定し、属性を追加する必要があります。

このトピックでは、以下について説明します。

DOCTYPEの宣言

doctype宣言を<!DOCTYPE html>に設定します。<!DOCTYPE html>以外のdoctype宣言を使用した場合、またはdoctype宣言を含めなかった場合、ページが正しくレンダリングされないなどの予期しない動作が発生します。

Dirグローバル属性

Webページのロケールに応じて、dirグローバル属性を設定します。dirグローバル属性は、埋込みコンテンツのレイアウト方向を示します。

ノート:

複数のロケールをサポートする必要がある場合は、JavaScriptを使用して属性を設定します。

属性の値オプションは次のとおりです。

  • rtl - 右から左へのレイアウトに使用します。
  • ltr - 左から右へのレイアウトに使用します。
  • auto - 使用しません。この値はOracle Analyticsではサポートされていません。

<script>タグおよびJavaScriptソース参照

ノート:

Oracle Analyticsによって、含める必要がある<script>タグおよびJavaScriptソースのURLが生成されます。

embedding.jsを参照する<script>タグをHTMLページに追加します。

Oracle Analyticsのバージョンに応じて、JavaScriptソースのURL構造は次のいずれかになります。
  • 最新バージョンの場合: "https://<instance>/public/dv/v1/embedding/<embeddingMode>/embedding.js"。このドキュメントの例ではこのURLを使用します。
  • 以前のバージョンの場合: "http://<instance>/ui/dv/v1/embedding/<embeddingMode>/embedding.js"。

<embeddingMode>はjetまたはstandaloneである必要があります。

  • コンテンツを既存のOracle JETアプリケーション内に埋め込む場合は、jetを使用します。jetを使用する場合は、アプリケーションによって使用されるOracle JETのバージョンが、Oracle Analyticsによって使用されるOracle JETのバージョンと一致している必要があります。

    埋込みアプリケーションでJETが使用されている場合、Oracle Analyticsによってアプリケーションが必要なコンポーネントで拡張されます。Oracle JETを使用するカスタム・アプリケーションへの埋込みを参照してください。

    Oracle JETは、Oracle Analyticsユーザー・インタフェースに使用されるJavascriptベースのライブラリ・セットです。

  • Oracle JETを使用しない汎用アプリケーションにビジュアライゼーション・コンテンツを埋め込む場合は、standaloneを使用します。

    埋込みアプリケーションでJETが使用されない場合は、Oracle Analyticsによって、そのJET配信は追加のコンポーネントとともにページに表示されます。Oracle JETを使用しないカスタム・アプリケーションへの埋込みを参照してください。

認証

埋込みコンテンツを表示するには認証されたセッションが必要です。ログイン・プロンプト認証の使用を参照してください。

<oracle-dv>要素

プロジェクトを埋め込むには、次のHTMLスニペットと属性値を適切にサイズ設定された要素の内部に追加する必要があります。Oracle Analyticsによって、含める必要があるHTMLが生成されます。

<oracle-dv project-path="" active-page="" active-tab-id="" filters=""></oracle—dv>

サポートされる属性 - 次の属性では、Knockoutモデルに定義されている静的文字列およびプロパティがサポートされます。 Knockoutは、Oracle JETで使用されているテクノロジです。

注意:

これらの属性をKnockoutモデルにバインドする例は、Oracle JETを使用しないカスタム・アプリケーションへの埋込みを参照してください。

  • project-path: レンダリングするプロジェクトのリポジトリ・パスを指定します。

  • active-page: (オプション)デフォルト以外のキャンバスまたはインサイトがレンダリングされるかどうかを指定します。active-pageを指定する場合はactive-tab-idも使用して、表示する正しいキャンバスまたはストーリ・ページを指定します。有効な値はcanvasおよびinsightです。

  • active-tab-id: (オプション)表示するキャンバスまたはストーリ・ページのIDを指定します。

  • filters: (オプション)プログラムで埋込みプロジェクトにフィルタ値を渡すことができます。

  • project-options: (オプション)次のオプションを渡すことができます。
    • bDisableMobileLayout: モバイル・レイアウトを無効または有効にします。モバイル・レイアウトは、電話デバイスでのみ使用できるサマリー・カード・レイアウトを指します。値はtrueまたはfalseである必要があります。
    • bShowFilterBar: フィルタ・バーを表示または非表示にします。値はtrueまたはfalseである必要があります。

    例: <oracle-dv project-path="{{projectPath}}" active-page="canvas" active-tab-id="1" filters="{{filters}}" project-options='{"bDisableMobileLayout":true, "bShowFilterBar":false}'></oracle-dv>

  • brushing-type: ブラッシングの仕組みを制御します。指定した値により、システム・デフォルト、および保存済プロジェクト内の設定を含む、他のすべての設定がオーバーライドされます。値には、文字列on、offまたはautoを使用する必要があります。
    • on: 通常の優先度のブラッシング問合せを発行するために使用します。ブラッシング問合せや視覚化問合せは混在しており、同時に実行されます。
    • auto: デフォルト。低い優先度のブラッシング問合せを発行するために使用します。ユーザーがビジュアライゼーションと対話する場合、ブラッシング問合せが完了するまで、他のビジュアライゼーション内のマークの表示が遅延する可能性があります。

例

<!DOCTYPE html>
<html dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Embeded Oracle Analytics Project Example</title>
        <script src="https://<instance>/public/dv/v1/embedding/<embedding mode>/embedding.js" type="application/javascript">
        </script>

    </head>
    <body>
        <h1>Embeded Oracle Analytics Project</h1>
        <div style="border:1px solid black;position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
            <!--
            The following tag is the tag that will embed the specified project.
            Veryfy the project-path is the same as the server you are hosting this project on.
            -->
            <oracle-dv
               project-path="<project path>"
               active-page="canvas"
               active-tab-id="1">
            </oracle-dv>
        </div>
        <!--
        Apply Knockout bindings after DV project is fully loaded.  This should be executed in a body onload handler or in a <script> tag after the <oracle-dv> tag.
        -->
        <script>
        requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {
        ko.applyBindings();
        });
        </script>
    </body>
</html>

HTMLページにフィルタを渡す

数値およびリスト・フィルタをHTMLページに渡すことができます。これらのフィルタ・タイプで任意のタイプのデータをフィルタできます。

フィルタのペイロードは、配列項目ごとに1つのフィルタのJavascriptオブジェクトを含むJavascript配列です。

フィルタ適用時のプロジェクトのレンダリングは次のとおりです。

<oracle-dv project-path="{{projectPath}}" filters="{{filters}}">
</oracle-dv>
 
<script> 
requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {
   function MyProject() {
      var self = this;
      self.projectPath =  ko.observable("/users/weblogic/EmbeddingStory");
      self.filters = ko.observableArray([{
         "sColFormula": "\"A - Sample Sales\".\"Products\".\"P2  Product Type\"",
         "sColName": "P2  Product Type",
         "sOperator": "in", /* One of in, notIn, between, less, lessOrEqual, greater, greaterOrEqual */
         "isNumericCol": false,
         "bIsDoubleColumn": false,
         "aCodeValues": [],
         "aDisplayValues": ['Audio', 'Camera', 'LCD']
      },{
         "sColFormula": "\"A - Sample Sales\".\"Base Facts\".\"1- Revenue\"",
         "sColName": "Rev",
         "sOperator": "between", /* One of in, notIn, between, less, lessOrEqual, greater, greaterOrEqual */
         "isNumericCol": true,
         "bIsDoubleColumn": false,
         "aCodeValues": [],
         "aDisplayValues": [0, 2400000] /* Because the operator is "between", this results in values between 0 and 2400000 *
/
  }]);
}
   ko.applyBindings(MyProject);
});
</script>
サポート属性 - フィルタ・ペイロード内の各フィルタ・オブジェクトには、次の属性が含まれている必要があります。

  • sColFormula: フィルタする列の3つの部分の式を指定します。列式には3つの部分が含まれている必要があります。

    式が不明な場合は、その列を使用するプロジェクトを作成し、「ビジュアル化」タブで、「メニュー」に移動して「開発者」を選択します。「開発者」ページで、「JSON」タブをクリックして列の式を表示します。例: sColFormula": "\"A - Sample Sales\".\"Base Facts\".\"1- Revenue\""。

  • sColName: (必須)この列の一意の名前を指定します。

  • sOperator: in、notIn、between、less、lessOrEqual、greaterまたはgreaterOrEqualを使用します。
    • inおよびnotIn - リスト・フィルタに適用します。
    • between、less、lessOrEqual、greaterおよびgreaterOrEqual - 数値フィルタに適用します。

  • isNumericCol: フィルタが数値とリストのどちらであるかを指定します。値はtrueまたはfalseである必要があります。

  • isDateCol: (必須)列が日付列かどうかを示します。値はtrueまたはfalseである必要があります。列が日付であるが、年、月、四半期などではない場合は、trueを使用します。trueに設定した場合は、aDisplayValues属性で1つ以上の日付を指定します。

  • bIsDoubleColumn: 列内の表示値の後ろに二重列値があるかどうかを指定します。値はtrueまたはfalseである必要があります。

  • aCodeValues: bIsDoubleColumnがtrueである場合、この配列を使用します。

  • bHonorEmptyFilter: (オプション)空のフィルタ(たとえば、bIsDoubleColumnフラグに基づく空のaCodeValues/aDisplayValues)が優先されるかどうかを示します。この属性は、リスト・フィルタ、数値範囲フィルタ、日付範囲フィルタのすべての列フィルタに適用されます。値はtrueまたはfalseである必要があります。
    • trueに設定し、ユーザーが空のaCodeValues/aDisplayValuesを渡した場合、すべての値はフィルタに含まれます。
    • falseに設定し、ユーザーが空のaCodeValues/aDisplayValuesを渡した場合、属性は適用されず、フィルタ値に変更はありません。
    • この属性が存在しない場合、デフォルト値はfalseです。

  • aDisplayValues: bIsDoubleColumnがfalseである場合、この配列を使用してユーザー・インタフェース内の値がフィルタおよび表示されます。

    bIsDoubleColumnがtrueである場合、この配列の値はユーザー・インタフェースでの表示に使用されますが、aCodeValuesの値はフィルタリングに使用されます。bIsDoubleColumnがtrueである場合、この配列にはaCodeValues配列内と同じ数のエントリが存在する必要があり、値が整列している必要があります。たとえば、aCodeValuesに2つの値1と2があると、aDisplayValuesには2つの値aとbが必要になり、ここで1はaのコード値で、2はbのコード値です。

    isDateCol属性がtrueに設定されている場合、日付を使用してaDisplayValues配列を指定します。タイムスタンプにタイムゾーンがないか、またはタイムスタンプが指定されていない場合は、時間はローカル・タイムゾーンを使用して設定されます。次の書式のいずれかを使用します。

    • mm/dd/yyyy (例: 12/31/2011)
    • yyyy-mm-dd (例: 2011-12-31。)
    • yyyy/mm/dd (例: 2011/12/31)
    • mm/dd/yyyyまたはyyyy/mm/dd、hh:mm:ss (例: 12/31/2011または2011/12/31、23:23:00)。

      ノート: 24時間の書式を使用してください。スペースをセパレータとして使用できます。

    • mm/dd/yyyyまたはyyyy/mm/dd、hh:mm:ss AM/PM (例: 12/31/2011または2011/12/31、11:23:00 PM)。

      ノート: 12時間の書式を使用してください。スペースをセパレータとして使用できます。

    • <3文字の月名> dd yyyy (例: Mar 25 2015)
    • dd <3文字の月名> yyyy (例: 25 Mar 2015)
    • Fri Sep 30 2011 05:30:00 GMT+0530 (インド標準時)
    • ISO日付書式 - 2011-10-05T14:48:00.000Z

HTMLページのデータのリフレッシュ

埋込みプロジェクトのデータのリフレッシュ方法を構成できます。

プロジェクトを再ロードせずにデータをリフレッシュするために、refreshData関数がすべての<oracle-dv>要素にアタッチされています。それを呼び出すと、その要素の下のすべてのビジュアライゼーションが強制的にリフレッシュされます。

これは、単一の埋込みプロジェクトのデータをリフレッシュするコードです。

<oracle-dv id="project1" project-path="{{projectPath}}">
</oracle-dv>
 
<script> 
   function refreshProject() {
      $('#project1')
  [0].refreshData();
}
</script>

これは、複数の埋込みプロジェクトのデータをリフレッシュするコードです。


<script> 
   function refreshProject()
   {
      $('oracle-dv').each(function() {
         this.refreshData();
         });
}
</script>