Oracle APEX標準の動的コンテンツを使って画像を表示する

htmx、Turbo Frames、Unpolyを使って画像を表示するAPEXアプリケーションを作成してきましたが、画像を表示する程度であれば、Oracle APEXの標準機能である動的コンテンツ・リージョンでできることを思い出しました。

以下よりOracle APEX標準の動的コンテンツを使用した実装を紹介します。

今回作成したアプリケーションも今までと同じく、見かけはhtmxを使ったものと同じです。

以下よりアプリケーションについて簡単に紹介します。

リージョンImageのタイプを動的コンテンツに変更し、ソースのCLOBを返すPL/SQLファンクション本体として以下を記述します。

	declare
	l_response clob;
	l_clob clob;
	l_offset integer;
	l_length integer;
	l_image ebmj_images%rowtype;
	l_output varchar2(80);
	begin
	select * into l_image from ebmj_images where title = :P1_ANIMAL;
	dbms_lob.createTemporary(l_response, false, dbms_lob.CALL);
	/* open img tag */
	l_output := q'~<img src="data:~';
	dbms_lob.writeAppend(l_response, length(l_output), l_output);
	l_output := l_image.content_mimetype;
	dbms_lob.writeAppend(l_response, length(l_output), l_output);
	l_output := q'~;base64,~';
	dbms_lob.writeAppend(l_response, length(l_output), l_output);
	/* base64 encoded image */
	l_clob := apex_web_service.blob2clobbase64(l_image.content, 'N');
	l_length := dbms_lob.getlength(l_clob);
	l_offset := dbms_lob.getlength(l_response) + 1;
	dbms_lob.copy(
	dest_lob => l_response
	,src_lob => l_clob
	,amount => l_length
	,dest_offset => l_offset
	,src_offset => 1
	);
	/* close img tag */
	l_output := q'~">~';
	dbms_lob.writeAppend(l_response, length(l_output), l_output);
	/* return img tag */
	return l_response;
	-- dbms_lob.freeTemporary(l_response);
	exception
	when no_data_found then
	return '<div>no data found</div>';
	end;

view raw generate-img-for-dynamic-contents.sql hosted with ❤ by GitHub

画像の選択をするために、ページ・アイテムP1_ANIMALを作成し、送信するページ・アイテムとして設定します。

ページ・アイテムP1_ANIMALのタイプは非表示とします。動的アクションで値を設定するため、設定の保護された値はオフにします。

ボタンを押した時に実行するTRUEアクションとして、最初に値の設定を実行します。設定のタイプの設定に静的割当てを選択し、値に表示する動物のなまえを指定します。影響を受ける要素の選択タイプにアイテム、アイテムとしてP1_ANIMALを選択し、静的に割り当てた値をページ・アイテムP1_ANIMALに設定します。初期化時に実行はオフにします。

続いて、リージョンImageのリフレッシュを実行します。影響を受ける要素の選択タイプはリージョン、リージョンはImageです。こちらも初期化時に実行はオフにします。

動的アクションは３つあるので、値の設定でたぬき、シマウマ、レッサーパンダをそれぞれのアクションに設定します。

Oracle APEX標準の動的コンテンツを使った実装の紹介は以上になります。動的コンテンツによる実装の場合は、RESTサービスを作成する必要はありません。

WebSocketやSSEなどOracle APEX単体では実装が困難な機能もあります。そのような場合に、htmxやTurbo Frames（実際にはTurbo Streams）、Unpolyといったライブラリは実装の助けになるでしょう。

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

https://github.com/ujnak/apexapps/blob/master/exports/sample-dynamic-contents.zip

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

完