Oracle APEXの新機能、APEX AIアシスタントを使ってみた

# はじめに
新たにリリースされたOracle APEX24.1の新機能、**APEX AIアシスタント**を使用して、**自然言語**でアプリケーションを作成します。

**APEX AIアシスタント**は、OpenAIなどの生成AIサービスを使用し、ユーザーが入力したテキスト（自然言語）から**PL/SQL**、**CSS**、**HTML**、**JavaScript**のコードを記述します。

**自然言語で指示**をするだけで、APEXアシスタントがコードを記述してくれます。その他にも、**PL/SQL、CSS、HTML、JavaScriptについての説明**や、**バグの修正**を行う事が出来るので、コーディングに費やす時間を大幅に削減する事が出来ます。

本記事ではAPEXアシスタントを使用し、SQLクエリを記述したいと思います。


**【前提条件】**
- Oracle APEXのワークスペースが作成済みであること
  （ワークスペースの作成方法は[こちら](https://qiita.com/marfujim/items/a9ebe698c865e20d4852#1-1-apex%E7%92%B0%E5%A2%83%E3%81%AE%E6%BA%96%E5%82%99)をご参照ください。）
- 使用可能なAPIキーが作成済みであること
        （OpenAIのAPIキー取得方法は[こちら](https://qiita.com/marfujim/items/3e2fe1861a7b148e41b1#openai%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90)をご参照ください。）
:::note info
Oracle APEXの生成AIサービスは、2024年8月現在、**OpenAI、Cohere、OCI Genarative AI**をAIプロバイダーとして使用することが出来ます。OCI Genarative AIは、**APEX24.1.2以降**でのみ使用可能です。
:::


**【所要時間】**
20分程

# 1. 生成AIサービスの作成
**APEXアシスタント**の機能を使用するため、APEX上で生成AIサービスを作成します。

既にAPEX上で生成AIサービスを作成済みの場合は再度作成いただく必要はありません。[2. サンプルアプリケーションの作成](https://qiita.com/marfujim/items/9f9a8ca9af6d5166d816#2-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90)へスキップします。

1. 作成したAPEXのワークスペースにログインし、**アプリケーション・ビルダー**をクリックします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/f444d3c9-787b-f6be-dfd7-0347bcf94d09.png)
    <br>

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

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

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

5. 以下の通りに記入し、**作成**をクリックします。
    - **AIプロバイダ** - OpenAI（CohereのAPIを使用する場合は、Cohereを選択します）
    - **名前** - 任意（本記事では、OpenAI Demoとしています）
    - **アプリケーション・ビルダーで使用** - トグルをオン
    - **APIキー** - 取得したAPIキー
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ce6ac5f0-c186-6998-afe5-d6db520ec6ed.png)
    <br>
6. 生成AIサービスを作成する事が出来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/5713e6d2-3e75-d608-afc1-9ac4b3508a93.png)


# 2. サンプルアプリケーションの作成
 **APEXアシスタント**の機能を試すために、アプリケーションとデータセットが必要です。
 
 APEXのワークスペース上に、サンプルデータセットをロードし、新しいアプリケーションを作成します（既にEMP表、DEPT表をダウンロードし、アプリケーションを作成済みの場合は[3. APEXアシスタントを使ってみる](https://qiita.com/marfujim/items/9f9a8ca9af6d5166d816#3-apex%E3%82%A2%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B)へスキップして下さい。)。

1. 画面上部の**検索**をクリックし、**検索フィールド**にサンプルと入力します。検索結果に表示される**サンプル・データセット**をクリックします。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ced579e2-d63c-a9e0-6178-b1cccc60e495.png)
    <br>

2. アプリケーションの作成に必要なデータをインストールします。本記事では、**EMP/DEPT**というサンプル・データセットをインストールします。**インストール**をクリックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/2fb21d3c-9d9d-71c5-0a8a-84df351fee3f.png)
    <br>


