html5コメジェネで、配信プラットフォーム毎にスキンを切り替えて表示

経緯
・[目的]多重配信において、各配信サイトでのコメントをまとめて表示したい。
・kilinさん作html5コメントジェネレータがマルチプラットフォーム対応してる（凄い）
・はなげさんがコメントの投稿元をコメジェネに追記出来るように改造する方法を公開
　→どの配信サイトからのコメントなのか一目瞭然！

…経緯を書いていたら目的が既に達成されていることに気づいてしまいましたが…まぁ、あれです。プラットフォーム毎にスキンを変えられたらもうちょっと見栄えを良くすることが出来るんじゃないかなと。

てわけで適当に弄ってたらなんか上手くいったので、備忘録として残しておきます。

（初期設定は済ませ、正常にコメジェネが作動している、をスタート地点とします。）


1. コメジェネ内のskinsフォルダを開き、画像ファイル名を以下のように変更します。
skins_00_basic.png

skins_01_nico.png　[ニコ生]

skins_02_youtube.png　[Youtube live]

skins_03_twitch.png　[Twitch]

skins_04_fresh.png　[FRESH!]

skins_05_abemafresh.png　[Abemafresh]

skins_06_openrec.png　[OPENREC]

画像の中身は適切なものに変更して下さい。
通し番号の後ろは自分が判別できる名前であれば結構ですが、コメジェネ側でアルファベット順に読み込まれるので、通し番号は付けて下さい。

2. hcg_settingを開き、スキンの設定を「ランダム」にします。フォルダのパスは、コメジェネのフォルダ内にある「skins」にしておいて下さい。


3. CommentGenerator_multi.htmlを開きます。メモ帳で開くと体裁がかなり崩れるので、高機能なエディタ（VSCode、Mery等）を使用することをおすすめします。


4. 109行目辺り（以下のような記述がある所）

if(xml[i].getAttributeNode("service").value == "nicolive") {
handle = "【ニコ生】" + handle;
～

を、

//ここから
var num_plat = 0;


if(xml[i].getAttributeNode("service").value == "nicolive") {
 handle = "【ニコ生】" + handle;
 num_plat =1
} else if(xml[i].getAttributeNode("service").value == "youtubelive") {
 handle = "【YouTube】" + handle;
 num_plat =2
} else if(xml[i].getAttributeNode("service").value == "twitch") {
 handle = "【twitch】" + handle;
 num_plat =3
} else if(xml[i].getAttributeNode("service").value == "FRESH") {
 handle = "【FRESH!】" + handle;
 num_plat =4
} else if(xml[i].getAttributeNode("service").value == "AbemaFresh") {
 handle = "【FRESH!】" + handle;
 num_plat =5
} else if(xml[i].getAttributeNode("service").value == "OPENREC") {
 handle = "【OPENREC】" + handle;
 num_plat =6
}
//ここまでを追記しただけ

に、その下の

var CGen = new CommentGenerator(handle, fixComment(xml[i].firstChild.nodeValue), HcgFormat, TxtFormat);

を、

var CGen = new CommentGenerator(handle, fixComment(xml[i].firstChild.nodeValue), HcgFormat, TxtFormat, num_plat);

に書き換え、上書き保存します。


5. CommentGenerator.jsを開き、最初の方にある

function CommentGenerator(Handle, Comment, hcgFormat, txtFormat)

を、

function CommentGenerator(Handle, Comment, hcgFormat, txtFormat, num_plat)

に書き換え、118行目辺り

var filename = xml.getElementsByTagName('skin')[
Math.floor(Math.random() * xml.getElementsByTagName('skin').length)
].firstChild.nodeValue;

を、

var filename = xml.getElementsByTagName('skin')[num_plat].firstChild.nodeValue;

に書き換え、上書き保存します。


以上です。上手くいけば↓のようになると思います 。

文字の位置調整は、CommentGenerator.jsを開いて、
"「"や"」"で検索すると出てくる場所（this.textcomment = new createjs.Text(~~）
にスペースを入れると簡単に調整できます（雑）。