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 でだけ確認)。