2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@itokazu(伊藤 一幸)
in

「これ本当にAPEX？」Codexで作るモダンUIをOCI Always Freeで動かす

2
Last updated at Posted at 2026-09-23

1. はじめに

@araidon さんの以下記事で、「APEXでこんなモダンなUIのアプリが作れるんだ！」っとちょっと刺激された自分も試してみました。

ただ、環境を構築するのが若干億劫だったので、、codexでIaCを作成しました。

これをOCIのResource Managerに入れれば10分ほどで以下の開発環境ができます。

予備知識: APEXとは？APEXlangとは？

  • Oracle APEX
    Oracle Database上で動作するWebアプリを、画面操作を中心に少ないコードで開発できるローコード開発基盤。

  • APEXlang
    APEXアプリの画面や処理などを、人やAIが読み書きしやすいテキストで記述するアプリケーション定義言語。

2. 前提条件

  • OCIアカウント(Always Free環境でもOK！)
  • Codexを利用できること(OpenAIのアカウントは別途必要)

Always Freeで試す方へ(念の為)

  • 以下のAlways Freeリソースが未使用であることをご確認ください
    • ADB
    • VM.Standard.A1.Flex(2 OCPU, 12GB Memory)
  • 特にVM.Standard.A1.Flexは最近4 OCPU 24GB Memoryから2 OCPU, 12GB Memoryに減っているので要注意です

3. OCI Resource Managerからデプロイ

早速デプロイしていきましょう。
今回は、OCIのAlways Free環境でデプロイしていきます。
まずは以下のGithubにアクセスします。

以下のDeploy to Oracle Cloudをクリック。

image.png

(OCIに未ログインの場合)以下のベージに移動するので、OCIへログインします。
image.png

ログインできると、以下のResource Managerの画面に飛ぶので、まずは矢印のチェックボックスをクリックしてGithubから情報を読み込ませます。
image.png

デプロイに必要な設定画面になるので、項目を記入していきます。

配置先のパートについては特にAlways Freeへのチェックを注意します。その他は既存のものを選択すればOKです。
image.png

接続許可パートではVMにログインするopcのSSH公開鍵や、アクセスする環境(自宅や会社)からの接続許可として接続元IPの入力を行います。
image.png

Autonomous DatabaseパートではADMINや、開発で利用するAPEXLABのパスワードを指定します。
image.png

ここまで全て入力できたら画面下部のNextをクリックし、次の確認画面に移るのでCreateをクリックします。

以下のページに切り替わり、デプロイが始まります。
image.png

約10分ほどで完了し、以下のようになります。もしFailedとなった場合は、Logsタブで状況の確認が必要です。
無事にSucceededとなった場合は、Stack detailsに行きましょう。
image.png

Application Informationタブでは作成できた環境の情報が確認できます。今後使うのでここで諸々確認できることを覚えておきましょう。
image.png

4. Always Freeであることを確認

念の為ですが、ちゃんとAlways Freeなリソースで作られていることを確認します。
※私も会社のアカウントではなく、個人のAlways Free環境でデプロイをしたので課金されないかのチェックは重要です！

まずはADB。Always Freeタグが付いているので安心です。
image.png

続いて開発用VM。こちらにはタグは付いていませんが、VM.Standard.A1.Flexで2 OCPUで12GBメモリであるため、Always Freeの範囲内です。
image.png

細かいところですが、上記VMのBoot VolumeはlistBootVolumes.alwaysFreeが付いているのでこちらも大丈夫です。
image.png

念には念を入れて、翌日Cost Analyticsを確認しました。

image.png

コストは発生していないですね、これで安心です。

5. VMへログインしてCodexをセットアップ

手元のPCからVMにSSH接続し、開発用VMにアクセスしましょう。
接続先のIPは先ほどのResource ManagerのApplicationタブに記載されています。

codexはインストール済みなので、お持ちのアカウントで認証を行いましょう。

codex login --device-auth

6. CodexからAPEXアプリを作る

以下のように作成済みの開発用ディレクトリに移動して開発を進めましょう。すでに開発において利用するAGENTS.mdも配置されています。

[opc@apexdev ~]$ cd projects/apex-study/
[opc@apexdev apex-study]$ ls
AGENTS.md
[opc@apexdev apex-study]$

一旦、APEXの管理UIにアクセスもしておきましょう。URLはResource ManagerのApplication Informationタブの以下をコピーするとアクセスできます。
image.png

Usernameはapexlabで、Passwordはデプロイ時に入力したパスワードです。
image.png

サインインすると以下の画面になります。APEXLABをクリックします。
image.png

これから作成するアプリは以下から見ることができます。
image.png

ではcodexを起動し開発を進めます。

codex

