最近の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コードの実行を選択し、設定のコードに以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (qrcode !== null) { | |
| // すでに表示されているQRコードを消去して、新たな値で更新する。 | |
| qrcode.clear(); | |
| qrcode.makeCode(apex.items.P2_SOURCE.value); | |
| } | |
| else | |
| { | |
| // idがqrcodeの要素を初期化して、QRコードを表示する。 | |
| qrcode = new QRCode(document.getElementById("qrcode"), { | |
| text: apex.items.P2_SOURCE.value, | |
| width: 128, | |
| height: 128, | |
| colorDark : "#000000", | |
| colorLight : "#ffffff", | |
| correctLevel : QRCode.CorrectLevel.H | |
| }); | |
| }; |
以上で実装は完了です。
サーバー側の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コードとなるイメージを生成しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| return | |
| zt_qr.f_qr_as_html_table( | |
| p_data => :P3_SOURCE | |
| , p_error_correction => 'H' | |
| ); |
送信するページ・アイテムとして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を選択します。
以下のコードを実行します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { default: qrcode } = await import ("qrcode"); | |
| const code = qrcode(0, 'L'); | |
| code.addData("https://oracle.com"); | |
| code.make(); | |
| console.log(code.createDataURL(4)); |
結果として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コードに以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { default: qrcode } = await import ("qrcode"); | |
| const code = qrcode(0, 'L'); | |
| code.addData(apex.env.P4_SOURCE); | |
| code.make(); | |
| apex.env.P4_QR = code.createDataURL(4); |
サーバー側の条件のボタン押下時としてGENERATEを指定します。
それぞれ簡単に実装できる方法を選んでいます。QRコードの生成自体はJavaScriptやPL/SQLのパッケージによって行われているため、ボタンのクリック以外でもQRコードの生成を呼び出すことはできます。
QRコードの生成方法の紹介は以上になります。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-qrcode-generation.zip
Oracle APEXのアプリケーション作成に参考になれば幸いです。
完
