ブラウザ三国志の武将画像を置換

mixiで遊んでいる『ブラウザ三国志』向けのスクリプトです。武将の画像を自由に変えて遊んでしまおうということで作成しました。遊んでいたmixi13鯖を引退する前に解説付きでScriptを公開しておきます。GreasemonkeyのScriptは実質これが初めて作ってみたものだったので、作成に着手した際にScriptの作成方針を見誤って自分でも無駄が多いなと思いますが、まあそのあたりは大目にみてくださいな。また、なんとなく置き換える画像を追加していったので、その武将にそのキャラを割り当てるのかよっていうのがありますが、ご容赦ください。各自カスタマイズすれば自由に割り当て可能だから大丈夫ですので。

このScriptを使うには、公衆送信権侵害とならないように画像を手元のPCで管理するためのローカルWebサーバーの用意と、各画像の用意をします。そして、Scriptをテキストエディタで開いて画像を置き換える武将のカードナンバーとファイル名の変換テーブルを変更してください。

※画像の用意やScriptをいじるのに必要な情報は以下に掲載しておきますが、情報が欠けている部分がありましたらご連絡ください。

大まかな手順

まずは手順の説明です。各部分の細かい説明は「画像の用意」や「Scriptのカスタマイズ」といった見出しを必要に応じてクリックして読んでください。

『Atropos』など画像を取り込むキャプチャーツールをお好みのツールで用意して画像をファイルに保存。
Windows上で動くゲームのキャラクターの立ち絵を簡単に切り抜くツール『Daisy』で背景とキャラクターを分離。
画像編集ソフト『Paint.NET』でサイズ変更。Web上の画像を使うのならばここで切り抜き処理。
「ローカルWebサーバーを用意する方法」を参照して、ローカルWebサーバーで画像を入れたフォルダを http://127.0.0.1/ 以下からから読み込めるように準備して、ブラウザから画像が表示できることを確認する。
ブラウザ三国志の武将画像を置換 ※右クリックして名前をつけてリンク先を保存を行ないカスタマイズしてインストール。

※Google Chrome / Firefox+Greasemonkeyにて動作確認済みです。

画像の用意

以下のサイズの画像を用意してください。ファイル名はScript仕様上のルールがあり、カードサイズの最大画像のファイル名をベースに、ミニ画像にはファイル末尾にsが付加されたものを、顔画像は末尾にfが付加されたものにする必要があります。

カード表示用画像(Size:224x315)を置き換える画像を%BaseFileName%.pngで用意。武将は左下の131x272程度の範囲に収めるようにしないと、名前や能力が画像の上に重ねて表示されるので注意が必要です。
ミニ画像(Size:85x120)を置き換える画像を%BaseFileName%s.pngで用意。
顔画像(Size:80x80)を置き換える画像を%BaseFileName%f.pngで用意。
クエストの水鏡先生(Size:275x340)の画像をファイル名quest.pngで作成。 ※右側中央あたりに吹き出しがあることに注意。

使いたい画像を上記条件にあわせて作成しなければなりません。いくつかのケースで作成の手順を説明します。

ゲームの画像を使用する

使用したいキャラクターの登場するゲームを起動します。『Atropos』など画像を取り込むキャプチャーツールを使って、背景のみの画像をファイルに保存し、その背景にキャラクターの立ち絵が表示されたらそれもファイルに保存します。

続いて『Daisy』を使い背景とキャラクターを分離しましょう。比較用画像1の入力欄に背景＋キャラの画像ファイルをドラッグ＆ドロップするか右のボタンからファイルを選びます。同様にして比較用画像2の入力欄に背景の画像を指定しましょう。そして、背景色指定の入力欄で透明部分に使う色を決めてください。入力欄右のボタンを押して緑あたりを選ぶとよいでしょう。にチェックが付いていることを確認してから、画像比較ボタンを押してプレビュー画面を確認します。問題なく背景が消えていたら、保存ボタンを押して切り抜いた画像を保存してください。これを必要なキャラクター数ぶんだけ繰り返します。これだけで背景が透明になったキャラクターの画像を用意できるのでお手軽です。切り抜いたあとはWeb上にある画像を使用すると同じ手順となりますので、そちらのサイズ変更部分からをご覧ください。

