サンプル・データセットのEMP/DEPTに含まれる表EMPに従業員を入力するフォームを作り、Chromeに拡張機能として追加したWebMCP Toolを使って従業員を入力してみました。GeminiのAPIキーを設定すると、AIが生成した入力データを使ってツールを実行するようですが、お金がかかります。入力データとなるJSONは、決め打ちでInput Argumentsに与えています。
APEXアプリケーションをWebMCPツールとして呼び出せるようにする際に、以下の制約がありました。
- WebMCPツールの宣言型APIによる実装では、１つのWebMCPツールは１つのフォームとそのフォームの送信として定義されます。Oracle APEXのアプリケーションは１つのページにform要素は１つだけ含まれます（フォーム・リージョンは複数配置できますが、フォーム・リージョンはform要素ではありません）。結果としてAPEXアプリケーションの１ページに実装できるWebMCPツールは１つだけです。１ページに複数のWebMCPツールを含めるには、命令型APIで作成する必要があります。
- 上記に関連しますが、APEXではフォームにたいして複数のボタンを作成し、ボタンごとに動作を切り替えるように実装します。WebMCPツールでの操作は送信のみが望ましいため、APEXでよくある１つのフォームに作成、変更の確定、削除、キャンセルを紐づけるよりは、作成フォーム、変更フォーム、削除フォームとフォームを分けてアプリケーションを作成する必要がありそうです。１にも関連しますが、APEXでは１ページ１フォームであるため、WebMCPツールは作成ページ、変更ページ、削除ページのように、それぞれのページとして作成することになります。現実的には宣言型APIによる実装は諦め、命令型APIで１ページに複数のWebMCPツールを作成することになりそうです。
- WebMCPツールはフォームの送信（Submit）によって実行されます。APEXのページ送信の仕組みでは呼び出せません。正確にいうと呼び出すことができますが、実行結果を呼び出し元 - つまりLLMに返せません。そのため、WebMCPツールの送信処理はAjaxコールバックで実装する必要があります。
- 入力フィールドに推奨値を設定するだけであれば、上記の制限は発生しません。AIが入力をアシストしてくれるでしょう。
ChromeでWebMCPを使う準備については、Chrome for Developersに掲載されているAlexandra KlepperさんによるWebMCPの記事で紹介されています。
Chrome for Developers - WebMCP
上記の記事で紹介されている、以下の２つの作業を実施しておきます。
- Chromeのフラグchrome://flags/#enable-webmcp-testingを有効にする。
- ChromeにModel Context Protocol Inspector拡張機能をインストールする。
作業を行うAPEXワークスペースに、サンプル・データセットのEMP/DEPTをインストールしておきます。
以下よりWebMCPツールとして呼び出せる、従業員の入力フォームの作成手順を紹介します。
最初に空のAPEXアプリケーションを作成します。名前はWebMCP Testとします。
空のAPEXアプリケーションWebMCP Testが作成されます。
WebMCPツールを組み込むページを作成します。これは表EMPのフォームです。
ページの作成をクリックします。
フォームを選択します。
ページの名前はEmployee、ページ・モードは標準とします。データ・ソースの表/ビューの名前にEMPを選択します。
次へ進みます。
主キー列1はEMPNO(Number)です。ページの作成を実行します。
ページEmployeeが作成されます。
従業員番号を手入力できるようにするため（APEXでは主キー列はデフォルトで非表示、チェックサムによる保護が有効）、ページ・アイテムP2_EMPNOのタイプを数値フィールドに変更し、セキュリティのセッション・ステート保護を制限なしに変更します。
ページ・アイテムをWebMCPツールの入力として認識させるため、それぞれのページ・アイテムの詳細のカスタム属性にtoolparamdescriptionを設定します。
ページ・アイテムP2_ENAME: toolparamdescription="従業員の名前"
ページ・アイテムP2_JOB: toolparamdescription="従業員の職種"
ページ・アイテムP2_MGR: toolparamdescription="マネージャーの従業員番号"
ページ・アイテムP2_HIREDATE: toolparamdescription="採用日"
ページ・アイテムP2_SAL: toolparamdescription="給与"
ページ・アイテムP2_COMM: toolparamdescription="手当"
ページ・アイテムP2_DEPTNO: toolparamdescription="所属している部門の部門番号"
APEXのフォームに複数のボタンが配置されていますが、これらのボタンはtype="button"です。WebMCPツールとしては、type="submit"のボタンが必要です。そのため、type="submit"のボタンを作成します。APEX標準のボタンとしては作成できないため、静的コンテンツのリージョンを作成し、HTMLでボタンを記述します。
リージョンの名前はWebMCPとします。タイプに静的コンテンツを選択し、ソースのHTMLコードに以下を記述します。
<button type="submit">Submit</button>
詳細のHTML DOM IDにwebmcp-region、カスタム属性にhiddenを設定します。
本来であればこれで静的コンテンツのリージョンが非表示になるはずですが、APEXのテーマがhidden属性を上書きしている模様です。ページ・プロパティのCSSのインラインに以下を記述し、対象のリージョンを非表示にします。
#webmcp-region[hidden] {
display: none !important;
}
以上でWebMCP向けのボタンSubmitの作成と、そのボタンを非表示にできました。
従業員の作成を行うAjaxコールバックを作成します。名前はREGISTER_EMPLOYEEとします。
ソースのPL/SQLコードに以下を記述します。受け取ったページ・アイテムの値を表EMPに挿入しているだけの、簡単な処理です。
ページ・ロード時に、WebMCPツールを作成するJavaScriptのコードを実行します。
ページのロードで実行される動的アクションをRegister WebMCP Toolとして作成します。その動的アクションにTRUEアクションとしてJavaScriptコードの実行を作成します。
TRUEアクションの設定のコードに以下を記述します。
JavaScriptのコードで、WebMCPの宣言型APIとなる属性であるtoolnameおよびtooldescriptionをform要素に追加しています。また、フォームが送信されるときに実行されるAPEX組み込みの処理を、WebMCPツールとして必要な処理に置き換えています。
以上でアプリケーションは完成です。
必ずしも必要ではありませんが、WebMCPツールで操作した従業員データを編集できるように、対話モード・レポートとフォームのページを追加しておくと便利でしょう。
ページの作成を実行します。
タイプとして対話モード・レポートを選択します。これ以降の作業は、一般的な対話モード・レポートとフォームの作成なので、手順は省略します。
最初はページ・アイテムへの入力に留めます。JavaScriptのコードで属性toolautosubmitを追加している部分をコメントアウトします。
// Comment out the next line when a user should review the form and submit it manually.
// formElement.setAttribute('toolautosubmit', '');Employeeのフォームを開き、拡張機能のWebMCP Toolを実行します。
Toolとしてregister_employeeが見つかっています。
Input Argumentsに以下のJSONを入力します。名前などの入力値は変更してテストされると良いでしょう。
{
"P2_EMPNO": "9992",
"P2_ENAME": "YUJI",
"P2_JOB": "ANALYST",
"P2_MGR": "",
"P2_HIREDATE": "2028/08/26",
"P2_SAL": "8000",
"P2_COMM": "20",
"P2_DEPTNO": "10"
}Execute Toolをクリックします。
Input Argumentsに与えた値がフォームに入力されます。toolautosubmitをコメントアウトしているため、WebMCPツールの実行は行われません。
toolautosubmitのコメントを外し、元に戻します。
// Comment out the next line when a user should review the form and submit it manually.
formElement.setAttribute('toolautosubmit', '');先ほどと同じ操作を行い、Execute Toolをクリックします。
今度はAjaxコールバックREGISTER_EMPLOYEEが呼び出され、従業員が作成されます。Ajaxコールバックのレスポンスが、そのままWebMCPツールが受け取ったレスポンスとして表示されています。
もう一度Execute Toolをクリックすると、同じ従業員番号の従業員が存在するため、一意制約違反が発生して従業員の作成に失敗します。
対話モード・レポートのページを開くと、WebMCPツールを呼び出して作成した従業員の存在を確認できます。
JavaScriptでコーディングするなら宣言型APIを使うより、最初から命令型APIで記述しても良いのでは？と思います。特にAPEXでは１ページに１フォームという制限がある上に、APEX組み込みのフォームの送信処理がWebMCPツールの処理に干渉します。
本記事で記述したコードの多くは命令型APIによる実装に流用できます。AjaxコールバックによるWebMCPツールの実装は命令型APIでも同じです。
今回の記事は以上になります。
今回作成したAPEXアプリケーションの、APEXlang形式のエクスポートを以下におきました。
https://github.com/ujnak/APEXlang-exports/tree/main/webmcp-test
本記事に掲載しているPL/SQLおよびJavaScriptのコードは、OpenAI GPT 5.6 Terraで生成しました。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
