Oracle APEXのアプリケーションにVueのコンポーネントを組み込む

Oracle APEXのアプリケーションにVueのコンポーネントを組み込んでみます。

空のAPEXアプリケーションを作成し、ページ・デザイナでホーム・ページを開きます。

ページ・プロパティのHTMLヘッダーに以下のimportmapを記述します。組み込むVueのバージョンは固定せず（最新）、デバッグ用のコード（prodではない）を読み込んでいます。

<script type="importmap">
    {
        "imports": {
            "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.min.js"
        }
    }
</script>

Vueの公式サイトにアクセスし、ドキュメントの実装例を開きます。

PracticalのGrid with Sort and Filterを実装してみます。

API選択より、Options APIとHTMLを選択します。

静的コンテンツのリージョンを作成し、index.htmlの内容をソースのHTMLコードに転記します。

作成したリージョンの名前はGrid with Sort and Filterとしています。

静的アプリケーション・ファイルとしてGrid.jsを作成し、そのファイルにGrid.jsの内容を転記します。

ディレクトリとしてjs、ファイル名をGrid.jsとして、静的アプリケーション・ファイルを作成します。

Grid.jsを転記し、変更の保存を行います。参照はメモしておきます。

style.cssも静的アプリケーション・ファイルとして作成することはできますが、修正作業がしやすいように、こちらはページ・プロパティのCSSのインラインに転記します。

HTML要素に対してCSSの属性が設定されているため、実際に使うにはより範囲を限定する必要があるでしょう。

Import Mapをクリックすると、この例に適した設定が得られます。

index.htmlを転記した静的コンテンツのHTMLコードに、以下の行が含まれています。

import DemoGrid from './Grid.js'

これを静的アプリケーション・ファイルを参照するように、以下に書き直します。

import DemoGrid from './#APP_FILES#js/Grid#MIN#.js'

以上で組み込み完了です。ページを実行すると以下のように表示されます。

Searchについては検索もします。

今回の記事は以上になります。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/integrating-vue.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完

D3をOracle APEXのアプリケーションに組み込む

今までにObservable Plot、Plotly.js、billboard.jsといったD3をチャート描画に使用しているライブラリを、Oracle APEXのアプリケーションに組み込んでみました。これらのライブラリを使うとチャートを簡単に表示できますが、やはりD3でなければ表示できないチャートはあります。

今回の記事では、Oracle APEXのアプリケーションでD3を使ってチャートを描画してみます。テンプレート・コンポーネントの作成はせず（D3によるチャート描画のユースケースで、テンプレート・コンポーネントが必要なケースは無いと思います）、D3のExamplesにあるチャートをいくつか、Oracle APEXのページに実装してみます。

最初にチャート描画に使うJSONデータを保存する表を作成し、その表を元に初期のAPEXアプリケーションを作成します。

SQLワークショップのクイックSQLの以下のモデルより、表EBAJ_D3_GRAPHSを作成します。データの名前となる列NAMEと、JSON形式のデータを保持する列GRAPH_DATAを含みます。

# prefix: ebaj
d3_graphs
    name vc80 /nn
    graph_data json

レビューおよび実行をクリックします。

表EBAJ_D3_GRAPHSを作成するDDLを確認します。列GRAPH_DATAのデータ型はCLOBになっています。効率の面からいうと、JSONやBLOB型が望ましいのですが、APEXのアプリケーション作成ウィザードはデータ型がCLOBのときはタイプがテキスト領域のページ・アイテムを作成し、BLOBのときはファイル選択のページ・アイテムを作成します。今回の用途ではテキスト領域を作成して欲しいので、CLOBのまま変更しません。

スクリプト名を設定し、実行をクリックします。確認画面が表示されるので、即時実行をクリックします。

表が作成されます。続けてアプリケーションの作成をクリックします。確認画面が表示されるので、再度アプリケーションの作成をクリックします。

アプリケーション作成ウィザードが開きます。名前をIntegrating D3に変更します。デフォルトで表EBAJ_D3_GRAPHSをソースとしたフォーム付き対話モード・レポートのページが作成されます。

アプリケーションの作成をクリックします。

アプリケーションが作成されます。

D3のExamplesに含まれるHierarchical edge bundling IIのチャートを、Oracle APEXのページに実装します。

画面右上にある３点アイコンよりメニューを開き、ViewのShow filesを実行します。

Filesのパネルが開き、データファイルであるflare.jsonが含まれていることが確認できます。３点アイコンのボタンをクリックし、Downloadを実行します。

ファイルをダウンロードしたら、作成したAPEXアプリケーションを実行し対話モード・レポートのページを開きます。

作成をクリックします。

Nameにファイル名であるflare.json、Graph Dataにダウンロードしたflare.jsonの内容をコピペします。

作成をクリックします。

対話モード・レポートのページに戻ると、ORA-6502が発生しています。これは、登録したJSONデータが長すぎて対話モード・レポートの１行に表示できる文字数の制限（32k）を超えたために発生しています。

