はじめに
Oracle APEXのAI機能であるAPEX AIアシスタントと会話型AIダイアログを使用して、AIチャットボットを搭載した学校検索アプリを作成します。
本記事は、LiveLabsのBuild an Innovative Q&A Interface Powered by Generative AI with Oracle APEXを基にしています。
APEX AIアシスタントと会話型AIダイアログについては、以下の記事でも説明していますのでご一読ください。
【前提条件】
- こちらからHIGHSCHOOLSというExcelファイルをダウンロード済みであること（後ほど使用します）
- Oracle APEX24.2のワークスペースが作成済みであること
（ワークスペースの作成方法はこちらをご参照ください。） - OCIのアカウントを取得済みで、OCI生成AIサービスをご利用いただけるリージョンをサブスクリプション済みであること（OCI生成AIサービスの代わりに、OpenAI、若しくはCohereをLLMとして利用する場合は、OCIのアカウントは不要となります）
2025年4月現在、利用可能なリージョンは以下となります：
- サンパウロ(GRU)
- フランクフルト(FRA)
- 大阪(KIX)
- ロンドン(LHR)
- シカゴ(ORD)
最新のリージョン一覧はこちらをご参照ください。 本記事では大阪リージョンのOCI生成AIサービスを使用しますので、大阪リージョンがサブスクライブされていることが前提となります。
【所要時間】
1時間程
1. APIキーの取得
Oracle APEXの生成AIサービスは、2025年4月現在、OpenAI、Cohere、OCI Genarative AIをAIプロバイダーとして使用することが出来ます。
本記事では、OCI生成AIサービスのAPIを使用したいと思います。OpenAI、Cohereを使用する場合は、別途APIキーを取得してください。
1．OCIコンソールにアクセスして、右上のプロファイルからユーザー設定を選択します。
2．左下のリソースからAPIキーを選択し、APIキーの追加をクリックします。
3．APIキー・ペアの生成（デフォルト）を選択し、秘密キーのダウンロードをした上で作成します。秘密キーは後程使用するので大切に保管しておきます。
4．構成ファイルのプレビューも後程使用しますので、コピーしメモを取っておきます。
2. 開発環境の準備
1．ワークスペース名、ユーザー名、パスワードを入力し、APEXのワークスペースへログインします。
2．アプリケーション・ビルダーをクリックします。
3．ワークスペース・ユーティリティをクリックします。
4．生成AIをクリックします。
5．作成をクリックし、生成AIサービスを作成します。
6．以下の通りに記入し、作成をクリックします。
- AIプロバイダ - OCI生成AIサービス（OCI生成AIサービス、Cohere、OpenAIの3つから選択することが出来ます）
- 名前 - genai
- コンパートメントID - 先程取得した構成ファイル内のコンパートメントID
- リージョン - ap-osaka-1
- モデル - cohere.command-r-08-2024
- アプリケーション・ビルダーで使用 - トグルをオン
- OCIユーザーID - 先程取得した構成ファイル内のユーザーID
- OCI秘密キー - 先程取得した構成ファイル内の秘密キー
- OCIテナンシID - 先程取得した構成ファイル内のテナンシID
- OCI公開キー・フィンガープリント - 先程取得した構成ファイル内のフィンガープリント
3. アプリの作成
1．新規アプリケーションの作成をクリックします。
2．ファイルからのアプリケーションの作成をクリックします。
3．ダウンロードしたExcelファイルをドラッグアンドドロップします。ダウンロード済みでない場合、こちらをクリックしダウンロードします。
4．ロード先を新規表とし、HIGHSCHOOLSという名前にします。データのロードをクリックし、表にデータをロードします。
5．データのロードが完了しました。アプリケーションの作成をクリックし、ロードしたデータを基にアプリケーションを作成します。
6．アプリケーションのブループリント（設計図）が表示されました。アプリケーションの名前を学校情報アプリと変更します。外観をクリックします。
7．テーマ・スタイルとしてRedwood Lightを選択し、変更を保存します。
8．次にページを編集します。Highschool検索ページの編集ボタンをクリックします。
9．先ずページ名を学校検索へ変更します。検索ページをレイアウトをカードへ変更します。
10．カードのタイトル列としてSCHOOL_NAME、本体列としてBOROUGHを選択します。詳細を開いて、ホームページとして設定にチェックを入れます。
11．次に、不要なページを削除します。ホームページの編集ボタンをクリックします。
12．削除をクリックします。
13．この削除操作を実行するかメッセージが表示されるので、OKをクリックします。
14．同じ様に、HIGHSCHOOLレポートページも削除します。ダッシュボードページは残しておきます。
15．編集したブループリントを基にアプリケーションを作成します。アプリケーションの作成をクリックします。
16．アプリケーションが作成されました。アプリケーションの実行をクリックし、作成したアプリケーションを確認します。
17．ログイン画面が表示されました。ユーザー名とパスワードを入力し、アプリケーションへログインします。
18．アプリケーションを作成する事が出来ました。各カードには高校の名前と地区の名前しか載っていないので、どんな分野の学問が学べるのかという情報も追加したいと思います。
画面下部の開発者ツールバーからページ1をクリックします。
19．検索結果の属性からサブタイトルとして、INTERESTを表示させ、保存と実行をクリックします。
20．各学校のカードにどんな分野の学問が学べるのかという情報が追加されました。左側にある検索バーなどで絞り込んで検索をすることも出来ます。
4. 自然言語でのアプリ編集
1．ナビゲーションメニューをクリックし、ダッシュボードをクリックします。
2．自動で作成されたグラフが表示されています。右側の棒グラフを編集し、倍率が高い学校上位10校を表示させます。画面下部の開発者ツールバーからクイック編集をクリックし、棒グラフをクリックします。
グラフが作成されていない場合は、開発者ツールバーからページ2を選択します。
3．アプリケーションの開発画面に遷移しました。識別>名前を倍率の高い学校とします。
4．シリーズ1をクリックし、ソース>タイプからSQL問合わせを選択します。SQL問い合わせのコード・エディタを開きます。
5．記載されているクエリを全て削除し、APEXアシスタントをクリックします。
6．APEXアシスタントに、「出願者と席数を計算し、倍率が高い学校の上位10校を棒グラフで表示してください。NULL値はカウントしないようにしてください。」 と指示を出し、生成されたSQLクエリを挿入します。クエリに問題がなければOKをクリックします。
7．列のマッピング>ラベルをSCHOOL_NAME、列のマッピング>値を倍率とし、保存と実行をクリックします。
8．右の棒グラフを「倍率が高い学校上位10校」のグラフに変更する事が出来ました。
5. チャットボットの実装
次に、ニューヨーク市内の高校について、個別の高校について質問をする事が出来るチャットボットを実装していきたいと思います。
1．アプリケーションビルダーに戻り、先ずは新たなページを作成します。ページの作成をクリックします。
2．空白ページを選択します。
3．ページの名前にチャットボットと入力し、ページ・モードをモーダル・ダイアログにし、ページを作成します。
4．コンポーネントを右クリックし、リージョンの作成を選択します。
5．作成したリージョンを質問、詳細の静的IDはchatとします。
6．Content Bodyを右クリックし、アイテムの作成を選択します。
7．作成したアイテムの名前をP3_SCHOOL_IDとし、タイプを非表示にします。
8．同じように、P3_CONTEXTという名前のアイテムを作成し、タイプを非表示にします。
9．P3_CONTEXTを右クリックし、計算の作成をクリックします。
10．計算＞SQL問合せからコード・エディタを開きます。
11．以下のSQLクエリを貼り付け、OKをクリックします。
SELECT '学校の概要: ' || OVERVIEW_PARAGRAPH || chr(10) || chr(13) ||
'語学コース: ' || LANGUAGE_CLASSES || chr(10) || chr(13) ||
'アドバンストプレースメントコース: ' || ADVANCED_PLACEMENT_COURSES || chr(10) || chr(13) ||
'入学方針における多様性: ' || DIADETAILS || chr(10) || chr(13) ||
'課外活動: ' || EXTRACURRICULAR_ACTIVITIES || chr(10) || chr(13) ||
'男子の公立学校体育リーグ（PSAL）スポーツ: ' || PSAL_SPORTS_BOYS || chr(10) || chr(13) ||
'女子の公立学校体育リーグ（PSAL）スポーツ: ' || PSAL_SPORTS_GIRLS || chr(10) || chr(13) ||
'施設: ' || ADDTL_INFO1 || chr(10) || chr(13) ||
'学術機会: ' || ACADEMIC_OPPORTUNITIES || chr(10) || chr(13) ||
'出席率: ' || ATTENDANCE_RATE || chr(10) || chr(13) ||
'卒業率: ' || GRADUATION_RATE as prompt_context
from HIGHSCHOOLS
where ID = :P3_SCHOOL_ID;
12．動的アクションタブへ移動します。ページのロードを右クリックし、動的アクションの作成をクリックします。
13．識別＞名前をChatbotとします。
14．Trueアクションをクリックし、以下の通り設定します。
- 生成AI：
- アクション：AIアシスタントの表示
- サービス：genai（先程作成した生成AIサービス）
- ようこそメッセージ：こんにちは。お手伝い出来る事はありますか？
- システム・プロンプト：
以下の文脈を使用して、すべての質問に答えてください ''' &P3_CONTEXT. ''' 上記のコンテキストに基づいて質問に答えることができない場合は、「情報見つかりませんでした。」と表示してください。
- 外観：
- 表示形式：インライン
- コンテナ・セレクタ：#chat
- クイックアクション：
- メッセージ１：学校の概要を説明して下さい。
- メッセージ２：卒業率はどのくらいですか？
保存をクリックし、今までの変更を保存します。
15．ページファインダーをクリックし、ページ１を選択します。
16．検索結果の下にあるアクションを右クリックし、アクションの作成を選択します。
17．以下の通りに設定します。
- 識別
- タイプ：ボタン
- ラベル：質問
- リンク
- ターゲット
- ターゲット>ページ：ページ３
- アイテムの設定>名前：P3_SCHOOL_ID
- アイテムの設定>値：&ID.
- ターゲット
OKをクリックし、設定を保存します。画面上部の保存と実行をクリックし、実装したチャットボットを確認します。
18．質問というボタンが表示されました。ボタンをクリックします。
19．チャットボットの画面が表示されました。ここからいくつか質問をしてみます。
以上で終了です。お疲れ様でした。