少し前、スプライト画像を利用する牌画表示法の記事を書きました。
作った当初は<img>タグよりはかなり短くて済むんでわりと満足してたんですが、
客観的にみると



これを表示するためだけに
<span class="ancoro tile_m5">五</span><span class="ancoro tile_m6">六</span><span class="ancoro tile_m6">六</span><span class="ancoro tile_p1">①</span><span class="ancoro tile_p2">②</span><span class="ancoro tile_p3">③</span><span class="ancoro tile_p3">③</span><span class="ancoro tile_p3">③</span><span class="ancoro tile_p6">⑥</span><span class="ancoro tile_p8">⑧</span><span class="ancoro tile_s5">Ⅴ</span><span class="ancoro tile_s6">Ⅵ</span><span class="ancoro tile_s7">Ⅶ</span>
やっぱ、長いよね…

というわけで、もう少し短く書けるように JavaScript で置換ツールを作ってみました。
それがこちら。
<script type="text/javascript">
disPai("m5,m6,m6,p1,p2,p3,p3,p3,p6,p8,s5,s6,s7");
</script>
牌を表示させたいところに scriptタグを置き、この中に disPai() という関数を一行書き込むだけ。
牌を示す符号を文字列として渡してやれば、JavaScript が上の長いコードに翻訳して HTML に書き出してくれます。
ちなみに disPai というのは display pai …のつもりです(笑)

以下、今さら需要も無いとは思いますが、書いておきたいから書きます。
牌テクノロジーだ!文句あっか!て感じで

導入の栞

まず、本関数はHTML5非推奨の document.write()関数を使っています。
PC上のテストでは特に問題なく動いていますが、一応お含み置きを。

1.ファイルを入手

以下の三つのファイルを、リンク先(このブログのサーバー)から持ってきます。
  • スプライト画像 SP_ancoro_blue.png(ライブドアブログでは画像をアップするとファイル名が変わってしまうので、リンク先がこの名前になっていませんが、ファイル名は何でもいいです)
  • 牌画用スタイルシート ancoro.css
  • disPai()ソースコード dispai.js
うしろのふたつをテキストエディタで保存する際は、文字コードをUTF-8に設定します。
拡張子(.css と .js)はそのままにしますが、うっかり.txt で保存してしまっても、OSでファイル名を変更すれば問題ありません。

2.リンクの設定

まずスプライト画像をアップロードし、そのURLをコピーして、
/************ アンコロ牌画 ここから ************/
.ancoro {
  display:inline-block;
  background:transparent url(スプライト画像のURL) -1000px -1000px no-repeat;
  vertical-align:bottom;
  text-indent:-9999px;
}
ancoro.css の背景画像を設定するところに貼りつけます。
これをもう一度保存したら、CSSファイルとJSファイルもアップロードして、それぞれのURLを控えておきます。
次にHTMLテンプレート編集画面を開き、<head>タグ内部の<link><script>などのタグが並んでいるところを探します。その書き方を真似て、上の二本のファイルへのリンクを設定します。
<link rel="stylesheet" href="http://・・・/ancoro.css" type="text/css" />
<script src="http://・・・/dispai.js"></script>
それぞれ href,src の中身を、控えておいたURLで書き変えれば導入完了です。

使い方

記事を書くときに、牌画を表示させたい部分に
<script type="text/javascript">disPai("");</script>
と書き込みます。(HTML編集モードで)
NSはこの文字列を「すこやん」で辞書登録しました。いちいち書くの面倒ですからね。
これだとちょっと見づらいので
<script type="text/javascript">
disPai("");
</script>
と改行を入れます。
2行目の disPai("")の""の中に、牌を指定する符号を書き入れます。
符号同士はコンマで区切ります。
国士無双行っときますか?
disPai("ton,nan,sha,pei,hak,hat,chu,m1,m9,p1,p9,s1,s9,,,s1,,ツモ");
西   ツモ

