日日是Oracle APEX: ドロワーを画面下から表示する

2026年6月17日水曜日

ドロワーを画面下から表示する - Codexを使って

Oracle APEX 26.1のUniversal Themeより、ドロワーを画面右から以外に、画面の上下左右のどこからでも表示させることができるようになりました。

Tomas Kucharzykさんのブログで紹介されています。

Oracle APEX 26.1 Finally Gets Top and Bottom Drawers
https://kuchatom.hashnode.dev/oracle-apex-26-1-finally-gets-top-and-bottom-drawers

記事と同じことを行なっても仕方がないので、Codexに指示を出して右から表示されるドロワーを画面下から表示するように変更させてみました。変更を指示したプロンプトは以下です。

「demonstration-emp-dept以下にあるAPEXアプリケーションの、Page 4とpage 6のドロワーを画面下から表示するように変更してください。」

結果として、アプリの動作は以下のように変更されました。

サンプル・データセットのEMP/DEPTをインストールして作成したアプリケーションdemonstration-emp-deptを使って、作業しています。

以下、実施した作業について紹介します。作業環境はMacbook ProのmacOS Tahoe 26.5.1です。

作業ディレクトリとしてemp-dept-drawerを作成し、移動します。

mkdir emp-dept-drawer
cd emp-dept-drawer

APEXlangのスキルのインストールにMicrosoft APMを使用します。バージョン0.20.0では、Codex向けにMCPサーバーもインストールできました。

emp-dept-drawer % apm --version

Agent Package Manager (APM) CLI version 0.20.0 (43a00c2)

emp-dept-drawer %

ファイルapm.ymlを作成し、以下の内容を記述します。

name: emp-dept-drawer
version: 0.1.0
description: Oracle APEX 26.1のAPEXlangを使ってアプリケーションを作成する。
author: Yuji
dependencies:
  apm:
    # Oracle Database Skills
    - git: https://github.com/oracle/skills
      path: db
      ref: main
    # Oracle APEXlang Skills
    - git: https://github.com/oracle/skills
      path: apex
      ref: main
  mcp:
    - name: oracle-apexdev
      registry: false
      transport: stdio
      command: /opt/homebrew/Caskroom/sqlcl/26.1.2.132.1334/sqlcl/bin/sql
      args:
        - -R
        - "4"
        - -mcp

プロジェクトにスキルとMCPサーバーをインストールします。

apm install --target codex

emp-dept-drawer % apm install --target codex

[>] Installing dependencies from apm.yml...

[i] Targets: codex (source: --target flag)

[+] github.com/oracle/skills/apex#main #main @b31c5175 (cached)

|-- Skill integrated -> .agents/skills/

[+] github.com/oracle/skills/db#main #main @b31c5175 (cached)

|-- Skill integrated -> .agents/skills/

+- MCP Servers (1)

[i] Skipped MCP config for claude (active targets: codex)

| [>] oracle-apexdev (self-defined, stdio)

| +- Configuring for Codex...

[*] Configured MCP server 'oracle-apexdev' for Codex CLI

+ oracle-apexdev

| [+] oracle-apexdev -> Codex (configured)

[*] Configured 1 server

[*] Installed 2 APM dependencies and 1 MCP server in 2.4s.

emp-dept-drawer %

ファイル自体はGitで管理しませんが、Codexが認識するためgit initを実行しておきます。

git init

emp-dept-drawer % git init

Initialized empty Git repository in /Users/ynakakoshi/Documents/emp-dept-drawer/.git/

emp-dept-drawer %

最新のCodexでは、macOS上で--sandbox workspace-writeの指定が不要になったようです。

emp-dept-drawer % codex --version

codex-cli 0.140.0

emp-dept-drawer %

SQLclでAPEXのワークスペース（のスキーマ）に接続し、変更対象のAPEXアプリケーションをエクスポートします。対象のAPEXアプリケーションのアプリケーションIDは112でした。

apex export -api 112 -exptype apexlang

emp-dept-drawer % sql -name local-26ai-apexdev

SQLcl: 水 6月 17 17:49:30 2026のリリース26.1 Production

接続先:

Oracle AI Database 26ai Free Release 23.26.1.0.0 - Develop, Learn, and Run for Free

Version 23.26.1.0.0

SQL> apex export -api 112 -exptype apexlang

ワークスペースAPEXDEVをエクスポートしています - アプリケーション112:Demonstration - EMP / DEPT

ファイルdemonstration-emp-dept/application.apxが作成されました

SQL> exit

Oracle AI Database 26ai Free Release 23.26.1.0.0 - Develop, Learn, and Run for Free

Version 23.26.1.0.0から切断されました

emp-dept-drawer %

Codexを起動し、先ほどのプロンプトを与えます。

6分35秒かけて、ドロワーを下から表示するような変更が完了しています。APEXlangのスキルに「CRUDドロワーは右から表示する」というルールが定義されているため、検証に失敗している模様です。

emp-dept-drawer % codex

╭──────────────────────────────────────────────╮

│ >_ OpenAI Codex (v0.140.0) │

│ │

│ model: gpt-5.5 medium /model to change │

│ directory: ~/Documents/emp-dept-drawer │

╰──────────────────────────────────────────────╯

Tip: New Use /fast to enable our fastest inference with increased plan usage.

