1. Oracle Analytics Serverでのデータのビジュアル化
  2. リファレンス
  3. アプリケーションおよびWebページへの分析コンテンツの埋込み
  4. JavaScript埋込みフレームワークを使用した埋込み

JavaScript埋込みフレームワークを使用した埋込み

この項のトピックでは、JavaScript埋込みフレームワークを使用してOracle AnalyticsコンテンツをアプリケーションおよびWebページに埋め込む方法について説明します。

トピック:

JavaScript埋込みフレームワークを使用するための一般的なワークフロー

分析コンテンツをアプリケーションまたはWebページに埋め込む場合は、ガイドとしてこれらのタスクに従います。

ノート:

コンテンツ・アイテムのURLを使用してコンテンツを埋め込むこともできます。通常、この方法ではiFrameを使用します。「iFrameを使用した埋込み」を参照してください。
タスク 説明 詳細情報
安全ドメインの追加 コンソールを使用して、開発、本番およびテスト環境を安全なドメインとして登録します。

安全ドメインとしての埋込み環境の登録
HTMLページの作成 分析コンテンツを埋め込むHTMLページを作成します。ステップには、embedding.js JavaScriptソースおよび埋め込まれたワークブックのURLの参照、フィルタの指定、およびデータのリフレッシュ方法の指定が含まれます。

HTMLページの準備

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

HTMLページのデータのリフレッシュ
埋込みモードの指定 アプリケーションでは、JETまたは別のテクノロジを使用してコンテンツを埋め込みます。

Oracle JETを使用するカスタム・アプリケーションへの埋込み

Oracle JETを使用しないカスタム・アプリケーションへの埋込み
認証の理解 ログイン・プロンプト認証と、ユーザーに表示されるログイン・メッセージをカスタマイズする方法について学習します。

ログイン・プロンプト認証の使用

JavaScript埋込みフレームワークを使用したコンテンツの埋込みの開始

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

ノート:

この項のタスクを実行する前に、開発、本番およびテスト環境を安全ドメインとして登録したことを確認してください。「安全ドメインとしての埋込み環境の登録」を参照してください。

トピック:

開発者オプションの有効化

開発者のページにアクセスするための開発者のオプションを有効にします。開発者のページを使用して、アプリケーションおよびWebページにコンテンツを埋め込むために必要な<script>タグ、HTMLおよび列の式を見つけます。

  1. 上部のツールバーに移動し、ユーザー名をクリックします。
  2. 「プロファイル」をクリックし、「プロファイル」ウィンドウで「詳細設定」をクリックします。
  3. 「開発者オプションの有効化」アイコンをクリックし、「保存」をクリックします。

コンテンツの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ページに追加します。

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のメジャー・バージョンが一致している必要があります。たとえば、Oracle AnalyticsでJET 11.0.0が使用されている場合は、カスタム・アプリケーションでもJET 11.0.0または11.1.0を使用する必要があります。Oracle Analyticsでは、Oracle JETバージョン11.1.10が使用されます。

    埋込みアプリケーションで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: (オプション)この属性では、projectはworkbookを指します。次のオプションを渡すことを許可します:
    • 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: デフォルト。低い優先度のブラッシング問合せを発行するために使用します。ユーザーがビジュアライゼーションと対話する場合、ブラッシング問合せが完了するまで、他のビジュアライゼーション内のマークの表示が遅延する可能性があります。

例

この例では、projectのすべてのインスタンスはworkbookを指します。 

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

    </head>
    <body>
        <h1>Embedded Oracle Analytics Workbook</h1>
        <div style="border:1px solid black;position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
            <!--
            The following <oracle-dv> tag is the tag that will embed the specified workbook.
            -->
            <oracle-dv
               project-path="<project path>"
               active-page="canvas"
               active-tab-id="1">
            </oracle-dv>
        </div>
        <!--
        Apply Knockout bindings after DV workbook 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配列です。

この例では、projectのすべてのインスタンスはworkbookを指します。フィルタ適用時のワークブックのレンダリングは次のとおりです: 

<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>要素にアタッチされています。それを呼び出すと、その要素の下のすべてのビジュアライゼーションが強制的にリフレッシュされます。

これは、単一の埋込みワークブックのデータをリフレッシュするコードです。このコードでは、projectのすべてのインスタンスがworkbookを指します。 

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

これは、複数の埋込みワークブックのデータをリフレッシュするコードです。このコードでは、projectのすべてのインスタンスがworkbookを指します。 


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

Oracle JETを使用するカスタム・アプリケーションへの埋込み

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

コンテンツの埋込みを開始する前に、Oracle Analyticsで使用されているものと同じメジャー・バージョンのJETが、カスタム・アプリケーションで使用されていることを確認してください。たとえば、Oracle AnalyticsでJET 11.0.10が使用されている場合は、カスタム・アプリケーションでもJET 11.x.xを使用する必要があります。
Oracle Analyticsで使用されているJETのバージョンを確認するには、Oracle Analyticsにログインしてブラウザ・コンソールを開き、次のコマンドを実行します:
requirejs('ojs/ojcore').version
JETアプリケーションでも、Oracle Analyticsで使用されているものと同じスタイル(Alta)を使用する必要があります。
コンテンツを埋め込むOracle JETクイック・スタート・アプリケーションの作成の詳細は、Oracle JETスタート・ガイドを参照してください。
この手順では、OAJETAPPという名前のアプリケーションを埋め込む例を使用しています。
  1. 次の説明に従って、Oracle JETクイックスタート・アプリケーションをインストールし、--template=navdrawerを使用して埋込みアプリケーションOAJETAPPに名前を付けます。
  2. 埋込みアプリケーションのindex.HTMLファイル(例: OAJETAPP/src/index.html)を編集し、embedding.jsを挿入します。
    <script src="https://<instance>/public/dv/v1/embedding/jet/embedding.js" type="text/javascript">
