忍者ブログ

気分は野良猫

HTML5CommentGeneratorを あれこれいじったりする人のブログ コメントジェネレーター改と ワイプジェネレーターを公開中

【機能追加】HTML5コメントジェネレーターをいじった(2022/11/05更新 2022/12/31記事修正)

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

【機能追加】HTML5コメントジェネレーターをいじった(2022/11/05更新 2022/12/31記事修正)

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

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

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

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

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

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

次にHTML5コメントジェネレーター改をDLして解凍後、
(デスクトップ・ドキュメント等はOneDriveの自動同期に注意
 コメジェネの場所の設定時に「OneDrive」が含まれてたらアウト)
HTML5コメントジェネレーターのフォルダ内に
CommentGenerator.htmlとCommentGenerator.jsを(サイト毎の表示ならCommentGenerator_multi.htmlも)上書き
及びhcg_setting_ex.exe、setting_ex.xmlを追加。(setting_ex.xmlの同梱廃止)
(中身全部移動させちゃってもOKなんですけどね)
※ブロックの解除が再度必要かも。
(配信ツールでコメジェネを開いてる場合は再起動)

hcg_setting_ex.exe(説明記事はこちら)を開いて、各項目を設定してOKを押す
※いろいろいじりたい人は\ここにいるぞ/より下の追記も読んでね。
setting_ex.xmlをメモ帳等で開き、使用したい項目の数値を変えて上書き保存

※設定内容は付属テキストに記載
ランダムスキンを使う場合や増やす場合は設定ツールを開いて
 スキンフォルダを設定後、OKか適用を押してSkins.xmlを更新させること。(ツールからランダム用のスキン選択可能に)
 (「_(数字)」を付けた画像はランダムのリストからはスルーなので安心を)
※setting.xml、setting_ex.xml、init.xmlを削除し設定ツールを起動すると
 デフォルトが入力されるので、そのままOKや適用すると初期状態に戻せる。
───────────────ここまで───────────────

DLはあるか!?
\ここにいるぞ/

(一応残しておく過去バージョンはこちら)
※キャンバス(表示エリア)の高さと幅の設定をなくして
 配信ツール側で設定したサイズを表示エリアにするので、
 表示されなくなった人は切り取りや画面外を確認してください。
 なお、初期表示位置は表示エリアの一番下です。(2022/10/16)

※Twitterで公開していたβ版を使っていた人、
 久しぶりの更新の人は上書き後に設定ツールを開いてから
 「OK」か「適用」を押して設定の保存をしてください。
 (2022/10/05)
※「createjs.min.js」を入れたので、それもコメジェネフォルダへ
 追加してください。(2022/03/21)
 複数設定を使っている方は設定追加の横にある
 更新ボタンを押してください。(2022/03/22)
※DL先をDropboxからOneDriveに変えました。(2021/05/04)
※setting_ex.xmlの同梱をやめたので全て上書きしてもOKですが
 hcg_setting_ex.exeを開いてOKや適用で保存するのを忘れずに。(2019/02/20)

hcg_setting_ex.exeの説明書きました


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

━更新履歴的なもの([追記]は下部に説明あり)
 2022/11/05 スキン周りがバグだらけだったので修正、開始位置の修正
 2022/10/23 表示状態毎のスキンの設定を追加、画像処理の関数化
       改行時のスペース削除、サイト名の付け方の修正
       マルチ版の統合(_multiを入れているが、ない方でも作動可能)
 2022/10/16 キャンバスの幅と高さの設定を廃止(配信ツールの設定を取得)
       処理の一部見直し
 2022/10/01 ランダムカラーが全然機能していなかったので修正
       名前部のサイズや縁の太さの変更の追加
 2022/09/25 ランダムカラーを設定していない時の処理が戻っていたので修正
       表示時間の計算式がまだ怪しかったので修正
 2022/09/24 表示時間の計算式が怪しかったので修正
 2022/09/08 ランダムカラーを設定していないと表示できてなかったので修正
 2022/09/05 XSplitとN Airにて最新版を使うと表示されてなかったので修正
 2022/08/20 ランダムの設定ボタン追加、色周りのランダム設定ウィンドウ追加
       縁の色が反映されてなかったので修正(実は数週間前)
       表示・選択による入力欄の無効化などの調整、マルチ版のHTML修正
 2022/07/02 一部の設定が反映されてなかったので修正
       ※元ファイルの更新中だったのでツールに機能追加できてない隠し機能あり
 2022/06/18 囲み文字に改行入れる場合の修正
 2022/06/05 スキンと背景色を合成するかタイムスタンプにするかに変更
       マルチコメビュに合わせて、ミクチャの設定追加
 2022/05/28 スキン画像の幅の方が大きいと一部読み込めてなかったので修正
       VL版のスキン幅「FIX」の対応忘れ修正
       BSPがなくなってるのでエモーション表示・非表示に変更(ニコ生専用)
 2022/04/24 指定時間後から消えるまでの時間が短かったので修正
 2022/03/22 別設定のHTMLの一括更新ボタン追加
 2022/03/21 CreateJSの鯖が息をしていないので一時的な対処
 2021/11/27 徐々に加速に対角線での移動を追加(従来のは[等倍])
 2021/11/21 色の適用範囲がツールで読み込めていなかったので修正
 2021/11/03 サイト別色のコメント色だけ空白(黒)になっていたので修正
 2021/10/24 配信サイト別の名称の位置設定追加
       フェードイン・アウトの係数とサイト別色の読み込みミスを修正
 2021/10/10 時間で消さない+なめらかに移動が時間で処理が停止していた修正の修正
 2021/10/09 コテハン・コメント部を分けての色変更を可能に、
       VL版統合、サービス終了サイトの整理
 2021/07/01 スキン画像が指定したスキン幅の半分だった時の引き伸ばしの修正
 2021/06/16 削除部の記述忘れの修正
 2021/06/13 設定ツールの配置の修正、イン・アウトの数値修正
 2021/06/12 イン・アウトに拡縮機能追加、カスタム移動にBACK追加[追記]
        基準点の変更追加、カスタム移動で角度変更対応、設定ツールの改修
 2021/05/04 忍者ブログに移行するための、アプデ誘導先の変更
        ダウンロード場所をDropboxからOneDriveに変更
 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% oaminghcg)の削除ボタン追加
 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」と入れると前の値のまま固定。
 終了位置に「BACK」と入れると開始位置の数値(RNDでも可)に移動。(2021/06/12)
 ※例(古いコメントを下に~が入ってるとわかりやすい)
 ・開始位置の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モード」にチェックを入れると
 
 こんな感じで、名前部とコメント部に間が開いて表示される(画像は「_VL_multi」)
 (サイト名の表示位置は後日変更あるかもしれない)
 設定は名前部が『基本設定の名前表示の長さ』、
 コメント部の長さは『詳細設定の文字の最大長』がそのまま使われる。
 なので、本体の横幅はその2つの合計値に空白等を考慮して設定。

【コメント幅に合わせた背景幅の設定方法】
 『本体設定のスキン幅』を空白にするか「FIX」(大文字小文字区別なし)と入力すると、
 スキンの幅が文字の長さ+左余白になるように拡縮されるようになる。
 (CommentGenerator.htmlを直接いじる場合は、
  51行目のHcgFormat.SkinWidth =の右に「"FIX"」(「"」で囲んで大文字で「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回使用)
 改行なしの場合は半角スペースを挟む。
PR

コメント

プロフィール

HN:
彼岸扇花
性別:
非公開