3. 言語を**日本語**へ変更し、**次**をクリックします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/bf159bbd-eb9f-e6d5-077d-d4fc1e5ca2eb.png)
    <br>


4. **データセットのインストール**をクリックします。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/2c396ae5-56ed-5598-b1ac-649c2cb2a895.png)
    <br>


5. データセットのインストールが終了しました。**アプリケーションの作成**をクリックします。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/b17ea773-262b-fd82-22dc-a0f32ccd08bd.png)
    <br>

6. 設定はそのままにし、**アプリケーションの作成**をクリックします。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/04ffb89a-822d-2e22-5710-61e573cc6242.png)
    <br>

7. これで、アプリケーションの作成が終わりました。**SQLワークショップ**をクリックし、インポートしたEMP表とDEPT表を確認します。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/7b801c4a-052a-5c0d-e0cd-b6a2bc1e9efd.png)
    <br>

8. **オブジェクト・ブラウザ**をクリックします。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c06c4bba-0ac3-10b0-f846-99eac1f5692f.png)
    <br>

9. 先程インポートした**EMP表とDEPT表**が表示されています。それぞれの表にどの様なデータが格納されているか確認します。

    EMP表には従業員の氏名や職種、給与等の情報が格納されており、DEPT表には部署のID、名前、所在地が格納されている事が分かりました。また、EMP表のDEPTNOはDEPT表の主キーであるDEPTNOを参照している事が分かりました。

    データセットの確認が終わったら、**アプリケーション・ビルダー**へ戻ります。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/af9588da-5e4d-7a92-6034-ca34c0f55ac1.png)



# 3. APEXアシスタントを使ってみる
生成AIサービス、サンプルアプリケーションの用意ができたので、**APEXアシスタント**を使用してみましょう。

1. 先ずは、作成したアプリケーションを確認してみます。**アプリケーションの実行**をクリックします。
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/b8ab7015-9830-a624-0cd9-b05c50e43796.png)
    <br>

2. ログイン画面が表示されるので、**ワークスペースのユーザー名とパスワード**を入力します。
![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/63bc8d73-65f8-c181-6cca-0acf770876ee.png)
    <br>

3. アプリケーションにログインする事が出来ました。**従業員**と書いてあるページをクリックします。
![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ac169fde-ebaf-50ae-3eb7-68b8a8063c5c.png)
    <br>

4. このページには、従業員の氏名、部署名、入社日（Hired）などの情報が表示されています。

    「入社してから何年経過しているか」、「どの支部で働いているか（部署の所在地）」という2つの情報を追加したいと思います。

    画面下部にある**ページ3**をクリックします。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/21e70e5f-7050-5aca-5b0b-e6b378ea3fb1.png)
    <br>

5. 従業員ページのページ・デザイナで編集を行います。
    
    **Employee**というクラシック・レポートをクリックし、**ソース>タイプ**を**SQL問合せ**へ変更し、その下に表示される**SQL問合せのコード・エディタ**を開きます。
![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/5b422ee4-418a-73de-43bf-0827874754e9.png)
    <br>