› demonstration-emp-dept以下にあるAPEXアプリケーションの、Page 4とpage 6のドロワーを画面下から表示するように変更

してください。

• APEXアプリの構造とこのリポジトリのAPEXlang手順に沿って確認します。まず該当スキルの指示を読み、Page 4/6 の定義を

探します。

• Explored

└ List demonstration-emp-dept

Read SKILL.md (apex skill), SKILL.md (apexlang skill)

──────────────────────────────────────────────────────────────────────────────────────────────────────────────────

• 対象アプリは demonstration-emp-dept と明示されており、Page 4/6 のファイルも確認できました。次にドロワー属性がど

こで定義されているかを絞ります。

• Explored

employee.apx

department.apx

Read p00006-department.apx, p00004-employee.apx

• Page 4/6 はどちらも dialogTemplate: @/drawer で、現在は js-dialog-class-t-Drawer--pullOutEnd により右端から出る

設定です。Universal Theme の既存クラス名に合わせて、下から出るドロワー用のオプション名を確認します。

• Explored

└ Search t-Drawer--pull|pullOut|Drawer in demonstration-emp-dept

Search Drawer--pullOut in apexlang

Search *.apx in .

• APEXlang のテンプレート定義で、下から表示する値は js-dialog-class-t-Drawer--pullOutBottom と確認できました。Page

4 と Page 6 の該当テンプレートオプションだけを差し替えます。

• Edited 2 files (+2 -4)

└ demonstration-emp-dept/pages/p00004-employee.apx (+1 -2)

9 #DEFAULT#

10 - js-dialog-class-t-Drawer--pullOutEnd

10 + js-dialog-class-t-Drawer--pullOutBottom

11 ]

⋮

413 )

414 -

└ demonstration-emp-dept/pages/p00006-department.apx (+1 -2)

9 #DEFAULT#

10 - js-dialog-class-t-Drawer--pullOutEnd

10 + js-dialog-class-t-Drawer--pullOutBottom

11 ]

⋮

278 )

279 -

• 変更は最小差分で入れました。これから APEXlang のローカル検証を通して、構文と属性の整合性を確認します。

• Ran git diff -- demonstration-emp-dept/pages/p00004-employee.apx demonstration-emp-dept/pages/

│ p00006-department.apx

└ (no output)

• Ran node .agents/skills/apex/apexlang/tools/apexctl.mjs apexlang validate --app-path /Users/ynakakoshi/

│ Documents/emp-dept-drawer/demonstration-emp-dept

└ Vocabulary compatibility check passed.

APEXLANG_DSL_LINT_FAILED

… +53 lines (ctrl + t to view transcript)

VALIDATION_LINT_OK

APEXLANG_LOCAL_CHECK_FAILED

• ローカル検証は既存のアプリ全体の lint 問題で失敗しました。今回の要件で入れた pullOutBottom も、検証ルールのデ

フォルト推奨「右ドロワー」規則に引っかかりますが、APEXlang のテンプレート上は下ドロワーの有効値です。差分を確認

します。

• Explored

└ Search js-dialog-class-t-Drawer--pullOut in p00004-employee.apx

• Ran git status --short

└ ?? .agents/

?? .codex/

… +2 lines (ctrl + t to view transcript)

?? apm.yml

?? demonstration-emp-dept/

• Ran git diff --stat

└ (no output)

• 変更しました。

- demonstration-emp-dept/pages/p00004-employee.apx:10

- demonstration-emp-dept/pages/p00006-department.apx:10

どちらも js-dialog-class-t-Drawer--pullOutEnd から js-dialog-class-t-Drawer--pullOutBottom に変更済みです。

検証として apexctl.mjs apexlang validate を実行しましたが、アプリ全体の既存 lint 問題と、検証ルール側の「CRUD

drawer は右表示がデフォルト」という警告により失敗しました。今回指定の「画面下から表示」に必要な値自体は APEXlang

テンプレート定義上の有効値です。

─ Worked for 6m 35s ──────────────────────────────────────────────────────────────────────────────────────────────

› Improve documentation in @filename

gpt-5.5 medium · ~/Documents/emp-dept-drawer

変更されたAPEXアプリケーションをSQLclで直接インポートします。

apex import -input ./demonstration-emp-dept

emp-dept-drawer % sql -name local-26ai-apexdev

SQLcl: 水 6月 17 18:30:18 2026のリリース26.1 Production

接続先:

Oracle AI Database 26ai Free Release 23.26.1.0.0 - Develop, Learn, and Run for Free

Version 23.26.1.0.0

SQL> apex import -input ./demonstration-emp-dept

アプリケーションID: 112をワークスペース: APEXDEVにインポートしています

インポートに成功しました。

SQL> exit

Oracle AI Database 26ai Free Release 23.26.1.0.0 - Develop, Learn, and Run for Free

Version 23.26.1.0.0から切断されました

emp-dept-drawer %

インポートされたAPEXアプリケーションは、記事の先頭にあるGIF動画のように動作しました。

変更された属性の場所をページ・デザイナ上で確認します。

ページ・プロパティの外観のテンプレート・オプション（ダイアログ・テンプレートはDrawer）を開きます。

ドロワーが表示される位置はStart（左）、End（右）、Top、Bottomから選択できます。SizeはSmall、Medium、Large、Extra Largeから選択します。

今回の記事は以上になります。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完