APEXlangのskillはインストール済みなので、以下のようにスキル($apexlang)を指定して指示をします。

モデルについて

  • 個人的にはgpt-5.6-sol xhigh以上が良いかなと感じました
$apexlang
› APEXアプリを作ります。todoistのようなタスク管理アプリを作りたい。
ただし、APEXとはわからないUIで構成したい。

以下のような回答・出力が得られました。

• Todoist風のタスク管理アプリ「TaskFlow」を作成しました。APEX標準感を抑え、オフホワイト＋コーラルを基調にした独自UIです。

  主な機能：

  - Today / Inbox / Upcoming
  - プロジェクト・ラベル管理
  - 優先度、期限、完了状態、サブタスク
  - 右ドロワー形式の追加・編集
  - 認証ユーザー単位のデータ分離
  - APEXロゴ・Built with APEX表示なし
  - モバイル対応

  主要ファイル：

  - 導入手順 (taskflow/README.md)
  - APEXlangアプリ (taskflow/applications/taskflow/application.apx)
  - カスタムUI CSS (taskflow/applications/taskflow/shared-components/static-files/taskflow.css)
  - DBセットアップSQL (taskflow/db/setup.sql)
  - DB確認SQL (taskflow/db/verify.sql)
  - 画面・機能仕様 (taskflow/.apexlang/application-spec.md)

  検証結果：

  - SQLcl APEXlang検証：Validation successful.
  - APEXlangローカル総合検査：成功
  - 語彙互換・DSL lint・セキュリティ検査：成功
  - 補助的なcompiler-truth監査のみ、Classic Report列と標準表フォームの判定限界による32件の静的指摘があります。同じソースはSQLcl本体で正常に検証されています。

  DBセットアップ、APEXインポート、ブラウザ動作確認は未実行です。次は導入手順 (taskflow/README.md:15)に従い、adb-connect APEXLAB で接続後、DBセットアップ→確認→アプリインポートの順で作業してください。

ここで出てくるadb-connect APEXLABは開発VMで実行するコマンドで、ADBにSQL接続できます。

開発用VMにもう一つSSH接続して、以下を試します。パスワードはデプロイ時に指定したパスワードです。

[opc@apexdev ~]$ adb-connect APEXLAB

SQLcl: Release 26.2 Production on Wed Sep 23 02:01:00 2026

Copyright (c) 1982, 2026, Oracle.  All rights reserved.

Password? (**********?) *************
Connected.
SQL>

ここでcodexで、以下のように「接続しました」と伝えると対話しながら進め方を教えてくれます。

› 接続しました


• 接続中のSQLclで、まず既存オブジェクトを確認してください。

  select object_name, object_type, status
  from user_objects
  where object_name in (
    'TF_PROJECTS',
    'TF_LABELS',
    'TF_TASKS',
    'TF_TASK_LIST_V',
    'TF_PROJECTS_BIU',
    'TF_LABELS_BIU',
    'TF_TASKS_BIU'
  )
  order by object_type, object_name;

  結果を教えてください。no rows selected なら初回セットアップへ進めます。既存オブジェクトが表示された場合は、setup.sql を再実行しません。

その後何回かのやりとり、わからないことはcodex自身に質問をしながら何度か修正→再インポートをしながら動作するところまで行けました。

• 現在のSQLcl接続で再インポートしてください。

  apex import -input /home/opc/projects/apex-study/taskflow/applications/taskflow

  完了後、ブラウザを強制再読み込みして左メニューを確認してください。

気づき

やりながら気づいたことですが、codexが作成したアプリをAPEXにインポートするとその都度、新たなアプリケーションが作成されます。既存のアプリが更新されるわけではないので、管理画面から新たに作成されたアプリで動作確認をしていく必要があります。

image.png

7. 作成されたアプリ

APEXぽくはありますが、、実用性のあるタスク管理アプリが1〜1.5時間ほどで作成されました。
image.png

image.png

8. おわりに

APEXは以前にも触ったことがありましたが、当時は簡単なアプリを作るにも画面上での操作や設定にそれなりの手間がかかり、自分にとっては学習コストが高いと感じていました。

今回、CodexとAPEXlangを使ってみると、作りたいものを自然言語で伝えながらアプリを形にでき、以前とはまったく違う体験でした。「どの画面で何を設定するか」よりも「どんなアプリを作りたいか」に意識を向けられ、作りたいものに早くたどり着ける感覚がありました。

「これ本当にAPEX？」という驚きは、出来上がったUIだけでなく、アプリを作る体験そのものに対しても感じたものです。

今回は、この体験を気軽に試せるように環境構築をIaC化しました。条件が揃っている方は、ぜひ自分の作りたいアプリで試してみてください。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?