FAQの一覧を表示するアプリケーションを、生成AI（今回はGoogle Gemini Advancedを使います）を使って作成します。作成するアプリケーションよりは、作成する手順というか、こういう手順でAPEXアプリケーションを作ることもできる、という例になります。
以下のような手順になります。
- クイックSQLより表を作成する。
- 作成した表からAPEXアプリケーションを生成する。
- 生成AIを使ってレポートのレイアウトを書いた画像からHTMLなどを生成する。
- codepen.ioを使ってAIが生成したHTML、CSS、JavaScriptを調整する。
- 上記のデータをもとにTemplate Componentを作成する。
- 生成AIを使ってテスト・データを生成する。
- 作成したTemplate Componentを使ったレポートを組み込む。
- ファセット検索を追加する。
出来上がったアプリケーションの画面です。
以下より手順を紹介します。
最初にクイックSQLを使って、質問と回答のペアを保存する表を作成します。作成する表の名前はEBMJ_SAMPLE_FAQSとします。
クイックSQLのモデルとして、以下を使います。auditcolsをtrueとして監査列を生成しています。
# prefix: ebmj
# auditcols: true
sample_faqs
question vc4000
answer vc4000
categories vc400レビューおよび実行をクリックします。
SQLスクリプトのスクリプト・エディタが開きます。変更すべき点はないので、スクリプト名を指定し（以下の例ではsamplefaqsとしています）、実行をクリックします。
即時実行するかどうか確認を求められます。即時実行をクリックします。
表EBMJ_SAMPLE_FAQSが作成されます。
作成された表を元にアプリケーションを作成します。通常、表の操作に最低限必要なフォーム付き対話モード・レポートのページを含んだアプリケーションが作成されます。
アプリケーションの作成をクリックします。
確認画面が開きます。再度、アプリケーションの作成をクリックします。
アプリケーション作成ウィザードが開きます。
表EBMJ_SAMPLE_FAQSをソースとしたフォーム付き対話モード・レポートのページが追加されていることを確認します。今回作成するレポートはホーム・ページに実装するため、これ以外のページは不要です。
アプリケーション名をSample FAQs with TCに変更し、アプリケーションの作成を実行します。
レポートのレイアウトを記述し、画像ファイルにします。
GoogleのGemini Advancedに、この画像ファイルを添付してお願いしました。
「この画像のHTMLを生成してください。」
HTML、CSSおよびJavaScriptが生成されます。
codepen.ioを開き、新たにPenを作成します。
生成AIが生成したHTMLの<body>...</body>に含まれる部分をHTMLへコピーします。<style>...</style>の部分をCSSへ、<script>...</script>の部分をJSへコピーします。
生成AIによる出力のプレビューができます。
生成結果が今ひとつだったので、追加で指示を出しました。
「#QUESTION#、#CATEGORIES#, #OWNER#,#POST_DATE#は文字を表示する領域で、ボタンではありません。HTMLを生成しなおしてください。」
生成結果をcodepen.ioにコピーし、プレビューを確認します。
指示を追加します。生成された内容を同様にcodepen.ioにコピーします。
「#QUESTION#と#ANSWER#の間に水平線を入れてください。」
APEXのテンプレート・コンポーネントを作成するにあたって、CSSのクラス名が競合しないように指示を出しました。
「生成するCSSのクラス名の先頭に必ずcs-をつけてください。」
とりあえず、これで良しとしました。#QUESTION#はグレーアウトが不要なのと#POST_DATE#が#POST DATE#となっていた点を手作業で修正しました。
また、＋ボタンの動作を指示している文章がHTMLに含まれていたので、それも手作業で削除しています。
生成されたHTML、CSS、JavaScriptを元にテンプレート・コンポーネントを作成します。
共有コンポーネントのプラグインを開きます。
プラグインの作成は最初からです。
次へ進みます。
プラグインの編集画面が開きます。
名前はMYFAQ、内部名はMYTEMPLATE.MYFAQとします。内部名は世界の誰かが開発したプラグインと競合しないように、できるだけ世界で一意になるような名前にします。
タイプはテンプレート・コンポーネントです。テンプレートの次として使用可能の複数（レポート）にチェックを入れます。
テンプレートの部分を、codepen.ioで確認したHTMLに置き換えます。設定されているサンプルには遅延ロードに対応する記述が含まれていますが、その部分の対応は省きます。
テンプレートの部分に記述されている属性が同期化されます。#...#で囲まれている名前が属性として認識されます。
ファイルのセクションに移動し、生成されたCSSとJavaScriptをファイルとして保存します。
カスタム属性としてAnswer、Categories、Owner、Post Date、Questionが認識されていることが確認できます。
ファイルの作成をクリックします。
最初にJavaScriptをファイルに保存します。
ファイル名をindex.jsとし、作成をクリックします。
作成からフォームを呼び出して、生成AIが生成したサンプル・データを投入します。生成AIの出力形式をJSONなどに強制すると、データのロードが容易になるでしょう。
codepenのJSに記述した内容を貼り付けます。
変更の保存をクリックします。
ファイルが保存され、縮小されました。というメッセージを確認します。
取消をクリックし、ファイルのセクションに戻ります。
ファイルとしてindex.js、index.min.jsが作成されていることを確認します。続いてCSSのファイルを作成します。
ファイルの作成をクリックします。
ファイル名をindex.cssとし、作成をクリックします。
codepenのCSSの記述を貼り付け、変更の保存をクリックします。
CSSがファイルに保存されたことを確認した後、取消をクリックします。
ロードするファイルURLのカスケード・スタイルシートに、ファイルindex.cssの参照を記述します。ミニファイされたファイルindex.min.cssも参照は同じです。また、ロードするファイルURLのJavaScriptに、ファイルindex.jsの参照を記述します。
変更の適用をクリックします。
以上で最低限の実装を含むテンプレート・コンポーネントが作成されました。
APEXアプリケーションを実行し、サンプル・データを投入します。
表EBMJ_SAMPLE_FAQSにデータを投入するためのページは、アプリケーションに含まれています。
生成AIにサンプルのデータを作成してもらいます。
「質問と回答の例を５件まで生成してください。質問にはその分類をつけてください。」
作成したテンプレート・コンポーネントMYFAQを使ったレポートを、ホーム・ページに実装します。
ページ・デザイナでホーム・ページを開きます。
ページ・ナビゲーションのリージョンを選択し、この設定を変更します。
識別の名前はFAQとし、タイプとしてMYFAQを選択します。
表名にEBMJ_SAMPLE_FAQSを設定します。
ページ区切りの総数の表示をオンにします。
以上で変更を保存し、ページを実行します。
FAQの項目の先頭に点が表示されています。これは、テンプレート・コンポーネントのレポート本文が、UL要素になっているために表示されています。
テンプレート・コンポーネントで調整すべき内容ですが、今回はページのインラインCSSに以下を記述することで消去します。
ul {
list-style: none;
padding-left: 0;
}
以上の変更を加えると、以下のように表示されます。
複数（レポート）の外観を持つテンプレート・コンポーネントのリージョンは、ファセット検索やスマート・フィルタのフィルタ済みリージョンとして設定できます。
このページにファセット検索を追加します。
ファセット検索のリージョンは通常、左のカラムに配置します。ページに配置位置を作成するため、ページ・プロパティの外観のページ・テンプレートをLeft Side Columnに変更します。
Body以下に新規にリージョンを作成し、Bodyの先頭に配置します。
識別の名前は検索、タイプとしてファセット検索を選択します。
ソースのフィルタ済みリージョンとしてFAQを選択します。レイアウトのスロットはLeft Columnに配置します。見かけの修飾は不要なので、外観のテンプレートにBlank with Attributesを選択します。
ファセットの初期状態では検索フィールドのみが作成されます。
ファセットの作成を実行します。
作成したファセットの識別の名前はP1_CATEGORIES、タイプはチェックボックス・グループとし、ラベルはCategoriesとします。
自動的にソースのデータベース列にCATEGORIES、データ型にVARCHAR2が選択されますが、正しく設定されているか確認が必要です。
LOVのタイプに個別値を選択します。
他にも調整すべき属性はありますが、手順が長くなりすぎるため最低限の設定だけにします。
もうひとつファセットを作成します。
識別の名前はP1_CREATED、タイプに範囲を選択します。ラベルはCreatedとします。ソースのデータベース列としてCREATEDが認識されますが、データ型はDATEとして認識されないようです。
タイプが範囲のファセットでDATE型の列が扱えるようになったのは、Oracle APEX 24.1からの新機能です。
ソースのデータ型をDATEに変更します。
以上でアプリケーションは完成です。
テンプレート・コンポーネントのJavaScriptの実装など端折った部分はありますが、テンプレート・コンポーネントを使うアプリケーションを作成する手順の紹介はできたかと思います。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-faqs-with-template-component.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
