OBSにYoutubeコメントを表示するときのCSS調整に便利なエディタ「Youtube Comment Style Editor」

2021/04/07 00:06ツール

Youtube Comment Style EditorというYoutubeコメントカスタマイズするのに特化したCSSエディタを作りました

開発の背景

OBSにYoutubeコメントを表示することはよく行われますが、その見た目のCSSを編集するのはなかなか難易度が高いです

多くはChat v2.0 Style Generator 日本語版を用いて表示内容や文字、背景色などを変更してOBSのブラウザ表示機能を使って表示していることかと思います

そこから、大きなレイアウト変更や見た目の編集をするためには、Youtube Liveで実際にコメントを表示し、
HTMLなど確認しつつ試行錯誤しながらCSSを修正し、OBSで確認する、というような手順を繰り返します

これは非常に手間がかかり、難易度も高いです
実際にWeb屋の僕がやっても非常に手間がかかる作業だと感じたぐらいです

そこでCSSをリアルタイムにプレビューしながら編集できるエディタが必要ではないかと思い作りました

ダウンロード


Windows版(64bit)

MacOS版

インストール

このアプリは野良アプリのため、ダウンロードとインストール時に警告が表示されることがあります


変なコードは入っておりませんので、右の矢印アイコンをクリックして「継続」を選択してダウンロードを継続してください

Windowsの場合

ダウンロードした「Youtube Comment Style Editor Setup.exe」を実行してください
すると次のような警告が出ますので、「詳細情報」をクリックして表示された「実行」ボタンをクリックしてください

あとは画面に従ってインストールを完了させてください

MacOSの場合

ダウンロードした「Youtube Comment Style Editor Setup.pkg」をクリックすると次のような警告が出てインストールできません


インストールするためにはpkgを右クリックして「開く」をクリックしてください


すると、警告が表示されますが、「開く」を選択してください

あとは画面に従ってインストールを完了させてください

使い方

起動すると左側にCSSを書くエリア、右側にプレビューが表示されます

Chat v2.0 Style Generator 日本語版などで作成したCSSを左に貼り付けてからCSSを調整すると手早くカスタマイズすることができます!

右上の「実際の配信から」では今配信されているライブのコメントを使ってプレビューができます
こちらのプレビューは実際のものをそのまま使うため、テンプレートよりも再現性が高いプレビューになります
まずはテンプレートで調整した後に、実際の配信からを使って、ライブコメントをプレビューして最終確認するとよいでしょう

そして出来上がったCSSをOBSのブラウザソースのCSSのところにコピペしたら完成です!

使い方やYoutubeコメントのHTML,CSSの当て方などについては配信で説明していますので、こちらもご覧ください


お願い


インストールの警告を外すためには年間数万円の維持費がかかるため、今回は行っておりませんが
使って頂ける方要望をたくさん頂けた際には設定したいと思いますので、応援・要望・不具合報告などお気軽に@AstieDogまでコメントくださいませ

また開発のモチベーションになりますので、Twitterのフォローチャンネル登録してもらえると嬉しいです!

更新履歴


2021.04.07 1.0.1

  • アプリ画面にDevToolsが表示されてしまっていたのを修正


2021.04.06 1.0.0

  • 「実際の配信から」で読み込みするとエラーになるのを修正
  • CSSの構文エラーになるとそれ以降のスタイルがプレビューに反映されなくなるのを修正


この記事の作者
アスティ

ASTIE(アスティ)

バーチャルプログラミング犬

2021年2月生まれ
JavaScriptが得意なシェルティでWeb制作の情報を発信中!

プロフィール