最近のAPEXのOffice HourでOracle Database 23cから使用できるサーバー側のJavaScriptの使い方を紹介しています。
APEX 23.1 and server-side JavaScript: Explore the power of GraalVM/MLEhttps://asktom.oracle.com/pls/apex/asktom.search?oh=20943
このセッションの中で、QRコードを生成する機能をサーバー側のJavaScriptモジュールとして作成し、APEXのアプリケーションでQRコードを生成しています。
なんとなくQRコードを生成するには、Oracle Database 23cのMLEが必要と誤解されそうな気がしたので、QRコードの生成方法をいくつか紹介します。
QRコードを生成する方法として、大きく３通りあります。
- ブラウザ側のJavaScriptで生成する。
- サーバー側のPL/SQLで生成する。
- サーバー側のJavaScriptで生成する。（これがDB 23cより可能になった）
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はQR Codeとします。
アプリケーションが作成されたら、ページを作成してそれぞれの実装を行います。
ブラウザ側のJavaScriptで生成する
ブラウザ側のJavaScriptの処理でQRコードの生成を行います。以下のように動作します。
空白ページを作成します。ページ名はBrowser JSとします。
QRコードの生成には、以下のライブラリを使用します。
https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode#MIN#.js
ページ・プロパティのJavaScriptのファイルURLに、上記のURLを記載します。また、ファンクションおよびグローバル変数の宣言に以下を記述します。
var qrcode = null;
QRコードにエンコードする文字列を与えるページ・アイテムを作成します。
識別の名前はP2_SOURCE、タイプはテキスト・フィールド、ラベルはSourceとします。
QRコードの生成を行なうボタンを作成します。
識別のボタン名はGENERATE、ラベルはGenerateとします。動作のアクションとして動的アクションで定義を選択します。
識別のタイトルはQR Code、タイプは静的コンテンツ、ソースのHTMLコードとして以下を記述します。
<div id="qrcode"></div>
ボタンGENERATEを押した時に、P2_SOURCEからQRコードを生成する処理を実装します。
ボタンGENERATEに動的アクションを作成します。
名前はonClick Generate、タイミングはボタンのデフォルトである、イベントがクリックで実行されます。
TRUEアクションにJavaScriptコードの実行を選択し、設定のコードに以下を記述します。
以上で実装は完了です。
サーバー側のPL/SQLで生成する
QRコードを生成するPL/SQLのパッケージを作成し、それを呼び出してサーバー側でQRコードを生成します。
パッケージは以下より入手します。
https://github.com/zorantica/plsql-qr-code
package以下にZT_QR.pks、ZT_QR.pkbがあります。ぞれぞれパッケージZT_QRの定義部と本体です。
https://github.com/zorantica/plsql-qr-code/tree/master/package
APEXのアイテム・プラグインも提供されていますが、今回は（リージョンにQRコードを表示するため）プラグインは使いません。ページ・アイテムにQRコードを表示する場合は、プラグインを活用できます。
ZT_QR.pks、ZT_QR.pkbは、SQLワークショップのSQLスクリプトを使ってアップロードと実行を行います。
パッケージZT_QRの作成ができたら、準備は完了です。
空白ページを作成します。ページ名はServer PL/SQLとします。
先ほどのブラウザ側のJavaScriptと同様に、エンコードする文字列を与えるページ・アイテムをP3_SOURCEとして作成します。
同様に、QRコードを生成するボタンをGENERATEとして作成します。
QRコードを表示するリージョンを作成します。
識別の名前はQR Code、タイプは動的コンテンツ、ソースの言語としてPL/SQLを選択し、CLOBを返すPL/SQLファンクション本体として以下を記述します。
ZT_QR.F_QR_AS_HTML_TABLEを呼び出し、QRコードとなるイメージを生成しています。
送信するページ・アイテムとしてP3_SOURCEを指定します。
ボタンGENERATEを押した時に、リージョンQR Codeがリフレッシュされるようにします。
ボタンGENERATEに動的アクションを作成します。
名前はonClick Generateとします。タイミングはボタンのデフォルトです。
TRUEアクションとしてリフレッシュを選択します。影響を受ける要素の選択タイプはリージョン、リージョンとしてQR Codeを選択します。
以上で実装は完了です。
サーバー側のJavaScriptで生成する
サーバー側のJavaScriptの処理でQRコードの生成を行います。Oracle Database 23cとOracle APEX 23.1が必要です。
以下のように動作します。
QRコードを生成するJavaScriptのライブラリからMLEモジュールを作成します。その後、MLE環境を作成し、作成したMLEモジュールをインポートします。
SQLワークショップのオブジェクト・ブラウザを開き、MLEモジュール - JavaScriptを作成します。
MLEモジュールの名前はQRCODEとします。バージョンの指定は不要ですが、ここでは1.4.4を入力しています。
ソース・タイプとしてURLを選択し、URLとして以下を指定します。
https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/+esm
MLEモジュールの作成をクリックします。
MLEモジュールQRCODEが作成されます。
MLE環境の作成を実行します。
MLE環境QRCODEENVが作成されます。インポートの追加をクリックし、MLEモジュールQRCODEをインポート対象に追加します。
モジュール所有者はAPEXのワークスペース・スキーマを選択します。モジュール名はQRCODE、インポート名はqrcodeとします。
作成をクリックします。
インポートが作成されます。
以上で、QRコードを生成する処理をJavaScriptのコードから呼び出すことができるようになりました。
動作を確認してみます。
SQLワークショップのSQLコマンドを開き、言語としてJavaScript(MLE)、環境としてQRCODEENVを選択します。
以下のコードを実行します。
結果としてdata:image/gif;base64,で始まる文字列が表示されれば、MLEモジュールと環境は正しく作成されています。
APEXアプリケーションから、作成したMLEモジュールQRCODEを呼び出せるようにするため、ML環境を設定します。
アプリケーション定義のセキュリティを開き、データベース・セッションのMLE環境としてQRCODEENVを設定します。
以上で、APEXアプリケーションにQRコードの生成を実装する準備ができました。
空白ページを作成します。ページ名はServer JSとします。
今までの実装と同様に、エンコードする文字列を与えるページ・アイテムをP4_SOURCEとして作成します。
QRコードを表示するページ・アイテムを作成します。ページ・アイテムのイメージの表示は、先ほどのテストで出力されたdata:image/gif;base64,で始まる文字列をイメージとして表示します。
識別の名前はP4_QR、タイプはイメージの表示、ラベルはQRとします。設定の基準としてImage URL stored in Page Item Valueを選択します。外観のテンプレートとしてHiddenを選択します。
プロセス・ビューを開き、QRコードを生成するプロセスを作成します。
識別の名前はGenerate QR Code、タイプはコードを実行とします。
ソースの言語としてJavaScript (MLE)を選択し、JavaScriptコードに以下を記述します。
サーバー側の条件のボタン押下時としてGENERATEを指定します。
それぞれ簡単に実装できる方法を選んでいます。QRコードの生成自体はJavaScriptやPL/SQLのパッケージによって行われているため、ボタンのクリック以外でもQRコードの生成を呼び出すことはできます。
QRコードの生成方法の紹介は以上になります。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-qrcode-generation.zip
Oracle APEXのアプリケーション作成に参考になれば幸いです。
完
