[Chrome拡張機能] キャスコメカスタムCSSテスター (キャスコメCSSテスター)
ツイキャスの「ツール・ゲームズ配信ページ」にある「配信ツール向けオーバーレイ」用のURLを使うと、OBSといった配信ツールで、ツイキャスの配信画面にコメント欄を表示して配信する事が出来るうえ、「カスタムCSS」を読み込む事でコメント欄の表示をカスタマイズする事が出来ます。 (👉 「配信ツール向けオーバーレイ」のURLを探せ??)
このオーバーレイはHTMLで構成されているので、URLを普通のWebブラウザのアドレスバーに入力して表示する事も出来ます。 でも、そこにカスタムCSSも読み込んで表示をカスタマイズする事は普通のブラウザではまず出来ません。
そこで、ブラウザ上で好みのCSSを使ってツイキャスの「配信ツール向けオーバーレイ」をカスタム表示可能にするChrome拡張機能
又は略して「キャスコメCSSテスター」、を作ってみました。
個人でコメント欄用のカスタムCSSを作ったり、既存のカスタムCSSに変更を加えたりする際に、OBSを使ってコメント欄の表示を確認していると、毎度、OBSのブラウザソースの設定を開いてカスタムCSSをペーストした後「OK」ボタンを押して設定を閉じてから表示を確認してまたカスタムCSSを編集といった少し面倒くさい工程の繰り返しになります。
このキャスコメカスタムCSSテスター(拡張機能)を使うとブラウザ上でツイキャスのコメント欄をカスタム表示出来るので:
- ブラウザの「開発者ツール」を開いて読み込まれたカスタムCSSのエラーを確認が出来るほか、
- 拡張機能の「ポップアップ」内で読み込まれたCSSを一時的に変更して即座にその変更を確認する事も可能です。
このサイト(メモ帳)で「LINEのチャット画面風」や「質問箱風」といったツイキャスのコメント欄用のカスタムCSSをいくつか公開していて、OBSのブラウザにコピー&ペーストするだけで割と簡単にコメント欄をカスタマイズ出来る様にしています (👉 キャスコメカスタムCSS まとめ)。
でも、それだけではなく、これらのカスタムCSSを出発地点として、コメント欄をもっと個性的にカスタムする時の役に立てばと思い、この拡張機能を作ってみました。
『キャスコメカスタムCSSテスター』
📦Chrome拡張機能 v0.1.2 ( 公開)
インストール
『キャスコメカスタムCSSテスター』は現在、Chromeウェブストアで拡張機能として公開されているので、👆のリンクから、Chromeを始めとするEdge、OpearaやBraveといった、Chromium系のブラウザに追加して使う事が出来ます。
拡張機能の追加方法が確かでない方はこのサイト「メモ帳」の別のページにある説明を参考にしてみて下さい。
主な機能と使い方
１. オプションページ
『キャスコメカスタムCSSテスター』のアイコンをツールバーに固定している場合は、コメント欄が表示されていないタブで、ツールバーの
(コメント欄が既に表示されているタブの場合はこの拡張機能の「ポップアップ」が表示されます。)
オプションページは次の様なレイアウトになっています。
キャスコメCSSテスターの使い方のおおまかな流れとしてはオプションページで
- 「コメント欄URL」と
- 「カスタムCSS」を入力&保存した後、
オプションページの中ほど、カスタムCSSの右上にある ボタンをクリックすると、同じブラウザ上で新くタブが開いて、カスタマイズされたツイキャスのコメント欄が表示されます。 (※: v0.1.1よりボタンの位置がページの中間、右側に変わりました。)
a.「ツール・ゲームズ配信ページ」ボタン
オプションべージ右上付近にある ツール・ゲームズ配信ページ ボタンをクリックすると、ツイキャスの「ツール・ゲームズ配信」のページが別のタブで開きます (要ログイン)。
このページから次に説明する「コメント欄URL」の設定に必要な「配信ツール向けオーバーレイ」のURLをコピーする事が出来ます。
「配信ツール向けオーバーレイ」のURLがページ内のどこに記載されているかは次のメモを参照して下さい
ただ、上記の方法でコピーされるのはツイキャスページのログインに使った自分のアカウント用のオーバーレイのURLになります。
自分のコメント欄でCSSをテストするとなると、場合によっては自分でコメントを送ったりしないといけなくなりますが、実は、オーバーレイのURLは:
というフォーマットになっているので、上の「ユーザー名」の部分を、コメント欄が動いている配信中のユーザーのユーザー名と入替えて、キャスコメカスタムCSSテスターの「コメント欄URL」として使うと、動きのあるコメント欄を借りて自分のCSSをテストする事が出来ます。
b. コメント欄URL
- オプションページ内の「コメント欄URL:」の見出しの下にある入力欄に「配信ツール向けオーバーレイ」のURL、又は、ツイキャスのユーザー名を入力。
- 右端にある ボタンをクリックして保存します。
コメント欄URLは複数の設定の保存が可能で、インストール時は無名前の設定が一つ保存されていて、次の例にある様に、見出し横の緑色の部分に「(無名)」と表示されます。
緑の部分がドロップダウンボタンになっていて、クリックすると登録されている設定の名前が下にリストされて、又、リスト編集用のボタン各種 (名前変更/削除/新規追加)が右に表示されます。
- 下に表示されたリストから表示したい設定の設定名を見つけてクリックするか、
- 右のリスト編集用のボタンから、選択されている設定名への編集動作を1つ選んでクリックします。
リスト編集用のボタンを選択した場合はボタンの表示から編集用の表示に切り替わります。
 |
