chara_ptext（キャラクター名表示欄）も current で切り替えたい

current でメッセージレイヤーを切り替えた時にキャラ名表示も一緒に切り替えたいなーってやつです。
結構ググったつもりだけど全然見つけられなかったので、あまりこういう使い方する人は居なさそうですが。

尚、途中で元に戻すのは想定していません。

動作確認

ティラノスクリプト v510h

改造版

動作は安定しますが、改造が面倒くさい。
chara_ptext と showMessage の改造が必要です。

chara_ptext

$("." + this.kag.stat.chara_ptext) 部分の親にカレントレイヤーを指定します。4か所あります。

$("." + this.kag.stat.current_layer + "_fore").find("." + this.kag.stat.chara_ptext);
は長いので、変数に入れておくと良いと思います。

const layer = "." + this.kag.stat.current_layer + "_fore";
$(layer).find("." + this.kag.stat.chara_ptext).html("");

showMessage

chara_ptext と同じくカレントレイヤーを親要素に指定します。
showMessage はバックログ用です。

js

	tyrano.plugin.kag.tag.chara_ptext.start = function(pm) {
	var that = this;
	this.kag.layer.hideEventLayer();
	//レイヤー追加
	const layer = "." + this.kag.stat.current_layer + "_fore";
	if (pm.name == "") {
	$(layer).find("." + this.kag.stat.chara_ptext).html(""); //←変更！
	//全員の明度を下げる。誰も話していないから
	//明度設定が有効な場合
	if (this.kag.stat.chara_talk_focus != "none") {
	$("#tyrano_base").find(".tyrano_chara").css({
	"-webkit-filter" : this.kag.stat.apply_filter_str,
	"-ms-filter" : this.kag.stat.apply_filter_str,
	"-moz-filter" : this.kag.stat.apply_filter_str
	});
	}
	} else {
	//日本語から逆変換することも可能とする
	if(this.kag.stat.jcharas[pm.name]){
	pm.name = this.kag.stat.jcharas[pm.name];
	}
	var cpm = this.kag.stat.charas[pm.name];
	if (cpm) {
	//キャラクター名出力
	$(layer).find("." + this.kag.stat.chara_ptext).html(cpm.jname); //←変更！
	//色指定がある場合は、その色を指定する。
	if (cpm.color != "") {
	$(layer).find("." + this.kag.stat.chara_ptext).css("color", $.convertColor(cpm.color)); //←変更！
	}
	//明度設定が有効な場合
	if (this.kag.stat.chara_talk_focus != "none") {
	$("#tyrano_base").find(".tyrano_chara").css({
	"-webkit-filter" : this.kag.stat.apply_filter_str,
	"-ms-filter" : this.kag.stat.apply_filter_str,
	"-moz-filter" : this.kag.stat.apply_filter_str
	});
	$("#tyrano_base").find("." + pm.name + ".tyrano_chara").css({
	"-webkit-filter" : "brightness(100%) blur(0px)",
	"-ms-filter" : "brightness(100%) blur(0px)",
	"-moz-filter" : "brightness(100%) blur(0px)"
	});
	}
	//指定したキャラクターでアニメーション設定があった場合
	if(this.kag.stat.chara_talk_anim != "none"){
	var chara_obj = $("#tyrano_base").find("." + pm.name + ".tyrano_chara");
	if(chara_obj.get(0)){
	this.animChara(chara_obj, this.kag.stat.chara_talk_anim, pm.name);
	if (pm.face != "") {
	//即表情変更、アニメーション中になるから
	this.kag.ftag.startTag("chara_mod", {name:pm.name,face:pm.face,time:"0"});
	}
	}
	}
	} else {
	//存在しない場合はそのまま表示できる
	$(layer).find("." + this.kag.stat.chara_ptext).html(pm.name); //←変更！
	//存在しない場合は全員の明度を下げる。
	if (this.kag.stat.chara_talk_focus != "none") {
	$("#tyrano_base").find(".tyrano_chara").css({
	"-webkit-filter" : this.kag.stat.apply_filter_str,
	"-ms-filter" : this.kag.stat.apply_filter_str,
	"-moz-filter" : this.kag.stat.apply_filter_str
	});
	}
	}
	}
	//ボイス設定が有効な場合
	if(this.kag.stat.vostart == true){
	//キャラクターのボイス設定がある場合
	if(this.kag.stat.map_vo["vochara"][pm.name]){
	var vochara = this.kag.stat.map_vo["vochara"][pm.name];
	var playsefile = $.replaceAll(vochara.vostorage,"{number}",vochara.number);
	var se_pm = {
	loop : "false",
	storage : playsefile,
	stop : "true",
	buf:vochara.buf
	};
	this.kag.ftag.startTag("playse", se_pm);
	this.kag.stat.map_vo["vochara"][pm.name]["number"] = parseInt(vochara.number)+1;
	}
	}
	this.kag.stat.f_chara_ptext="true";
	//表情の変更もあわせてできる
	if (pm.face != "") {
	if (!(this.kag.stat.charas[pm.name]["map_face"][pm.face])) {
	this.kag.error("指定されたキャラクター「" + pm.name + "」もしくはface:「" + pm.face + "」は定義されていません。もう一度確認をお願いします");
	return;
	}
	var storage_url = this.kag.stat.charas[pm.name]["map_face"][pm.face];
	//chara_mod タグで実装するように調整
	if(this.kag.stat.chara_talk_anim == "none"){
	this.kag.ftag.startTag("chara_mod", {name:pm.name,face:pm.face});
	}
	//$("."+pm.name).attr("src",storage_url);
	}else{
	this.kag.layer.showEventLayer();
	this.kag.ftag.nextOrder();
	}
	};