これは字牌を全種類含むので例にしました。
数牌も、萬子なら m1,m2,m3,... 筒子なら p1,p2,p3,... 索子なら s1,s2,s3,...という感じで、とても分かりやすいと思います。
この符号はもともとアンコロキング様が作られた牌画のファイル名から来ています。なら ton.gif とかでしたね。懐かしい…て、そんな昔じゃないけど。
disPai("ura,p2,p2,ura,,ura,p3,p3,ura,,
        p4,p4,p4,p5,,p5a,,嶺上ツモ,,,y_p1,p1,p1,p1");
    嶺上ツモ  

はい、何度見てもむちゃくちゃです~
長野県大会決勝オーラスの、我らが咲さんの大逆転手。
全国大会でも、これからこんな手がでるんでしょうか。

牌の裏面は ura、赤ドラは m5a,p5a,s5a のように、5の後ろに a をつけて指定します。
横に倒した牌は頭に y_ をつけます。
符号以外の文字列を書き込むと、そのまま出力します。
ただし、前後のスペースと改行は無視します。
スペースを入れたい時は、コンマとコンマの間に何も書かなければ全角スペース一個が挿入されます。もっと空けたい時は ,,, のように、コンマを続けて書きます。

複数行に表示する

disPai("s1,s3,s3,s3,m1,m3,m3_k,p1,p2,p3,,,s1,,,chu,chu,y_chu");
disPai("s1,s1,s3,s3,s3_k,m1,m3,p1,p2,p3,,,s1,,,chu,chu,y_chu");
disPai("s1,s1,s1,s3,s3,m1,m3,p1,p2,p3,,,m5_k,,,chu,chu,y_chu");
disPai("s1,s1,s1,s3,s3_k,m1,m3,p1,p2,p3,,,s2,,,chu,chu,y_chu");
    

    

    

    

disPai()関数は改行コードを出力するので、単に続けて書けば改行します。改行の回数は0以上を指定でき、指定を省略すると、デフォルト値の2になります。
1だと下にぴったりくっつく感じ。0を指定すると改行せず、続けて文章を書くことができます。
指定は、下のように文字列の後ろをコンマで区切り、数字を書き足して行います。
てめェさっきの
<script type="text/javascript">
disPai("p7",0);
</script>
はなんだ!!
てめェさっきの はなんだ!!

<script>タグの内側には JavaScript構文しか書いてはいけないので、文章は上のようにタグの外側に書きます。
まあ、牌一つしか表示しないのであれば <script>タグを書くより
てめェさっきの<span class="ancoro tile_p7">⑦</span>はなんだ!!
と、モトの書き方のほうが早いんで、そこは使い分けですかね。

なお、符号の後ろに_k がついているのは、浮いて表示している牌。
アンコロキング様のオリジナルにはない、NSが勝手に拡張した仕様です。
これから河に捨てるので、「切る」の頭文字。異論は聞きません。

カスタマイズ

CSS

ancoro.css の最後の方に
.jongmat{
    margin: 0 1.4em 0.7em 1.4em;
    padding: 1.2em 1.4em 0 1.4em;
    line-height: 1em;
    font-size: 0.95em;
    box-shadow: 3px 3px 4px #041 inset;
    border-radius: 0.4em 0.4em;
    background: #5b6;
}
.jongmat span.ancoro{
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.8));
}
この二つのセレクタ定義がありますが、上は牌画の背景のデザイン、下はこの背景のある領域に牌画が表示されたときに影をつける指定です。
この背景は、<script>タグの外側を<div>タグで囲み、これに jongmat というクラス名を指定することで表示されます。
<div class="jongmat">
    <script type="javascript">
        disPai("牌画を指定する文字列");
    </script>
</div>

disPai()とは関係ないただの背景デザインなので、↑こんなふうに別のものも囲えます。
まあデザインし直すなり、不要なら削除してもおkです。

代替テキスト

一般のブログサービスではモバイル向けの CSS を編集できないので、このスプライトのように CSS を利用した画像操作は、PCにしか反映されません。
この記事では説明に必要な CSS だけはなんとか記事本文の中に埋め込んでいるので反映されていると思いますが、毎回そんなこともしていられません。
よって、通常時はモバイルの画面では残念ながら牌画が表示されないことになります。
そこで、表示されない牌画の代りにせめてテキストを表示します。
var pText=[	/* モバイル用代替テキスト */
	'一','二','三','四','五','六','七','八','九','五',
	'①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑤',
	'Ⅰ','Ⅱ','Ⅲ','Ⅳ','Ⅴ','Ⅵ','Ⅶ','Ⅷ','Ⅸ','Ⅴ',
	'東','南','西','北','白','發','中','・','?','■'
];
disPai()のこの部分でその代替テキストを設定しています。
どれがどの牌かはだいたいわかると思いますが、ここも好みで設定し直してもいいと思います。
SS なんかだと索子はⅠ,Ⅱ,Ⅲ…よりも 1,2,3…が主流になるんですかね? 知らんけど。
重複している五、⑤、Ⅴは赤ドラの分です。
あと、最後の方の'・'は(ぽち?)、'?'はです。考察とかクイズに使うのかな?
符号はそれぞれ pch, qst です。

あと、鳴いて横倒しにした牌、切る牌(浮かせた牌)、赤ドラはというと
    

この例の場合、モバイル版では
ⅠⅠⅠⅢⅢ一三①②③  中中
こんな表示にしています。
この辺をカスタマイズするにはコーディング部分をいじる必要がありますが、プログラムとしては if文ばかりで野暮ったく、全く高度なものでもないので、今回は解説を省略します。
興味のある方はリンクからソースを覗いて行ってください。

【追記】今確認したら、モバイル版では代替テキストさえ表示されてません。あっれー?
<span>タグを直に書いたところは表示されてるようですが。こんなふうに
    嶺上ツモ   

つまり document.write() が使えないってことなのかな…わっかんねーすべてがわっかんねー
モバイル版の皆さん、本当にすみませんです。

【再追記】一応、モバイルへの対応完了しました。
スマホでは牌画が、携帯では代替テキストが表示されるようになった…はずです。
単に以前のやり方に戻しただけですが。
せっかく作った disPai()さんですが、PCでしか働かないのでは困ります。
編集ツールとしてコードだけ書き出してもらい、手動で記事に貼る、という使い方になりそう…