【機能追加】HTML5コメントジェネレーターをいじった(2021/02/07 更新)

とある放送を見てたら、kilin氏(http://www.kilinbox.net/)制作の
HTML5コメントジェネレーターに欲しい機能があるようだったので、
いろいろ追加しちゃったらいじるの止まらなくなったのでいっそ公開(´∀｀)
(ダウンロードは下の方にいるぞ)

追加した機能(一部を除き個別ON/OFF化)：

　設定ツールを追加しました

　XMLで追加
　　透明度設定・フェードイン・フェードアウト可能New
　　コメントの移動をカスタマイズ可能(ランダム可)
　　コテハンによるコメントの文字色変更
　　コメント内から直接色変更可能
　　長いコテハンの省略
　　コテハンなしの人を非表示可能New
　　色変更コマンドのコメジェネ内非表示化
　　放送主のコメントのみ移動の左右反転
　　コメント移動パターンの変化(等速移動、徐々に移動New)
　　新しいコメントの方を動かす
　　コメント追加時に古いコメントは下へ移動
　　コメント追加時の移動をなめらかにさせる
　　コメントの右揃え・中央揃え
　　長いコメントの改行(改行時の行間設定、最大回数の指定、位置の調整付き)
　　改行時用のスキンも使えるように
　　コメントに合わせた背景の幅に設定可能New
　　コメントを1文字ずつ表示(表示間隔を直接指定)
　　放送主用の色指定
　　背景色の代わりにタイムスタンプを表示可能(現在Georgia固定)
　　Multi版でRyu氏のマルチコメビュの対応サイトに対応(一部サイトは更新待ち)
　　Multi版で名前表示なしでもサイト名が出るように
　　Multi版でサイト毎に色やスキンを設定できるように
　　コメビュ風表示版(VL版)作成(仮)New
　XML、及びCommentGenerator.htmlからすぐ設定できるように改変
　　キャンバスの大きさ変更
　　コメント部分の囲み文字の変更
　　デモモードの設定
　　読み込み間隔の変更New
　内部処理
　　なぜか最新のOBSでも起動(謎)
　　設定を別にしたコメジェネが生成可能New
　　デモモードのコメントが50％で放送主コメになるように
　　完全に同時に来たコメントの処理可New
　　表示させるパーツのコンテナ化
　　スキンのアニメーションを可能に
　　ニコニ広告等の文章の改変(仕様変更により現在作業中)
　　枠外に出たコメントの削除
　　読み込みエラーの確認画面の抑制
　　Multiのサイト別処理をCommentGenerator.js内に移動
※CommentGenerator_multi.htmlも対応版同梱(サイト毎の表示文字変更可能)

…正直、需要なさそうな機能が多いorz

改行時のスキンについて
　設定ツールの「スキンを対応させた改行」を選ぶと、改行が発生した時に
　設定してるスキン名に「_(改行回数)」がついたスキンが使われるようになる。
　(例えばSkin_maid.jpgだと1回改行するとSkin_maid_(1).jpg、改行なしは不要)
　見つからない場合は「_(○)」がついてないスキンの縦を引き伸ばす。
　作る際はスキンの縦サイズ×行数で。アニメーションも可能。
　コテハンからのスキン指定やランダムスキンでも可能、用意が大変だけど...(　= =)
　コメント来た時の移動量は設定したスキンサイズ×行数(文字の大きさ等で変化なし)。
　ちなみに、他の改行方法には対応させてませんm(_ _)m

スキンのアニメーションについて
　
　こんな感じでコマを縦に並べた画像を読み込ませるだけで
　自動的にアニメーションするように。
　※FlashコメジェネのアニメーションスキンはSWFなので使用不可。
　
付属のテキストにも書いていることだが
一応ここでも使用できるまでを書いておこう(´･ω･`)
(2018/12/02追記)
風山ヒエン氏のこちらのブロマガにて
わかりやすい説明を書いて頂いてました(感謝)

───────────────ここから───────────────
まずHTML5コメントジェネレーターを用意して使用できるようにしませう。
(http://www.kilinbox.net/2016/01/HCG.html)
※一部配信サイトはこちらのMultiCommentViewer等もDLして
　プラグインを設定してください。

次にHTML5コメントジェネレーター改をDLして解凍後、
HTML5コメントジェネレーターのフォルダ内に
CommentGenerator.htmlとCommentGenerator.jsを(サイト毎の表示ならCommentGenerator_multi.htmlも)上書き
及びhcg_setting_ex.exe、setting_ex.xmlを追加。(setting_ex.xmlの同梱廃止)
※ブロックの解除が再度必要かも。
(配信ツールでコメジェネを開いてる場合は再起動)

hcg_setting_ex.exe(説明記事はこちら)を開いて、各項目を設定してOKを押す
※いろいろいじりたい人は＼ここにいるぞ／より下の追記も読んでね。
setting_ex.xmlをメモ帳等で開き、使用したい項目の数値を変えて上書き保存
※設定内容は付属テキストに記載
※ランダムスキンを使う場合や増やす場合は設定ツールを開いて
　スキンフォルダを設定後、OKか適用を押してSkins.xmlを更新させること。(ツールからランダム用のスキン選択可能に)
　(「_(数字)」を付けた画像はランダムのリストからはスルーなので安心を)
※setting.xml、setting_ex.xml、init.xmlを削除し設定ツールを起動すると
　デフォルトが入力されるので、そのままOKや適用すると初期状態に戻せる。
───────────────ここまで───────────────

DLはあるか！？
＼ここにいるぞ／

※仕様変更により、アプデでも上書き後に設定ツールを開いてから
　「OK」か「適用」を押して設定の保存をしてください。(2020/06/06)
※またウイルス対策ソフトに引っかかったので再更新しましたorz
　なお、変更点はありません。(2020/05/12)
※「Ver.0.7.6.0」でサイト毎の縁の色を指定すると縁を作成していませんでしたorz
　修正して「Ver.0.7.6.1」として公開したのでお試しくださいm(_ _)m(2020/04/15)
※setting_ex.xmlの同梱をやめたので全て上書きしてもOKですが
　hcg_setting_ex.exeを開いてOKや適用で保存するのを忘れずに。(2019/02/20)

hcg_setting_ex.exeの説明書きました

映らない・設定がわからない・バグ報告・追加要望・カスタムの設定教えて等は
ここのコメント欄、もしくはTwitter(@twinstraycat)へのリプライで
※なお、Twitterにて「コメジェネ」で常にサーチしてたり( ＾ω＾ )

━更新履歴的なもの([追記]は下部に説明あり)━
　2021/02/07 TLS/SSLエラーが出てたので修正(要[.NET Framework4.7.2]になったかも)
　2020/11/15 時間で消さずになめらかに移動させても時間で処理が停止していたので修正
　2020/10/21 スキンフォルダを選択しないとランダムスキンが使えなかったので修正
　2020/09/21 カスタムでの移動量に改行対応の追加
　2020/09/15 コメNoが「-1」の時にループしてたので修正、改行があるコメの扱いの修正
　2020/07/26 スキン幅の記述ミスの修正、文字幅に合わせた可変背景幅の追加[追記]
　2020/06/16 徐々に加速＋なめらかに移動で、コメント追加時に効いてなかったので修正
　　　　　　　 新規コメントが来ると、他のコメントの不透明度の減衰機能追加
　　　　　　　 スキンをキャンバスの幅に引き伸ばしの削除(代わりにスキン幅設定追加)
　2020/06/07 コメント追加時の移動が一部おかしかったので修正
　　　　　　　 内部フォルダ削除のバッチファイル追加(必要ない時に使わないように注意)
　2020/06/06 等速移動の欄を移動パターンに変更、徐々に加速の追加(設定の名前変更)
　　　　　　　 カスタム設定に徐々に加速用数値の追加
　2020/05/31 別設定の読み込みができていなかったので修正
　2020/05/30 別設定の記憶ができていなかったので修正
　2020/05/09 本家のツールで一度設定しないとエラー出てたので修正
　　　　　　　 内部フォルダ(％appdata％\roaming\hcg)の削除ボタン追加
　2020/05/05 サイト毎スキン選択画面のタイトル修正、ランダムスキンを個別で設定可能に
　　　　　　　 別設定がリスト化されてなかったので修正、別設定のコメジェネ生成の修正
　2020/04/25 マルチ版が動かなかったので再生、VL版の縁の記述間違いの修正
　2020/04/18 ランダムスキンを使う時に日本語があるパスだと読み込めなかったので修正
　2020/04/15 サイト毎の縁の色指定で縁が作成されていなかったので修正
　2020/03/28 サイト色とユーザー色を同じ引数で扱ってたので個別に変更
　　　　　　　 コメビュ風版でコテハン部の縁に記述ミスがあったので修正
　2020/03/24 透明度設定を全体・背景部・文字のどれに割り当てるかに変更(個別は不可)
　2020/03/22 ニコニ広告が変わってたので修正、マルチコメビュの空ハンドルに対応[追記]
　2020/03/20 追加設定を作るウィンドウを×で閉じるとエラー出てたので修正
　2020/03/08 マルチ版の記述ミスの修正(21:55)
　　　　　　　 サンプルがズレてたのを修正、コメビュ風表示版同梱[追記](18:55)
　　　　　　　 タイムスタンプのチェックがはずれなかったので修正
　　　　　　　 直出しでフェードアウト可能に変更、改行時の文字揃えの変更する設定追加
　2020/02/13 Mildomの設定が反映されてなかったので修正
　2020/01/31 フェードイン・フェードアウトの追加、同時に来たコメントの処理修正
　　　　　　　 Comment.xmlの読み込み間隔の変更を可能に
　2019/09/29 改行時の計算ミス修正、表示位置の調整追加
　2019/08/19 Mixerのスキン設定の修正、表示位置の修正、別設定のテキスト追加
　　　　　　　 フォルダを選択する際に自身のフォルダ位置を取得に、他にも小修正
　2019/08/17 枠同士の空白設定追加、コテハンなしの人を非表示可能に
　　　　　　　 別設定のコメジェネの生成追加、特定条件での表示バグ修正
　2019/03/06 今更ながら設定ツール起動時にアップデート確認搭載
　2019/03/03 文字幅の移動での改行でもスキンの縦幅を可変に、マルチ版の処理の調整
　2019/02/24 マルチコメビュからのserviceに先対応(Periscope･Twicas･LINE LIVE)
　　　　　　　 サイト毎の色の設定が正確に動いてなかったので修正
　2019/02/23 マルチにMirrativ･ふわっちを追加、serviceを渡してなかったので修正
　2019/02/20 スキンの横幅を常時キャンバスの横幅に合わせるように変更(強制拡縮)
　　　　　　　 背景色の代わりにタイムスタンプを表示させる設定追加[追記]
　2019/02/16 等速移動で記述ミスあったので修正、ニコニコ風移動時の速度変化[追記]
　2019/02/11 スキンが読み込めなかった場合に時間がかかってたのでタイムアウト処理
　　　　　　　 マルチ設定に棒読みとサイトない場合の追加、ハンドルネームまわりの修正
　　　　　　　 設定ファイル読み込み関係の挙動変更(コンソールのログ頻度低下)
　2019/02/08 マルチ用のサイト別に付ける文字で空白にすると改行が入ってたので修正
　2019/02/06 マルチ版で名前なしでのサイト名表示、色やスキンをサイト毎に設定可能に
　　　　　　　 マルチ設定が有効になってなかった修正
　2019/02/01 前回追加部分の整理・見直し等
　2019/01/28 スキンに対応した改行でスキンがない場合に引き伸ばすように変更
　2019/01/27 改行時の表示位置の計算式が間違っていたので修正
　2019/01/26 改行に関する計算方法の変更、改行の設定を1つ削除[追記]
　2019/01/23 ツール等の僅かな修正、改行が付いてるコメントの処理の設定追加
　　　　　　　 改行が付いてるハンドルネームの場合、改行前までにするように変更
　2019/01/20 名前が長い場合にバグるので逆に長い名前を削る機能追加
　　　　　　　 囲み文字の始点が空白だと改行やら入ってたので活かしつつ修正[追記]
　　　　　　　 設定ツールの名前なしと敬称の設定が逆だったので修正、表示位置変更
　2019/01/18 改行時のスキンの高さを変えるのが全改行設定で効いてたので修正
　2019/01/07 ツールでそれなりの計算の改行にすると行間が設定できなかった修正
　2018/12/25 JSのVerが消えてた修正、HTMLのタイトルにVerを付けるようにした
　　　　　　　 等速関係の修正、一部機能を分離して新しいコメントを動かす追加[追記]
　2018/12/24 コメントの移動を等速にさせる追加、削除タイミングの再変更[追記]
　2018/12/20 ハンドルネームからのスキンが動いてなかった修正、改行スキン対応
　2018/12/17 空白コメントは表示しないようにしてみるテスト
　2018/12/15 直出し後に外に出てたので出ないように変更、削除タイミングを変更[追記]
　2018/12/13 動作部分の整理、カスタム移動にランダム追加[追記]
　2018/12/10 盛大に記述をミスってた(表示位置・マルチの名称設定)ので修正
　2018/12/08 パーツのコンテナ化により、移動のカスタマイズ追加[追記]
　2018/10/02 一部配信サイトでの不具合修正・設定ツールにマルチ用項目追加
　2018/10/01 設定ツールを使うとランダムスキンで表示できなくなる事があったので修正

━追記━
【マルチコメビュの空ハンドル】
　マルチコメビュでは、ハンドル(コテハン)がない場合でも
　コメントナンバーを取得せず強制的に空白のハンドルが付けられる。
　なので、自動的に名前のない場合の部分の文字列を使用するようにした。
　それに伴い、名前指定する場合以外でも入力欄を有効化。

【移動の等速について新しいコメントの方を動かす】
　新しいコメントが来ると、新しいコメントの方の表示位置が変わる。
　※これにより表示行数が大きくてキャンバスをはみ出すコメントが出た場合、
　　最初の位置に戻すようになってる(改行部分がはみ出すことはあるかも)
　なお、なめらかに移動を入れると斜めに入ってくる。

【カスタマイズの動き】
　キャンバスの位置が基準ではなく、通常表示される位置が基準。
　例えば改行なしで3行表示ならX0,Y64を基準にカスタム設定の数値が足される。
　コメント追加時の移動距離に関してはその数値分のみ足される。
　(スキンサイズや改行時の移動等無視)
　※コメント追加時の移動もいじる場合は[古いコメントを下に]を使うと
　X0,Y0になってキャンバス基準で設定可能。

【ランダムの使い方(カスタマイズ部)】
　「RND(数値,数値)」で範囲内のランダム、「RND(数値:数値)」で2択、
　併用は「RND(数値,数値:数値,数値)」(2択のどちらかは数値1つでも可)。
　次の移動場所に「KEEP」と入れると前の値のまま固定。
　※例(古いコメントを下に～が入ってるとわかりやすい)
　・開始位置のXは512、YにRND(0,64)、移動先のXは0、YにKEEPと入力で
　　0～64のいずれかの高さで右から水平に入ってくる。
　・開始位置のXをRND(-512:512)、Yは0にして移動先のXが0、Yも0だと
　　左右のどちらかから入ってくる。(入ってきた方向の記憶は不可)
　・移動先のXとYが0で終了位置のXに512、YにRND(-150,-50:50,150)と入れると
　　表示が終わると右上か右下へいろんな角度で飛んでいく。

【ニコニココメント風の設定】
　まず表示時間を0にして、最大表示数と文字の最大長も大きくしておく。
　新しいコメントの方を動かすと古い(新しい)コメントを下に～と等速移動をチェック、
　流れる方向を「カスタム」にして　開始位置のXをキャンバスサイズ(初期512)でYは0、
　終了位置のXをマイナスを付けたキャンバスサイズ以上でYは0に設定すると
　ニコニココメント風に流れる。(速度調整は移動先→終了位置の係数で)
　なお、この設定だと移動先の座標と開始位置→移動先への係数は無視されます。
　※表示時間0・等速移動・カスタムをフラグにコメントの長さに応じて移動速度を変化。
　開始と終了位置のXのプラスマイナスを入れ替えると左から右へも。

【コメビュ風表示について】
　まず、同梱の「H5CG_VL.zip」を解凍して
　中の3つのファイルをコメジェネのフォルダに入れる。
　あとは各種設定し、VL版のHTMLを配信ツール等で読み込むと
　
　こんな感じで、名前部とコメント部に間が開いて表示される(画像は「_VL_multi」)
　(サイト名の表示位置は後日変更あるかもしれない)
　設定は名前部が『基本設定の名前表示の長さ』、
　コメント部の長さは『詳細設定の文字の最大長』がそのまま使われる。
　なので、本体の横幅はその2つの合計値に空白等を考慮して設定。

【コメント幅に合わせた背景幅の設定方法】
　『本体設定のスキン幅』を空白にするか「FIX」(大文字小文字区別なし)と入力すると、
　スキンの幅が文字の長さ＋左余白になるように拡縮されるようになる。
　(CommentGenerator.htmlを直接いじる場合は、
　 51行目のHcgFormat.SkinWidth =の右に大文字で「FIX」と入れてください)

【一文字ずつ表示の動作】
　コテハンを表示させる場合は最初からコテハンありで、
　コメント部は囲み文字のみを表示させて大体移動完了してから表示開始。
　移動時間の計算は移動の係数(カスタムは開始から表示位置までの係数)を利用。
　(ちなみに式は0.1/係数×30/フレームレート×2.2秒)

【表示時間、削除タイミングについて】
　表示時間は入り＋動かない時間、枠外に出る時間は別。(確か本家でも同じ)
　上の式でも書いたが初期状態(係数0.1、30FPS)で入りと出が2.2～2.3秒くらい、
　例えば10秒と指定すると動かないのは8秒弱で全体の時間は12秒強。
　削除タイミングは(2.5)3秒を基準に係数とフレームレートで変化。
　(一文字ずつ表示の式とほぼ同じ)
　なお直出しでは0秒なので表示時間ちょうどで消える。

【タイムスタンプについて】
　枠の再生時間ではなく、コメントを受信した時間を右下に表示。
　ただし、フォントやサイズは固定(Italic Georgia スキンの高さ-2px 太さ2)。
　色は背景色として選んだ色(ランダムならランダム)で
　コテハンやコメントからの色指定、サイト毎の色指定も
　文字色として設定していなければ可能。

【広告等の文章の扱い】
　広告は1コメント目で「広告:広告者さん(〇〇pt)[広告コメント]」
　(コメントがない場合はコメント部省略)
　2コメント目で「累計：〇〇pt」と、
　インフォ系は[/info ○](○は数字)の部分を省略して表示させるように変更。
　現在は2コメント目がなくなってる模様。
【重ならないように改行させる時の仕様】
　改行コメントはスキンサイズの2倍移動させるのではなく、文字のはみ出た分だけ
　追加で移動させているのでフォント＋縁が小さければ移動量が抑えられる(´ρ`)
　(逆にスキンサイズ以上になっているとスキンサイズの2倍以上動く)
　それなりの計算で移動[4]の改行は下端が下記の表の位置にあわせて、
　移動が精密な計算[5]の改行だと表示行分が全て改行1回のコメントの場合に
　大体Y0の位置になる。(古いコメントを下に～にしているとどちらも同じ移動)
　隙間に問題が起こったので文の高さ×改行数で移動[4]に統合。
　正確な式は上余白＋(フォントサイズ＋行間)×改行数。
　※スキンを対応させる改行[6][5](に変更)は改行時にスキンサイズの2倍の移動

【表示数と改行ありのキャンバス&ソースの高さ表】
　最大表示数を大きくした時や改行を使った時に表示されないと何度か言われたので、
　とりあえずキャンバスの高さと配信ツールでのソースの高さを表にしてみた。
　設定する時はこれ以上の大きさになっていれば大体見えるかと。
　新しいコメントを移動で追加した部分がそのまま使えたので現在はキャンバスの高さを
　超えるとキャンバスの下端に合わせるようになっている。(改行多いとはみ出すかも)
　一応、改行なしと全コメ改行1回を全て表示させるための高さとして残しておくけど。
　※スキンの高さ32の場合、フォントサイズで誤差あり
　　最大表示数　　　改行なし　　　改行あり
　　　　 3　　　　　 　 96　　　　　192
　　　　 4　　　　　　128　　　　　256
　　　　 5　　　　　　160　　　　　320
　　　　 6　　　　　　192　　　　　384
　　　　 7　　　　　　224　　　　　448
　　　　 8　　　　　　256　　　　　512
　　　　 9　　　　　　288　　　　　576
　　 　 10　　　　　　320　　　　　640
　計算間違ってたらスマソ

【囲み文字の始点の空白について】
　改行ありだと名前とコメントの間に改行を挟む。(改行回数1回使用)
　改行なしの場合は半角スペースを挟む。