[Chrome拡張機能] チューブコメカスタムCSSテスター
以前、ツイキャスのライブ配信用コメント欄オーバーレイのカスタムCSSを、PCブラウザを使ってテスト出来る「キャスコメカスタムCSSテスター」を公開しましたが、YouTube配信のコメント欄オーバーレイ用の
も作ってみました。
この拡張機能を使う事で、OBSのブラウザソースを使わなくても、YouTubeのコメント欄をWebブラウザー上にカスタムCSSと同時に読み込んでブラウザに表示する事が出来る様になります。
また、コメント欄を表示した後も、拡張機能のポップアップでカスタムCSSを修正出来る他、ブラウザの「開発者ツール」を使う事で読み込まれたカスタムCSSのエラーの確認も可能になります。
『チューブコメカスタムCSSテスター』
📦Chrome拡張機能 v0.1.1 ( 公開)
ブラウザへインストール
『チューブコメカスタムCSSテスター』は現在、Chromeウェブストアで公開されていて、Chromeを始めとするChromium系のブラウザ、Edge、OpearaやBraveの拡張機能として使う事が出来ます。
拡張機能のブラウザへの追加方法については次のメモ内にあるリンクの説明を参考にしてみて下さい。
主な機能と使い方
１. オプションページ
『チューブコメカスタムCSSテスター』のアイコンをブラウザのツールバーに固定している場合は、コメント欄が表示されていないタブで、ツールバーに表示されている
おおまかな流れとしては、このオプションページで
- 「コメント欄URL」と
- 「カスタムCSS」
に値を入力 & 保存した後、オプションページの右上にある ボタンをクリックすると、同じブラウザ上で新く開くタブにカスタマイズされたYouTubeのコメント欄が表示されます。
「YouTeube Studioページ」ボタン
オプションべージ右上にある YouTeube Studioページ ボタンをクリックすると、「YouTeube Studio」のページが別のタブで開きます (要ログイン)。
このページから自分のライブ配信の準備をして、コメント欄を表示した後、コメント欄右上に表示されるメニューで「ポップアップ」した後、新しい開いたコメント欄のURLをコピーして、拡張機能の「コメント欄URL」にペーストします。
コメント欄URL
- オプションページ内の「コメント欄URL:」の見出しの下にある入力欄に、ポップアップしたYouTubeのコメント欄※のURLを入力。
- 右端にある ボタンをクリックして保存します。
※: 自分の配信ではないライブ配信の場合もコメント欄をポップアップするとアドレスの欄にURLが表示されるので、それを入力欄にコピペします。
コメント欄URLは複数の設定の保存が可能で、インストール時は無名前の設定が一つ保存されていて、次の例にある様に、見出し横の緑色の部分に「(無名)」と表示されます。
緑の部分がドロップダウンボタンになっていて、クリックすると登録されている設定の名前が下にリストされて、又、リスト編集用のボタン各種 (名前変更/削除/新規追加)が右に表示されます。
- 下に表示されたリストから表示したい設定の設定名を見つけてクリックするか、
- 右のリスト編集用のボタンから、選択されている設定名への編集動作を1つ選んでクリックします。
リスト編集用のボタンを選択した場合はボタンの表示から編集用の表示に切り替わります。
 |
