【APEX24.2】生成AIを活用してローコードでアプリ開発してみる

# はじめに
Oracle APEXのAI機能である**APEX AIアシスタント**と**会話型AIダイアログ**を使用して、AIチャットボットを搭載した学校検索アプリを作成します。

本記事は、LiveLabsの[Build an Innovative Q&A Interface Powered by Generative AI with Oracle APEX](https://apexapps.oracle.com/pls/apex/r/dbpm/livelabs/view-workshop?wid=3947&clear=RR,180&session=115008014313253)を基にしています。

**APEX AIアシスタント**と**会話型AIダイアログ**については、以下の記事でも説明していますのでご一読ください。
- [Oracle APEXの新機能、会話型AIダイアログを使ってチャットボットを実装してみた](https://qiita.com/marfujim/items/6f008252f81561146877)
- [Oracle APEXの新機能、APEX AIアシスタントを使ってみた](https://qiita.com/marfujim/items/9f9a8ca9af6d5166d816)
<br>

**【前提条件】**
- [こちら](https://github.com/marina-fujimoto/qiita/raw/refs/heads/main/highschools.xlsx)からHIGHSCHOOLSというExcelファイルをダウンロード済みであること（後ほど使用します）
- Oracle APEX24.2のワークスペースが作成済みであること
  （ワークスペースの作成方法は[こちら](https://qiita.com/marfujim/items/376f20e6f39cb428ad8b)をご参照ください。）
- OCIのアカウントを取得済みで、OCI生成AIサービスをご利用いただけるリージョンをサブスクリプション済みであること（OCI生成AIサービスの代わりに、OpenAI、若しくはCohereをLLMとして利用する場合は、OCIのアカウントは不要となります）

:::note info
2025年4月現在、利用可能なリージョンは以下となります：
- サンパウロ(GRU)
- フランクフルト(FRA)
- 大阪(KIX)
- ロンドン(LHR)
- シカゴ(ORD)

最新のリージョン一覧は[こちら](https://docs.oracle.com/ja-jp/iaas/Content/generative-ai/pretrained-models.htm)をご参照ください。 本記事では大阪リージョンのOCI生成AIサービスを使用しますので、大阪リージョンがサブスクライブされていることが前提となります。
:::

**【所要時間】**
1時間程


# 1. APIキーの取得
:::note info
Oracle APEXの生成AIサービスは、2025年4月現在、**OpenAI、Cohere、OCI Genarative AI**をAIプロバイダーとして使用することが出来ます。
:::

本記事では、**OCI生成AIサービス**のAPIを使用したいと思います。OpenAI、Cohereを使用する場合は、別途APIキーを取得してください。

1．OCIコンソールにアクセスして、右上のプロファイルから**ユーザー設定**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/e569ed53-bf89-7670-cc69-cea7b409a19c.png)

2．左下のリソースからAPIキーを選択し、**APIキーの追加**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c20f4b0d-57cd-e997-da53-6568ad7eb8e3.png)

3．**APIキー・ペアの生成**（デフォルト）を選択し、秘密キーのダウンロードをした上で作成します。秘密キーは後程使用するので大切に保管しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/0b07ccbe-b3d1-66e3-2c67-e4793e6ce5de.png)

4．構成ファイルのプレビューも後程使用しますので、コピーしメモを取っておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/13bdaf98-40ce-fe62-0507-bda8405c02ed.png)

# 2. 開発環境の準備
1．**ワークスペース名**、**ユーザー名**、**パスワード**を入力し、APEXのワークスペースへログインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/97820079-f256-448b-a6c7-7dc1530a8e57.png)

2．**アプリケーション・ビルダー**をクリックします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/f444d3c9-787b-f6be-dfd7-0347bcf94d09.png)

3．**ワークスペース・ユーティリティ**をクリックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/0236a250-130b-d4ec-7609-21070f49f741.png)

4．**生成AI**をクリックします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/242a8375-f209-bb99-f4c9-489c01c5b821.png)

5．**作成**をクリックし、生成AIサービスを作成します。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/366c6e6e-d415-356c-8977-82e580a2202d.png)

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公開キー・フィンガープリント** - 先程取得した構成ファイル内のフィンガープリント
 
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/f98720d5-f6e3-4680-b3b8-322cce7baaf3.png)

# 3. アプリの作成
1．**新規アプリケーションの作成**をクリックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/f02ed141-b786-40e9-86c2-372fc20abcfb.png)

2．**ファイルからのアプリケーションの作成**をクリックします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/bd52e3b5-0bff-438a-969b-93252c49e08b.png)

3．ダウンロードしたExcelファイルをドラッグアンドドロップします。ダウンロード済みでない場合、[こちら](https://github.com/marina-fujimoto/qiita/raw/refs/heads/main/highschools.xlsx)をクリックしダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/b8119e87-527c-f1b4-e62a-45ce57a4f0a0.png)

4．ロード先を新規表とし、**HIGHSCHOOLS**という名前にします。データのロードをクリックし、表にデータをロードします。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/aa1ec7b1-3e66-4802-8050-4f5d71a73df6.png)

