–
–
ディスコード×ココフォリアでの
ボイスセッション前提の説明です。


TRPGの配信や録画したい
そういう交流あるんだな?


コミュ障の癖にとか思った?
面倒な彼女かよ


彼女?
気持ちは有難いのですが
お断りさせて頂きます
より一層のご活躍を
お祈り申し上げます。
なんで
お祈りメールみたく
なってんだよ

まあ、友好関係があるのは
良い事だし、説明はする!

おおまかな流れ
OBS(Open Broadcaster Software)を使って録画・配信する。
録画の方はこれで出来るようになります。
配信の場合は、「ココフォリアの配信画面の作り方」の基礎は分かるようになります。
OBS(Open Broadcaster Software)を開く
OBSを立ち上げる
はい、
まずはこれ!
配信者や
動画作成者が良く使う
便利なソフトだ


でも、お高いんでしょう?
無料だし、
そのくだり
前もやらなかったか?


ダウンロードの場所に、
和太鼓みたいなマーク出てきた

その後、
ダウンロードの案内出るから
「はい」押して


説明に関しては
「Next」押しながら
進めておくよ




ダウンロード出来た

えらい!
ならそれ開いて

OBSを開いてみる

開いた

ココフォリアの画面を映してみる

ココフォリアを
反映させたい
なら、
ココフォリア開いて


なら、
前回の瞬き部屋にする。

OK!
次にサイトのURLを
コピーできるか?



出来た。
OBSに戻る?
戻ったら
「+」を押して
ブラウザをクリック



押したら、
ウィンドウ出てきた


ブラウザ名は?
分かり易ければ、
何でも良い。


なら「Aはばか」
なんでもいいとは
言ったから、
もう何も言わねーわ



バグった
いや合ってる合ってる

URLと書いてある欄に
元から入っていた内容を消して
さっきコピーしたURLを貼り付ける!


画面のサイズと合わない場合

貼り付けたけど、
サイズが合わない

OBSに映った
ココフォリアの画面を
クリックすれば解決する


OBSでの不要な部分の削除は「Altキーを押しながら!」
あとは
「Alt」キーを押すと
不要な部分を
消すことが出来る。


【重要】OBSの対話機能の使い方!
OBSでココフォリアのお知らせを消す方法

大きくはなったけど
広告が消えない。
課金制?

いや、対話機能を使う。
OBSでココフォリア画面を
クリックしてほしい


クリックしたけど
対話…???
ここ



「相互作用」画面が
出てきた
その画面はクリックすると
ちゃんと反応するから
そこで色々弄る!


ルームチャット画面の消し方

ルームチャットも
消しておこう。

画面の縮小拡大

画面の小さくしよ


完了したから、
「相互作用」の画面閉じるよ

–
背景真っ白だな?


コマサイズ100にしていて
コマがかなり大きいからね
直すよ
追記:画面がぼやける場合 2022.2.7更新
幅1920 高さ1080にすると丁度良くなります
情報提供:赤坂柚月さんです。ありがとうございます。
無理矢理
引き延ばしてるから
ちょい画質悪いな…


そのままでも
僕は気にならない
俺は気になるから、
ちょっとこの辺りの
やり方を伝えておく


圧…。
なら、
大きかったコマを
直す作業する
確かに丁度いいな

さっきの画面を
ダブルクリックして


サイズは
幅1920、
高さ1080
これは
ココフォリアの
画面サイズと
同じになる


大きくしたら縮小しても
画質が綺麗だから
後は自由に編集すれば大丈夫!


現在ここまで出来ている状況
終わったけど、
そっちどんな感じ?


なら、これを見て欲しい


ステータス画面がないのが
気になる。
普段は出ていた気がするんだが…
まあ、ステータスの出し方を教える

※盤面のサイズが小さすぎてステータス出ておりません。

その前に
ダイス振った映像を
録画して確認する

ここまでの内容で、ひとまずの録画は可能!

今の進捗はこんな感じ
ステータス画面について
困ったら
此処のステータスを借りている



これは何をすれば…?
まずは前と同じく
ココフォリアのURLを
コピーして
貼り付ける




貼り付けた。


飛んだ

よし、完璧。
@inportから始まる部分を
コピーする



これをさっきのに
貼り付ける?
そうなる


編集したいから
「Aはばか2」を
……って、名前…
いいや、それクリック


さっきの編集画面が出てきた
そこにコピーした
URLを貼り付ける



出てきた…!!!

はしゃいでいて何より
Altキー押したり、場所調整して
色々弄ってみて


なんでそんな絶妙に
ダサ……んんっ、
なんかそういうの置いたんだよ


どうやって立ち絵
置くのかなって
差分は反映出来ねーけど
画像そのまま載せるか
光らせて載せるかしてるからなぁ…?

