
2026/08 - 現在
moodboard
BunTypeScriptwebview-bunWKWebViewAgent Skills
GitHub: https://github.com/mohhh-ok/moodboard (MIT)
紹介ページ: https://moh-tech.net/moodboard/
概要
エージェントに画像や音声を作らせると候補が何枚も出てくるが、ファイルを 1 つずつ開くのは手間で、エージェントに文章で説明させても見た目や聞こえ方は分からない。moodboard では、エージェントが生成物をライトテーブルの写真のように 1 つの窓に並べ、人は見比べて残すものを伝える。
路地裏あやかし合戦で生成画像を見比べるために書いたビューアを、2026/08 に独立したツールとして切り出した。
できること
- 画像(PNG / WebP / アニメーション GIF)はピクセル単位まで拡大でき、2 枚を重ねて比べられる。背景を市松模様にして透過も確かめられる
- 動画(mov / webm / mp4)は並べた状態では無音でループ再生し、クリックで開くと音つきで見られる。シークバー付き
- 音声(wav / mp3 / m4a / aac / flac / ogg / opus)は 1 ファイル 1 枚のプレイヤーカードになり、テイクを順に聞き比べられる
- エージェントはまとまりごとの見出しと、カードごとのラベル(「案 A」「テイク 2」など)を付けられる
- 同じ作業では名前付きの窓を使い回し、新しい結果が前の結果と入れ替わる
- 選択モードで選んだカードのファイルパスをクリップボードにコピーし、会話に貼って選んだものを伝えられる
- 画面と CLI のメッセージは日本語・英語に対応
仕組み
- 窓は
moodboard.html(外部依存なしの HTML/CSS/JS)を webview-bun(WKWebView)で開くだけで、サーバーもブラウザも使わない - ランチャーは窓を別セッションの子プロセスで起動し、ページが全ファイルの読み込みを終えた通知を受けてから終了する。終了コードで「本当に開けたか」「読めないファイルがあったか」がエージェントに分かる
- エージェントへの使い方は Agent Skills 形式のスキルとして配布し、
npx skills add mohhh-ok/moodboardで入る
動作環境は macOS のみ(macOS でだけ確認)。