はじめに
APEXlang、本当にすごいです。
既存のAPEXの機能を使いながら、見た目にもこだわったアプリがVibe Codingで作れます。
画面を作るだけでなく、ログインして、データを保存して、PCやスマホからURLを開いて使うところまでつながるのが面白いところです。
なので、APEXlangでこんなものも作れるよ、を記録として残したいなと思って書きます。
APEXlangと今回の環境
APEXlangは、Oracle APEXの画面や設定をテキストで記述するための言語です。
AI Codingツールがそのファイルを読み書きできるので、作りたいものを言葉で伝えてAPEXアプリを作れます。
図の左側が開発、右側ができあがったアプリを動かす環境です。
AI CodingツールがAPEXlangやSQL、JavaScript、CSSを生成し、SQLclのapex validateでアプリ定義を検証し、apex importでAPEXへ取り込みます。
取り込んだアプリはAPEX/ORDSで動き、Autonomous AI Database（以下、ADB）にデータを保存します。
APEXの認証やDB接続の仕組みを使えるので、アプリごとにそれらをゼロから組み立てる必要がありません。
図中のツールや画面は開発環境と用途の例で、今回使ったAI CodingツールはCodexです。
GitHubはソースの履歴を管理する場合の選択肢で、利用は任意です。
環境の準備やAPEXlangの使い方は、ssfujitaさんのこちらの記事を参照してください。
参照記事ではLinuxサーバーに開発環境とDB、APEX、ORDSを構築していますが、
Linuxサーバは使わずローカルのCodexデスクトップアプリから、直接ADBに繋げてます。
依頼したのは、これだけ
まずは、Vibe Codingの定番of定番のTodoアプリです。
Codexには、次のように依頼しました。
新規アプリとしてTodoアプリを作って。
仕様は任せますが、ログイン画面含め、見た目は綺麗にしてほしい。
アプリの仕様について指示したのは、最初のこれだけです。
できあがったのはこちら
「余白」というアプリ名も、白と深緑のデザインも、Codexが決めたものです。（過去に自分が作ったアプリに引っ張られているっぽいです・・・）
タスクには期限や優先度を付けられ、「すべてのタスク」「今日やること」「これから」「完了したこと」で表示を切り替えられます。
タスク名やメモの検索、編集、削除にも対応しています。
スマートフォンにもレスポンシブ対応しています。
スマホではメニューが上部にまとまり、タスクを縦に並べて表示します。
アプリの構成と保存の流れ
認証には「Oracle APEX Accounts」と既存のワークスペースのアカウントを使い、タスクはADBに保存しています。
Todoアプリのために、別の認証サービスやアプリケーションサーバーを追加していません。
アプリ全体の構成はこちらです。
外枠は、Oracle管理のORDSを含むADBの提供環境を表しています。
タスクを追加、更新、削除すると、その操作がDBに反映され、画面の一覧も変わります。
次の図は、画面を簡略化して操作の流れを示したものです。
ORDSがブラウザとの通信を仲介し、DB内のAPEXが画面とログインを受け持ちます。
タスクの追加、更新、削除はTD_TASK_APIが処理し、TD_TASKという表へ反映します。
さいごに
ログイン画面の見た目も含めてCodexに任せると、スマホでも使えるTodoアプリができました。
既存APEXと比べて、見た目改善だけでなくそれをVibe Codingできるのが最高です。