画像比較条件の反転のチェックを付けない場合は画像の同一部分を抽出します。そのため、同一表情・ポーズのキャラが表示された異なる背景の画像を用意すればキャラのみを抽出できますが輪郭線が消えてしまう恐れがあるので注意してください。画像比較条件の反転のチェックを付けた状態で背景A＋キャラと背景Aを透明色Aで抽出した画像を作成し、背景B＋キャラと背景Bを透明色Bで抽出した画像を作成し、それぞれできあがった画像を画像比較条件の反転のチェックを外して比較抽出することで、よりきれいにキャラの画像を取得できるかもしれません。

Web上にある画像を使用する

画像検索で探してみると意外と背景が白い画像、もしくは魔法の杖、マジックワンド、投げ縄ツールなどの名称の選択ツールで背景を切り抜けそうな画像があります。そういった画像を探すのが簡単です。例えばアニメ系のキャラならばマスコット図鑑などで気に入ったのがあると背景が白いので切り抜くのが楽なんじゃないかと。背景がしっかり描かれている画像でも気合いを入れてパスを描いてきっちり切り抜くことも可能ですが、結構な手間がかかりますので、かなりお気に入りの画像でないとそこまでがんばれる人は少ないかもしれません。

背景が単色かそれに近い画像であれば『Paint.NET』を使って簡単に背景を透明にすることが可能です。ただし、「.NET Framework 3.5 Service Pack 1 」をインストールしておく必要があります。まあ、背景を透明にしなくてもいいと割り切るという手もありますが、レアカードの背景色が見えなくなるので、可能ならば切り抜いたほうがよいでしょう。

から画像を開くかドラッグ＆ドロップで編集したい画像ファイルを開き、切り抜きはツールのを使います。単色ならば問題ありませんが、グラデーションが掛かっていたりする場合はの値を調整しながら切り抜きましょう。例えばマスコット図鑑のARIAから水無灯里ですと、クリックして拡大画像を取得して保存し、その画像を開いてツールのを使うと白地の部分がワンクリックで選択できます。選択して色が変わった部分はDeleteキーを押すと透明を表わすまだらな表示になるので切り抜き完了です。

サイズの調整は、画像に多くの透明な不要部分がある場合に、まずツールにあるを使って大まかに画像の必要な部分を選択してください。そして、上部のメニューバーにあるイメージから選択範囲に合わせてトリミングを実行して必要なキャラのみになるようにするわけです。ここで画像をいったん保存しておいてください。

キャラクター部分はツール最上段にあるを使ってクリックし、マウスのドラッグやキーボードのカーソルキーで動かすことができるので、左下のほうにギリギリまで移動させます。そして、上部のメニューバーにあるイメージからサイズ変更を選んでください。カード表示サイズは武将のイラストを左下の131x272程度の範囲に収めたほうがよいので、絶対サイズで指定と縦横比を維持するにチェックをつけた状態で、幅と高さが目安となる131x272あたりで収まるように指定します。幅に131を入力して高さが272をオーバーするならば高さを272と入力して範囲内に収まるように調整しておくとよいかと思います。ただ、イラストが隠れても問題ないような部分があるならば、大きい数値にしても大丈夫です。例として使用している画像の場合は、頭の右側は多少ならデータが重なっても問題がなさそうなので縦方向のサイズを優先できます。

サイズを変更したら、今度は画像全体サイズの変更です。上部のメニューバーにあるイメージからキャンバスサイズを選び、絶対サイズで指定にして縦横比を維持するのチェックは外します。幅は224、高さは315を指定して、アンカーは左下にしてください。これにより画像の右上のほうに新しく空白部分が作られてブラウザ三国志で使っている画像サイズとなります。

しかしながら、拡大された部分は白地になっているため、再びツールのを使って白地部分を選択肢、Deleteキーを押して透明化しなければなりません。

