OBSのドックでお題を段に入れていくと、配信画面のティア表にすぐ出るソフトです！ ====================================================== 配信しながら並べられる！ティア表メーカー for OBS（外部ツール不要・わんコメと合わせても使えます） ====================================================== 配信画面に、ティア表（S・A・B…の段に並べるランク表）を出すツールです。 OBSのドック（手元の操作の画面）で、お題を1つずつ段に入れていくと、配信画面のティア表にすぐ出ます。 ゲームのキャラ・食べ物・スタンプ・リスナーさんのおすすめなど、なんでも格付けして配信で見せられます。 ＼無料でダウンロードできます／ バリエーションの「無料版」を選ぶと、無料でダウンロードできます。 「支援版」（300円）は、中身は無料版とまったく同じです。 「応援したい」と思っていただけた方は、支援版を選んでいただけるとうれしいです。 今後のアップデートや新しいソフトづくりに使わせていただきます。 【機能】 ・ドックの左に、配信画面と同じティア表が出ます。その下が「項目置き場」（配信画面には出ません） ・項目＝文字だけ、または画像＋名前 ・画像のファイルをドックに落とすと、その画像の項目が入ります（何枚でも。ファイル名が名前になります） ・いまのお題＝置き場の項目を押すと、配信画面に大きく出ます ・段の空いた所を押すと、いまのお題がその段へ飛んで入り、次のお題が出ます ・入れた項目はつかんで、ほかの段・段の中の並び・置き場へ動かせます（つかんでいる間も、配信画面に映ります） ・段＝名前・小さい字（例：Tier1）・色・横書き／縦書き・並び順。足す・消すもできます（10段まで） ・段の名前は、表の段の名前（S・A…）を押すと、その場で打てます。段の設定は「ティア表」タブの「段」にまとまっています（段の一覧をつかんで、順番も入れ替えられます） ・表の横幅・段の高さ。段に入りきらない時は「折り返す（段が下に伸びる）」か「小さくする（段に収まるまで項目を縮める）」を選べます ・段の色をまとめて変える（定番・こい色・やさしい色・1色の濃淡） ・題名と小さい字（例：【10月17日 更新】） ・隠す＝入れた項目を、配信画面からだけ消せます（ドックでは薄く見えます） ・ティア表を何枚も持てます（お題ごと・回ごと）。押すと切り替わります ・デザイン（定番／攻略記事の表／ポップ／やわらか）。配色を押すと、表の色と段（S・A・B…）の色がまとめて替わります（段はその色の濃い→うすいのグラデーション。「ベース」でふつうの色分けに戻ります）。1色ずつも変えられます（色はデザインごとに覚えます） ・ティア表の大きさ・位置（ロックで、表といまのお題の札をつかんでも動かないようにできます。ロック中に選ぶと、印が黄色になります）、いまのお題の札の大きさ、項目の大きさ、項目の名前を出す／出さない、書体 ・お題が段に入るときは、札から飛んで入ります（切ることもできます） ・戻す／やり直す ・画像で取り出す（1920×1080 の PNG をコピーして、ペイントや X に貼り付け。背景を透明にもできます） ・すべて自動保存。OBSを再起動しても続きから ・設定のバックアップ（テキストで書き出し・読み込み。画像も入ります） ・わんコメと合わせると、コメントした人（アイコン＋名前）や「お題 ○○」のコメントを一覧に出して、押して置き場に入れられます 【必要なもの】 ・OBS Studio ・外部ツールは不要です（コメントした人・コメントを項目にするときだけ、わんコメを使います） 【同梱物】 ・index.html　　… 配信画面に出すほう（OBSに入れるのはこれと、下の dock.html の2つ） ・files フォルダ … dock.html（手元の操作の画面＝OBSのドックに入れるほう）と、動かすためのファイル（さわらないでください） ・template.json … わんコメのテンプレートとして入れるときに使うファイル ・README.txt　　… この説明 ・利用規約.txt 【インストール方法】　※2か所に入れます はじめに、ZIPを解凍して、フォルダごと好きな場所に置いてください （例：C:\haishin\tierhyo）。置いたあとで場所を変えるとティア表が引き継がれないので、 先に置き場所を決めておくのがおすすめです。 ■ 1. 配信画面に出すほう 　① OBSの ソース → ＋ → ブラウザ 　② ★「ローカルファイル」のチェックは外したままにします★ 　③ URL欄に、index.html の場所を file:/// の形で貼ります 　　　例）file:///C:/haishin/tierhyo/index.html 　④ 幅 1920 ／ 高さ 1080 ／ カスタムCSSは空のまま → OK 　※「ローカルファイル」にチェックを入れると保存場所が分かれてしまい、 　　 ドックで作ったティア表が配信画面に出ません。必ずURL欄に貼ってください。 ■ 2. 手元の操作の画面（ドック） 　① OBSのメニュー → ドック → カスタムブラウザドック（古い版では 表示 → ドック の中） 　② ドック名：ティア表 　③ URL欄に、files フォルダの中の dock.html の場所を file:/// の形で貼ります 　　 （配信画面の設定パネルを開くと、いちばん上の「ドックの入れ方」の「URLをコピー」で、このURLをコピーできます） 　　　例）file:///C:/haishin/tierhyo/files/dock.html 　④ 出てきたドックを、OBSの好きな場所に置きます。横に広いほうが使いやすくなります 　　 （ドックの左にティア表と道具と置き場、右に設定が出ます） 　⑤ ドックの下に「配信画面とつながっています」と出れば、2つがつながっています 【操作について（大事なこと）】 ・操作は、基本はドックで行います。配信画面のほうは、OBSの「対話」ウィンドウでも操作できます。 ・対話ウィンドウの出し方：OBSでソースを右クリック →「対話（操作）」 　対話ウィンドウの中で、右クリックをすばやく2回 → 設定パネルが開きます（Esc で閉じます） ・ドックでは、日本語をそのまま打てます。 　対話ウィンドウの中では日本語を打てません。メモ帳などで書いてからコピーして、貼り付け（Ctrl+V）てください。 ・ソースの高さが大きいほうが、設定パネルが広く使えて設定しやすくなります（1080 がおすすめ）。 ・Chrome など別のブラウザで開いて作っても、OBSには反映されません。OBSの中で作ってください。 【使い方】 1. 項目を入れます 　・「文字を足す」＝1つ足して、右側の欄で名前を入れます 　・「画像を足す」＝画像のファイルを選びます（何枚でも）。画像のファイルをドックに落としても入ります 2. 置き場の項目を押すと、いまのお題になって配信画面に大きく出ます（「次のお題」で、置き場の次の項目に替わります） 3. ドックのティア表の段の空いた所を押すと、 　 いまのお題がその段へ入り、次のお題が出ます 　 配信画面の対話ウィンドウでも、設定パネルを開いている間は、段の空いた所を押すと、いまのお題を入れられます 4. 入れ直したいときは、項目をつかんで、ほかの段・置き場へ動かします 5. ティア表といまのお題の札は、つかんで好きな場所に動かせます（配信画面の設定パネルを閉じていても動かせます） 6. 段の名前を変えるときは、表の段の名前（S・A…）を押して、その場で打ちます（Enter で決まり・Esc でやめる） 　 段の色・書き方・並び・段を足す・段の色をまとめて変える は、「ティア表」タブの「段」でします（段の名前を押すと、そこが開きます） 　 段の順番は、「段」の一覧の段をつかんで上下に動かして入れ替えます ■ ドックの道具 ・文字を足す　　… 文字の項目を1つ足します（置き場に入ります） ・画像を足す　　… 画像の項目を足します（何枚でも選べます） ・次のお題　　　… いまのお題を、置き場の次の項目に替えます ・戻す／やり直す … 直前の操作を取り消す／取り消した操作をやり直す ・ロック　　　　… 押すと、ティア表といまのお題の札を、つかんでも動かないようにします（もう一度押すと外れます） ・消す（項目を消す／段を消す） … 選んでいる物を消します。文字は選んでいる物に合わせて変わります（間違えたら「戻す」） ・右上の「文字 － ＋」 … ドックの文字の大きさ（数字を押すと 20 に戻ります） ■ キー（ドックで、文字の欄にいないとき） ・Delete　… 選んでいる物を消す ・Ctrl+Z　… 戻す　　・Ctrl+Y … やり直す　　・Esc … 選ぶのをやめる ■ 設定のタブ ・選んだ物　… いちばん上に「ドックの入れ方」（配信画面の設定パネルだけ）。題名か表の地を押すと、題名と表の位置・大きさ（数字でも）・ロック。ほかに、選んでいる項目・いまのお題の札の中身と大きさ ・ティア表　… ティア表の一覧（切り替え・新しく作る・写す・消す）・題名・段（段の一覧・名前・書き方・色・並び・消す・段を足す・色をまとめて）・全部を置き場に戻す ・見た目　　… デザイン・色・大きさ（表の大きさ・表の横幅・段の高さ・入りきらない時・項目の大きさ・項目の名前）・書体・動き・スナップ ・コメント　… わんコメと合わせて使う（つながっているか・コメントした人・始まりの言葉のコメント・届いたコメントの一覧） ・その他　　… 画像で取り出す（コピー）・設定のバックアップ・この設定パネル（はじめの状態に戻す） 【画像で取り出す】 ・設定パネルの「その他」→「画像で取り出す」→「画像をコピー」を押します（1920×1080 の PNG） ・ペイント・X・画像の編集ソフトなどに貼り付け（Ctrl+V）て、そこで保存してください ・「画像をコピー（背景を透明に）」は、背景を透明にした画像になります ・そのままコピーできない所では、画像が大きく出ます。画像の上で右クリック →「画像をコピー」でコピーしてください ・いまのお題の札・置き場・隠している項目は入りません。字は、PCに入っている書体で描きます 【わんコメと合わせて使う】 コメントした人（アイコン＋名前）や、決まった言葉で始まるコメント（例：「お題 からあげ」）を一覧に出して、 1つずつ「入れる」「入れない」を選べます。 使うときは、ダウンロードしたZIPをそのまま、わんコメの「テンプレート」画面にドラッグ＆ドロップして、 テンプレートとしてOBSに入れ直します（file:/// で入れたティア表とは保存が別になります）。 ・リスナーのアイコンは、「入れる」を押したときに画像として取り込みます ・配信者のコメント・わんコメのお知らせのコメントは出しません ・テストのコメントを流して、一覧に出るか確かめられます ・わんコメを無料で使っているときは、クレジットの表記が要ります（利用規約.txt） ※ 入れ方と設定のくわしい説明は、同梱の README.txt に載っています。 【書体について】 デザインごとに、次の書体で作ってあります（無料の書体です。ソフトには入っていません）。 ・定番／攻略記事の表 … Noto Sans JP（攻略記事の表の段の字は Dela Gothic One） ・ポップ／やわらか　　　　　　　　　　　 … Zen Maru Gothic PCに入っていなくても使えます（近い書体＝BIZ UDPゴシックで出ます）。 同じ見た目にしたいときは、次の手順で入れてください。 　① Google Fonts（fonts.google.com）で、書体の名前を検索します 　② 「Get font」→「Download all」で ZIP を保存して、解凍します 　③ 中の .ttf ファイルを右クリック →「インストール」 　④ OBS を再起動します 「見た目」タブ →「書体」で、PCに入っているほかの書体にも替えられます。 【よくある質問】 Q. ドックで作ったティア表が、配信画面に出ません A. 配信画面のソースで「ローカルファイル」にチェックが入っていないか確かめてください。 　 index.html と dock.html は、同じフォルダの物を file:/// の形でURL欄に貼ります。 Q. 画像を入れたら「いっぱいです」と出ました A. 画像は1枚ずつ小さくして保存していますが、たくさん入れると入りきらないことがあります。 　 使っていないティア表や項目を消してください。 Q. 同じお題で、はじめから作り直したい A. 「ティア表」タブ →「まとめて」→「全部を置き場に戻す」を2回押します（戻すで元に戻せます）。 Q. 最初の状態に戻したい A. 設定パネルの「その他」→「この設定パネル」→「はじめの状態に戻す（全部）」を2回押します。 　 ティア表も全部消えるので、残したいときは先に「設定のバックアップ・引き継ぎ」で書き出してください。 【バージョン】 　はじめの版 【お問い合わせ】 BOOTHのメッセージ機能からご連絡ください。 制作：望月ハッピーファクトリー（https://mochizuki-happy.booth.pm/）