牌画タグ入力支援ツール作成への道　「手牌つく郎（仮）」 － その2

前回に引き続き、牌画入力支援ツールのお話です。牌画の属性値を取得する機能から、新たに牌画を配置する機能を実装。とりあえず使えるようになったので、コードとサンプルを紹介します。

コードとサンプルページ

お約束のｊQueryを組み込んで、コードをパパッと書きます。

・JQueryの組み込み

<script src="../../js/jquery-1.4.2.min.js" type="text/javascript"></script>

・JavaScriptコード

$(document).ready(function() {

	//牌画を配置する関数
	$("img","#haiga").click(function() {
	  //クリックされた牌の属性値を取得する処理
	  var haisrc = $(this).attr("src"); //牌画の場所を取得
	  var hainame = $(this).attr("name"); //牌画の名前を取得
	  var haialt = $(this).attr("alt"); //牌画のAlt属性の内容を取得
	  var haihaba = $(this).attr("width"); //牌画の幅を取得
	  var haitakasa = $(this).attr("height"); //牌画の高さを取得

	  //テキストボックスから牌画のURLを取得する処理
	  var haiiti = $(".haipath").val(); //牌画のディレクトリのURLを取得

	  //牌画のファイル形式を設定する（拡張子を入力）
	  var filetype = "gif"; //牌画のファイル形式を設定する

	  //牌画を配置する処理
	  var a = $("<img />").attr("src",haisrc);
	  $(".tehai").append(a);

	  //牌画のURLを配置する処理
	  var b = "&lt;img src=\"" + haiiti + hainame + "." + filetype + "\" alt=\"" + haialt + "\" width=\"" + haihaba + "\" height=\"" + haitakasa + "\"&gt;";
	  $(".url").append(b);
	});

	//テキストを配置する関数
	$("a","#haiga").click(function() {
	  var titletxt = $(this).attr("title"); //タイトル文字を取得
	  $(".tehai").append(titletxt);
	  $(".url").append(titletxt);
	});

	//URLを選択する関数
	  $(".urlbtn").click(function(){
	  $(".url").select();
	  return false;
	});

	//リセット関数
	  $(".resetbtn").click(function(){
	  $(".tehai").empty();
	  $(".url").empty();
	  return false;
	});

});

・牌画の設置

<input class="haipath" name="haipath" size="60" type="text" value="https://mahjong.org/images/haiga/" />←牌画が置いてあるディレクトリのURLを入力。最後は「/」で終わる。

<div id="haiga">
<img src="../../images/haiga/man1.gif" alt="一萬" width="24" height="34" />
<img src="../../images/haiga/man2.gif" alt="二萬" width="24" height="34" />
<img src="../../images/haiga/man3.gif" alt="三萬" width="24" height="34" />
<img src="../../images/haiga/man4.gif" alt="四萬" width="24" height="34" />
<img src="../../images/haiga/man5.gif" alt="五萬" width="24" height="34" />
<img src="../../images/haiga/man5red.gif" alt="赤五萬" width="24" height="34" />

・・・略・・・

<img src="../../images/haiga/ysha.gif" alt="西" width="32" height="24" />
<img src="../../images/haiga/ypei.gif" alt="北" width="32" height="24" />
<img src="../../images/haiga/yura.gif" alt="裏" width="32" height="24" />

<a title="チー">チー</a><a title="ポン">ポン</a><a title="カン">カン</a><a title="待ち">待ち</a><a title="ロン">ロン</a><a title="ツモ">ツモ</a><a title="ドラ">ドラ</a><a title="裏ドラ">裏ドラ</a><a title="槓ドラ">槓ドラ</a></div>


<!-- /haiga -->

<h3>○手牌を表示</h3>


<table border="1">
<tbody>
<tr>
<td class="tehai" width="600" height="40"></td>
</tr>
</tbody>
</table>

<input class="resetbtn" type="button" value="リセット" />

<h3>○牌画のURLを表示</h3>


<textarea class="url" cols="83" rows="8"></textarea>
<input class="urlbtn" size="5" type="button" value="URLを選択する" />

サンプルページで確認できます。

解説

ID：haiga内の画像とリンクをクリックすると関数が呼び出されます。それ以外の場所をクリックしても何も起こりません。
手牌はclass:tehaで指定したタグに、URLはclass:URLで指定したタグに追加配置されていきます。
ｊＱｕｅｒｙを利用すれば、こんなに短いコードで済んでしまいます。一番のメリットは、牌画の情報（属性値）をhtmlコードから取得できることです。別の牌画を使う場合は、牌画の部分を差し替えるだけで、JavaＳｃｒｉｐｔのコードを触る必要がありません。メンテが楽になりますよね^^

これを機に、牌画URL入力支援ツールを作ってみてはいかがでしょうか？