5．データのロードが完了しました。アプリケーションの作成をクリックし、ロードしたデータを基にアプリケーションを作成します。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ce612fa7-991f-45a1-bc6d-482d7ff7dc0d.png)

6．アプリケーションのブループリント（設計図）が表示されました。アプリケーションの名前を**学校情報アプリ**と変更します。外観をクリックします。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/3472d2b9-2a70-42f8-9b1b-7c6a8f45c6d9.png)


7．テーマ・スタイルとして**Redwood Light**を選択し、変更を保存します。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/97b61733-68ca-4533-9bc9-b923a555c016.png)


8．次にページを編集します。Highschool検索ページの編集ボタンをクリックします。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/3e88a252-674e-47ba-8fa3-84036bd6b3e4.png)

9．先ずページ名を**学校検索**へ変更します。検索ページをレイアウトを**カード**へ変更します。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/0e2ccd80-8cdc-433e-8c81-ea342c0ba7ec.png)


10．カードのタイトル列として**SCHOOL_NAME**、本体列として**BOROUGH**を選択します。詳細を開いて、**ホームページとして設定**にチェックを入れます。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/6f221ca9-e9e7-4fa8-8dfe-de4589dc6e8d.png)


11．次に、不要なページを削除します。**ホーム**ページの編集ボタンをクリックします。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/91622e7e-a795-464a-acde-b79cc9bb1598.png)


12．削除をクリックします。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/90bdc069-0255-40a5-b2ef-124b77abba70.png)


13．この削除操作を実行するかメッセージが表示されるので、**OK**をクリックします。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/3f9bfa33-17b5-41ac-8394-f461c0c874d5.png)

14．同じ様に、**HIGHSCHOOLレポート**ページも削除します。**ダッシュボード**ページは残しておきます。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c0beffe1-69c8-4ae0-8a01-c106f322fa07.png)

15．編集したブループリントを基にアプリケーションを作成します。**アプリケーションの作成**をクリックします。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/42acd5ae-cc01-4355-ac98-41edd3ade9b2.png)

16．アプリケーションが作成されました。**アプリケーションの実行**をクリックし、作成したアプリケーションを確認します。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/0799ffd2-4f08-496d-abeb-97884b9722a9.png)
17．ログイン画面が表示されました。**ユーザー名**と**パスワード**を入力し、アプリケーションへログインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ba8634c7-b82e-40a8-945b-135d9ede6fe2.png)

18．アプリケーションを作成する事が出来ました。各カードには高校の名前と地区の名前しか載っていないので、どんな分野の学問が学べるのかという情報も追加したいと思います。

画面下部の開発者ツールバーから**ページ1**をクリックします。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/38cc91ff-0e44-4ecb-bc5f-1eb7399bfd6f.png)

19．検索結果の属性からサブタイトルとして、**INTEREST**を表示させ、**保存と実行**をクリックします。
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/997201c3-b784-4cde-9c4f-3e73990d77aa.png)

20．各学校のカードにどんな分野の学問が学べるのかという情報が追加されました。左側にある検索バーなどで絞り込んで検索をすることも出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ae426760-7574-480d-9318-cbfefb395414.png)


# 4. 自然言語でのアプリ編集
1．ナビゲーションメニューをクリックし、**ダッシュボード**をクリックします。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/45f92397-2c2b-4aa8-9e1c-b411b4773c1e.png)

2．自動で作成されたグラフが表示されています。右側の棒グラフを編集し、倍率が高い学校上位10校を表示させます。画面下部の開発者ツールバーから**クイック編集**をクリックし、棒グラフをクリックします。

グラフが作成されていない場合は、開発者ツールバーから**ページ2**を選択します。
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c3044a39-7aae-4760-8701-fe957fe828c5.png)

3．アプリケーションの開発画面に遷移しました。識別>名前を**倍率の高い学校**とします。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/9269e727-f903-4f32-95df-2d35d6e301c1.png)

4．**シリーズ1**をクリックし、ソース>タイプから**SQL問合わせ**を選択します。SQL問い合わせのコード・エディタを開きます。
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/84ad936e-2327-4754-8596-050440de43fd.png)

5．記載されているクエリを全て削除し、APEXアシスタントをクリックします。
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/fffabd62-81f5-4c70-bd84-dee94710012e.png)

6．APEXアシスタントに、**「出願者と席数を計算し、倍率が高い学校の上位10校を棒グラフで表示してください。NULL値はカウントしないようにしてください。」** と指示を出し、生成されたSQLクエリを挿入します。クエリに問題がなければ**OK**をクリックします。
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/dfe6fcfa-6ecf-4fca-a5bb-1c826002a94f.png)

