Setlist Maker

rekordbox のプレイリストエクスポート (txt) から、SNS 投稿用のセトリ画像を生成する Web アプリ。

Demo: https://syokenn334.github.io/setlist-maker/

主な機能

アートワーク自動取得

rekordbox のトラック情報 (アーティスト名・曲名) をもとに、iTunes Search API からアルバムアートワークを自動で取得。リミックス表記や feat. の除去など検索クエリを段階的に緩和し、高いヒット率を実現。取得したアートワークはセトリ画像にそのまま反映される。

セトリ画像生成

• 16:9 / 7:8 / 9:16 アスペクト比 — 横長 (1600x900)・Twitter 2枚用 (1050x1200)・縦長 (900x1600) を切替可能
• 1列 / 2列レイアウト — 曲数やスタイルに合わせてカラム数を選択
• 行数調整 — 1ページあたり 8〜18 行で調整。曲数が多い場合は自動でページ分割
• 複数ページ対応 — ページ切替プレビュー付き。PNG 出力時は全ページ一括ダウンロード

カスタマイズ

• メタデータ編集 — イベント名・DJ 名・日付を自由に設定
• 配色テーマ — Dark Purple / Light / Neon の 3 テーマから選択
• 背景画像 — 任意の画像をアップロードしてオーバーレイ付きで表示。透過率スライダー (20%〜100%) で調整可能

PNG エクスポート

html2canvas によるクライアントサイドレンダリング。サーバー不要でブラウザだけで高解像度 PNG を出力。toBlob による効率的なメモリ管理。

セットアップ

npm install
npm run dev      # 開発サーバー起動
npm run build    # プロダクションビルド

使い方

1. rekordbox からプレイリストを txt エクスポート
2. ファイルをドラッグ＆ドロップ (またはクリックして選択)
3. アートワークが自動取得される
4. サイドバーでメタ情報・背景・レイアウトをカスタマイズ
5. 「PNG ダウンロード」で画像を出力

技術スタック

• React 19 + TypeScript
• Vite
• Framer Motion (UI アニメーション)
• html2canvas (PNG エクスポート)
• iTunes Search API (アートワーク取得)

更新履歴

v0.4.0

• スマートフォン対応 (レスポンシブ): 768px 以下で上下分割レイアウトに自動切替
  • 上部 45vh にプレビュー固定、下部にスクロール可能な操作 UI
  • 出力画像の解像度は変更なし (プレビュー表示のスケーリングのみ)

v0.3.0

• 7:8 アスペクト比追加 (Twitter 画像2枚投稿向け 1050x1200)
• ヘッダーフォントサイズ拡大 (イベント名 28px、日付/DJ名/曲数/ページ 18px)
• トラック行のフォントサイズ拡大 (番号 16px、BPM/再生時間/ジャンル 14px)
• 行数に応じて曲名・アルバム名のフォントサイズを動的スケーリング
• 曲数の色を DJ 名と統一

v0.2.0

• 背景オーバーレイ透過率スライダー追加 (20%〜100%)
• 行数スライダーの最小値を 8 に変更
• PNG エクスポートを toBlob に最適化 (メモリ効率改善)

v0.1.0

• 初回リリース
• rekordbox txt パース、アートワーク自動取得
• 16:9 / 9:16 アスペクト比、1列/2列レイアウト
• 3 配色テーマ (Dark Purple / Light / Neon)
• 背景画像アップロード、コラプシブルサイドバー
• 複数ページ対応、全ページ一括 PNG エクスポート