ここで作成した画像をローカルWebサーバーのフォルダへ保存していきなりテストしてもよいのですが、簡易的に確認しておく方法があります。上部のメニューバーにあるレイヤーにあるファイルからインポートを選び、別レイヤーに検証用の画像を読み込んでみてください。

半透明の画像がレイヤーに表示されて、イラストが表示される範囲がチェックできます。表示される範囲に問題がなければレイヤーのチェックを外すかCtrlキー＋Zキーでレイヤーの読み込みを取り消すかしてください。

そして上部のメニューバーにあるファイルから名前を付けて保存を選びますが、保存するファイルの種類はPNGにしてください。ファイル名を入力して保存ボタンを押すと設定を聞かれるので、ビットの深さは24ビット以外を選びます。通常は自動検出で問題ありません。レイヤーの平面化をするように警告が出たら、平面化を選んでください。

さて、この例で作成した画像をUC曹操に割り当ててみた結果は以下のようになります。もうちょっと小さくして右の重なる部分を減らしたほうがよかったかもしれませんね(苦笑)。まあ、レイヤーテスト用に作成した検証用の画像の正しさが一目瞭然という結果ですので、うまく活用してくださいませ。

ミニ画像の作成は、二重の画像リサイズで画質を低下させるよりも、画像をトリミングした段階でいったん保存して置いた画像を読み込んでリサイズしたほうがよいでしょう。こちらは上部のメニューバーにあるイメージからサイズ変更を選んだ際に、画像のサイズを幅85高さ120にして、その後はツール最上段にあるを使ってクリックし、マウスのドラッグやキーボードのカーソルキーで動かしてキャラのイラストが中央部になるように位置調整をして画像を保存します。画像ファイル名のルールに従って名前を付けるのをお忘れなく。

キャラクターの顔画像は簡単です。ツールにあるを使い、CtrlキーとShiftキーを押すと正方形に範囲選択できるので、それを利用して顔の部分にしたい範囲を選択してください。そして、上部のメニューバーにあるイメージから選択範囲に合わせてトリミングを実行して顔画像とします。メニューバーにあるイメージからサイズ変更を選んで幅と高さを80にして画像ファイル名のルールに従って画像を保存すれば準備完了です。『恋姫†無双』仕様で作るのならば、TVアニメの『真・恋姫†無双』のキャラクターページから取得するのが手っ取り早いですね。

同じような手順で画像サイズの異なる水鏡先生のクエスト画面用の画像も作成すれば画像の準備は完了します。あとは用意した画像を使ってScriptをカスタマイズしましょう。

Scriptのカスタマイズ

まずはUserScriptの動作範囲です。ここは特に変更する必要はありません。@includeでScriptを実行させるアドレスを指定しているだけです。

// ==UserScript==
// @name		3gokushi-card_image_changer
// @namespace		3594cic.user.js
// @description		ブラウザ三国志の画像置換
// @include		http://*.3gokushi.jp/card/*
// @include		http://*.3gokushi.jp/facility/unit_status.php*
// @include		http://*.3gokushi.jp/facility/castle_send_troop.php*
// @include		http://*.3gokushi.jp/busyodas/busyodas_result.php*
// @include		http://*.3gokushi.jp/union/*
// @include		http://*.3gokushi.jp/report/detail.php*
// @include		http://*.3gokushi.jp/user/first_login.php*
// @include		http://*.3gokushi.jp/quest/*
// ==/UserScript==

置き換える武将のカードナンバーを配列var src=Array(～);に記述していきます。数字4桁で置き換えたいカードナンバーを全部記載していくわけですが、最初は一部の武将だけ置き換えて動作確認をしたほうがよいでしょう。武将名や置き換えるキャラクターは/* ～ */でコメントを入れておくと後日さらに追加していく場合に役立つと思います。

