AI駆動開発

WANのプロンプト履歴が探しにくくて、自分用カタログを作った話

はじめに

create.wan.video(以下、WAN)で画像や動画をたくさん作っていると、「あのとき使ったプロンプト、どこだっけ」ということが増えてきます。公式のサイト上でも辿れはするのですが、UIが重く感じる場面があり、過去の履歴をさっと探すのは少しつらいです。

そこで、市販や既存の「万能ツール」を探し当てるより先に、自分用のカタログを作ってしまいました。Chrome 拡張で取り込み、Next.js と Supabase で一覧・検索する小さなアプリです。公開プロダクトではなく、あくまで個人用途です。いまは毎日の作業の一部になっています。

この記事では、何がつらかったか、何を作ったか、なぜ「探す」より「自分用を足す」にしたかを、所感中心に書きます。手順の全文チュートリアルにはしません。

関連するこれまでの話は 学習ハブ にまとめています。シリーズの個別記事は末尾でも触れます。

何がつらかったか

WAN 自体は生成の本丸なので、そこを置き換えたいわけではありませんでした。負担だったのは、その周辺です。

  • 過去作品の一覧が、欲しいプロンプトにたどり着くまでに時間がかかる感じがしたこと
  • 「似た指示をまた使いたい」ときに、コピー元を探すコストが積み重なること
  • 生成のたびに増える履歴を、自分の頭の外に置いておきたいこと

要するに、生成サービス側の UI に、自分の検索の仕方まで合わせ続けるのがしんどくなってきた、という話だと思います。

作ったもの(ざっくり)

構成はシンプルです。ブラウザ拡張で、自分が明示操作した自分のライブラリのメタ(URL やプロンプトなど)を個人カタログへ送ります。第三者データの自動収集ではありません。Web 側では一覧・種別フィルタ・プロンプトの部分一致検索・詳細からのコピーができます。実ファイルの再ホスティングはしていません。WAN 上で開ける URL とメタを、自分用の棚に並べるイメージです。

  • 拡張(Chrome MV3)
    ライブラリから明示操作で同期。未取得分をまとめて送る想定
  • カタログ Web(Next.js)
    検索・フィルタ・詳細・比較。個人ログイン前提
  • Supabase
    アセットと同期トークン。本人以外からは見えないようにする

仕様はリポジトリ内のドキュメントに置き、実装と並べて進めています。いわゆる仕様駆動(ドキュメントを正本=SSOT にしてから手を動かす進め方)の延長です。Colorism のときと同じく、「何をやらないか」も先に書いておいたのが効いた気がします。

なぜ「探す」より「自分用を足す」にしたか

世の中には、履歴管理やプロンプト整理のサービスもいろいろあると思います。ただ、自分の解決したいことはかなり狭くて、「WAN のこの履歴を、この検索の仕方で、自分だけが見られればいい」でした。

そうなると、汎用ツールを探し当てて設定を合わせるより、小さなアプリを足した方が早い場面があります。AI 駆動開発(Cursor などで実装を進めるやり方)は、そうした個人仕様の道具を現実的なコストで作れるようにした、というのが今回の実感です。

万能の正解を外に探すより、自分の作業に合う最小の棚を内側に置く判断を、WAN カタログで一度やってみた、という位置づけです。

技術の選び方(短く)

スタックは、自分がすでに触れているものに寄せました。カタログ UI は Next.js、データは Supabase、取り込みは拡張です。新しい枠組みを学ぶより、既知の部品で「毎日使える最小」を先に閉じたかった、という理由が大きいです。

検索は当初、もっと立派な全文検索を想像していました。実際に日々使ってみると、プロンプト文字列の部分一致の方が、自分の使い方には合っていました。記号入りのラベルも拾いたいので、いまはそちらに寄せています。理想の仕組みより、手元のクエリに素直な方が続いた、という感じです。

つまずいたところ

いちばん手がかかったのは、拡張側の取り込みです。WAN 側の画面や応答の形が変わると、取得が壊れます。最初から「完璧な自動収集」を狙わず、自分が明示的に同期する操作を中心にしたのは、その不安への対処でもありました。

あとは、一覧を増やしたあとの詳細パネルのレイアウトです。メタデータとリンク領域が重なって読みにくくなり、スクロールの入れ方を一度やり直しました。派手な機能より、毎日開く画面のストレスの方が効く、というのは Colorism のときとも似ています。

ドキュメントと実装のズレも出ました。README に「実装予定」が残ったまま、実は日々使っている、といった状態です。棚卸しして直しましたが、仕様駆動でも入口の文書は古くなりやすい、という教訓でもあります。

いまの使い方と所感

朝や作業の合間に同期して、カタログ側でプロンプトを探す、がだいたいの流れです。WAN のサイトを何往復もする回数が減った感覚があります。誰かに配る製品ではなく、自分の作業机の引き出し、くらいの温度感でちょうどよいです。

開発中に本線の会話を汚したくないときは、Side Chats のような切り出しも併用しています。道具は一つに決め打ちせず、痛いところだけ足す、というスタンスです。

まとめ

WAN の履歴・プロンプト検索がしんどく、個人用カタログを作り、いまも使っています。既存の万能ツールを探し続けるより、解決したいことに合う小さな棚を AI 駆動で足した方が早かった、というのが所感です。

同じような「公式 UI はそのまま、周辺だけ自分用」が必要な場面は、ほかにもあるかもしれません。そのときは、完璧な製品を待たずに、最小の引き出しからでよいのだと思います。

進め方のメモとしては 仕様駆動で分かったこと学習ハブ もどうぞ。

※ 本アプリは個人用途の自作ツールです。サービスの利用規約や画面仕様は変わることがあり、再現手順の保証はしません。執筆支援に AI を使用しています。事実確認・構成の最終判断は著者が行っています。

この記事で使ったサービス

シリーズ一覧を見る