配信画面にスマートフォンの音楽プレイヤーのようなオシャレな画面を表示して、曲の情報をリスナーさんに分かりやすく伝えられるOBS専用ツールを制作しました！

このツールのポイントは、OBSで簡単にセットリストを管理できるところ。歌いたい曲のリストをメモ帳などのテキストファイルで作っておけば、ボタンひとつで読み込むことができ、配信中にリクエストをもらっても、その場でキーボードで曲名を入力して、すぐにリストに追加できます！

また、プレイヤーの見た目はあなた好みにカスタマイズ可能！メインカラーを選ぶだけでツールが自動でいい感じの色合いに調整してくれるので、デザインが苦手な方でも安心です。

難しい設定や専門知識は一切不要！直感的な操作ですぐに使えるので、あなたの配信クオリティをワンランクアップさせたい方は、ぜひお試しください。また、使い方のドキュメントも一緒に入っているので、迷わず安心して使用することが出来ます。

気になった方はサイドバーの「購入する」ボタンからBoothにて購入することが出来ます！
是非チェックしてみてください！

使い方

「セットリスト管理ツール」を、お使いのOBSで使用出来るようにする方法をご紹介します。

【準備編】OBSにセットリスト管理ツールを登録しよう！

① 手元で使う「操作パネル」の準備

OBSのメニューバーから「ドック」→「カスタムブラウザドック」の順にクリックします。
「ドック名」に「楽曲操作パネル」など、自分で分かりやすい名前をつけます。
「URL」に、ダウンロードしたフォルダの中にあるcontroller.htmlファイルの場所（パス）を入力します。この時「file:///C:/」で始まっていることを確認してください。
「適用」ボタンを押すと、操作パネルが画面に表示されます。好きな場所にドラッグ＆ドロップして、使いやすいように配置してください。

💡ワンポイント
ファイルの場所（パス）は、一度Webブラウザで読み込み、上部に表示されるURLをコピー&ペーストすると簡単に入力できます。

② 配信に映す「プレイヤー画面」の準備

OBSの「ソース」パネルの左下にある「＋」ボタンを押し、「ブラウザ」を選択します。
「新規作成」にチェックを入れ、「ミュージックプレイヤー」など分かりやすい名前をつけて「OK」をクリックします。
プロパティ画面の「URL」に、今度はview.htmlファイルの場所（パス）を入力します。この時「file:///C:/」で始まっていることを確認してください。
幅は1080、高さを1920に設定してください。
カスタムCSSは全て削除してください。
「OK」ボタンを押すと、配信画面にプレイヤーが表示されます。好きな大きさにリサイズして使用してください。

【準備編】セットリストを作ろう！

次に、その日歌う曲のリストをテキストファイル（.txt）で準備します。

PCの「メモ帳」など、いつも使っているテキストエディタを開きます。
「曲名@@アーティスト名」 の形で、1行に1曲ずつ入力していきます。
ファイル名を「今日のセトリ.txt」など分かりやすい名前にして保存します。

💡ワンポイント
・アーティスト名は省略して、曲名だけでも登録できます。
・記号は必ず「@」を2つ重ねてください。
・文字化けしてしまった場合は、セットリストを保存する際に文字コードを「UTF-8」にして保存すると防ぐことが出来ます。

入力例

Fighting My Way@@花海咲季
Luna say maybe@@月村手毬
Boom Boom Pow
アイヴイ

【実践編】さっそく使ってみよう！

① 手元の「操作パネル」から操作する

先ほどOBSにドックとして追加した「操作パネル」が、あなたの配信をサポートする司令塔になります。

セットリストの読み込み
パネル上部にある「＋」ボタンをクリックして、作成したテキストファイルを選びましょう。これでセットリストの準備は完了です！
曲送り・曲戻し
パネル下部にあるボタンで、配信画面のプレイヤーを操作します。
- ▶（次へ）ボタン: 次の曲に進みます。
- ◀（前へ）ボタン: 一つ前の曲に戻ります。
- II（一時停止）ボタン: MCや雑談タイムに便利！プレイヤーが「トーク中」表示に切り替わります。
急なリクエストにも対応！(手動追加)
パネル上部の入力欄に「曲名@@アーティスト名」か「曲名」の形で直接入力し、Enterキーを押すだけ！すぐにその曲を「歌唱中の楽曲」として表示できます。
歌唱中リストの管理:
歌う予定だったけど急遽やめたい時も安心！「歌唱中の楽曲」リストの右側にある「×」ボタンを押すだけで、その曲をリストから削除できます。

② 配信画面の「プレイヤー」から直接操作する

実は、配信画面に表示されているプレイヤー自体を操作することも可能です！

OBSの「ソース」パネルで、追加したプレイヤーのソース（例：「ミュージックプレイヤー」）を左クリックします。
メニューから「対話（操作）」を選択すると、プレイヤー専用の操作ウィンドウが開きます。

このウィンドウからも、手元の操作パネルと全く同じように曲送り・曲戻しやセットリストの読み込みができます。

セットリストの表示
プレイヤー下部の「≡」ボタンを押すと、今までに歌った曲のリストを配信画面に表示できます。
見た目のカスタマイズ
プレイヤー下部の設定アイコン（スライダーのマーク）を押すか、キーボードの「s」キーを押すと、デザイン編集パネルが開きます。
- 各パーツの表示/非表示をスイッチで切り替えたり、背景の透明度をスライダーで調整したりできます。
- セットリストの表示位置もここで変更可能です。

【便利機能】もっと配信をスムーズ＆オシャレに！

操作パネルには、あなたの配信をさらに快適にする機能があります。

セットリストをコピー
コピーアイコンをクリックすると、その日歌った全楽曲のリストがPCにコピーされます。配信終了後、SNSでの共有などにぜひ活用してください！
リストの完全リセット
ゴミ箱アイコンを押すと、読み込んだセットリストをすべてクリアして、まっさらな状態から始められます。
プレイヤーの見た目を変更
歯車アイコンから、セットリスト管理ツールの設定画面を開けます。
- カラー設定: あなたの配信画面の雰囲気に合わせて、プレイヤーのメインカラーを自由に変更できます。難しい色の知識は不要で、ツールが自動で全体をオシャレに調整してくれます！
- 文字色設定: セットリストの文字色も見やすいように変更可能です。
- 表示設定: 配信画面に表示されている要素の表示・非表示を切り替えることが出来ます。
- 透過設定: 配信画面に表示されている要素の透過度を切り替えることが出来ます。
- 位置設定: 配信画面に表示されている要素の表示位置を切り替えることが出来ます。
- リセット: 設定を間違えても大丈夫！このボタンでいつでも初期状態に戻せます。

【上級者向け】ファイル編集でトーク中の表示もカスタマイズ！

もう少しこだわりたい方は、設定ファイルを直接編集してみましょう！

ダウンロードしたフォルダの中にあるconfig.jsというファイルをメモ帳などのテキストエディタで開くと、以下の内容が表示されます。

const config = {
pauseText: "トーク中",
userName: "白藤杏奈",
};

この" "で囲まれた部分を書き換えることで、さらに細かい設定が可能です。

pauseText
一時停止ボタン（II）を押したときに表示される文字を変更できます。「グッズ紹介中」や「イベント告知中」など、状況に合わせて自由な言葉を設定してみましょう。
userName
一時停止ボタン（II）を押したときに、アーティスト名の部分に表示する名前をあらかじめ設定できます。

編集が終わったら、必ずファイルを上書き保存してください。

歌枠・縦型配信向け！セットリスト管理ツール / スマホ音楽プレーヤー風 Music Player List