| 例:「名前変更」ボタン選択時 |
c. URLのプレビュー
d. 背景色を上書きする (v0.1.1以降)
v0.1.1で追加した機能で、チェックボックスを選択✅して有効にするとオーバーレイを表示した際に背景色が横のカラーボックスで指定した色で上書きされます。
bodyタグの背景色属性を指定して(body {background-color: #指定した色;})背景色を変更しているので、同じbodyタグを使って背景を設定しているカスタムCSSを読み込んだ場合は背景が正しく表示されない場合もあるので、その場合はチェックを外してこの機能を無効にしてください。
あくまでも一時的に背景色を変更する機能なので、入力したカスタムCSSをOBSぼブラウザソースに使っても背景色が変わってしまう事はありません。
e. オーバーレイを開く
「配信ツール向けオーバーレイ」と「カスタムCSS」を設定した後、ページ中ほど、カスタムCSSの右上の ボタンをクリックすると、同じブラウザ上で新しいタブが開いてカスタムされたツイキャスのコメント欄が表示されます。
注 コメント欄URLで指定されている値の書式が正しくない場合は、「オーバーレイを開く」ボタンは無効になるのでクリックする事は出来ません。
この方法で新しく開いたタブに表示されるコメント欄には既定値としてオプションページで保存されているカスタムCSSが読み込まれますが、この後にオプションページのカスタムCSSを変更しても既に表示されているコメント欄にはオプションページでの変更は反映されません。
オプションページで変更したカスタムCSSを確認したい場合は、新たにオーバーレイを開く必要があります。
f. カスタムCSS
- オプションページ内の「カスタムCSS」の下の欄にテストしたいカスタムCSSを入力。
(この欄でCSSを編集するよりは、Windowsなら「メモ帳」といった、テキストエディタで編集したCSSをコピー&ペーストする事をお勧めします。) - 右にある ボタンをクリックして保存します。
２. ポップアップ
ツイキャスのコメント欄を表示している時にツールバーにある拡張機能の
ポップアップでは、表示されているコメント欄に既に読み込んでいる「カスタムCSS」を確認出来る他、このCSSを変更して、ページ内にある ボタンをクリックすると表示中のコメント欄のカスタムCSSが更新されます。
ポップアップ内に表示されるカスタムCSSは初めは既定値としてオプションページで保存されたカスタムCSSですが、ポップアップで更新した内容は表示しているコメント欄だけに有効で、変更が別のタブに表示されているコメント欄に反映されたり、オプションページのカスタムCSSとして保存はされる事はありません。
３. 開発者ツール
ブラウザの開発者ツールを使うと、「要素」又は「Elements」といったタブで、読み込まれているカスタムCSSのエラーを確認したり、一時的な変更を加えて表示を確認したりする事が出来ます。
ブラウザの開発ツールの開き方は、ブラウザの種類やバージョンによって操作方法が変わるので全てを詳しく説明は出来ませんが、Chromeを例にするとページ内の気になる要素を右クリックして開いたメニューで「検証」を選択するとブラウザの右側に開発ツールのパネルが開きます。
ブラウザごとの呼び名
| ブラウザ名 | 開発者ツールを開く時のメニュー項目 | 開発者ツールのタブ名 | |
| ページの要素 | コンソール | ||
| Chrome | 検証 | 要素/Elements | 要素/Console |
| Edge | 開発者ツールで調査する | 要素/Elements | コンソール/Console |
| Opera | 要素を検証 | 要素/Elements | コンソール/Console |
開いたパネル内の要素のタブを選択するとページのHTMLタグの構成が表示され、構成の各要素に関連するCSSを確認する事が出来ます。
例
次の例はChrome上で「キャスコメカスタムCSSテスター」を使って、実際のツイキャスのコメント欄を表示した後、「テスト」というコメントが表示されているDVIタグ(tw-commnet-item-commnet)部を右クリックして「検証」を選んだ結果になります:
開発者ツールの「要素」タブにはページの構成要素が表示されていますが、右クリックしたDVIタグに該当する要素(tw-commnet-item-commnet)が水色でハイライトされています。
「スタイル」タブには、右クリックしたDVIタグ(tw-commnet-item-commnet)に関連するCSSがリストされています。
例外もありますが、このスタイルに表示されるCSSのほとんどはマウスでダブルクリックするとキー入力で一時的な変更を加える事が出来て、ブラウザに表示されているコメント欄に即座に反映されるので、CSSを編集する時の確認や参考として使う事が出来ます。 (あくまでも一時的な変更なのでページを再読み込みすると変更前の値に戻ります。)
現在の処、開発者ツールは各ブラウザによって配置や操作性が微妙に違う他、頻繁に更新されている機能で、全てをあまり詳しく説明出来ませんが、CSSやHTMLを理解するのにはとても強力なツールとなっています。
確認されている問題/事例
現在、扱えるカスタムCSSのサイズの上限は約8KBとなっています。- 追記 () バージョン v0.0.5以降からサイズが8KB以上のカスタムCSSを扱える仕様に変更しました。
最高でchrome拡張機能が標準で保存出来るデータの上限(5MB)に近いサイズのカスタムCSSを扱える仕様になっていますが、表示の際にブラウザへの負担にもなるので、なるべく小さいカスタムCSSを使う事をお勧めします。
更新履歴
キャスコメカスタムCSSテスター v0.1.x
| Chrome 拡張機能 | Firefox アドオン | 更新内容 |
| v0.1.2 ( 公開) |
|
|
| v0.1.1 ( 公開) |
|
|
| v0.1.0 ( 公開) |
|
キャスコメカスタムCSSテスター v0.0.x
| Chrome 拡張機能 | Firefox アドオン | 更新内容 |
| v0.0.5 ( 公開) |
サイズが8KBを超えるカスタムCSSを扱える仕様に更新。 | |
| v0.0.4 ( 公開) |
コメント欄URLの入力欄の書式エラー表示を修正。 | |
| v0.0.3 ( 公開) |
拡張機能内の固定リンクのURLの更新。 | |
| v0.0.2 ( 公開) |
カスタムCSSのユーザーインターフェース(UI)の変更。 | |
| v0.0.1 ( 公開) |
初回リリース。 |
追記
OBSのブラウザソースですが、OBSの起動時にオプションを有効にするとChromeブラウザで開発者オプションの情報が確認出来る様になります。
関連ページ
- キャスコメカスタムCSSテスター サポートページ (このページ)
- チューブコメカスタムCSSテスター サポートページ
- TwitchコメカスタムCSSテスター サポートページ
- ブラウザー拡張機能 by kii-memo まとめ
コメント
コメントを投稿