Vibe Codingでシンプルなノート拡張機能を作ってみました
(chromewebstore.google.com)紹介
タイトルのとおり、Vibe CodingでブラウザのSide panelで開いて使えるシンプルなノートアプリを作ってみました。
最初は自分一人で使う目的で始めたのですが、最初の3日間で出てきた成果物を見て、ここで共有してみてもよさそうだと思い、1週間ほどエラー修正と機能追加を経て、こうして記事を書くことになりました。
使い方と特徴は次のとおりです。
- Alt+Shift+W ショートカットでノートアプリを起動
- Markdown記法でメモ可能
- ダブルクリックでEdit画面に入り、ESCまたはShift+Enterでプレビューモードに切り替え
- 文章作成時の改行（行末に半角スペースを2つ追加）を自動処理（On/Off可能）
- 外部の文章を貼り付ける際、改行と
~文字を￦~文字に置き換えて、文章が崩れないように処理（On/Off可能） - Ctrl+V で画像の貼り付けが可能
- 必要なノートは上部に固定可能
- ダークモード対応
といったところです。
開発動機
ノートアプリを開くショートカットを見て気づいた方もいるかもしれませんが、このプログラムは5年前に開発終了した Notes by Firefox 拡張機能から、ショートカットやデザインを含め多くの影響を受けています。
ただし開発終了から数年が経ち、日本語入力ではなく文字入力の挙動が不自然になってきたことや、Firefox自体もChromeに比べてメモリ使用量が多かったため、これに近い拡張機能を自分で実装してみようと思ったのが開発のきっかけです。
開発環境
AIはGemini CLIとGeminiのWebページを併用して進めました。
デザインがそれほど重要でない部分は主にGemini CLIを使い、Webのほうはスクリーンショットを見せながらデザイン要素を調整したり、Gemini CLIが特定の誤答にはまり込んで抜け出せないときに主に使いました。
どちらの場合もモデルは正式版の gemini-2.5-pro に固定しており、ダッシュボードを見ると、Gemini CLIで入力したトークンだけでもほぼ1億トークンに達していました。
バージョン管理はgitで行い、AIがコードをおかしく壊してしまった場合に前のバージョンへ戻せるようにして、作業時には「命令 -> Gemini CLIによるコード作成 -> Gemini CLIによるコミット -> 修正されたコードと結果を手動で確認 -> 命令」という流れを繰り返しました。
今後の計画
まずは、今のように1つのファイルにすべてのJavaScriptコードが入っている状態から脱して、複数ファイルにコードを分割し、モジュール形式で読み込むようにして保守しやすくする大規模なリファクタリングを進める予定です。
最初は簡単なテキストメモ程度のつもりで始めて単一ファイルにコードを詰め込んでいたのですが、規模が大きくなるにつれてコードを読んだり直接修正したりするのが難しくなる問題が出てきました。
また、追加したい機能としては、完全なWYSIWYGメモ対応、数式入力と表示への対応、MarkdownだけでなくプレーンテキストやHTMLベースでもメモできる機能の追加などがあります。
特にWYSIWYG対応は、メモを取るときの利便性が大きく上がると思うので、リファクタリングが終わったあと最初に実装を試してみることになりそうです。
そして時間ができれば、Firefoxでも使えるようにポーティングしてアドオンとして公開してみたいと思っています。
終わりに
普段から簡単な作業ではAIをよく使っていましたが、この規模の作業をAIをメインにして進めたのは今回が初めてで、思った以上にうまく回って本当に驚きました。
ただ、Gemini CLIに問題があるのか、gemini-2.5-pro を無制限に使うにはAPIキーを設定して従量課金で使う方法しかなく、このプログラムの制作では入力だけでほぼ1億トークンを消費したため、思ったより費用がかさんだ点は残念でした。
キャッシュがあるので想定金額より実際の請求額は少なかったものの、あれほど多く使われるとは予想していなかったため、使う際にはコンテキスト要約機能を適切に活用しないと性能維持が難しいのではないかと思います。
実用できる程度までは開発できましたが、まだ構想した機能がすべて完璧に実装されたわけではないので、使ってみて質問やフィードバックがあれば、遠慮なく率直にいただけるとうれしいです!
3件のコメント
良い記事をありがとうございます。
もし1億トークンだと、費用はどのくらいかかったのか教えていただけますか？
キャッシュ込みで9万〜10万ウォン程度かかったようです。
Gemini CLIで
/stats modelコマンドを使って使用量を確認したときも、キャッシュ比率が50〜60%の間だったので、計算ともだいたい合っていました。お知らせいただきありがとうございます〜！