日日是Oracle APEX: APEX 23.2のQRコードとバーコードの画像生成を確認する

2023年11月30日木曜日

APEX 23.2のQRコードとバーコードの画像生成を確認する

Oracle APEX 23.2では、QRコードとバーコードの画像を生成する機能が追加されました。QRコードについてはページ・アイテムのタイプとしてQRコードが追加され、ノーコードで画像を生成することができます。新しく追加されたAPEX_BARCODEパッケージのプロシージャを呼び出すことにより、QRコードに加えてバーコード（CODE128とEAN8）の画像も生成できます。生成する画像のフォーマットはSVGまたはPNGです。

この新機能については、Louis Moreauxさんよるブログ記事が大変参考になります。

Oracle APEX 23.2 - Mastering QR Codes and Barcodes

https://lmoreaux.hashnode.dev/oracle-apex-232-mastering-qr-codes-and-barcodes

実際にQRコードとバーコードを生成するAPEXアプリケーションを作成してみました。エクスポートは以下に置いています。

https://github.com/ujnak/apexapps/blob/master/exports/sample-qrcode-and-barcode.zip

アプリケーションの画面は以下です。以下の機能を実装しています。

ページ・アイテムによるQRコードの生成。
APEX_BARCODE.GET_QRCODE_SVGとAPEX_BARCODE.GET_QRCODE_PNGの呼び出しによるQRコードの生成。
APEX_BARCODE.GET_CODE128_SVGとAPEX_BARCODE.GET_CODE128_PNGの呼び出しによるバーコードの生成。
APEX_BARCODE.GET_EAN8_SVGとAPEX_BARCODE.GET_EAN8_PNGの呼び出しによるバーコードの生成。

ページ・アイテムとしてQRコードを生成する

ページ・アイテムのアイテム・タイプとしてQRコードを選択した場合は、ページ・アイテムに設定された値からQRコードが生成されます。

ページ・アイテムのタイプとしてQRコードを選択すると、プロパティとしてQRコードが現れ、データ型とサイズが選択できるようになります。サイズとしてデフォルト、小、中、大の４種類からどれかを選ぶことができます。

ページ・アイテムとして表示したQRコードを細かく調整をするには、CSSを記述します。この方法については、前出のLouis Moreauxさんのブログ記事に書かれています。

今回のサンプル・アプリケーションでは、ページ・アイテムP1_QR_Cのサイズを以下のCSSの記述により4remにしています。

#P1_QR_C {
  --a-qrcode-size: 4rem;
}

ページ・プロパティのCSSのインラインに記述します。

パッケージ・プロシージャを呼び出す

プロシージャAPEX_BARCODE.GET_QRCODE_SVGおよびAPEX_BARCODE.GET_QRCODE_PNGを呼び出して、QRコードを生成します。

SVGとPNGの両方とも、動的コンテンツのリージョンとして表示しています。

SVGのソースのCLOBを返すファンクション本体として以下を記述しています。

	if :P1_URL2 is null then
	return '';
	end if;
	return apex_barcode.get_qrcode_svg(
	p_value => :P1_URL2
	,p_size => :P1_SIZE
	);

view raw get_qrcode_svg.sql hosted with ❤ by GitHub

APEX_BARCODE.GET_QRCODE_SVGでは、戻り値としてSVG要素が文字列として返されるため、そのままページに出力することができます。

APEX_BARCODE.GET_QRCODE_PNGでは、戻り値としてPNG画像のバイナリ・データが返されます。ページに出力するにはBASE64でエンコードしてIMG要素に埋め込む必要があります。

	if :P1_URL2 is null then
	return '';
	end if;
	return '<img src="data:image/png;base64,' \|\|
	apex_web_service.blob2clobbase64(
	p_blob => apex_barcode.get_qrcode_png(
	p_value => :P1_URL2
	,p_scale => :P1_SCALE
	)
	,p_newlines => 'N'
	,p_padding => 'N'
	)
	\|\| '">';