6. コード・エディタに**APEXアシスタント**機能があるので、クリックします。

    生成AIサービスが作成されていない場合は表示されません。まだ生成AIサービスを作成していない場合は、[1. 生成AIサービスの作成](https://qiita.com/marfujim/private/9f9a8ca9af6d5166d816#1-%E7%94%9F%E6%88%90ai%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E4%BD%9C%E6%88%90)をご参照ください。
![36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/a94f2df0-6657-5706-b94e-f61aed0097fc.png)
    <br>

7. 先ずは従業員ページの表に、それぞれの従業員が「どの支部で働いているか（部署の所在地）」表示させたいと思います。

    インポートしたデータセットを確認した際に、所在地はLOCという列に格納されている事を確認したので、「LOCの情報も追加してください」と入力してみます。
    ![37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/52d99982-9ce6-61b0-7da4-668cc337ae77.png)
    すると、表を結合してLOC列を表示するSQLクエリを生成してくれました。**挿入**をクリックし、SQLクエリをアップデートします。
    <br>

8. 次に、従業員が「入社してから何年経過しているか」というデータも表示させたいと思います。表示するフォーマットも指定します。
![38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/136e4794-1aa6-ba5d-a756-d0eb34c10e50.png)


    指定した通りのフォーマットで「入社してから何年経過しているか」というデータを表示するSQLクエリを生成してくれました。クエリを**挿入**し、**保存と実行**のボタンをクリックします。

    :::note info
    **参考：**
    「1年前」といった形式で表示してくださいと指定しただけですが、1年に満たない場合は「1年未満」と表示するようにクエリを生成してくれました。以下がAPEXアシスタントが生成したクエリです。

            select emp.empno,
                   emp.ename,
                   emp.job,
                   emp.mgr,
                   emp.hiredate,
                   emp.sal,
                   emp.comm,
                   emp.deptno,
                   dept.loc,
                   CASE
                       WHEN months_between(sysdate, emp.hiredate) < 12 THEN '1年未満'
                       ELSE TRUNC(months_between(sysdate, emp.hiredate) / 12) || '年前'
                   END as years_since_hire
              from emp



9. 編集した内容が反映されているか確認します。Locという列に「どの支部で働いているか（部署の所在地）」というデータが表示、Years Since Hire列に、「入社してから何年経過しているか」というデータを表示する事が出来ました。
![スクリーンショット 2024-06-26 110519.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c7fbba9c-c02a-8574-21be-5b474e8942df.png)

    <br>

10. 次に、画面上部の**ナビゲーション・バー**から**ダッシュボード**をクリックし、ダッシュボードページを確認します。

    ダッシュボードページ下部にある**部署ごとの総給与**と、**職種ごとの合計給与**を、それぞれ**平均給与**に変更したいと思います。画面下部、開発者ツール・バーの**ページ2**をクリックします。
![310.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/62ab53f8-2130-f196-b748-5cbc9c55bc5c.png)
    <br>

11. ダッシュボードページのページ・デザイナで、部署ごとの総給与と職種ごとの合計給与のグラフを編集します。

    先ずは、**部署ごとの総給与**の**シリーズ１**をクリックします。**ソース>タイプ**を**SQL問合せ**へ変更します。その下に表示されるSQL問合せの**コード・エディタ**を開きます。
![311.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/4660da18-6dca-7e36-9c8f-cac5b3725186.png)
    <br>

12. コード・エディタで**APEXアシスタント**をクリックし、プロンプトからAPEXアシスタントへ指示を出します。先程は列名を明記して指示を出しましたが、今回は列名を出さずに指示を出してみます。

    部署ごとの平均給与のグラフに変更したいので、**部署ごとの平均給与**と指示を出します。
![スクリーンショット 2024-06-26 132823.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/67293a0c-53f7-5eed-a25e-15d082c2e0f3.png)


    <br>

13. **部署ごとの平均給与**を出すことの出来るSQLクエリを生成してくれました。**挿入**をクリックし、SQLクエリをAPEXアシスタントが生成したものに変更します。

    生成してくれたクエリがどいったものなのか解説をお願いしてみます。**クエリー・ビルダー**をクリックし、**一般的なサポート**へ切り替えます。
![スクリーンショット 2024-06-26 112242.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/7e417a50-6d09-cff1-8432-47bd818b5cce.png)

    <br>

14. 一般的なサポートで、**説明の選択**をクリックします。
![スクリーンショット 2024-06-26 112309.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/cf23b3be-ff58-3cb2-2514-72d4cf2ac031.png)

    <br>

15. 説明の選択をクリックすると、自動でAPEXアシスタントへ指示が送られ、APEXアシスタントがSQLクエリの説明を行います。

    説明を確認したら、チャットの**クリア**を押してみます。
![スクリーンショット 2024-06-26 112333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/e252645b-5406-b922-d7a1-5a3f37ded417.png)

    <br>

16. 今までの会話履歴がクリアされました。

    次は、**向上の選択**をクリックし、現在のSQLクエリを改善するにはどうすれば良いか聞いてみます。
![スクリーンショット 2024-06-26 113840.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/cfa38b96-e8ff-7466-2578-05126c3d5ef1.png)
    <br>

17. 向上の選択をクリックすると、自動でAPEXアシスタントへ指示が送られました。APEXアシスタントが、どの様にしてクエリを改善することが出来るか提案、提案に沿ったSQLクエリの修正を行ってくれました。
![スクリーンショット 2024-06-26 113943.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/48d94053-b924-c1fb-e527-358db5f8f149.png)

    <br>

18. 提案内容を確認し、修正後のクエリを**挿入**します。

    修正後のクエリの説明や、クエリの向上を再度行いたい場合、他に何か質問などある場合は、プロンプトにメッセージを入力します。このままで良い場合は、右下にある**OK**ボタンをクリックし、SQLクエリの変更を保存します。
![スクリーンショット 2024-06-26 114047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/b163c3a1-cc6c-3a5c-9317-1f90a347bbea.png)

    <br>

21. **列のマッピング>値**を**AVERAGE_SALARY**と変更します。

    APEXアシスタントが生成したSQLクエリによって値の列名は変わるので、ご注意下さい（本記事では、給与の平均をAVERAGE_SALARYという列別名で表しているため、**AVERAGE_SALARY**を選択しました）
![321.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/7241bd9a-ff5c-4b2f-9ccf-fdb33cadcd86.png)
    <br>

22. **識別>名前**を**部署ごとの平均給与**と変更し、画面上部にある**保存と実行**ボタンをクリックします。
![322.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/f316a21d-1239-feda-c111-423fdbf2e52e.png)


    :::note info
    **その他、一般的なサポートモードで出来ること：**
    - **SQLに関する一般的な質問** - SQLに関する質問をする事が出来ます。
    ![300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/f89bb7ff-0461-f5cc-d863-8bd191e269f0.png)

    
    - **バグの修正** - 「この修正のヘルプ」をクリックするだけで、どこにバグがあるのかすぐに突き止め、修正済みのSQLクエリを記述してくれます。
    ![301.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c54ab5aa-01f6-63ec-6046-cb7b8d4779ee.png)
    :::
    <br>
23. 変更が反映されているのが確認できます。部署ごとの平均給与が一目で分かり、会計の部署の平均給与が一番高いということが分かります。

    「職種ごとの合計給与」のグラフも同様に、APEXアシスタントを使用し「職種ごとの平均給与」のグラフに変更してみて下さい。
![323.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/fd3c063b-b1ce-0bab-8acb-68569906656f.png)
    <br>

24. 「職種ごとの平均給与」のグラフは以下の様になります。
![324.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/7ef19ec6-620b-d2bc-e471-3d83e9b000ee.png)

これで本記事は終了です。
AIがAPEX上でアプリケーション開発支援をしてくれる様になり、より素早くより簡単にアプリケーション開発を行う事が出来る様になりました。是非、APEXアシスタントをご活用ください。

# 参考資料
- [What's New in Oracle APEX 24.1](https://apex.oracle.com/en/platform/features/whats-new-241/)
- [Oracle APEX AI Assistant、エンタープライズ・アプリケーションの自然言語ベースによる開発を実現](https://www.oracle.com/jp/news/announcement/oracle-apex-ai-assistant-enables-natural-language-based-development-of-enterprise-applications-2024-06-17/)
- [Managing Generative AI Services](https://docs.oracle.com/en/database/oracle/apex/24.1/htmdb/managing-generative-ai-services.html#GUID-2AE4465F-8BD6-4BE0-AFCA-7962F6991715)
- [Coding with the AI Powered APEX Assistant on Oracle APEX](https://blogs.oracle.com/apex/post/coding-with-the-ai-powered-apex-assistant-on-oracle-apex)