| 例:「名前変更」ボタン選択時 |
カスタムCSS
- オプションページ内の「カスタムCSS」の下の欄にテストしたいカスタムCSSを入力。
(この欄でCSSを編集するよりは、Windowsなら「メモ帳」といった、テキストエディタで編集したCSSをペーストする事をお勧めします。) - 右にある ボタンをクリックして保存します。
コメント欄を開く
「配信ツール向けオーバーレイ」と「カスタムCSS」を設定した後、ページ右上の ボタンをクリックすると、同じブラウザ上で新しいタブが開いてカスタムされたYouTubeのコメント欄が表示されます。
注: コメント欄URLに入力された値のアドレスが拡張機能によって正しく認識されない場合は、「オーバーレイを開く」ボタンは無効になるのでクリックする事は出来ません。
この方法で新しく開いたタブに表示されるコメント欄には既定値としてオプションページで保存されているカスタムCSSが読み込まれますが、この後にオプションページのカスタムCSSを変更しても既に表示されているコメント欄にはオプションページでの変更は反映されません。
オプションページで変更したカスタムCSSを確認したい場合は、新たにオーバーレイを開く必要があります。
注: YouTube Studioからコピーした自分のチャンネルのコメント欄を表示する際は、ブラウザ上で同じYouTubeチャンネルにログインしている必要があります。 (同じチャンネルにログインしていない場合はYouTubeのエラー画面が表示されます。)
２. ポップアップ
YouTubeのコメント欄を表示している時にツールバーにある拡張機能のアイコンをクリックするとポップアップが表示されます。 (コメント欄が表示されていない場合はオプションページが開きます。)
ポップアップでは、表示されているコメント欄に既に読み込んでいる「カスタムCSS」を確認出来る他、このCSSを変更して、ページ内にある ボタンをクリックすると表示中のコメント欄のカスタムCSSが更新されます。
ポップアップ内に表示されるカスタムCSSは初めは既定値としてオプションページで保存されたカスタムCSSですが、ポップアップで更新した内容は表示しているコメント欄だけで有効で、変更が別のタブに表示されているコメント欄に反映されたり、オプションページのカスタムCSSに保存される事はありません。
３. 開発者ツール
ブラウザの開発者ツールを使うと、読み込まれているカスタムCSSのエラーを確認したり、一時的な変更を加えて表示を確認したりする事が出来ます。
使っているブラウザ(PC版)によって操作方法が少し違うので詳しい説明は避けますが、開発者ツールの大まかな使い方としては、📝「キャスコメカスタムCSSテスター」のメモにある「開発者ツール」の説明を参考にしてみて下さい。
ブラウザの開発者ツールを使うと次の様な事を確認する事が出来ます。
- 指定したCSSが実施に有効になっているか、別のCSS設定によって無効になっているかどうか。
- 指定したCSSの書式の間違い
- 実際にページに表示されたHTML要素にどのCSS設定が有効になっているか。
- 実際にページに表示されたHTML要素のCSSプロパティ値
確認されている問題/事例
現バージョン (v0.0.2)で、扱えるカスタムCSSのサイズの上限は約8KBとなっています。- 追記 ():
バージョン v0.0.3以降からサイズが8KB以上のカスタムCSSを扱える仕様に変更しました。
chrome拡張機能が標準で記録出来る上限の5MBに近いサイズのカスタムCSSを扱える仕様になっていますが、サイズが1MBを超える様な大きなサイズのカスタムCSSが必要になる事はまずないと思うのと、読み込み時のブラウザへの負担にもなるので無駄のないカスタムCSSを使う事をお勧めします。 -
追記 (): 「Chat v2.0 Style Generator」といったサイトのYouTube用のカスタムCSSだと現在の上限を越えてしまうので、今後のバージョン(v0.0.3)で上限を増やす事を予定しています。 - この拡張機能を使ってYouTube Studioからのコメント欄を表示する際には、YouTube Studio上で「コメント欄URL」をコピーする時に使ったチャンネルと同じチャンネルにログインしている必要があります。
- 「コメント欄URL」は配信が完了すると新しいURLが必要になる様で、配信毎に更新する必要があります。
更新履歴
| Chrome 拡張機能 | Firefox アドオン | 更新内容 |
| v0.1.1 ( 公開) |
オーバーレイのURLドメインが「www.」で始まる場合にポップアップが無効になっていた不都合を修正。 | |
| v0.1.0 ( 公開) |
マニフェストv3に移行 |
| Chrome 拡張機能 | Firefox アドオン | 更新内容 |
| v0.0.5 ( 公開) |
「オーバーレイを開く」ボタンを押した後に開くページにカスタムCSSが適用されない不都合を修正。 | |
| v0.0.4 ( 公開) |
配信中のコメント欄のURLにも対応。 | |
| v0.0.3 ( 公開) |
サイズが8KBを超えるカスタムCSSを扱える仕様に更新。 サポートページURLの追加。 | |
| v0.0.2 ( 公開) |
オプションページの変更。 コメント欄URLの入力欄の書式エラー表示を修正。 | |
| v0.0.1 ( 公開) |
初回リリース。 |
コメント
コメントを投稿