この記事は #BuildWithBuildAgentTokyo への参加記事です。
技術的に新しいことも、業務で使えるものも出てきません。5歳の息子に遊んでもらうために作った、完全にネタ枠のアプリです。ゆるい気持ちで読んでいただければ幸いです。
「自分が実装をイメージできないもの」を作りたかった
私は普段ServiceNowのプロダクトオーナーをしています。ある程度の実装は経験してきましたが、Web系の知識が本当にゼロです。
せっかく Build Agent を試すなら、普段できないことをやりたい。そう考えたときに基準にしたのが、「自分が実装手段をイメージできるかどうか」でした。
最初は息子がハマっていた神経衰弱を作ろうと思ったのですが、やめました。カードを並べて、2枚めくって、同じなら消す。なんとなく想像がついてしまって、面白みに欠けたのです。
その点、ひらがなをなぞるアプリは違いました。
- 指でなぞった線をどうやって取るのか
- その線から、どうやって「正しくなぞれているか」を判定するのか
- そもそも ServiceNow で実現できるのか
どれも全く想像がつきません。分からないからこそ、AIに作らせる価値があると思って、こちらを選びました。
できたもの
息子が遊んでいる動画
https://x.com/kohhei_tominaga/status/2102742829634375741
薄いグレーでお手本のひらがなが出るので、その上を指でなぞります。「できた！」を押すと点数と星が出て、よく書けているとバッジがもらえます。清音46字に対応しました。
動画では息子が「ふ」「へ」「ほ」をなぞって、99点・79点・97点。バッジも取れて本人は大喜びでした。
仕組み（AIに教えてもらった）
当初は「書いた文字が『あ』かどうかを判定する」ことを考えていたのですが、Claude に相談したら早々に止められました。手書き文字認識をまともにやるなら機械学習モデルが要るとのこと。
そこで方針が変わります。
お手本をなぞらせて、どれだけ重なったかを測ればいい。
これなら「何の字か」を判定する必要がありません。
スコア = カバー率 − はみ出し率 × 0.3 + 画数ボーナス
・カバー率 … お手本の上をどれだけ塗れたか
・はみ出し率 … お手本の外にどれだけはみ出したか
言われてみれば当たり前なのですが、自分だけでは一生たどり着かなかった発想でした。
Build Agent への指示はこんな感じで渡しました。
ServiceNow Service Portal ウィジェットとして
「ひらがななぞりゲーム」を実装してください。
特に以下を厳守してください：
1. Canvas は必ず2枚構成にすること。お手本用とユーザー描画用を分け、
どちらも透明背景のままにすること。白で塗ると採点が破綻します。
2. ペン幅とグレー帯幅は必ず同じ値にすること。
異なると満点が理論上取れなくなります。
3. 対象は清音46字。バッジの見た目は絵文字とCSSだけで作ってください。
……と書いていますが、この指示自体もAIに書いてもらったものです。「Canvas 2枚構成」が何を意味するのか、正直いまも雰囲気でしか分かっていません。
つまずきも、全部AIが直しました
いくつか問題は起きましたが、原因を見つけて直したのはAIです。私がやったのは「なんか動かない」と伝えることだけでした。
| 起きたこと | 分かったこと |
|---|---|
| 高解像度タブレットで画面の左上1/4しか採点されない | 内部解像度の指定漏れ |
| 手のひらがタブレットに触れて勝手に線が引かれる | 5歳児は手をついて描くので必須の対応だった |
どちらも、もし自力でやっていたら数日はかかっていたと思います。
きれいになぞれたのに、62点
ひととおり動くようになったので、息子に渡してみました。
結果が 62点。
画面を見ると、わりときれいになぞれています。それで62点。星は2つ。息子の顔が、ちょっとだけ曇りました。
「これは厳しすぎる」と思いました。データ上は正常に動いています。バグでもありません。でも、5歳児に渡すには採点が厳しすぎる。
相談して係数を調整してもらった結果がこちらです。
| カバー率の係数 | 息子の1回目 | 2回目 |
|---|---|---|
| 1.0（当時） | 55点 | 62点 |
| 1.35（採用） | 75点 | 83点 |
ちなみに甘くしすぎると全部3つ星になって、丁寧にやった意味が消えます。そのギリギリを狙いました。
そして、冒頭の動画では99点。バッジも取れました。
おわりに
中身をほとんど理解しないまま、動くアプリができてしまいました。
便利です。本当に便利なのですが、同時に少し怖くもあります。自分が書いていないコードが、自分の子どもの画面で動いている。何かおかしくなったとき、私はたぶん原因を説明できません。
一方で、採点が厳しすぎると気づけたのは、息子の隣で見ていたからです。作るところはどんどん任せても、息子が楽しめているかは自分で見ていたい。少し曇った顔を見て、そう思いました。
X にも書いたとおり、全く ServiceNow らしさのないアプリになりましたが、子どもが楽しめたのでよしとします。
お子さんがいる方は、ぜひ何か作ってみてください。ユーザーテストのフィードバックが異常に率直で、おすすめです。
ServiceNow World Forum Tokyo のご案内
本チャレンジで優秀賞に選ばれたアプリは、イベント内の「Vibe Code ラウンジ」で展示される予定とのことです。ご興味のある方はぜひ。
最後までお読みいただきありがとうございました。