2017年12月23日土曜日

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(~~)
にスペースを入れると簡単に調整できます(雑)。

6 件のコメント:

  1. こめんとてすと

    返信削除
  2. ご連絡ありがとうございます!
    投稿できなかったのは、HTML5を作成した方のブログでした><
    すみません。不躾なご質問になってしまいまして。

    返信削除
    返信
    1. あ、本家様と書いてありましたね…失礼いたしました。
      原因が思い浮かばないので解決できる可能性は低いですが、状況再現できるかどうかから試してみます。

      削除
    2. お手数をお掛けしてしまい本当に申し訳ありません。

      HTML5コメジェネのver0.0.7~0.0.8aまでのファイルにて全て試しました
      (配布時のまま)が、全てで同じ状況になってしまいます。

      この記事にてコード追加した事が原因では無い事は確認できているのですが。

      削除
    3. なるほど、Commentgenerator_multiの初期設定の時点で詰まっているということですね。
      片方のみのコメントであれば、Twitchとニコ生、両方共正常に表示される、ということですよね…
      可能性としては、読み込んでいるファイルが違う(multiがついていない方を読み込んでいる)、位しか思いつかないですね…

      現在ニコ生で放送していますので、よければもう少し詳細を教えていただければと思います。http://live2.nicovideo.jp/watch/lv314274721

      削除
    4. (時間も遅いので、後日でも構いません)

      削除

GCPの感情解析

かなーり前に作成したもので、自分でも存在を忘れていたので、完全に忘却しないように。 ニコ生等のコメントを対象に感情解析をかけてます。得られる情報は、そのコメントがポジティブなのかネガティブなのか、その強さ。 他のメーカーの感情解析はもっと詳細な情報を得られるものもあ...