今回はエラーを回避できれば良いので、アクションの列を開き、Graph Dataを表示対象の列から外します。

flare.jsonが登録されていることが確認できます。

チャートのデータを保存できたので、これからチャートを実装します。

空白のページを作成します。名前はHierarchical edge bundling IIとします。

HTMLヘッダーに以下のimportmapを記述します。

<script type="importmap">
    {
        "imports": {
            "d3": "https://cdn.jsdelivr.net/npm/d3/+esm"
        }
    }
</script>

データベースからJSONデータを取り出す際に呼び出すAjaxコールバックを作成します。

識別の名前はGET_DATA、タイプはコードの実行です。ソースのPL/SQLコードとして以下を記述します。

D3のチャートを描画するリージョンを作成します。

識別の名前はD3、タイプに静的コンテンツとします。ソースのHTMLコードに以下を記述します。ほとんどD3のExamplesそのままですが、書式を素のJavaScriptで動作するように若干の修正を加えています。

以上で実装は完了です。ページを実行すると、以下のようにチャートが表示されます。

作成したページをコピーし、Force-directed graphを実装してみます。

ダウンロードしてデータベースに取り込むファイルはmiserable.jsonです。

静的コンテンツのリージョンのHTMLコードとして、以下を記述します。invalidationの呼び出しをコメントアウトしたくらいで、ほとんどコードは改変していません。

ページを実行すると以下のように表示されます。

同様にページをコピーしWorld tourを実装してみます。

ダウンロードしてデータベースの取り込むファイルはcountries-110m.jsonです。

World tourでtopojsonのクライアント・ライブラリを使用しています。そのため、importmapを以下に変更します。

<script type="importmap">
    {
        "imports": {
            "d3": "https://cdn.jsdelivr.net/npm/d3/+esm",
            "topojson-client": "https://cdn.jsdelivr.net/npm/topojson-client/+esm"
        }
    }
</script>

フォーカスが当たっている国の名前を表示するページ・アイテムとして、P6_NAMEを作成しています。

静的コンテンツのリージョンのHTMLコードとして、以下を記述します。countries-110m.jsonをデータベースから読み込むコードや、canvasのコードをdiv要素（myChart）の子要素となるように、コードを追加しています。

ページを実行すると以下のように表示されます。

今回の記事は以上になります。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/integrating-d3.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完

billboard.jsをOracle APEXのアプリケーションに組み込む

billboard.jsをOracle APEXのアプリケーションに組み込んでみます。

Oracle JETやその他のチャート描画ライブラリの組み込み作業で表示したチャートと、同じチャートを表示してみます。

直接billboard.jsで描画

ページ・プロパティのJavaScriptのファイルURLに以下を記述します。

https://cdn.jsdelivr.net/npm/d3/dist/d3.min.js

https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js

CSSのファイルURLに以下を記述します。

https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css

静的コンテンツのリージョンの名前をbillboard.jsとし、ソースのHTMLコードに以下を記述します。

<div id="myChart"></div>

チャートに描画するデータを保持するページ・アイテムとしてP1_VALUEを作成します。タイプは非表示です。

ページ・アイテムP1_VALUEに計算を作成し、ページの描画前にデータを設定します。計算のタイプとしてSQL問合せ(単一の値を返す)を選択し、SQL問合せに以下を記述します。

select
    json_arrayagg(
        json_object(
            'ename' value ename,
            'sal'     value sal
        )
    order by empno asc )
from emp where deptno = 10

チャートを描画するJavaScriptのコードを、ページ・プロパティのページ・ロード時に実行に記述します。

以上で実装は完了です。ページを実行すると以下のように表示されます。

テンプレート・コンポーネントの作成

billboard.jsのバー・チャートを描画するテンプレート・コンポーネントについて、設定内容を説明します。

テンプレート・コンポーネントの名前はbillboard.js Bar Chartとしました。テンプレートの部分には以下を記述しています。

カスタム属性としてCSS Classes、Groups, Value、Color、Width、Heightを作成しています。Groupsのタイプはテキストで、Y軸となる属性とX軸となる属性を,(カンマ)で区切って指定します。今回の実装ではename,salを指定します。Valueのタイプはセッション・ステート値、Colorはカラー、Orientationは選択リストとします。WidthとHeightは両方とも整数です。

カスタム属性Orientationの静的LOVとして、horizontalの戻り値にtrue、verticalの戻り値にfalseを設定します。これはaxis属性のrotatedの値になります。

ディレクトリをjs、ファイル名をscript.jsとして、カスタム要素a-billboard-js-bar-chartの実装を記述します。

ロードするファイルURLのカスケード・スタイルシートに以下を記述します。

https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css

JavaScriptに以下を記述します。

https://cdn.jsdelivr.net/npm/d3/dist/d3.min.js

https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js

#PLUGIN_FILES#js/script#MIN#.js

以上でテンプレート・コンポーネントは完成です。

リージョンにbillboard.jsのテンプレート・コンポーネントを実装します。

