AIエージェント風ポモドーロタイマー、Webアプリ公開！開発秘話付き！
こんにちは。麗です。
最近、「scroll」 というWebアプリを作りました。
画面には、AIエージェントが作業に取り組んでいるようなログが、ターミナル風の見た目で流れ続けます。
さらに、ポモドーロタイマー として時間を区切ることもでき、作業中にブラウザの端へ置いて使うことを想定しています。
ただし、実際にAIが作業しているわけではありません。
表示されているのは、AIが開発や執筆、リサーチを進めているように見える、架空のログです。
AIが働いている画面を眺めるのが好きだった
私は普段、ClaudeやCodexといったツールを中心に、AIエージェントに作業を任せることがよくあります。
AIエージェントとは、指示された内容に沿って、調査やプログラミングなどの作業をある程度自動で進めてくれる仕組みです。
作業を任せている間、画面には処理の内容や進捗を示す文字が次々と流れていきます。
私はAIエージェントを使うのがとても好きで、その光景を視界の端に置きながら別の作業をすると、不思議と集中が続くのです。
たとえば、AIエージェントが動いている画面を横に置きながらブログを執筆すると、とても捗るわけです。
最初は、AIエージェントが自分の代わりに作業をしてくれているから嬉しいのだと思っていました。
つまり、自分は手を動かしていなくても、画面の中で何かが進んでいる感覚のがよいと思ったのです。
けれど、あるとき、ふと疑問に思いました。
AIエージェントの心地よさは、本当に「AIが働いていること」なのだろうか？
ただただ、画面に文字が流れているのがよいのでは？
もしかして、目の前で何かが進んでいるように見えれば、何でもよいのでは？
もしもそうだとしたら、表示されている内容は本物の処理結果でなくてもよいのかもしれません。
AIエージェントのダミー画面で十分かもしれません。
そういった検証をしてみようと作ったのが、このアプリ「scroll」でした。
未経験者が完全に騙されるリアルさを追求した
このツールを制作している間に追求したのは、「リアルさ」です。
いかにも偽物っぽい感じではなく、なるべく本物に近いものを作りたいと考えました。
完全に本物に見えるようにすることは難しいかもしれません。
でも、私自身が見ても、一瞬で「本物だ！」と思えるものにしました。
これはなぜかというと、「AIエージェントを使うのが好きなのか、画面にログが流れていくのが好きなのか」を検証するためです。
それには、一瞬画面に目をやったときに、本物だと脳が錯覚する必要があると考えました。
私自身が開発初心者なので、上級者がどう感じるかまでは分からないのですが、完成したツールは、一瞬なら誰もが騙されてしまうくらいの精度にはなっているかなと思います。
とくに未経験者であれば、完全に本物だと勘違いするだろうと思います。
ちなみに、実際にAIエージェント未経験者の彼に見せてみました。
「新しいツールを作ったよ」と言って見せたのですが、だいぶ困惑した様子でした。
「まさかダミーのツールだとは思わなかった」と。
それくらいのリアルさがあるものにはなりました。
最初の実装は30分ほどでできた
scrollの初期実装は、30分ほどでできました。
AIに相談しながら作ったところ、黒い画面にターミナル風の文字を流すところまでは、驚くほど簡単に形になりました。
一見すると、それらしいものができましたが、すぐに「偽物だ」と分かりました。
表示される内容のバリエーションが少なく、毎回ほとんど同じ流れを繰り返していたからです。
AIコーディングを経験したことがない人が見ても、「これは本物ではないな」とすぐに分かるようなものでした。
せめて、未経験者が見たら完全に騙されてしまうくらいの精度は欲しいところと思いました。
速度の揺らぎの調整
よりリアルさを求めるために、いくつかの修正をしました。
バリエーションを増やすだけではなく、文字の流れる速度に揺らぎを加えました。
実際のAIエージェントのログは、いつも同じ速度では流れません。
立ち止まったり、ゆっくり進んだりすることもあれば、処理が一気に進み、文字が大量に表示されることもあります。
初期のscrollでは、文字がほぼ一定の速度で流れていました。
改良実装では、途中で少し止まり、また動き始めるといった速度の揺らぎを取り入れてリアルな感じを出してみました。
この効果は絶大で、ツールの印象が大きく変わったように思います。
実はAIもミスをする
ログの内容にも、少しずつバリエーションを追加しました。
このツールの開発作業をしている間、いつも通りAIエージェントのログを見ていたのですが、AIがこんなことを言いました。
「おっと、打ち間違えました」
実際のAIエージェントは、処理が順調に進むだけではなく、ときどき失敗したり、やり直したりするのです。
この「おっと、打ち間違えました」は、そのままscrollに反映させてみました。
さらに、一度書いた内容を修正したり、別の方法を試したりする場面も入れました。
ターミナルでツールを起動したような画面にする
そしてもう一つ、リアルさを追求するうえでこだわったのが、トップに出てくる文字です。
「SCROLL」と大きな文字が最初に表示されるようにしました。
ターミナル上で使うAIツールは、起動したときにツール名が大きな文字で表示されます。
この大きな文字が、なんだかワクワクするんですよね。
なので、scrollでもその雰囲気を再現してみました。
実際の機能には直接関係のない演出ですが、このロゴが表示されることで、ターミナルでAIエージェントを使っている人にも「ちょっと楽しい」と思ってもらえといいな、と思います。
開発以外のログも追加した
最初は、AIがプログラミングをしている様子を再現することだけを考えていました。
しかし、制作途中に「AIエージェントって、開発だけで使われているわけじゃないよな」と思ったのです。
最近は、文章を書いたり、資料を調べたり、企画を考えたりと、さまざまな作業に使われています。
そこで、開発だけでなく、小説執筆や記事リサーチのログも後から追加しました。
小説執筆 では、登場人物や構成について考えながら文章を進めていきます。
記事リサーチ では、情報を探し、整理し、内容をまとめていきます。
ジャンルによって流れる文章は変わりますが、どれも共通しているのは、何かに取り組んでいる気配が画面に流れ続けることです。
ポモドーロタイマーの機能を付けた
そのようにしてターミナルのダミーツールを制作したあとに、ポモドーロタイマーの機能を付けました。
せっかくだから、何か実用的な機能を取り入れたいと思ったからです。
ちなみに、ポモドーロタイマーは時間管理術のひとつで、一般的には25分の作業と5分の休憩を繰り返していくものです。
scrollでは、タイマーを設定すると、その時間に合わせてログが流れ続けます。
時間が終わるころにはログ上の作業もひと区切りつき、チャイムが鳴ります。
25分と5分ではなく、自分の好きな時間に変更できるようにしました。
休憩が終わった後は、「SCROLL」の大きな文字が画面に表示されるため、音が出ない環境でも視覚的にわかるようになっています。
かなりニッチなツールだと思う
このツールを公開してみて、改めて思ったのは、「かなりニッチなものを作ったな」ということでした（笑）
AIエージェントに馴染みのない人には、そもそも何なのかが伝わりにくいかもしれません。
普段からAIエージェントを使っている人であっても、「本物のAIを動かせばいいのでは」と思うかもしれません。
scrollは、AIが実際に仕事をしてくれるわけでもありません。
ただ、文字が流れていく画面を見られるツールです。
それでも、静止した画面より少し動きがある方が集中できる人や、ターミナルのログを眺めるのが好きな人には、心地よいと感じてもらえるかもしれません。
万人に必要とされるものではありません。
けれど、100人のうち1人に、強く刺さる可能性がある。
scrollは、そんなWebアプリです。