VS Code や Cursor を開いたまま、生成AIが書いた Markdown と HTML だけを横で見たい、という小さな欲からアプリを作ってみました。
作ったのは 傍ら 。実装は自分でゼロから積まず、Cursor に作ってもらいました。
何が困っていたか
生成AIに仕様や画面を書かせると、見るものはだいたい次のふたつです。
- Markdown（要件、画面仕様、設計資料、skills）
- HTML（生成されたレポート）
一方で、エディタのエクスプローラーにはそれ以外のファイルもすべて見えてしまいます。
VS Code のプレビューやブラウザ単体でもやれないことはないのですが、
- エディタはエージェント用に開いたままにしたい
- 見たいファイルだけに絞った一覧がほしい
- Markdown はプレビュー、HTML は iframe と実ブラウザの両方で見たい
という使い方に合うものが手元にありませんでした。だから、それ専用のビューアを置くことにしました。
作ったもの
Windows 向けのローカルアプリです。起動するとブラウザが開き、左に Markdown / HTML だけ、右にプレビューが出ます。
できること:
- プロジェクトフォルダを開く（起動後にも変えられる）
-
.mdと.html以外は出さない - Markdown はプレビュー、HTML はアプリ内と「ブラウザで開く」
- フォルダの開閉、配下をまとめて開く、検索
VS Code はエージェントに渡したまま、人は横の画面だけ見る、という役割分担です。アプリ名の「傍ら」はその置き方から付けました。
ソースはここに置いてあります。
Cursor に作ってもらった
欲しい挙動を日本語で伝えて、画面と起動の仕方を直してもらいました。エクスプローラーの余白、フォルダの開き方、Windows で Node.js を入れずに起動すること、読み込み中に何が起きているか分かること、まで含めて会話しながら作りました。
正直、最初の要件で結構思い通りのものは作れました。
ぶっちゃけ何をどう作ったのかは全く見てません。何やら難しいことをやってそうだなって感じです。
まとめ
痒い所に手が届く、的な自分だけが使えればいいアプリを作るのには生成AIはもってこいですね。
自作ツールなら会社にも入れやすいかもしれないので、開発プロジェクトでこういうの作るのも面白いです。
思ったことがすぐ形にできて感謝されるのがたまらねえんだ。