ページ・アイテムP2_VALUEは、最初に作成したP1_VALUEと同じ設定で作成します。

識別の名前をbillboard.js、タイプをbillboard.js Bar Chartとします。

リージョンの属性を開き、Groupsとしてename,sal、ValueとしてP2_VALUE、Colorとして#309fdbを設定します。Orientationはhorizontalです。

以上で実装は完了です。ページを実行すると以下のように表示されます。

対話モード・レポートへの組み込み

対話モード・レポートのソースのSQL問合せとして以下を記述します。

select
    dname,
    json_arrayagg(
        json_object(
            'ename' value ename,
            'sal'     value sal
        )
    order by empno asc ) value,
    '' chart
from emp_dept_v group by dname

対話モード・レポートの列CHARTを選択し、識別のタイプをbillboard.js Bar Chartに変更します。

設定のGroupsにename,sal、ValueにVALUE、Colorに#309fdb、Orientationにhorizontalを設定します。Widthは400、Heightに200を設定します。

以上で実装は完了です。ページを実行すると以下のように表示されます。

今回の記事は以上になります。

作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/integrating-billboard-js.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完

Plotly.jsをOracle APEXのアプリケーションに組み込む

Plotly.jsをOracle APEXのアプリケーションに組み込んでみます。

Oracle JETやその他のチャート描画ライブラリの組み込み作業で表示したチャートと、同じチャートを表示してみます。

直接Plotly.jsで描画

Plotly.jsのGetting started in JavaScriptのページを参照して、実装を進めます。バー・チャートの表示はこちらのページにある例を元にしています。バー・チャートのリファレンスはこちらです。

ページ・プロパティのJavaScriptのファイルURLに以下を記述します。

https://cdn.plot.ly/plotly-2.34.0.min.js

静的コンテンツのリージョンの名前をPlotly.jsとし、ソースのHTMLコードに以下を記述します。

<div id="myChart" class="w600 h400"></div>

チャートに描画するデータを保持するページ・アイテムとしてP1_GROUPS、P1_VALUEを作成します。タイプは非表示です。

ページ・アイテムP1_GROUPSに計算を作成し、ページの描画前にデータを設定します。計算のタイプとしてSQL問合せ(単一の値を返す)を選択し、SQL問合せに以下を記述します。

select
    json_arrayagg(
        ename
    order by empno asc )
from emp where deptno = 10

ページ・アイテムP1_VALUEにも計算を作成し、ページ描画前に値を設定します。SQL問合せに以下を記述します。

select
    json_arrayagg(
        sal
    order by empno asc )
from emp where deptno = 10

チャートを描画するJavaScriptのコードを、ページ・プロパティのページ・ロード時に実行に記述します。

以上で実装は完了です。ページを実行すると以下のように表示されます。

テンプレート・コンポーネントの作成

Plotly.jsのバー・チャートを描画するテンプレート・コンポーネントについて、設定内容を説明します。

テンプレート・コンポーネントの名前はPlotly.js Bar Chartとしました。テンプレートの部分には以下を記述しています。

カスタム属性としてCSS Classes、Groups、Value、Color、Orientation、Width、Heightを作成しています。GroupsとValueのタイプはセッション・ステート値、Colorはテキスト、WidthとHeightは両方とも整数です。

チャートの向きの指定であるOrientationの静的LOVは、horizontalの戻り値としてh、verticalの戻り値としてvを設定します。

ディレクトリをjs、ファイル名をscript.jsとして、カスタム要素a-plotly-js-bar-chartの実装を記述します。

ロードするファイルURLのJavaScriptに以下を記述します。

https://cdn.plot.ly/plotly-2.34.0.min.js

#PLUGIN_FILES#js/script#MIN#.js

以上でテンプレート・コンポーネントは完成です。

リージョンにPlotly.jsのテンプレート・コンポーネントを実装します。

ページ・アイテムP2_GROUPSとP2_VALUEは、最初に作成したP1_GROUPSとP1_VALUEと同じ設定で作成します。

識別の名前をPlotly.js、タイプをPlotly.js Bar Chartとします。

リージョンの属性を開き、GroupsとしてP2_GROUPS、ValueとしてP2_VALUE、Colorとして#309fdb、Orientationとしてhorizontalを設定します。

以上で実装は完了です。ページを実行すると以下のように表示されます。

対話モード・レポートへの組み込み

対話モード・レポートのソースのSQL問合せとして以下を記述します。

select
    dname,
    json_arrayagg(
        ename
    order by empno asc ) groups,
    json_arrayagg(
        sal
    order by empno asc ) value,
    '' chart
from emp_dept_v group by dname

対話モード・レポートの列CHARTを選択し、識別のタイプをPlotly.js Bar Chartに変更します。

設定のCSS Classesにw130、GroupsにGROUPS、ValueにVALUE、Colorに#309fdb、Orientationにhorizontalを設定します。Widthは400、Heightに300を設定します。

以上で実装は完了です。ページを実行すると以下のように表示されます。

今回の記事は以上になります。

作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/integrating-plotly-js.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完