(function() {
var	src=Array(
		/* 劉備 */	'1046','1035','1001','1007',
		/* 関羽 */	'1048','1003','1011','1010',
		/* 張飛 */	'1050','1004','1056','1012','1013',
		/* 趙雲 */	'1049','1037','1005','1063',
		/* 諸葛亮 */	'1047','1002','1008','1009',

		（中略）

		/* 孫翊 */	'3050','3025','3026', /* 侵略！イカ娘 */
		/* 劉焉 */	'4036','4008','4009', /* 会長はメイド様！ 鮎沢美咲 */
		/* 祝融 */	'4035','4028','4020','4021', /* 俺の妹がこんなに可愛いわけがない 高坂桐乃 */
		/* 朱霊 */	'2031','2032', /* 俺の妹がこんなに可愛いわけがない 五更瑠璃（黒猫） */
		/* 司馬懿 */	'2002','2047');

続いて置き換える先のファイル名を配列var dst=Array(～);に記述します。先ほどのカードナンバーの配列との対応表なので、同じ数を置き換えたい順番に並べなければなりません。こちらもズレたりしたときのためにコメントをつけておいたほうがよいでしょう。サンプルのScriptでは数字4桁で管理していますが、ファイル名をキャラクター名にしておいても大丈夫です。RとUCとCで全部別の画像にするということもできます。

var	dst=Array(
		/* 劉備 */	'0001','0001','0001','0001',
		/* 関羽 */	'0002','0002','0002','0002',
		/* 張飛 */	'0003','0003','0003','0003','0003',
		/* 趙雲 */	'0004','0004','0004','0004',
		/* 諸葛亮 */	'0005','0005','0005','0005',

		（中略）

		/* 孫翊 */	'2012','2012','2012', /* 侵略！イカ娘 */
		/* 劉焉 */	'5003','5003','5003', /* 会長はメイド様！ 鮎沢美咲 */
		/* 祝融 */	'5004','5004','5004','5004', /* 俺の妹がこんなに可愛いわけがない 高坂桐乃 */
		/* 朱霊 */	'1015','1015', /* 俺の妹がこんなに可愛いわけがない 五更瑠璃（黒猫） */
		/* 司馬懿 */	'1110','1110');

その次は置き換える元画像へのPATHを記したものです。仕様が変わって画像の置き換えができなくなったときに変更する部分になります。正常に画像が置き換えられているのであれば変更不要です。

var	srcSearch='http:\/\/img.3gokushi.jp\/.*\/img\/card\/illust\/|\/.*\/img\/card\/illust\/';
var	srcSearchFace='http:\/\/img.3gokushi.jp\/.*\/img\/card\/illust_thumb\/|\/.*\/img\/card\/illust_thumb\/';
var	srcSearchSmall='http:\/\/img.3gokushi.jp\/.*\/img\/card\/deck\/|\/.*\/img\/card\/deck\/';

続いてsrcFileで置き換える画像の拡張子を指定しています。PNG画像を置き換えるのでこの部分は変更する必要はありません。newPathは画像を用意したローカルWebサーバーのアドレス指定です。初期状態のScriptでは、fileフォルダの下にimgsフォルダを作成し、その下に3594フォルダを作成してそこに画像を用意した場合の設定になっています。用意した画像のフォルダへのアドレスへ変更してください。その後ろの3行は変更不要です。

var	srcFile='.*\.png';
var	newPath='http://127.0.0.1/file/imgs/3594/';
	log='';
	work='';
	txt=document.getElementById('whiteWrapper').innerHTML;

次の部分は表示名を変更するためのテキスト置換なので、不要ならばこの部分はばっさりと削除してください。一応、合成とトレード以外でしか実行しないようにしてあります。txt=txt.replace(/変換元のキーワード/g,'変換後のキーワード');を必要な数だけ用意すればOKです。当然ながらテキストすべてを置き換えるので、スキル名や兵種を変更することもできます。

使っているテキストエディタに武将名などをコピー＆ペーストして文字が化ける場合は、テキスト変換を利用してCharCodeに変換してScriptに貼り付けましょう。例えばreg=new RegExp(String.fromCharCode(24373,37059),"g");とtxt=txt.replace(reg,'なのは');の2行はセットになっていて、張郃をなのはに置き換えています。武将名は全角で3文字ぶんしか表示エリアがないため、半角文字にするなどしないと表示がはみ出て見づらくなるので注意してください。

	/* テキスト置換
	----------------------------------------*/
	if ((location.href.indexOf('union',0)==-1) &&
	    (location.href.indexOf('trade',0)==-1)) {
		// 合成とトレード以外で置換を実行する
		reg=new RegExp(String.fromCharCode(24373,37059),"g");
		txt=txt.replace(reg,'なのは');
		txt=txt.replace(/馬謖/g,'リイン');
		txt=txt.replace(/徐晃/g,'ｳﾞｨｰﾀ');
		txt=txt.replace(/徐庶/g,'ﾌｪｲﾄ');
		txt=txt.replace(/孔融/g,'はやて');
		txt=txt.replace(/劉表/g,'ｼｬﾏﾙ');

		（中略）

		txt=txt.replace(/姜維/g,'美琴');
		txt=txt.replace(/孫翊/g,'イカ娘');
		txt=txt.replace(/劉焉/g,'美咲');
		txt=txt.replace(/祝融/g,'桐乃');
		txt=txt.replace(/朱霊/g,'黒猫');
	}

残りの部分は画像を置き換えるScript部分なので変更しなくて大丈夫です。今作ればもっと効率的な処理を書けると思うけど、今さら作り直すのも面倒なのでこのままで。

	/* 画像置換
	----------------------------------------*/
	// 基本pathの取得
	pathStr=txt.match(srcSearch);
	pathStrF=txt.match(srcSearchFace);
	pathStrS=txt.match(srcSearchSmall);
	// 置換テーブルぶんループ
	for (b=0;b<src.length;b++) {
		moeImg=newPath+dst[b]+'.png';
		moeIcon=newPath+dst[b]+'f.png';
		moeSmall=newPath+dst[b]+'s.png';
		s=(pathStr+src[b]+srcFile);
		do {
			// カード置換
			srcImg=txt.match(s);
			if (srcImg) {
				txt=txt.replace(srcImg,moeImg);
				//GM_log('\n'+srcImg+' >> '+moeImg);
			}
		} while(srcImg!=null);
		// 顔アイコン置換（同一武将は存在しないのでループ不要）
		f=(pathStrF+src[b]+srcFile);
		srcIcon=txt.match(f);
		if (srcIcon) {
			txt=txt.replace(srcIcon,moeIcon);
		}
		s=(pathStrS+src[b]+srcFile);
		do {
			// ミニカード置換
			srcImg=txt.match(s);
			if (srcImg) {
				txt=txt.replace(srcImg,moeSmall);
				//GM_log('\n'+srcImg+' >> '+moeImg);
			}
		} while(srcImg!=null);
	}
	document.getElementById('whiteWrapper').innerHTML=txt;
	/* クエストの水鏡先生を置換 */
	if (location.href.indexOf('quest',0)>-1) {
		document.getElementById('teacher').src=newPath+'quest.png';
	}
}) ();

既知の問題

Firefoxで使う場合にはGreasemonkeyのユーザースクリプトの管理でこのScriptを右クリックして、先頭へ移動を選んで優先度を高くしておいてください。それ以外の場合だとほかのScriptに副作用が発生する可能性があります。
bro3_display_adm_infoと併用する場合は、サイズ指定のない武将表示用のimg要素にwidth="85" height="120"を付加しないと大きなサイズで表示されてしまいます。

なお、関連ツールとして、ほかにもいくつか作成してみたものがあるので興味のある方はそちらもご覧くださいませ。

2010-7-22 ver.1.0.0: 馬岱のみのテスト版を作成。
2010-7-25 ver.1.0.1: 「恋姫†無双」の全キャラに対応を完了。
2010-7-27 ver.1.0.3: 出兵・内政の顔アイコンに対応。合成で処理が行なわれていなかったのを修正。
2010-7-30 ver.1.0.4: 運営側の仕様変更に対応。
2010-8-25 ver.1.0.5: ブショーデュエルに対応。
2011-3-24 ver.1.0.6: 説明部分を書き終えたので自分が使っていたScriptをベースにしたSampleのScriptを公開。