日日是Oracle APEX: APEX 26.1のAIエージェントでHTMLキャンバスに描画した車を動かす

2026年7月1日水曜日

APEX 26.1のAIエージェントでHTMLキャンバスに描画した車を動かす

Oracle APEX 26.1では共有コンポーネントとして、新たにAIエージェントが追加されました。新しいAIエージェントは、APEX 24.2にあった共有コンポーネントのAI構成を置き換えています。また、古いAI構成はRAGソースを含んでいました。新しいAIエージェントは、RAGソースがツールに置き換えられています。

以前のRAGソースは、サーバー側で検索した結果をコンテキストに含めるために使用しました。新しいAIエージェントのツールにはタイプが３種類あります。クライアント側のコードを実行、サーバー側のコードを実行、データの取得がそれらのタイプです。この中で、データの取得が以前のRAGソースにあたります。クライアント側のコードを実行とサーバー側のコードを実行が新しく追加されたタイプです。これらはタイプがオンデマンドの場合、ツール呼び出しを行うためにLLMに送信するメッセージに含めるツール定義になります。

新しいAIエージェントの動作を理解するために、以下のAPEXアプリケーションを作成しました。HTMLキャンバスにbabylon.jsを使って車を描画し、APEXのチャット画面からの指示により車を動かします。

LLMにはmacOSのLM Studioで実行しているgoogle/gemma-4-31b-qatを使用しています。

以下、APEXアプリケーションの作り方を紹介します。

空のAPEXアプリケーションを作成します。名前はDriving with APEXとします。

アプリケーションが作成されます。車の描画やコマンド入力は、ホーム・ページに実装します。

ページ・プロパティのJavaScriptのファイルURLに以下を記述し、ページにbabylon.jsを組み込みます。

https://cdn.babylonjs.com/babylon.js

本記事はAPEXのAIエージェントを紹介することを目的としています。babylon.jsについてはChatGPTやClaudeに聞いて実装しています。動作することは確認しましたが、最適な実装かどうかについては分かりません。

車を描画する領域を、静的コンテンツのリージョンCarとして作成します。

ソースのHTMLコードとして以下を記述します。

<div id="babylonRegion" style="width:100%; height:500px;">

<canvas id="renderCanvas" style="width:100%; height:100%; touch-action:none;"></canvas>

</div>

APEXのAIエージェントに紐付け、車を操作するプロンプトを入力するリージョンを静的コンテンツとして作成します。リージョンの名前はDriveとします。

ソースのHTMLコードに以下を記述します。

<div id="drive"></div>

車が描画されているリージョンの右隣に配置するため、レイアウトの新規行の開始をオフにします。

HTMLキャンバスに車を描画するコードを記述します。

ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に以下を記述します。

ページ・ロード時に実行に以下を記述します。

initBabylonCar();

ここまでの状態でアプリケーションを実行すると、キャンバスに車が描画されているところまでを確認できます。

これからAPEXのAIエージェントを実装していきます。

あらかじめワークスペースに生成AIサービスが登録ずみであることを前提とします。本記事ではLM Studioとgoogle/gemma-4-31b-qatを使用していますが、日本語の解釈ができてツール呼び出しに対応していれば、他のモデルでも動くでしょう。

共有コンポーネントのAIエージェントを開きます。

作成済みのAIエージェントが一覧されます。作成を開始します。

作成するAIエージェントの名前はCar Driverとします。生成AIのサービスとして、すでにワークスペースに作成されている生成AIサービスを選択します。

システム・プロンプトに以下を記述します。

「babylon.jsでキャンバスに描画された車を移動します。」

ようこそメッセージに以下を記述します。

「さあ、車を動かしましょう。」

以上で、一旦AIエージェントを作成します。

AIエージェントCar Driverが作成されたら、ツールの追加をクリックします。

生成AIツールを作成します。

名前はmove_car_rightとします。タイプにクライアント側のコードを実行を選択します。実行ポイントにオンデマンドを選択します。

説明として以下を記述します。実行ポイントがオンデマンドの場合、以下の説明はツールの説明としてLLMに送信され、LLMによるツール選択の基準になります。

「車を右に、指示した距離だけ移動します。」

パラメータの追加をクリックし、パラメータを追加します。

パラメータ名はDISTANCE、説明は移動する距離、データ型はNUMBER、必須をはいにします。このパラメータ定義もLLMに送信され、ツールが必要とするプロパティとして認識されます。

設定のコードに、ツールmove_car_rightが選択されたときに実行するコードを記述します。タイプにクライアント側のコードを実行を選択しているため、ブラウザで実行されるJavaScriptのコードを記述します。

car.position.x += this.data.DISTANCE;
return {};

本記事ではこれ以上の設定を行いませんが、AIツールにはこの他に以下の設定があります。

User Approvalをオンにすると、ツールを実行する前にユーザーに確認を求めることができます。通知を設定すると、ツールの実行後に通知を表示できます。

サーバー側の条件やセキュリティでは、設定した条件に応じてAIエージェントにこのツールを含めるかどうかを決めることができます。例えば、特定の部門に所属している人が実行できる、管理者であれば実行できる、といった条件のツールを作れます。また、これらの条件はAIエージェントが呼び出される度に評価されるため、それまでのコンテキストを参照してProgressive Tool Disclosureのような実装もできるでしょう。

ビルド・オプションを使うことで、開発環境に限りツール呼び出しに含めるといった設定もできます。