スマホからClaude Codeを動かすために作ったPockodeですが、PCでの開発でも常用しており、コツコツと開発を続けてきました。
最近追加した機能の一つに、エージェントがチャット内でHTMLを表示する機能があります。正直なところ、作る前は「ちょっとプレビューが便利になるかな」くらいの期待でした。実際に使ってみると、エージェントとのやり取りそのものが変わりました。
まずは動画から
自作のパズルゲームのリポジトリで、Pockodeを新しく立ち上げたところから撮っています。送ったメッセージは次の3つです。
- Diagram the game flow in a fun, pop style, keep it brief（ゲームの流れをポップに、簡潔に図解して）
- Show me all the dango images, keep it brief（団子の画像を全部、簡潔に見せて）
- Let me hear the merge sounds, keep it brief（合成時の音を、簡潔に聞かせて）
※gifなので音がありませんが、実際には音声ボタンのクリック時に音声も鳴っています。
どれも「PockodeのHTMLツールで」といった指定はしていません。エージェントが自分で判断して、MCPツールを使っています。
また、表示されている画面はどれもリポジトリには存在しません。エージェントが会話の応答として、その場で作ったものです。
※デモの見栄えのためにポップにすることを要求していますが、普段はもっと簡素で実用的なものが出てきます
1つ目では、設計ドキュメントの画面遷移をもとに、ゲームの流れをポップなフローチャートにまとめてきました。団子の絵には、リポジトリにあるゲーム本体のスプライトが使われています。
2つ目では、エージェントがリポジトリから団子のスプライトを探し出し、11種類×3表情の33枚を表にして返してきました。
3つ目はもう少し複雑です。このゲームの合成音は、1つの音源の再生速度を変えて鳴らしており、大きい団子ほど低い音になります。エージェントはその計算式をソースコードから読み取り、サイズごとの音と、連鎖したときに音が上がっていく様子を鳴らせる試聴ページを作りました。
今までは「どこにあるか」しか返ってこなかった
同じ質問を、この機能がなかった頃にしていたらどうなっていたか。
返ってくるのは、たぶんこういう文章です。
団子の画像は
asset-src/sprites/に33枚あります。01〜11のそれぞれに、通常・closed・squeezeの3種類があります。
正しくはあるのですが、親切ではありません。フォルダを開いて一つずつ自分で確かめるのは時間がかかり、なにより面倒です。
今回の機能では、HTMLからプロジェクト内のファイルを参照できます。画像も動画も音声もその場でプレビューでき、チャット画面を離れずに素材を確認できるようになりました。
確認用の道具を、その場で作ってもらう
HTMLで返せるようになって変わったのは、画像が見やすくなったことだけではありません。
さきほどの試聴ページは、コード内の動的な制御を反映したものです。今までなら、ゲームを起動して聞くか、専用のツールをメンテするしかありませんでした。会話の中でふと気になった仕様を確かめるには、どちらも大掛かりです。
それが今は、一言頼むだけで会話の中に出てきます。コミットもされず、プロジェクトを汚すこともありません。AIが作ったツールをわざわざ起動する手間もありません。
スマホから操作しているときでも、PCと同じ画面がそのまま見られます。手元にブラウザで開くファイルがなくても、チャットさえ開ければ確認できる——ここはPockodeならではの強みです。
また気に入ったものは、HTMLをファイルとして保存させれば、ツールとして使い回すこともできます。
実装前のプランや機能の説明を、気軽に図解してもらえるのも大きいところです——長い文章を頭の中で組み立て直す負担が、かなり減ります。
仕組み
Pockodeは起動時、エージェントにMCPツール html_render を渡しています。引数はタイトルとHTMLだけで、呼び出されると渡された内容をチャット画面にレンダリングします。
ツールの説明もシンプルです。「比較表、グラフ、構造化されたレポートのように、Markdownより豊かな表現が向いているときに使うこと」「プロジェクト内のファイルはパスで参照できること」「画面に出したものを本文で繰り返さないこと」——書いてあるのは、ほぼこれくらいです。
指示を最小限にしているのは意図的です。エージェントに強く影響しすぎて、その挙動や性能を歪めてしまわないよう、Pockodeの設計全体で気をつけています。
おわりに
Markdownは便利ですが、表現できるものには限りがあります。図解を気軽に頼み、ときには動かせるページまで会話の中で返してもらう——それだけで、エージェントとのやり取りはずいぶん変わりました。
どんな場面で一番効くのかは、開発のスタイルによっても違うはずです。興味があればぜひ試してみてください。