【ServiceNow】「404ブロック崩し」を、Build Agentで勝手にリメイク（令和最新版）

はじめに：ServiceNowの隠し機能を知っていますか？

ServiceNowのポータルで、存在しないページにアクセスした時（404エラー）、実はこっそりと 「ブロック崩しゲーム（Breakout）」 が遊べることをご存知でしょうか？

これです

これは古くからある有名な表示で、ServiceNowの開発者なら一度は目にしたことがあるかもしれません。「エラー画面でもユーザーを退屈させない」という、開発者の遊び心が詰まった機能です。

2026年を目前に控えた今、ふと思いました。
「この伝説のレトロゲームを、最新のAI機能『Build Agent』の力で現代風にリニューアル（Renewal）したらどうなるだろう？」

今回は、ServiceNow Developer Communityで開催中の「#BuildWithBuildAgent Challenge」への参加企画として、この404ゲームを「データ駆動型・現代版アプリ」として再構築した過程を共有します。

---

1. リニューアルのコンセプト

オリジナルの隠し機能に敬意を表しつつ、単なるコピーではなく、ServiceNowのプラットフォーム機能をフル活用した 「モダンアプリケーション」 へと進化させます。

• UI/UXの刷新: クラシックなデザインから、"2025年"を意識したサイバーパンク/ネオン風のデザインへ。
• データ永続化 (Data Persistence): オリジナルは遊んで終わりですが、今回はスコアをServiceNowのテーブルに保存します。
• 可視化 (Visualization): 保存したデータを元に、ダッシュボードでランキングや統計を表示します。

つまり、「ただのJSゲーム」から「バックエンドを持つ本格的なServiceNowアプリ」への進化です。これを、AI（Build Agent）との対話だけで実現します。

2. 環境準備

まずは開発環境の準備です。

1. PDI (Personal Developer Instance) の用意:
   最新バージョン（Xanadu以降推奨）のインスタンスを用意します。

2. プラグイン確認:
   Build Agent (Trial) がインストールされていることをApplication Managerで確認します。
   

3. ServiceNow IDE:
   ブラウザ上で動作するVS CodeベースのIDEを開き、新規プロジェクトを作成します。

   ServiceNow IDEを開く
   

   Create Workspaceをクリック
   

   「test」などの適当なWorkspaceを作成する
   

   Workspaceが表示される
   

3. AI (Build Agent) との対話開発

ここからが本番です。ServiceNow IDE上のBuild Agentパネルで、リニューアルの要件を伝えます。
ポイントは、「ゲームを作って」だけでなく、「404ページを進化させ、データを記録する」というデータモデルへの言及を行うことです。

以下のようなプロンプトを投げかけました。

Prompt:
"I want to modernize the classic ServiceNow 404 breakout game. Create a scoped app called 'Breakout 2025'.
It needs a futuristic UI, and crucially, it must save game results (score, level, user) to a custom table so we can track high scores on a dashboard. Finally, create a dashboard to visualize the stats."

実行後に承認を求められたら承認(Approve)をします

すると、ダダダダーっとなんか作ってくれます

Build Agentは即座に意図を理解し、以下のプランを提案・実行してくれました。

1. Scope作成: アプリケーションスコープ x_snc_breakout_2025 の定義
2. テーブル作成: プレイログを保存する Game Results テーブルの構築
3. UI構築: HTML5 Canvasを使ったゲームロジック（UI Page/Script）
4. 権限設定: ACLの設定など

驚くべきは、ゲームのロジック（フロントエンド）だけでなく、スコアを保存するためのサーバーサイドスクリプトやテーブル定義（バックエンド）まで一気通貫で生成してくれる点です。

成果物として3つのURLを提供してくれました

---

4. 完成！ Breakout 2025

Build Agentとの数回のやり取りで完成したアプリケーションがこちらです。

① 404ページ (ゲーム画面)

「Oops! The page you're looking for seems to have broken away...」
エラーメッセージと共に表示されるのは、ネオンカラーが輝く 「BREAKOUT 2025」 です。

オリジナルの懐かしさを残しつつ、リッチなUIに生まれ変わりました。

② データ保存 (テーブル)

ここが最大のリニューアルポイントです。
ゲームオーバーになると、バックグラウンドで非同期通信が走り、スコア・到達レベル・ユーザー情報・プレイ時間がカスタムテーブルにレコードとして自動保存されます。

もはや単なる「暇つぶし」ではありません。立派な業務（？）記録です。

③ ダッシュボード (可視化)

蓄積されたデータは即座にダッシュボードへ反映されます。
「High Scores」や「Total Games」が表示され、 「誰が真のCodeMasterなのか」 がリアルタイムで分かります。

5. まとめ：レガシーな遊び心を、最新技術で継承する

今回、Build Agentを使用してみて感じたメリットは以下の通りです。

• フルスタック開発の民主化: Canvas描画のようなフロントエンド技術と、ServiceNow特有のデータ保存・可視化を一人の開発者（とAI）で瞬時に実装できました。
• 創造性の解放: 「404ページをゲームにする」といった遊び心のあるアイデアを、面倒なコーディング作業に忙殺されることなく、すぐに動く形にできました。

昔からある「404の遊び心」を、最新のAI技術で「レコード保存・分析」までできるアプリへと昇華させる。
そんな 「温故知新」な開発体験 ができるのも、Build Agentの大きな魅力です。

皆さんもぜひ、身近なアイデアや懐かしい機能を、Build Agentでリメイクしてみてください！