「配信ツール向けオーバーレイ」のURLを探せ??
OBSを使ったツイキャス配信で、コメント欄を配信画面中に表示させたい場合は、「配信ツール向けオーバーレイ」のURLをツイキャスのサイトからコピーして、OBSの「ソース」の欄で➕ボタンをクリックして「ブラウザ」を追加、ブラウザのプロパティにあるURLにオーバーレイのURLをペーストします。
この「配信ツール向けオーバーレイ」のURLですが、ツイキャスのサイトにログインした後にアクセス出来る「ツール・ゲームズ配信」ページに記載されています。 でも、このページのレイアウトが割と頻繁に変更されていて、URLの表示位置が移動しているので、どこに記載されているかをここにメモしておきます。
加えて、「配信ツール向けオーバーレイ」のURLを更新したらコメント欄の文字に黒い影が付いてしまった場合の対処法もこのページ最後の方にメモしてあります。
ツール・ゲームズ配信ページ
まず「ツール・ゲームズ配信」ページですが、OBSといった配信ツールや、ツイキャスのスマホアプリの「ゲームズ」※を使って配信をする際にテロップの変更やアンケートの実行などをこのページから行う事が出来ます。
このページは、ツイキャスのサイト(https://twitcasting.tv)にログインした後に、ページの上部ヘッダーの右側にある 配信するボタンにマウスのポインターを持って行くと表示される「ツール・ゲームズ配信」をクリックすると表示されます。
又、ブラウザの表示幅が狭い場合はこの青色のボタンが表示されない場合がありますが、PCの場合は、ウインドウ右上のユーザーアイコンの右にある「」をクリックするとプルダウンメニューが表示されるので、このメニュー内で「ツール・ゲームズ配信」を選択する事が出来ます。
※ PC上ではなく、Androidスマホにコメント欄を表示してツイキャス配信をしたい場合は『ツイキャス専門店 コメ欄』を使うと、ツイキャスのコメント欄をホーム画面に表示する事が出来ます。
ツイキャスの配信アプリを使ってスクリーン配信をすると、配信画面にコメント欄を取り込んだ配信が可能になります。
「配信ツール向けオーバーレイ」
さて、本題の「配信ツール向けオーバーレイ」ですが、以前は「ツール・ゲームズ配信」ページ内に配置されていましたが、半年に1度に近いペースでこのページのレイアウトが更新されていて、毎回表示される位置が変更されていました (👉過去メモ参照)。
だと「ツール・ゲームズ配信」ページのライブ配信画面の左下に表示される ツールとの連携設定ボタンをクリックすると新たに表示されるダイアログ上に見つける事が出来ます。
※ 「配信ツール向けオーバーレイ」のURLは、右に表示される「コピー」をクリックすると値がクリップボードにコピーされる仕様になっているので、後は設定したいアプリに戻って、URLの入力欄にペーストするだけになります。
OBSの配信設定に必要なRTMPも同じダイアログ上に表示されますが、どちらも一度設定したら設定し直す必要のない値なのと、配信中に必要になる頻度も少ないはずなので、ページのレイアウト的には無駄の無い配置に落ち着いた様に思えます。
正規「配信ツール向けオーバーレイ」URLの必要性
因みに、ツイキャスのサイトからコピーする正規の「配信ツール向けオーバーレイ」のURLは:
といったフォーマットになっていてますが、実は次の様な:
「?embedded=1」以降の青色部のパラメータを省略した短いURLを入力しても見た目は同じ様なコメント欄が表示されます。。。
こうなると、「わざわざツイキャスのサイトにログインして長いURLをコピーしないといけないか?」という疑問が出てくるかもしれませんが、実は表示されるコメントの見た目は同じ様でも、内部コードのHTMLタグのアトリビュート値が違います。
CSSに興味のない方にはよくわからない点かもしれませんが、実はこのアトリビュート値の違いで、カスタムCSSによっては枠主側のコメントを閲覧側のコメントと区別が出来ない場合もあったりするので注意が必要です。
「tw-comment-type」クラスのDIVタグの「data-type」アトリビュート
ツイキャスのコメントのオーバーレイでは、各ユーザーからのコメントは「tw-comment-type」クラスのDIVタグ内に表示されますが、このDIVタグに設定される「data-type」アトリビュートが、閲覧側のコメントの場合は「other」になっていますが、枠主のコメントの値がパラメータによって変わります。
正規のURLを使った場合は「you」という値、上記の省略したURLだと「owner」という値が枠主のコメントに設定されます。
なので、このサイトで公開している「L○NE風ツイキャスコメ欄用カスタムCSS」の様に、コメントが閲覧のものか枠主のものかの違いで表示位置が左寄せ/右寄せになるといったCSSスタイルの場合は、枠主用のスタイルを「you」と「owner」の両方ではなく、どちらかに設定しているだけの場合は、正規URLを使うか、上記のパラメータの一部が省略された簡易URLを使うかで枠主用のスタイルが正しく適用されない場合があったりします。
結論としては、正規のURLでも簡易URLでも、コメント欄が表示されるのであればでどちらでも良いと思いますが、正規でないURLは、現在使えても、今後の仕様変更などで突然使えなくなるという可能性も否定は出来なくもないので、もしもの時の場合に備えて正規のURLがどこに記載されているかは頭の隅に記憶しておいても良いかもしれません。。
[追記: ] 簡易URLを使っている場合はグループ配信時とプライベート配信時のコメントが反映されないみたいなので、グループ/プライベート配信時はツイキャスのサイトからコピーする正規のURLが必要になります。
また、グループ/プライベート配信が終了した後にコメント欄を再読み込みした場合はグループ/プライベート配信内で送られたコメントが表示されない仕様みたいですが、グループ/プライベート配信後に引き続いて一般の配信を開く場合はコメント欄が再読み込みをされずに前のグループ/プライベートのコメントが表示されたまま残っている事もあるので、センシティブなコメントがある場合は注意が必要です。
[追記: ]
現時点では簡易URLでも下記のログインメッセージは表示されなくなっているみたいです。
[追記: ] ツイキャスのコメント欄のオーバーレイが、簡易URLだとログインを促すメッセージが上部に表示されるという仕様に変更された様です。
簡易URLだとユーザー名さえ指定すればログイン無しで誰でも使えてしまう訳で、ツイキャスの「利用規約」に同意せずにを使えてしまいます。
このメッセージは現時点ではtw-login-button-listというクラスのDIVタグ内に表示されているのでカスタムCSSを変更する事で容易に非表示に出来ます... でも、今回変更があった事からすると無ログインで使えてしまう抜け穴を問題視する流れなのかもしれないので、今後、簡易URLではコメント欄が表示されなくなる可能性もありがちな。。
URL内の「style=2」パラメータ
最近 ()のツイキャスのサイトからコピーする「配信ツール向けオーバーレイ」のURLですが、パラメータ部に「style=2」という値が追加される仕様に変更になっていて、この変更で、表示される文字の周りに黒い囲いが表示される様になりました。
 |
最近更新されたURLでオーバーレイを表示した場合の例。 (簡単なカスタムCSS適応後) |
白い背景上に表示する場合は文字の暗い囲いのコントラストのおかげで、文字が読み取り易い設定だとは思いますが、背景が暗い色の場合は以前より読みにくくなるのと、プラスで付け加えたカスタムCSSの設定によっては文字が潰れてしまう場合がある様です。
パラメータ部に「style=2」が指定されていると、.tw-comment-item-comment (コメント表示部)と.tw-comment-item-name (ユーザー名)に次のCSSが追加される使用になっています。
padding: 0 2px 2px;
text-shadow: -2px -2px 0 #111, -1px -2px 0 #111, 0 -2px 0 #111, 1px -2px 0 #111, 2px -2px 0 #111, -2px -1px 0 #111, -1px -1px 0 #111, 0 -1px 0 #111, 1px -1px 0 #111, 2px -1px 0 #111, -2px 0 0 #111, -1px 0 0 #111, 0 0 0 #111, 1px 0 0 #111, 2px 0 0 #111, -2px 1px 0 #111, -1px 1px 0 #111, 0 1px 0 #111, 1px 1px 0 #111, 2px 1px 0 #111, -2px 2px 0 #111, -1px 2px 0 #111, 0 2px 0 #111, 1px 2px 0 #111, 2px 2px 0 #111;
}
このCSSで文字の周りに±2ドットの点が#111色(=#111111)で表示されます。
加えて.tw-comment-item-commentには次のCSSも適用されて、コメントの文字が少し大きめになる設定になっています。
font-size: 16px;
}
以前は文字サイズのデフォルトでは14pxだったと思いますが、文字の周りに黒い影を追加する事で元の文字が少し見えにくくなるのを補正する為に大きい仕様に変更されたのでしょう (?)。
(ツイキャスのコメントオーバレイで) 文字の黒い囲いを消す方法
上記の「style=2」による更新は、OBSに既にコメント欄の設定をしてある場合は全く影響が無いのですが、パソコンを新しくしたなどでOBSのコメント欄を新たに設定し直したりすると、コメント欄の文字が突然変わって、「コメントの文字がおかしい!?」とか「コメビュに黒い影が付く!!」となってしまったりすると思うので、その対処方をここにメモしておきます。
オーバーレイのURLを更新したらツイキャスのコメント欄の文字の表示が変わってしまったという場合は:
- URL内の「style=2」を「style=0」や「style=1」といった別の値に変更(👈お勧め) するか、
- カスタムCSSに、次の様なCSS設定を加えて「style=2」によって追加された影 (shadow)を無効化する事も可能です。
text-shadow: unset !important;
}
「配信ツール向けオーバーレイ」をコピーする場所にスタイルを選択するボタンがあっても良い様な気がしますがw (独り言。。)
追記:
次の様なもう少し簡単なCSSでも影を無効に出来ると思うのでお試し下さい。
text-shadow: none !important;
}
[追記] 省略型URLでのstyle=2
上記の簡易URLで「style=2」のコメント欄の表示をしたい場合は次の様になります:
[追記] 文字の囲い影を違う色に変更
逆に、「style=2」ある無しに関係なく、意図的に違う色で影を付けたい場合は次の色設定を変えてから下のCSSをカスタムCSSの欄に追加することでも可能になります。
text-shadow: -2px -2px 0 #111, -1px -2px 0 #111, 0 -2px 0 #111, 1px -2px 0 #111, 2px -2px 0 #111, -2px -1px 0 #111, -1px -1px 0 #111, 0 -1px 0 #111, 1px -1px 0 #111, 2px -1px 0 #111, -2px 0 0 #111, -1px 0 0 #111, 0 0 0 #111, 1px 0 0 #111, 2px 0 0 #111, -2px 1px 0 #111, -1px 1px 0 #111, 0 1px 0 #111, 1px 1px 0 #111, 2px 1px 0 #111, -2px 2px 0 #111, -1px 2px 0 #111, 0 2px 0 #111, 1px 2px 0 #111, 2px 2px 0 #111 !important;
}
追加される影は文字から±2ドットの範囲で、それなりの幅(?)があるので、影が付く文字はカスタムCSSでサイズ大きめ & 太文字設定にすると見やすいかもしれません。
コメントの文字にデフォルトで付く影を黒いままにしておくよりは、カスタムCSSを使って枠の趣向にマッチした色にした方が個性のあるコメント欄を演出できるかと思います。。
[追記: ]
コメントとアカウント名の文字の色と影の色の選択、それにもう少し加えた割とシンプルなツイキャスのコメント欄専用のCSSも作っていた事を忘れていたので、今更ですが次に。
コメント
コメントを投稿