–

光る立ち絵が小さい場合
タップORクリックで開きます。
たぶんこっち側にも
書いた方が良いか。
Sさんから頂いた質問の件



名前は伏せたけど、
メッセージそのままだから
消してほしい場合は
フリップ消すから言ってね
たぶん、こんだけで
解決する奴だと思う!


難しそうだったら、
また伝えて


屋敷の郵便受け、毎日スパム届くせいで
全部迷惑フォルダにしてるから
管理者に直接ツイッターメールだと助かるかも
画像を載せる方法
画像を載せる方法も
さくっと伝えておく


知ってる
お前はな?


OBSでの画像やソースの優先順位の変更仕方

立ち絵を光らせる方法で
作ってみたけど、
ステータスが消えた
順番を入れ替えれば、
治るはず



出来た。
それっぽい

そうだな。
かなり良い感じになって来た

配信用フリー背景画像について
OKUMONOさんを
背景にするだけで
大分「画面」っぽさが出ると思う



↑を使って、
上の部分を調整してみた

ダイスのログについて

これだと
ダイスのログが
遡れない状態になっている
ステータス画面と
同じところのカスタムCSS使っているな


やり方は
「ステータスと同じ」だから、
さくっと載せておく



一応言っておくけど、
OBS自体が不安定なソフトだから
俺や他サイト管理者に
問い合わせても解決しないし、
困る事が多いから
問い合わせないように!

でも無料で此処まで使えるの
神なんだよなぁ…


そんなこんなの間に
出来た


これでもう配信画面…
もうすこしこだわりたい人向け!(盤面CSSと吹き出しのみCSSについて)
これは前景だけを
抽出するCSS


で、こっちは
ダイス振った時に
出てる表示のCSS



やり方は
さっきと一緒?
一緒。
ただ小分けにする分、
バグも起きやすいから
動画化なら
ステータスとログだけ分離を
おすすめする

上方や下方にスペース余る問題(テロップの入れ方)

上の方のスペース余った
適当にテロップ入れたら
丁度良くなることが多い


ほう
テキストの入れ方
まず、
テキストを
挿入する


それは得意


何か格好良いこと書くね
いや、適当でいい
本当に適当で



はい

いるよな、こういう奴


人間は唯一無二オンリーワンなのに
いや、お前確か
クローンで
いっぱい同じ顔いるだろ


何その初耳情報
格好良い…、何それ
格好良い…
良く分からないけど
面倒なスイッチ入ったから
次の説明に行くぞー

テキストをテロップにする方法
フィルタを押して


で、「+」を押して
「スクロール」を選択



スクロールを選択した
そうしたら、
「水平速度」を右に動かして


スクロールし始めた。
お好みの速度に設定して


実際の映像

音声借りてやってみた
完全に良い感じ!

–
って言いたいけど
テロップちょい上かな


姑か何かかな
良く言われるし、
否定はしない。
でも俺優しいから


なんかやばいこと言ってる
テロップ
もうちょい弄りたい場合は
個人的に
このサイトが
かなり分かりやすい

–

終わりに
基本の基本って感じだから
まあ色々弄って学べばいいと思う


今回のCSSって
あのサイトの運営さんが
止めたら使えない奴だったよね
それはある。
まあ、そうなったら
勉強はする

CSSやHTMLとか
内部の見方を
教えて説明してくれるのは
この川犬さんの動画が
かなり分かり易かったから
載せておく。

あと理解したら
↓のCSS使い方も説明するけど
マダミス配信のCSSを
載せて下さった方がいたから
急遽置いとくわ

–

–
説明するの
わりと楽しいけど
このページが重くなるから
今回はこれにて!


これで
何とかなりそうだし
助かった
それは良かった


そんな機会はまだないけど
ごめんそれは知ってた

NPCが出てきて順番が変わる場合の参考記事様
CSSすこし触れる人向けの記事です↓

関連動画
立ち絵の差分も反映したい!という方へ

立ち絵を光らせるやり方ってどうやればいい?

ボイセの時に声良くしたいって方へ!
にじさんじライバーのインターフェースやマイクなど!

Youtubeで配信の形でやってみたい人に!

キャラクターコマに瞬きをさせるとても簡単なやり方!

初心者で野良卓が怖い人へ!新しいTRPGの世界を知りたい人へ!TRPGテブラプレでの体験会について。色々なシステムをお試しで遊んでみたい方や、クトゥルフ神話TRPG以外を初めて経験してみたい!という方や、優しいGMさんの元で野良卓の感覚を味わってみたい人にも!

–
自分がどんなTRPG合うか分からない!そもそもTRPG分からないって方へ!

–
–TOP
–
–