</script>
  3. <oracle-dv>を適切なセクションに挿入します(例: OACJETAPP/src/js/views/dashboard.html)。ここでは、project-pathは、ワークブックのリポジトリのパスを指定します。
    <div class="oj-hybrid-padding" style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)">  
 <h3Dashboard Content Area</h3>
  <oracle-dv id="oracle-dv" project-path="/shared/embed/test-embed">
  </oracle-dv>
</div>
  4. 次のコマンドを使用して、クイック・スタート・アプリケーションを実行します。
    ojet build
ojet serve

Oracle JETを使用しないカスタム・アプリケーションへの埋込み

カスタム・アプリケーションでOracle JET以外のテクノロジを使用する場合は、埋込みコンテンツによってそのOracle JET配信とすべての追加コンポーネントがページに追加されます。

「開発者」オプションがワークブックの「メニュー」に表示されていない場合は、そのオプションを有効にする必要があります。開発者オプションの有効化を参照してください。
  1. embedding.jsのスタンドアロン・バージョンを挿入します。
    <script src=https://<instance>/public/ui/dv/v1/embedding/standalone/embedding.js type="text/javascript"> </script>
  2. <oracle-dv>を探して適切にサイズ設定された<div>の下に含めます。このタグを検索するには:
    1. Oracle Analyticsに移動して、埋め込むコンテンツが含まれているワークブックを開きます。
    2. ワークブックの「メニュー」をクリックして、「開発者」をクリックします。
    3. 「埋込み」タブをクリックします。
    4. 埋め込む項目を特定し、「コピー」をクリックしてコピーします。

    例

    ここでは、project-pathは、ワークブックのリポジトリのパスを指定します。 

    <div style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)">
    <oracle-dv project-path="/@Catalog/users/admin/workbook_name">
    </oracle-dv>
</div>
  3. ビジュアライゼーションが完全にロードされた後、Knockoutバインディングを適用します。これは<oracle-dv>タグの後に<script>タグの内部に配置するか、onload bodyハンドラで実行する必要があります。
    requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {
    ko.applyBindings();
});

完全な例

ここでは、project-pathは、ワークブックのリポジトリのパスを指定します。 

<!DOCTYPE html>
<html dir="ltr">
   <head>
      <title>AJAX Standalone Demo</title>
      <script src="https://<instance>/public/dv/v1/embedding/standalone/embedding.js""
type="text/javascript">
      </script> 
   </head>
   <body>
      <h1>AJAX Standalone Demo</h1>

      <div style="position: absolute; width: calc(100% - 40px); height: calc(100% - 
120px)" >
         <oracle-dv project-path="/shared/embed/test-embed">
         </oracle-dv>
      </div>

   <script>
requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {   ko.applyBindings();
});
      </script
   </body
</html

ログイン・プロンプト認証の使用

ログイン・プロンプト認証は、WebアプリケーションまたはポータルWebページに埋め込まれているコンテンツのデフォルト認証方法です。

ユーザーが埋込みコンテンツにアクセスすると、データを表示する前にログイン名とパスワードを入力するログイン画面が表示されます。Oracle AnalyticsとWebアプリケーションまたはポータルWebページの間に共通のID管理がない場合、埋込みコンテンツを含むWebアプリケーションまたはポータルWebページにユーザーがすでにログインしている場合でも、このログイン画面がユーザーに表示されます

ログイン・プロンプト認証メッセージのカスタマイズ

<oracle-dv>タグに属性を追加して、ログイン・プロンプト認証メッセージをカスタマイズします。次のattributeがサポートされています。

  • auth-message-prefix: ログイン・メッセージの接頭辞テキストを指定します。デフォルト値は"Oracle Analytics"です。

  • auth-message-link: ログイン・リンクのテキストを指定します。デフォルト値は"Login"です。

  • auth-message-suffix: ログイン・メッセージの接尾辞テキストを指定します。デフォルト値は"Required"です。

  • auth-needed-message: 認証が必要であることを示すメッセージのテキストを指定します。デフォルト値は"Requires Authentication"です。

  • auth-message-prefix-small: ログイン・メッセージの接頭辞テキストを指定します。デフォルト値は"Oracle Analytics"です。埋込みコンテナ・サイズが215ピクセル未満の場合にのみ適用できます。

  • auth-message-link-small: ログイン・リンクのテキストを指定します。デフォルト値は"Login"です。埋込みコンテナ・サイズが215ピクセル未満の場合にのみ適用できます。

  • auth-message-suffix-small - ログイン・メッセージの接尾辞テキストを指定します。デフォルト値は空の文字列です。埋込みコンテナ・サイズが215ピクセル未満の場合にのみ適用できます。

  • auth-needed-message-small: 認証が必要であることを示すメッセージのテキストを指定します。デフォルト値は"Requires Authentication"です。埋込みコンテナ・サイズが160ピクセル未満の場合にのみ適用できます。