麻雀プログラミング講座 │ 牌画タグ入力支援ツール作成への道　「手牌つく郎（仮）」

2010年11月2日

麻雀ブログやサイトの制作工程で牌画を入力することがある。これが結構面倒です。わずらわしい。いや、苦痛ですらあります。このブログに牌画が少ないのはそのためです（笑）

世の中には、すでに牌画URLの入力を手助けしてくれるサイトがあることにはあります。ただ、自分との相性が悪いのか、いまいちしっくりこない。

なら、自分で作ってしまおう！

と、思い立ったち今回のプロジェクトを立ち上げました。大げさだな（笑）
では、すかっりおなじみになったjQueryライブラリを利用して、プログラミングしてみようと思います。

クリックした牌の属性値を取得する

任意の牌をクリックしたときに、「場所」「名前」「クラス名」「Atlの内容」を取得して、ダイアログボックスに表示させるプログラムです。

・JQueryの呼び出し

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

・JavaScriptコード

$(document).ready(function() {
	$("img","#paiga").click(function() {
	var paisrc = $(this).attr("src"); //牌画の場所を取得
	var painame = $(this).attr("name"); //牌画の名前を取得
	var paiclass = $(this).attr("class"); //牌画のクラス名を取得
	var paialt = $(this).attr("alt"); //牌画のAlt属性の内容を取得

	alert("牌画の場所は「" + paisrc + "」です。");
	alert("牌画の名前は「" + painame + "」です。");
	alert("クラス名は「" + paiclass + "」です。");
	alert("alt属性の内容は「" + paialt + "」です。");
	});
});

・牌画の設置

<div id="paiga">
<img src="../../images/haiga/man1.gif" alt="一萬" name="man1" class="pai">
<img src="../../images/haiga/man2.gif" alt="二萬" name="man2" class="pai">
<img src="../../images/haiga/man3.gif" alt="三萬" name="man3" class="pai">
<img src="../../images/haiga/man4.gif" alt="四萬" name="man4"class="pai">
<img src="../../images/haiga/man5.gif" alt="五萬" name="man5" class="pai">
<img src="../../images/haiga/haku.gif" alt="白" name="haku" class="pai">
<img src="../../images/haiga/hatu.gif" alt="發" name="hatu" class="pai">
<img src="../../images/haiga/tyun.gif" alt="中" name="tyun" class="pai">
</div>

牌をクリックしてみてください。クリックした牌ごとに違った内容のダイアログボックスが表示されます。