HTML 実験室 #1: Canvas で魚を群れさせる ― AI が書いた初稿は、全部の魚が左上の隅にいた
1 ファイルの HTML で動く水槽を作った記録。魚が群れるのに要るのは分離・整列・結合の 3 つの力だけ。ところが AI が書いた初稿では、53 匹が全員左上の隅から出てこなかった。原因の突き止め方と、群れが魚に見えるまでに直した箇所を実測値つきで。
- Canvas
- HTML
- AI 開発
AI で作ったものを共有して、レビューをもらって、また AI に戻すまで。実際にやった流れをそのまま記事にしています。
1 ファイルの HTML で動く水槽を作った記録。魚が群れるのに要るのは分離・整列・結合の 3 つの力だけ。ところが AI が書いた初稿では、53 匹が全員左上の隅から出てこなかった。原因の突き止め方と、群れが魚に見えるまでに直した箇所を実測値つきで。
Web サイトが「読まれる場所」から「AI に応える主体」へ ── 2026-07-28 の MCP ステートレス化で、普通の Web サイトが AI エージェントの窓口になる時代の始まりを図解とスライドで見る。