投稿

9月, 2020の投稿を表示しています

VB-Cable 仮想オーディオ・ケーブル (Virtual Audio Cable)

イメージ
コンピュータ上でアプリのオーディオ出力を別のアプリの入力に渡す事が出来る 仮想オーディオ・ケーブル (Virtual Audio Cable) 。 いくつかの製品がありますが、マック(macOS 10.10~15)とウインドウズ(XP~Win10)の対応の「 VB-Audio Software 」社の仮想オーディオ・ケーブル「 VB-CABLE 」とその使い方をここにメモしておきます。 [目次] 仮想オーディオ・ケーブル VB-CABLE インストール 使い方 VB-CABLEの細かい設定 仮想オーディオ・ケーブル 普通のオーディオ・ケーブル の接続例 (出力 ⇒ 入力) まず、仮想ではない、普通の オーディオ・ケーブル は、一般的に、両端をオーディオ出力端子とオーディオ入力端子に接続して、出力から入力へ信号を送る為に使います。 例としては、スマホのヘッドフォン端子とパソコンのオーディオ入力端子をオーディオ・ケーブルで繋げると、スマホからの音声/音楽の電気信号をパソコンに取り込んで、録音したり、配信の音声/音楽として使ったりする事が出来ます。 仮想オーディオ・ケーブル の使用例 一方で、 仮想オーディオ・ケーブル は、通常、同じパソコン内で、一つのアプリからのリアルタイムのオーディオ出力を、他のアプリのオーディオ入力へ送るのに使います。 一般的に、仮想ケーブル1本 は、入力用と出力用の2つの 仮想オーディオ・デバイス で構成されていて、出力側のアプリから 仮想入力デバイス へ書き込まれたデータが 仮想出力デバイス から書き出されて受け取り側のアプリに入力される仕組みになっています マックだと、オープンソースの「 Soundflower 」が仮想オーディオ・ケーブルとして有名ですが、残念ながら、ウインドウズには対応していないのと、最後に公開された バージョン2.0b2 は現時点ではまだM1シリ

[OBS] キャスコメ欄用カスタムCSS: 改行

イメージ
ツイキャスの「 ツール・ゲームズ配信ページ 」から入手出来る コメント欄表示用のURL ですが、OBSで表示する場合は、URL表示に使う ブラウザーソースのプロパティに適切な カスタムCSS を追加する事で、コメント欄の表示スタイルを好みの設定に変更する事が出来ます。 この カスタムCSS で使える 改行に関係したCSSコード を2つここにメモしておきます。 [目次] ユーザー情報の折り返し コメント内の改行の有効化 追記: 「コメ欄の幅を狭くすると行が途切れてしまう。。」 追記: ツイキャスのコメント欄の構造 [参考リンク] 👉 📝『ツイキャスのコメント欄を表示 (サムネ付きで)』 その2 - CSS追加 ユーザー情報の折り返し コメ欄表示用URLのページでは 「tw-comment-item-info」クラスのDIVタグ 内にユーザー名、ユーザーID ※ とサポートランキングの星 ※ ( 、 、 )といったユーザー情報が表示されるというHTMLタグ構成になっています。 例: ユーザー名 c:user_ID ユーザーのコメント ※: 標準設定では、ユーザーIDとサポートランキングの星は非表示になっているので適切なCSS設定をカスタムCSSに追加する必要があります (👉『 OBSキャスコメ CSSカスタマイザ ー 』参照)。 標準設定の場合、ランキングの星を表示するIMGタグには「 float: right; 」というCSSが設定されているので常にユーザー情報の右端に表示されます。 又、ユーザー情報を表示する「tw-comment-item-info」クラスのDIVタグは標準設定のCSSによって行の折り返しが無効になっているので、ユーザー名とユーザーの表示幅が長過ぎる場合は末尾が「...」で省略さ

[OBS] キャスコメ欄用カスタムCSS: ユーザーアイコン (サムネ)

イメージ
以前、『 ツイキャスのコメント欄を表示 (サムネ付きで) 』で、ツイキャスの「ツール・ゲームズ配信ページ」にあるURLを使って、配信のコメント欄をOBSで表示する方法をメモしましたが、コメント欄にコメントをした ユーザーのアイコンを表示 させるのにはOBSでソースに カスタムCSSを加える必要 があります。 今回はOBSでツイキャスのコメント欄にアイコンを表示させる時に使えるCSSコードをいくつかここにメモしておきます。 [目次] ユーザーアイコン (サムネ)の表示 アイコンの角丸の調整 アイコンサイズの調整 アイコン外枠 まとめ 1. ユーザーアイコン (サムネ)の表示 コメント欄の表示には「ツール・ゲームズ配信ページ」からコピーした コメ欄表示用のURL (👉 別のメモ内の③マーク参照 )を使います。 でも、このURLのページに標準設定されているCSSには、ユーザーアイコンの画像を囲っているアンカータグ<a>のクラス名「 .tw-commnet-item-icon 」に「 display: none; 」が設定されているので、アンカータグとその子要素のアイコン画像が非表示になっています。 次のコードをカスタムCSSに追加してアンカータグのクラス名に設定されている非表示設定を無効にします。 .tw-comment-item-icon { display: unset !important; } アイコン非表示設定無効用CSSコード 例1: ユーザーアイコンを表示させた場合、標準設定だとアイコンは例1の様に半径16ピクセルの円形で、各コメントの左横に表示されます。 ツイキャスのユーザーアイコンは 320x320ピクセルの正方形でサーバー側に保存されているみたいですが、標準設定のCSSの場合、アイコン画像を表示するイメージタグ<img>で 32x32ピクセルの大きさに指定される上に、「 border-radius 」プロパティによって画像の四隅の角の丸みの