7．列のマッピング>ラベルを**SCHOOL_NAME**、列のマッピング>値を**倍率**とし、**保存と実行**をクリックします。
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/4fde3b97-1a56-41aa-b02a-dacf28f69239.png)


8．右の棒グラフを「倍率が高い学校上位10校」のグラフに変更する事が出来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/8a902d94-0ffd-4e08-8df3-2cf2a5084382.png)



# 5. チャットボットの実装
次に、ニューヨーク市内の高校について、個別の高校について質問をする事が出来るチャットボットを実装していきたいと思います。

1．アプリケーションビルダーに戻り、先ずは新たなページを作成します。**ページの作成**をクリックします。
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/5e75a961-f475-4f43-a5bb-e7a679e514d9.png)

2．**空白ページ**を選択します。
![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/650e0a2a-7dae-4f28-b8f9-81158644fda7.png)

3．ページの名前に**チャットボット**と入力し、ページ・モードを**モーダル・ダイアログ**にし、ページを作成します。
![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/306ae6b4-d820-46d6-a9f5-a68dd01254bb.png)

4．コンポーネントを右クリックし、**リージョンの作成**を選択します。
![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/dfb238c7-310d-40fd-b8cf-d686b0d5cd00.png)

5．作成したリージョンを**質問**、詳細の静的IDは**chat**とします。
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/b65e8219-ab70-4a78-a7a4-611920f1d938.png)

6．Content Bodyを右クリックし、**アイテムの作成**を選択します。
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ec9c7392-74a2-4726-b018-1f9a4b4d795f.png)

7．作成したアイテムの名前を**P3_SCHOOL_ID**とし、タイプを**非表示**にします。
![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/aaab8b4d-b776-4a94-98ba-266c49011768.png)

8．同じように、**P3_CONTEXT**という名前のアイテムを作成し、タイプを**非表示**にします。
![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/0a9327a5-4a59-45a7-9fea-d889290a751c.png)

9．P3_CONTEXTを右クリックし、**計算の作成**をクリックします。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/fef04b85-5f23-4def-81da-e67427c2d6d6.png)

10．計算＞SQL問合せからコード・エディタを開きます。
![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/09095530-5204-4fbe-82ee-4d767830e189.png)

11．以下のSQLクエリを貼り付け、**OK**をクリックします。
```sql
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．動的アクションタブへ移動します。ページのロードを右クリックし、**動的アクションの作成**をクリックします。
![36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/cf859d63-eebd-4985-89b7-0edde881e080.png)

13．識別＞名前を**Chatbot**とします。
![37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/bd9cad8c-d91b-4c6c-83d6-ce710adfb393.png)


14．Trueアクションをクリックし、以下の通り設定します。
- 生成AI：
    - アクション：AIアシスタントの表示
    - サービス：genai（先程作成した生成AIサービス）
    - ようこそメッセージ：こんにちは。お手伝い出来る事はありますか？
    - システム・プロンプト：
    ```sql
    以下の文脈を使用して、すべての質問に答えてください
    
    '''
    
    &P3_CONTEXT.
    
    '''
    
    上記のコンテキストに基づいて質問に答えることができない場合は、「情報見つかりませんでした。」と表示してください。
    ```
![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/8a24b336-ae14-414c-a0cb-9ab3bc5c00dd.png)

    
- 外観：
    - 表示形式：インライン
    - コンテナ・セレクタ：#chat
- クイックアクション：
    - メッセージ１：学校の概要を説明して下さい。
    - メッセージ２：卒業率はどのくらいですか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/9701bf53-1c7b-454d-bb40-1d6fb899a67c.png)
**保存**をクリックし、今までの変更を保存します。


15．**ページファインダー**をクリックし、**ページ１**を選択します。
![38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/584bef4a-4d88-4932-8140-feb023647cf0.png)

16．検索結果の下にあるアクションを右クリックし、**アクションの作成**を選択します。
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/3230ae31-5689-4270-818e-cab3ec68b331.png)

17．以下の通りに設定します。
- 識別
    - タイプ：ボタン
    - ラベル：質問

![39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/044660a0-a3a1-43d9-9f60-34dffcf3a9dc.png)

- リンク
    - ターゲット
        - ターゲット>ページ：ページ３
        - アイテムの設定>名前：P3_SCHOOL_ID
        - アイテムの設定>値：&ID.

![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/a4e7f644-1c04-4977-8351-c6e61048bc68.png)
**OK**をクリックし、設定を保存します。画面上部の**保存と実行**をクリックし、実装したチャットボットを確認します。

18．**質問**というボタンが表示されました。ボタンをクリックします。
![41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/367259b1-26c2-40d8-adf6-18bf47736b42.png)

19．チャットボットの画面が表示されました。ここからいくつか質問をしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/6cd591d4-6a62-4c51-84af-6380db9694e2.png)

以上で終了です。お疲れ様でした。