2022年9月5日月曜日

APEXアプリに埋め込む画像をオブジェクト・ストレージに配置する

 CKEditor5（リッチ・テキスト・エディタ）に表示する画像をオブジェクト・ストレージに配置し、事前認証リクエストを使って参照する実装について記事（CKEditor5による画像アップロードを実装する(4) - 画像をオブジェクト・ストレージに保存する）を書いています。

カード・リージョンやレポートに画像を表示する方がリッチ・テキスト・エディタに画像を埋め込むより用途としては多いはずなので、カードに表示する画像をオブジェクト・ストレージに配置するような実装を試してみました。


特にカード・リージョンで画像を表示する際に問題になりますが、データベースから画像をダウンロードさせると、アクティブなセッションをひとつ使います。イメージのサイズが大きいとダウンロードに時間がかかり、セッションの占有時間が伸びます。カード・リージョンでは複数のカードが一度に表示されます。また、同じカード・リージョンのページを開いているユーザーが複数いる場合、それだけでアクティブ・セッションの上限に達してしまい、他の操作ができなくなる可能性があります。画像のダウンロードをオブジェクト・ストレージから直接行うことにより、データベースのアクティブ・セッションの数を減らすことができます。

SQLワークショップのユーティリティのクイックSQLを使って、使用する表を作成します。

以下のモデルから、表IMG_ITEMS、IMG_IMAGESを作成します。

# prefix: img
# pk: guid
# ondelete: set null
items
    name vc80 /nn

images
    item_id /fk items
    location vc400 /nn
    file_name vc80
    mime_type vc200
    last_updated date /nn
SQLの生成、SQLスクリプトを保存、レビューおよび実行を順次実施します。表の作成までを実施し、アプリケーションの作成は行いません。
 

アプリケーション作成ウィザードを起動します。

アプリケーションの名前は画像ビューワーとします。ホーム・ページの編集を開いて削除し、代わりにファセット検索のページを追加します。


ページ名も画像ビューワーとします。表示形式はレポートを選択します。フォームの画面をウィザードで作成するためにレポートを選んでいます。フォームを含めるにチェックを入れます。アプリケーションの作成後にレポートからカードに変更します。ソースとなる表としてIMG_ITEMSを選択します。

ページの追加をクリックします。


以上を設定し、アプリケーションの作成を実行します。

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


オブジェクト・ストレージを扱うための設定を行います。記事CKEditor5による画像アップロードを実装する(4) - 画像をオブジェクト・ストレージに保存するで行なっている準備作業（APEXワークスペース・スキーマへの権限付与、クリデンシャルMY_OCI_CREDの作成、バケットimagesの作成等）は実施済みとします。

 アプリケーション定義の置換として、置換文字列G_REGION、G_NAMESPACE、G_BUCKET、G_CREDENTIALに置換値を設定します。


記事CKEditor5による画像アップロードを実装する(4) - 画像をオブジェクト・ストレージに保存するの事前承認リクエストの発行を参照し、アプリケーション・アイテムG_PREAUTH_URLを作成します。


アプリケーションの計算を作成します。計算として設定するコードは以下です。



レポートのページ（ページ番号１）を開き、リージョンImg Itemsを選択します。

識別のタイプをクラシック・レポートからカードに変更します。ソースのタイプをSQL問合せに変更し、SQL問合せを以下のSELECT文に置き換えます。



リージョンのタイプをカードに変更すると、ボタンCREATEが表示されなくなります。ボタンCREATEを選択し位置をRegion Bodyに変更します。


リージョンImg Itemsを選択し、プロパティ・エディタの属性を開きます。

タイトルの列としてNAMEを選択します。メディアのソースとしてURL列、URL列としてLOCATIONを選択します。位置、外観、サイズ指定はデフォルトのまま変更しません。


カードの編集画面を開くため、カード・リージョンImg Itemsにアクションを作成します。

作成したアクションの識別のタイプとしてカード全体を選択します。リンクのタイプとしてこのアプリケーションのページにリダイレクト、ターゲットはページ２とします。


ターゲットをクリックして、リンク・ビルダー・ターゲットを開いて設定します。

ターゲットのページは２を選択します。アイテムの設定の名前としてP2_ID、値として&ID.を設定します。

以上でOKをクリックします。


ページ・デザイナにてページ番号２のフォームのページを開きます。イメージ・ファイルのアップロードを実装します。

Region Bodyにページ・アイテムP2_IMAGEを作成します。

識別の名前をP2_IMAGE、タイプとしてファイル参照...を選択します。ラベルはImageとします。設定の表示形式としてBlock Dropzoneを選択します。

記憶域タイプとしてTable APEX_APPLICATION_TEMP_FILESを選択し、ファイルをパージするタイミングとしてEnd of Requestを選びます。アップロードされたファイルは表APEX_APPLICATION_TEMP_FILESの１行として保存されます。そのファイルは次に作成するプロセスにてオブジェクト・ストレージにアップロードするので、リクエストが終了したら不要になります。そのため、リクエスト終了時にパージする（End of Request）ように設定します。


オブジェクト・ストレージにアップロードするプロセスを作成します。

最初に以下のパッケージIMG_UTILを作成します。


プロセスを作成し、プロセス・フォームImg Itemの下に配置します。識別の名前をオブジェクト・ストレージに保存とします。タイプはAPIの呼出しを選びます。設定にてパッケージIMG_UTILのプロシージャUPLOAD_IMAGEを呼び出すように指定します。


サーバー側の条件のタイプとしてリクエストは値に含まれる、値にCREATE SAVEを指定します。


パラメータはすべてアイテムを割り当てます。それぞれ以下の設定になります。

p_id = P2_ID
p_item_value = P2_IMAGE
p_region = G_REGION
p_namespace = G_NAMESPACE
p_bucket = G_BUCKET
p_credential = G_CREDENTIAL

以上でアプリケーションは完成です。実行すると先頭のGIF動画のような動作をします。

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

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

完
投稿者 時刻:
ラベル: