| Oracle® Fusion Middleware Business Intelligence Mobileアプリ・デザイナ・ユーザーズ・ガイド 11gリリース1 (11.1.1) E70086-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Business Intelligence Mobileアプリ・デザイナ・ユーザーズ・ガイド 11gリリース1 (11.1.1) E70086-01 |
|
前 |
次 |
この章では、カスタムまたはサードパーティ・プラグインを使用してBI Mobileアプリ・デザイナの機能を拡張し、他のアプリケーションで生成されたコンテンツをBI Mobileアプリに統合する方法について説明します。
この章の内容は次のとおりです。
BI Mobileアプリ・デザイナでは、アプリにカスタム・コンポーネントを追加する目的で、JavaScriptプラグイン拡張のアプリ・エディタへの追加がサポートされます。アプリを実行すると、カスタム・コンポーネントが含まれます。プラグインを追加すると、設計時にそのプラグインのアイコンが、レイアウト・エディタの「挿入」メニューに表示されます。他のアプリのコンポーネントと同様に、カスタム・コンポーネントをアプリのページにドラッグ・アンド・ドロップできます。
Mobileアプリ・デザイナ・プラグインSDKには、Oracle BI Mobileアプリ・デザイナ・プラグイン・コンポーネントを開発する環境が含まれています。キットには、プラグインjavascriptファイル、開発サーバーおよびサンプル・データが含まれています。デスクトップからプラグインの開発やテストを行えます。
あらかじめ必要なソフトウェアをインストールし、環境を設定したら、サンプル・データを含むSDKをダウンロードする準備はできています。SDKをダウンロードしたら、プラグインの設計を開始できます。環境にデプロイする前にデスクトップでプラグインをテストできます。
テスト後、プラグインをプラグイン・ギャラリにアップロードすると、即座にMobileアプリ・デザイナ内で使用可能になります。
BI Mobileアプリ・デザイナのインストールにサンプル・プラグインが含まれています。これらのサンプルで、独自のプラグイン・コンポーネントの追加によって得られるカスタム機能が示されます。これらのサンプルを確認して独自のものの設計の参考にしてください。
詳細は、次の項を参照してください。
この項では、環境の設定に必要なタスクおよびSDKに含まれるファイルについて説明します。
SDK環境で作業を行うには、次のソフトウェアをインストールする必要があります。これらのステップは初めてSDKを扱う場合にのみ必要です。
Node.js
Node.jsをNode.js Webサイトからダウンロードします。
プラグインSDKはバージョンv0.10.18で開発されました。v0.10.0以上がインストールされていることを確認してください。
Grunt
Node.jsをインストールしたら、次のノード・パッケージ・マネージャ(npm)コマンドを実行してGruntコマンドをインストールします。
$ (sudo) npm install -g lru-cache grunt-cli
ファイアウォールを設定してある場合は、次のようにhttpsプロキシ・サーバー設定を指定してコマンドを実行します。
LinuxまたはMacの場合:
$ (sudo) https_proxy=http://<your https proxy server>:<proxy port>/ npm install -g lru-cache grunt-cli
Windowsの場合:
c:\> set HTTPS_PROXY=http://<https proxy server>:<proxy port>/c:\> npm install lru-cache grunt-cli
環境を設定したら、次のステップはMobileアプリ・デザイナからサンプル・データを含むSDKをダウンロードすることです。SDKはMobileアプリ・デザイナ内からダウンロードします。新規アプリを作成することも既存のアプリを開くこともできます。重要な点は、選択したアプリによって使用されるデータが設計するプラグインに適しているということです。
SDKをダウンロードする手順は、次のとおりです。
プラグインに適したサンプル・データを使用して新規アプリを作成するか、編集モードでアプリを開きます。たとえば、プラグインでデータ・ソースに国および市のコードが必要なマップ視覚化要素を作成する場合、アプリのデータ・ソースにこれらのフィールドが含まれていることを確認します。
「コンポーネントの追加」をクリックし、「プラグイン」を選択します。
「プラグインSDK」で「プラグインの作成」をクリックします。
「プラグインの作成」ダイアログで次の項目を入力します。
プラグイン名 - このプラグインの名前を入力します。
「ラベル」フィールド - 「+」をクリックし、ラベル・フィールドのサンプル・データとなるデータ・フィールドをデータ・ソースから選択します。
「メジャー」フィールド - 「+」をクリックし、メジャー・フィールドのサンプル・データとなるデータ・フィールドをデータ・ソースから選択します。メジャー・フィールドを追加する際、集計式も選択する必要があります。合計、件数および平均がサポートされます。
データ書式 - サンプル・データを生成するための書式を選択します。
「bimadplugin.zip」をクリックし、SDKをローカル環境にダウンロードします。
SDKダウンロードには次のアイテムが含まれています。
プラグイン・ファイル(<your_plugin_name>.js)
プラグイン・ファイルは現在のディレクトリの最上位レベルの下にあります。SDKをMobileアプリ・デザイナからダウンロードすると、選択したデータ・フィールドおよびデータ構造がSample.jsファイルにコーディングされています。テキスト・エディタを使用してサンプル・プラグイン・ファイルのコーディングを完成させます。開発サーバーを起動すると、変更が即座に適用されます。
Gruntfile.js
Gruntfile.jsは開発サーバーを制御します。
プラグイン・ファイルの名前を変更する場合や別の場所にある別の.jsファイルを使用する場合以外、このファイルに変更を加える必要はありません。新しいファイル名または場所を指定するには、gruntfile.js内のpluginFile変数の値を変更します。
データ・フォルダ(data/data01.csv)
ダウンロード時に選択したサンプル・データはこのフォルダ内に置かれます。
別のサンプル・データをプラグインでテストする場合、テストに使用するcsvファイルをデータ・フォルダに配置します。BI Mobileアプリ・デザイナでは様々なソースのデータがサポートされますが、SDK環境ではデータはcsvファイルを介して提供する必要があります。
各データ・ファイルに、プラグインで指定されているものと同じデータが含まれている必要があることに注意してください。プラグインの定義に2つのデータ・フィールド・エントリが含まれている場合、csvファイルはフィールド・エントリと同じ順序の2列である必要があります。このSDKサーバーでは、データの提供時ソート、並替え、再グループ化は行われません。
node_modules、package.json
これらのファイルは環境の維持に必要です。編集したり削除しないでください。
assets
プラグインに必要なイメージ、カスケーディング・スタイル・シート(.cssファイル)またはJavascriptファイルを含めるにはこのフォルダを使用します。
この項では、プラグイン構造の仕様を示し、プラグインで使用するために提供されるAPIについて説明します。次の項目が含まれます。
プラグイン・ファイルは簡単なJavaScriptファイルです。基本的な構造があり、Mobileアプリ・デザイナで使用できるようにするにはこれに従う必要があります。基本的なコンポーネントは次のとおりです。
表7-1 プラグイン・ファイル・コンポーネントの概要
| コンポーネント | 説明 |
|---|---|
|
id |
(必須)プラグインの一意のID |
|
component |
(必須)プラグインの名前、ツールチップおよびアイコンで構成されます |
|
remoteFiles |
(オプション)サポートされる.cssおよびJavaScriptファイル |
|
properties |
(必須)プラグインの定義済プロパティ。たとえば、レンダリングに使用されるフィールドおよびデータ |
|
fields |
データ・ソースから選択したデータ・フィールド |
|
dataType |
d3hierachy、CSVまたはarrayOfArraysの選択に基づいてデータ構造を定義します |
|
render |
(必須)プラグインのメイン関数 |
|
refresh |
(オプション)クリック・イベントでデータが変更された場合にデータをリフレッシュするために呼び出される関数 |
基本的なサンプル・プラグイン・ファイルを次に示します。
{
id: 'com.oracle.xdo.Sample', //Change this default id to unique value before development
component: {
'name': 'Sample',
'tooltip': 'Insert Sample'
},
properties: [
{key: "width", label: "Width", type: "length", value: "500px"},
{key: "height", label: "Height", type: "length", value: "400px"}
],
//These are the fields you selected from your data source
fields: [
{name: "Brand", caption: "Drop Brand Field Here", fieldType: "label", dataType: "string"},
{name: "LOB", caption: "Drop LOB Field Here", fieldType: "label", dataType: "string"},
{name: "Product Type", caption: "Drop Product Type Field Here", fieldType: "label", dataType: "string"},
{name: "Revenue", caption: "Drop Revenue Field Here", fieldType: "measure", dataType: "number", formula: "summation"}
],
//dataType can be d3hierarchy or 'arrayOfArrays' depending on your selection
dataType: 'd3hierarchy',
render: function (context, containerElem, data, fields, props) {
containerElem.innerHTML = '<h1>My First Plugin</h1>';
var tableStr = '<div id="'+this.id+'_table">';
tableStr += '<table>';
data.forEach(function(row, rowNo, rows) {
tableStr += '<tr>';
row.forEach(function(col, colNo, cols) {
tableStr += '<td>'+col+'<td>';
});
tableStr += '<tr>';
});
tableStr += '</table>';
tableStr += '</div>';
containerElem.innerHTML += tableStr;
},
refresh: function (context, containerElem, data, fields, props) {
var tableStr = '<table>';
data.forEach(function(row, rowNo, rows) {
tableStr += '<tr>';
row.forEach(function(col, colNo, cols) {
tableStr += '<td>'+col+'<td>';
});
tableStr += '<tr>';
});
tableStr += '</table>';
// update table with a bit of fancy transition
$(document.getElementById(this.id+"_table")).html(tableStr).hide().fadeIn(1000);
}
}
JavaScriptオブジェクト・フィールドの詳細を次に示します。
idは識別文字列です。名前の競合を回避するには、逆のドメイン名を使用することをお薦めします(例: com.example.helloworld)。
componentオブジェクトは次のフィールドで構成されます。
コンポーネントの名前。例: "Hello World"
アイコンは、アプリ・デザイナの「挿入」メニューに表示される、プラグインを表すイメージです。このフィールドは、アイコン・イメージを指し示すURLを取ります。例: "http://www.example.com/img/smile.gif"
アイコン・イメージについて表示するツールチップ・メッセージ。例: "Hello World Plugin"
プラグインのオプションの説明。説明はプラグイン・ギャラリで表示されます。
オプションの作成者のエントリ。作成者はプラグイン・ギャラリで表示されます。
(オプション)プラグイン・コンポーネントを識別するコンポーネントのCSSクラス・セレクタ。
render関数では、プラグイン・コンテンツがレンダリングされます。render関数は、次のパラメータを渡します。
次の情報を含むオブジェクト。
idは、割り当てられるインスタンス化済コンポーネントのID文字列です。システムにより、このIDが同じテンプレート内で一意であることが保証されます。プラグイン・コードが生成するHTML要素に、このIDを接頭辞または接尾辞として使用することをお薦めします。この実施により、IDの競合が避けられます。
アプリのレイアウトに割り当てられるロケール。
コンテナのHTML要素。コンテンツをこの要素に設定する必要があります。これによって、プラグイン視覚化要素のレンダリング場所のポインタがMobileアプリ・デザイナに提供されます。
選択したデータ構造に応じた、データのロード先の変数。
「フィールドのサポート」を参照してください。
現在のプロパティ。「プロパティのサポート」を参照してください。
アプリ・デザイナの「プロパティ」ペインに表示される、設定可能なオプションのカスタム・プロパティを追加するには、propertiesコンポーネント下に定義します。プロパティ定義オブジェクトの配列をこのフィールドに設定できます。properties定義オブジェクトを次の値から作成します。
プロパティ・キーを指定する文字列値。この値は一意である必要があります。
Mobileアプリ・デザイナの「プロパティ」ペインで該当プロパティに表示されるラベルを指定する文字列値。
プロパティ・タイプを指定する文字列値。アプリ・デザイナでは、この値を使用して、プロパティを編集する適切なエディタを開きます。typeでは次の値がサポートされています。
string - 文字列データを入力するテキスト・エントリ・ボックスを作成します。
number - 数値データを入力するテキスト・エントリ・ボックスを作成します。
bool - TrueまたはFalse(ブール型)の選択オプションを作成します。
length - 長さデータを入力して単位をpx、in、cmまたはptで選択するテキスト・エントリ・ボックスを作成します。
color - 色を選択する色選択用ダイアログを表示します。
font - 選択するサポート対象フォントのリストを表示します。
fontsize - サイズ選択用ダイアログを表示します。
lov - 値のリストを作成します。名前と値のペアの作成については、「options」を参照してください。
プロパティの初期値。値は、指定されたタイプの形式に従う必要があります。
このパラメータは、プロパティtypeが「lov」の場合のみ有効です。optionsパラメータには、値のリストを定義するラベルと値のペアが含まれます。
label - 各リスト項目のラベル
value - ラベルの値
アプリ・エディタでは、次のプロパティ設定が設定されます。
width: 使用可能な領域に基づいて設定されます
height: 使用可能な領域に基づいて設定されます
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px
border-top: 0px none #000000
border-left: 0px none #000000
border-right: 0px none #000000
border-bottom: 0px none #000000
これらのプロパティは、設計時にアプリ・エディタ内で更新できます。
SDKによって生成されるサンプルJavaScriptファイルには、ダウンロード・ダイアログで指定したフィールドのフィールド定義が含まれます。
これらのフィールドによって、ユーザーはデータ・ソースからプラグインにカスタム視覚化要素用のデータ列をドラッグ・アンド・ドロップできます。フィールドの情報は、プラグイン構造のfieldsコンポーネントで指定されます。フィールド定義は、name、caption、fieldTypeおよびdataTypeで構成されます。フィールドのfieldTypeはラベルまたはメジャーです。メジャー・フィールドの場合、追加でformulaを指定します。
次の例は、データ・フィールドの定義を示しています。
{
id: "com.oracle.xdo...",
component: {
name: "Field Test"
}
fields:
[
{name: "labelField", caption: "Drop Label Field Here", fieldType:"label", dataType:"string"},
{name: "dataField", caption: "Drop Data Field Here", fieldType:"measure", dataType: "number", formula: "summation"}
],
}
フィールドごとに次の項目を定義します。これらの属性はプラグイン・ファイルで更新できます。
name
caption - アプリ・エディタでフィールドについて表示されるテキスト。例: "Drop Label Field Here"
fieldType - 有効な値は、"label"と"measure"です。
dataType - 次のデータ型がサポートされます。
string(テキスト文字列、デフォルト)
number(整数と浮動小数点数を含む数値)
date (XML日付書式)
アプリ・エディタのデータ・モデル構造からドラッグ・アンド・ドロップする要素のデータ型は、ここで定義するdataTypeと一致する必要があります。
formula - fieldTypeが"measure"の場合、デフォルトの式を指定します。次の内容がサポートされています。
count
count-distinct
summation
average
maximum
minimum
first
last
フィールド
ユーザーはアプリ・デザイナのプロパティ・エディタでフィールド・プロパティを更新できます。この情報には、render関数の引数のfields変数によって実行時にアクセスできます。
field - データ・ソース内のフィールドのパス
fieldFormula - フィールド式。fieldType="label"の場合、nullである必要があります
fieldType - フィールド・タイプ。"label"または"measure"(定義からコピーされます)
dataType - データ型。"string"、"number"または"date"(定義からコピーされます)
label - プロパティ・エディタで指定したラベル文字列
カスタム・プラグインでは、次のJavaScript APIを使用できます。
タップ(選択)されたフィールド情報を取得してシステムに送信します。
長さ文字列値からピクセル値を返します。システムでは、ほとんどのブラウザと同じ96dpiが使用されます。
このメソッドは、タップ(選択)されたフィールド情報を取得してシステムに送信します。
xdo.api.handleClickEvent(info)
このメソッドは次のパラメータを取ります。
クリックしたフィールド情報オブジェクト。
オブジェクトの構造は次のようになります。
Object Structure
{
id: [component id],
[
{
field: [xpath to the element],
value: [filter value]
},
{
field: [xpath to the element],
value: [filter value]
},
]
このメソッドは、長さ文字列値からピクセル値を返します。システムでは、ほとんどのブラウザと同じ96dpiが使用されます。
xdo.api.getPixelValue(lengthString)
メソッドは1つのパラメータを取ります。
長さを指定する文字列値。サポートされる単位は、「px」、「pt」、「in」および「cm」です。
通常計算されたデータは、render関数のrows変数に格納されます。D3.jsライブラリを利用するには、JavaScriptオブジェクトを使用します。
計算されたデータは、ランタイムでrender関数のrows変数に格納されます。rows変数は配列型で、各rows要素には、列情報を保持するための別の配列があります。次のrender関数の実装により、データがHTMLで表示されます。
render: function(context, containerElem, rows, fields, props) {
// setup column
var html = '<table>';
for (var i=0, rowCount=rows.length; i<rowCount; i++)
{
html += "<tr>";
var col = rows[i];
for (var j=0, colCount=col.length; j<colCount; j++)
{
html += "<td>";
html += col[j];
html += "</td>";
}
html += "</tr>";
}
html += '</table>';
containerElem.innerHTML = html;
}
D3.js JavaScriptライブラリを使用した視覚化をサポートするには、"d3hierarchy"データ型を使用してデータを渡します。このデータ型を使用すると、render関数はrowsの配列ではなくJavaScriptオブジェクトを使用して呼び出されます。JavaScriptオブジェクトには、ノード用のobj.nodeおよびobj.children、リーフ用のobj.valueおよびobj.valueがあります。
例:
node example
{
name: "root"
children: [
{name: "child A", value: 1}
{name: "child B", value: 2}
]
}
このデータ型を使用するには、プラグインの定義にdataType: "d3hierarchy"を追加します。
例:
{
id: "com.oracle.xdo...",
component: {
name: "Field Test"
}
dataType: "d3hierarchy",
fields:
[
{name: "labelField", caption: "Drop Label Field Here", fieldType:"label", dataType:"string"},
{name: "dataField", caption: "Drop Data Field Here", fieldType:"measure", dataType: "number", formula: "summation"}
],
render: function(context, containerElem, node, fields, props) {
// setup column
var html = node.value
....
データ・フィールド情報がプラグイン定義に定義されていない場合、nullがnode(またはrows)引数に渡されます。
開発サーバーを起動するには、次のコマンドを実行します。
$ grunt server
このコマンドでWebサーバーがポート9000で起動され、プラグイン・シミュレータ・ページが開きます。
プラグイン・ギャラリへのアップロードに適したアーカイブ・ファイルを作成するには、次のコマンドを実行します。
$ grunt archive
このコマンドによって必要なファイルがパッケージ化され、プラグイン・ギャラリにアップロードできる.xmpファイルが作成されます。
プラグインをBI Mobileアプリ・デザイナで使用できるようにするには、プラグインをプラグイン・ギャラリにアップロードします。プラグイン・ギャラリからプラグインの管理も行います。プラグイン・ギャラリにはBI Mobileアプリ・デザイナの「管理」ページからアクセスします。「管理」ページにアクセスするには、管理者権限が必要です。
|
代替アップロード方法: 開発セッションからアップロードする必要がある場合、コマンドを実行します$ grunt deploy プロンプトで次の入力を行います。
|
BI Mobileアプリ・デザイナの「管理」ページおよびプラグイン・ギャラリにアクセスするには、次のようにします。
アプリケーションURLのコンテキスト・ノードを/mobileに変更します
たとえば、Oracle BI EEを介してログインしている場合、URLは次のようになります。
http://www.hostname:port/analytics.dll
次の部分以降を置換します
http://www.hostname:port
/mobileを使用します
つまり、次のようになります。
http://www.hostname:port/mobile
Oracle BI Mobileアプリ・デザイナのページで「管理」をクリックして「管理」ページを起動します。
「管理」ページで図7-1に示すように「プラグイン・ギャラリ」をクリックします。