view raw chara_ptext.js hosted with by GitHub

	tyrano.plugin.kag.tag.text.showMessage = function(message_str,pm,isVertical) {
	var that = this;
	//特定のタグが直前にあった場合、ログの作り方に気をつける
	if(that.kag.stat.log_join=="true"){
	pm.backlog="join";
	}
	var chara_name = "";
	if(this.kag.stat.chara_ptext!=""){
	const layer = "." + this.kag.stat.current_layer + "_fore";　　//←追加！
	chara_name = $.isNull($(layer).find("." + this.kag.stat.chara_ptext).html());　　//←変更！
	}
	if((chara_name != "" && pm.backlog!="join") || (chara_name!="" && this.kag.stat.f_chara_ptext=="true")){
	this.kag.pushBackLog("<b class='backlog_chara_name "+chara_name+"'>"+chara_name+"</b>：<span class='backlog_text "+chara_name+"'>"+message_str+"</span>","add");
	if(this.kag.stat.f_chara_ptext=="true"){
	this.kag.stat.f_chara_ptext="false";
	this.kag.stat.log_join = "true";
	}
	}else{
	var log_str = "<span class='backlog_text "+chara_name+"'>"+ message_str +"</span>";
	if(pm.backlog=="join"){
	this.kag.pushBackLog(log_str,"join");
	}else{
	this.kag.pushBackLog(log_str,"add");
	}
	}
	（以下略）
	}

view raw showMessage.js hosted with by GitHub

改造しない版

いつの間にか改造面倒くさいマンになってしまったので、ともかく改造しないで済む方法を模索してみました。
模索してる間に改造した方が早くて安定しますけどね…。

因みに、MutationEvent はパフォーマンスの問題で非推奨となっています。
ただ、chara_name_area に子孫要素はないので大丈夫じゃないかなあ？と思ってますが…。
Mutation Observers は使い方がわかりません！！！

js

	$(function(){
	let style = '<style type="text/css" id="chara_name">';
	style += "." + TYRANO.kag.stat.chara_ptext + "{";
	style += 'margin-left: -3000px';
	style += '}</style>';
	$('#chara_name').remove(); //消してから追加しないと増える
	$('head').append(style);
	$("." + TYRANO.kag.stat.current_layer + "_fore").on(
	'DOMSubtreeModified propertychange',
	"." + TYRANO.kag.stat.chara_ptext, function() {
	const chara_ptext = TYRANO.kag.stat.chara_ptext;
	const layer = "." + TYRANO.kag.stat.current_layer + "_fore";
	if($(layer).find("."+chara_ptext).length > 0){
	if($(layer).find(".mc_"+chara_ptext).length==0){
	$(layer).append("<p class='mc_"+chara_ptext+"'></p>");
	}
	const style = $(layer).find("." + chara_ptext).attr("style");
	$(layer).find(".mc_"+chara_ptext).attr("style",style);
	$(layer).find(".mc_"+chara_ptext).html($("." + chara_ptext).html());
	}
	}
	);
	});

view raw current_chara_ptext.js hosted with by GitHub

使い方

1. キャラ名枠はレイヤーごとに指定してください。
   name は同じ名前にしてください。

   [ptext name="chara_name_area" layer="message0" (略)]
   [ptext name="chara_name_area" layer="message1" (略)]
   [chara_config ptext="chara_name_area"]  ←これは一個でOK

2. 上記jsコードを適当な名前で保存し、キャラ名欄定義の後に loadjs で読み込む。

   [chara_config ptext="chara_name_area"] ←キャラ名欄定義
   [loadjs storage=chara_name.js] ←js読み込む（名前は適当）

3. 普通に [current] タグでメッセージレイヤーを切り替えてください。
4. メッセージ枠を変更した場合は、直後に #name が無いと変更が有効になりません。

参考サイト

【JavaScript + JQuery】DOMの変更を監視するリスナー – 新米エンジニアの失敗再発防止メモ

特定のページで面倒な操作を自動でやりたいときなど、拡張機能を作成すると思います。 リンクやボタンをクリックした時に、ページ遷移じゃなくてDOM全体がふわっと変わるような洒落乙なサイトも時々あって、そういうときって DOMが変更された時に反応して処理を走らせたかったりします。 やり方 $(‘HTML’).on(‘DOMSubtreeModified propertychange’, function() { // DOMが変更された時に動く処理 });この場合、htmlタグの中の何かが変更されたら処理が走ります。 セレクタ「$(‘HTML’)」の部分を変えれば範囲を絞れます。ただ気を付けて欲しい…

maitakeramen.hatenablog.com

関連記事