配信でもTRPGでも！なんでも使える相関図メーカーです！ ====================================================== 配信しながら書き足せる！相関図メーカー for OBS（外部ツール不要） ====================================================== 配信画面に、人物の相関図を出すツールです。 OBSのドック（手元の操作の画面）で人物や線を足すと、配信画面の相関図にすぐ出ます。 コラボ相手・同期・先輩後輩の紹介、マーダーミステリーやTRPG、ゲームの登場人物の整理、 推しやうちの子の関係の紹介などに使えます。 【機能】 ・ドックの左に、配信画面と同じ相関図が出ます。そこでつかんで動かす・線を引く・押して選ぶ ・人物＝名前・ひとこと・画像（切り抜く位置と大きさも変えられます）。画像が無い人は名前の1文字目 ・人物・文字の札の大きさ＝足したときの大きさ・1つずつ・囲みの中の人をまとめて ・人物を半透明に（濃さも変えられます）・線の濃さ（全体・1本ずつ） ・退場の札の文字は1人ずつ変えられます。変えた文字は、次に退場にした人にも使われます ・線＝関係の文字・向き（片方／両方／なし）・実線か点線・色。行きと帰りで別の関係を付けられます ・線の型（好意・仲間・対立・秘密 など）を押すだけで、色と向きがまとめて変わります。自分の型も残せます ・囲み（グループ・陣営・家族など）・文字の札・題名 ・まだ見せない＝人物・線・囲み・文字ごとに「隠す」。ドックでは薄く見えて、配信画面には出ません 　配信中に「隠す」を外すと、その場で出てきます（発表前のコラボ・ネタバレの関係に） ・注目＝選んだ人とその人の線のほかを薄くします ・退場＝人物を白黒にします ・見やすく並べ直す＝重なりや線の交わりを、押したときだけ自動で減らします（戻すで元に戻せます） ・相関図を何枚も持てます（作品ごと・回ごと）。押すと切り替わります ・デザイン（ドラマ公式／報道フリップ／黒地シリアス／ポップ／やわらか）。色は配色を押して選べて、1色ずつも変えられます（色はデザインごとに覚えます） ・関係の文字・題名・文字の札の大きさ ・線の通し方（まっすぐ／カギ線）・背景の板（あり／なし）・人物の大きさ（全体・1人ずつ）・書体 ・人物や線を足したときは、動いて出てきます（切ることもできます） ・戻す／やり直す ・画像で取り出す（1920×1080 の PNG を「コピー」して、ペイントや X に貼り付け。背景を透明にもできます） ・すべて自動保存。OBSを再起動しても続きから ・設定のバックアップ（テキストで書き出し・読み込み。画像も入ります） 【必要なもの】 ・OBS Studio ・外部ツールは不要です 【同梱物】 ・index.html　　… 配信画面に出すほう ・dock.html　　 … 手元の操作の画面（OBSのドックに入れるほう） ・*.js／*.css　 … 動かすためのファイル（さわらないでください） ・README.txt　　… この説明 ・利用規約.txt 【インストール方法】　※2か所に入れます はじめに、ZIPを解凍して、フォルダごと好きな場所に置いてください （例：C:\haishin\soukanzu）。置いたあとで場所を変えると相関図が引き継がれないので、 先に置き場所を決めておくのがおすすめです。 ■ 1. 配信画面に出すほう 　① OBSの ソース → ＋ → ブラウザ 　② ★「ローカルファイル」のチェックは外したままにします★ 　③ URL欄に、index.html の場所を file:/// の形で貼ります 　　　例）file:///C:/haishin/soukanzu/index.html 　④ 幅 1920 ／ 高さ 1080 ／ カスタムCSSは空のまま → OK 　※「ローカルファイル」にチェックを入れると保存場所が分かれてしまい、 　　 ドックで作った相関図が配信画面に出ません。必ずURL欄に貼ってください。 ■ 2. 手元の操作の画面（ドック） 　① OBSのメニュー → ドック → カスタムブラウザドック（古い版では 表示 → ドック の中） 　② ドック名：相関図 　③ URL欄に、同じフォルダの dock.html の場所を file:/// の形で貼ります 　　 （設定パネルの「その他」→「ドックの入れ方」の「URLをコピー」で、このURLをコピーできます） 　　　例）file:///C:/haishin/soukanzu/dock.html 　④ 出てきたドックを、OBSの好きな場所に置きます。横に広いほうが使いやすくなります 　　 （ドックの左に相関図とその下に道具、右に設定が出ます。上下に並べたいときは「その他」→「ドックの並び」で「縦」に） 　⑤ ドックの左下に「配信画面とつながっています」と出れば、2つがつながっています 【操作について（大事なこと）】 ・操作は、基本はドックで行います。配信画面のほうは、OBSの「対話」ウィンドウでも操作できます。 ・対話ウィンドウの出し方：OBSでソースを右クリック →「対話（操作）」 　対話ウィンドウの中で、右クリックをすばやく2回 → 設定パネルが開きます（Esc で閉じます） ・ドックでは、日本語をそのまま打てます。 　対話ウィンドウの中では日本語を打てません。メモ帳などで書いてからコピーして、貼り付け（Ctrl+V）てください。 ・ソースの高さが大きいほうが、設定パネルが広く使えて設定しやすくなります（1080 がおすすめ）。 ・Chrome など別のブラウザで開いて作っても、OBSには反映されません。OBSの中で作ってください。 【使い方】 1. 相関図の下の「人物」（縦の並びでは右上）で人物を足し、右側の欄で名前・ひとこと・画像を入れます 2. 「線をつなぐ」を押して、ドックの左の相関図で、人物から人物へ引っぱります 3. 線を選んだまま、関係の文字を入れるか、「線の型」を押します 4. 人物・題名・文字の札・囲みの見出しは、つかんで好きな場所に動かせます（「報道フリップ」の題名は上の帯に決まっています） 5. 配信中に見せたくない物は「隠す」に。見せるときに外すと、その場で出てきます ■ ドックの道具 ・人物　　　　　… 人物を1人足します（空いている所に出ます） ・線をつなぐ　　… 押してから、人物から人物へ引っぱると線がつながります。もう一度押すとやめます ・文字　　　　　… 文字の札を足します ・囲み　　　　　… 囲みを足します（人物を選んでいるときは、その人のまわりに出ます） ・戻す／やり直す … 直前の操作を取り消す／取り消した操作をやり直す ・見やすく並べ直す … 重なり・線の交わりを減らします（題名と文字の札は動きません） ・（人物／線／囲み／文字の札）を削除 … 選んでいる物を消します。文字は選んでいる物に合わせて変わります（間違えたら「戻す」） ・右上の「文字 － ＋」 … ドックの文字の大きさ（数字を押すと 20 に戻ります） ■ ドックの相関図の上でできること ・何もない所をダブルクリック … そこに人物を足します ・何もない所を引っぱる　　　 … 引っぱった大きさの囲みを作ります ・人物を長押し（0.5秒）して、ほかの人物へ引っぱる … 線がつながります ・画像のファイルをドックに落とす … その画像の人物を足します（相関図の上に落とすと、その場所に出ます） ・線を押して「この線を隠す」 … 配信画面から消えて、ドックでは薄く見えます。「この線を表示する」で戻ります ・線をつなぐ間は、相関図の枠が青く太くなります ■ キー（ドックで、文字の欄にいないとき） ・Delete　… 選んでいる物を消す（人物を消すと、その人の線も消えます） ・Ctrl+Z　… 戻す　　・Ctrl+Y … やり直す　　・Esc … 線をつなぐのをやめる／選ぶのをやめる ■ 設定のタブ ・選んだ物　… 選んでいる人物・線・囲み・文字・題名の中身と、配信での見せ方（隠す・注目・退場） ・相関図　　… 相関図の一覧（切り替え・新しく作る・写す・消す）・題名・並べ直し・線の型・画像で書き出す（コピー） ・見た目　　… デザイン・色・背景の板・線の通し方・文字と人物の大きさ・書体・動き・スナップ ・その他　　… ドックの並び（横／縦。ドックだけ）・ドックの入れ方（配信画面の設定パネルだけ）・設定のバックアップ・この設定パネル（買ったときの状態に戻す） 【画像で取り出す】 ・「相関図」タブ →「画像で書き出す」→「画像をコピー」を押します（1920×1080 の PNG） ・そのまま、ペイント・X・画像の編集ソフトなどに貼り付け（Ctrl+V）て使います ・「画像をコピー（背景を透明に）」は、背景の板を外した画像になります ・OBSの中では、ファイルへの保存はできません（コピーで取り出します） ・隠している物は入りません。字は、PCに入っている書体で描きます 【書体について】 デザインごとに、次の書体で作ってあります（無料の書体です。ソフトには入っていません）。 ・ドラマ公式／報道フリップ … Noto Sans JP ・黒地シリアス　　　　　　 … Noto Sans JP、しっぽり明朝（Shippori Mincho） ・ポップ／やわらか　　　　 … 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回押します。 　 相関図も全部消えるので、残したいときは先に「設定のバックアップ・引き継ぎ」で書き出してください。 【バージョン】 　はじめの版 【お問い合わせ】 BOOTHのメッセージ機能からご連絡ください。 制作：望月ハッピーファクトリー（https://mochizuki-happy.booth.pm/）