つぶやき風配信者コメント

概要

動画配信中、視聴者にメッセージを伝えたいと思ったことはありませんか？
例えば、『今、○○に挑戦中！』や『△△を入手するために××を狩猟中』などなど。

動画の概要欄に書いても視聴者はほとんど読んでくれませんし、聞かれるたびに答えるのは面倒です。
このオーバーレイを使えば配信者コメントを画面上に良い感じに表示してくれます！

html、CSS、Javascript等の勉強のためにだいぶ前に作ったやつなんですが、もったいないので公開します。

使用イメージ

※音が出ます（約 20 MB）

ダウンロード

DOWNLOAD

更新履歴

日付 バージョン 概要
2020/03/13 1.0 初版リリース

改変、再配布

そのまま再配布するのはNG。
ソースを改変するのはOK。好きなようにカスタマイズしちゃってください。

改変したものを配布したい場合は『あむぶろ』をクレジットするのと、このページのリンクを張ってください。

使い方

OBSの設定

  1. OBSを開き、ソースから『ブラウザ』を追加します
  2. わかりやすい名前を設定し、OK
  3. 『ローカルファイル』にチェックを入れ、『index.html』を指定し、OK
    幅や高さはお好きにどうぞ（わからなければデフォルトでOK）
  4. 左上に表示されればOBSの設定完了です

コメントを書き換えてみる

  1. コメントを書き換えるとき、ルートフォルダにある『message.json』を修正します
  2. オプションについては以下の表を参照してください
    オプション 省略 説明
    icon 不可 アイコン画像
    ローカル領域はもちろんURLも指定可能
    msg 不可 コメント
    <br>タグを挿入すれば任意で改行も可能
    bgcolor 可
    初期値: #edf1ee    		 吹き出しの色
    カラーコードで指定
    textcolor 可
    初期値: #444    		 文字色
    カラーコードで指定
  3. 修正が完了したら、保存すればOK！
    コメントが切り替わるタイミングで『message.json』を再読み込みするので、OBS側で再読み込みするなどといった特別な操作は不要！

表示方法を変更してみる

  1. 表示方法のオプションをいくつか用意しました。
    表示方法を変更する場合は、ルートフォルダにある『setting.json』を修正します
  2. オプションについては以下の表を参照してください
    オプション 省略 型 説明
    random 不可 boolean 表示するコメントの順番
    true: 順番関係なくランダムで表示します
    false: 『message.json』に記載された通り、上から順番に表示します
    interval 不可 int コメントの切り替えタイミング
    指定された時間ごとにコメントを切り替えます
    ミリ秒(1秒 = 1000ミリ秒)で入力
    font.
    size    		 不可 string 文字のサイズ
    animation.
    furufuru    		 不可 boolean ふるふるアニメーションのON/OFF
    true: 一定時間でアイコンがふるふる動きます
    false: ふるふるアニメーションをOFFにします
    animation.
    fade    		 不可 boolean フェードアニメーションのON/OFF
    true: フェードしながらコメントが切り替わります
    false: フェードをOFFにします
  3. 修正が完了したら、保存すればOK！
    設定ファイルは初回起動時のみ読み込まれるので、すでにOBSで設定済みの場合は『現在のページを再読込』をしよう！

Q&A

エラーメッセージについて

○○○.jsonが壊れているため、スクリプトを実行できませんでした。

表示されているjsonファイルが存在しないか、形式が正しくありません。
○○.jsonが存在することを確認しましょう。
また、記載した内容が正しくJSON形式で記載できているか確認してください。
なお、こちらのサイトで簡単にチェック可能。

よくあるJSON間違え

index.htmlをGoogle Chromeで開いたんだけど何も表示されない

Javascriptの一部動作がGoogle Chromeに許されていないので通常状態だとJavascriptが動作せず、正常に表示されません。
Edgeでは正しく表示される模様。

Chrome厳しすぎるぜ。

配信が重くなる

ブラウザソースは結構リソースを使うらしいです。
エンコーダーの調整等をしてみて、それでもダメならマシンのパワー不足ということで諦めましょう。

一応自分でもテスト配信してみて問題ないことを確認しています…。