（※11/3 追加將棋設計）
我嘗試做了各式各樣的 Oracle APEX 畫面
提到 Oracle APEX，你可能會聯想到把標準表格和表單排在一起的既定外觀。
不過，Oracle APEX 的畫面其實可以做得更自由。
我正在使用 APEXlang，持續嘗試看看能用 HTML 和 CSS 將 Oracle APEX 的外觀改變到什麼程度。
像遊戲風格的 UI，或是結合 JavaScript 與 3D 函式庫的畫面等，我會把做過的設計一點一點放在這裡。
都市實驗室：自動切換視角，巡遊有行人與車輛移動的 3D 城市
職棒重播：在 3D 球場上疊加轉播風格的比分與結果顯示
SHOGI-LAB：在將棋盤旁，以數值與圖表顯示 CPU 探索的局面數與 DB 處理時間
Jev 2048 Arena：數字方塊移動並合成的益智遊戲。
<a></a>
<a></a>
娛樂系畫面一覽
畫面設計範例看點
夜景を巡る3Dの街並み有窗光的夜景、自動切換的視角、即時移動的人與車
3D 繪製：Three.js / WebGL
3Dと連動する画面演出立體球場、鏡頭切換、轉播風的結果顯示
3D 繪製：Three.js / WebGL
対局とデータを並べる将棋UI木紋將棋盤與深色資訊面板，CPU 探索與 DB 處理的視覺化
動きのあるパズルゲームUI
閱讀製作文章方塊移動與合成、色彩變化、動態棋盤與數值的對比
世界観を切り替える3Dの町寧靜的城鎮、霓虹城市、奇幻風浮島。三種世界觀與視角變化
3D 顯示
同じデータの3つのデザイン黑色電影串流風、白色業務畫面、藍色與米白的編輯雜誌風
劇場風のクイズUI深紅與金色配色、舞台裝飾、記分板
RPG風のマップUI藍色視窗、建築圖片、地圖與資訊面板的組合
地圖繪製：MapLibre GL JS
RPG風のチャットUI藍色漸層、白色外框、遊戲風視窗構成<a></a>
商務系畫面一覽
畫面設計範例看點
余白を生かしたミニマルUI
閱讀製作文章白綠配色、克制的分隔、PC 與智慧型手機的版面
ダークネオンのダッシュボード深色背景、明亮圖表、資訊量大的畫面配色
トーンをそろえたシンプルUI白綠一致的基調、簡潔的操作介面與帶圖表的畫面
文書と確認欄を並べるレビューUI將原始文件大幅呈現，旁邊配置確認欄，沉穩配色
比較を見せる一覧と詳細のUI一覽、強調的金額、詳細面板的整體性娛樂系設計
<a></a>
3D 街景
製作範例：都市實驗室
在有窗光的城市裡，自動切換視角巡遊。
街道上有人在走、車輛持續行駛。
鏡頭移動與城市內的動態，都在瀏覽器中即時繪製。
城市配置以 PL/SQL 產生，並以 Three.js / WebGL 繪製。
<a></a>
與 3D 連動的畫面演出
製作範例：職棒重播
這是大幅運用 3D 球場，並疊加比分與結果顯示的畫面。
透過鏡頭切換與播放後的演出，呈現不同於靜態圖片的展示方式。
以 Three.js 和 WebGL 繪製球場與球員，並讓鏡頭與結果顯示連動。
<a></a>
對局與資料並列的將棋 UI
製作範例：SHOGI-LAB
這是將木紋將棋盤與以藍色框線區隔的深色資訊面板並列的畫面。
隨著對局進行，棋盤旁的數值與圖表會更新。
除了 CPU 探索的局面數與 DB 處理時間之外，還能查看定跡與相似局面的搜尋結果。
規則判定與 CPU 思考以 PL/SQL 進行，畫面則顯示這些處理的狀態。
<a></a>
有動態效果的益智遊戲 UI
製作範例：Jev 2048 Arena
這是數字方塊移動並合成的益智遊戲畫面。以綠色棋盤搭配深色資訊面板，將動態區域與數值展示區分開來。
<a></a>
切換世界觀的 3D 城鎮
製作範例：向陽小鎮
登入畫面
這是將微縮城鎮以 3D 顯示的畫面。寧靜的小鎮、霓虹城市、奇幻風浮島，以不同的配色、建築與背景，呈現同一座城鎮的三種世界觀。
<a></a>
同一資料的 3 種設計
製作範例：MovieStream
黑色電影串流風
白色業務畫面
藍色編輯雜誌風
同一題材以三種風格呈現。只要改變背景色、文字大小與海報排列方式，畫面的印象就會大不相同。
<a></a>
劇院風的測驗 UI
製作範例：Cinema Royale
這是使用深紅與金色打造、宛如劇院的測驗畫面。從舞台裝飾到作答按鈕、分數顯示，都以同一種世界觀整合起來。
<a></a>
RPG 風地圖 UI
製作範例：外苑前咖啡探索地圖
這是把地圖做成像 RPG 場景一樣的畫面。使用藍色視窗與建築圖片，並在地圖旁放置資訊面板。
將 MapLibre GL JS 的地圖與建築圖片、RPG 風資訊面板結合起來。
<a></a>
RPG 風聊天 UI
製作範例：AI クエスト
將對話畫面做成 JRPG 風格的藍色視窗。以白色外框與多個面板，營造出像遊戲選單一樣的外觀。
商務系設計
<a></a>
善用留白的極簡 UI
製作範例：留白・Todo
列表畫面
登入畫面
這是以白色與綠色、並搭配較大留白整理出的畫面。弱化強烈裝飾，讓列表與登入畫面的氛圍保持一致。智慧型手機上則會重新調整配置。
<a></a>
暗黑霓虹風儀表板
製作範例：庫存脈動
這是將明亮圖表疊在深色背景上的畫面。以霓虹配色統整長條、圓形、曲線等不同類型的圖表。
<a></a>
統一色調的簡約 UI
製作範例：出勤退勤系統
打卡畫面
彙整畫面
將簡潔的操作畫面與帶圖表的畫面，以白色與綠色統一起來。即使不同畫面的資訊量不同，也能透過配色與留白營造一致的印象。
<a></a>
文件與確認欄並列的審核 UI
製作範例：接單作業台
這是將文件放大顯示，旁邊並列確認欄的畫面。以白色與米白色為主，做成能比對原始單據與輸入內容的版面。
<a></a>
顯示比較的列表與詳細資料 UI
製作範例：入金對帳
這是將金額放大配置在列表下方、用來呈現數字比較的畫面。以淡色背景與分隔線，表現列表與詳細資料的整體感。
關於 APEXlang
APEXlang 是一種用文字描述 Oracle APEX 畫面與設定的語言。
可以結合 AI Coding 工具來開發應用程式。
畫面外觀使用 HTML 與 CSS，動態與 3D 表現則使用 JavaScript 與各種函式庫。3D 繪製會在瀏覽器端進行，也可以搭配 APEX 的驗證與儲存到 ADB 的資料一併使用。
關於導入與製作環境，請參考以下文章。
- 使用 APEXlang 進行 Vibe Coding：做出帶登入功能的 Todo 應用程式
- ssfujita：用 Codex CLI × APEXlang 開始 Oracle APEX 應用程式的 AI 驅動開發
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
