牌画表示ツール disPai() ver.2.01(適当)が完成…とまでは言えませんが、とりあえず形になりましたので公開します。
シリーズ前記事の※欄で jyushisirin様から提案のあった件を含め、新機能を加えております。
とりあえず新しいデモを御覧下さい。
デモを見る
【更新当日に追記】
2.01の小さなバグを修正し、2.02として差替えました。
以下の記事本文も、2.01になっていたところを2.02に修正しました。
【5月31日追記】
本日未明、弊ブログの読者 jyushisirin様より、disPai()に表示するアイコン用のスプライト画像を頂きました。
有り難く申し受け、これに対応するための修正を2.02に施して、2.03として差替えました。
以下の記事本文も、2.02になっていたところを2.03に再修正しました。

目次

入力方法がふた通り

入力モードは、タイトル横のボタンで切り替えます。
自動切替にすると豪語していたんですが、ちょっと難しい問題があって、安易な道を選びました。

ボタン入力

パネルに並んだ麻雀牌のボタンを押していくと、押した牌がプレビューエリアに順次表示されていきます。
表示された牌をクリックすると、 Ⅰ → Ⅰ → Ⅰ → Ⅰ のように、牌の状態を切り替えることができます。
但し、裏牌(■)は横倒しになりません。
プレビュー用に、空白と改行がそれそれ □、↓で表示されます。
「ツモ」「ロン」「ドラ」の文字列入力用のボタンもあります。これ以外の文字列は、ライン入力モードで編集できます。
【5月31日追記(つづき)】
jyushisirin様がデザインして下さったのは、この部分で、文字列の代りに表示するアイコン用画像です→　ﾛﾝ　ﾂﾓ　ﾄﾞﾗ
ブラウザのテキストをそのまま打ち出すより画面が引き締まって、かなりカッコよくなりました。
jyushisirin様、改めて有難うございます！

ライン入力

従来の入力方式で行います。改行用の記号として、新たに [] を用意しました。
これと、区切り記号の , だけは表示用テキストとしては使えません。
これらの文字(列)も、出力されるHTMLコードの中に書き込むことはできます。
詳しくは本体画面に一覧表がありますので、そちらを御覧下さい。
なお、ライン入力モードではボタン入力は無効になります。

HTMLコードを自動生成

上の方法で作った牌画を表示させるためのHTMLコードが、リアルタイムで書き出されます。
テキストエリアの文字列をコピーしてHTML文書に貼りつけるだけでOKです。

対応ブラウザ

FireFox推奨です。
GoogleChrome もほぼちゃんと動きますが、ページを再読み込みするとデータが消えてしまうので注意。
InternetExplorer は、HTMLコードを出力するテキストエリアにフォーカスすると文字が消えてしまうバグが起こります。NSの知識不足でまだ対応できていません。
ただ動作を確認するだけなら問題ありませんが、HTMLコードを取得したい場合は使えません。

ファイル

ネット歴半年未満のNS、さっき初めてダウンロードのさせ方を知りました。
昨日更新の立先生のサイトに3Dデータファイル?ダウンロードのアレがあったでしょう。
で、その部分のソースを見てやり方が分かったのですよ。Thanks be to ritz!
覚えたことはすぐやりたがる、心は十代、NSです。
下のリンクからzipファイルがダウンロードできます。
自分の端末で何度か実験してみたので大丈夫だと思います！
disPai() ver.2.03をダウンロードする
↑これの中身は

dispai203 ━┳━ SP_ancoro_blue2.png(牌画用スプライト画像ファイル)
dispai203 ━┣━ SP_jyushisirin.png(アイコン用スプライト画像ファイル)
dispai203 ━┣━ ancoro203.css(スタイルシート)
dispai203 ━┗━ dispai203.html(HTMLファイル)

で、上のデモページもこれと全く同じファイル、同じ構成で動かしています。
この四本のファイルを端末にフォルダごと置いておけば、オフラインでの作業が可能です。
dispai203.html(またはショートカット)をクリックするとブラウザが disPai()ver.2.03 を起動します。
(ブラウザの設定で JavaScript がオフになっている場合は、オンにします)

サイトに牌画を表示するには

上のファイルのうち、画像とスタイルシートをサーバーにアップしますが、書き変えるところと、書き加えるところが、計三箇所だけあります。

①SP_ancoro_blue2.png と SP_jyushisirin.png をアップロードする。

②ancoro203.css を書き変え、アップロードする。

メモ帳などのテキストエディタで、ancoro203.css を開きます。 
.ancoro {
  background:transparent url(SP_ancoro_blue2.png) -1000px -1000px no-repeat;
}
.jyush {
  background:transparent url(SP_jyushisirin.png) -1000px -1000px no-repeat;
  width: 25px;
  height: 15px;
}
二行目と五行目、赤字の部分を、それぞれ①の画像のURLに置き換えて保存します。
それをサーバーにアップします。

③CSSへのリンクを設定する

サイトのHTMLファイルの<head>～</head>の部分に、次の一行を書き加えます。 
<link rel="stylesheet" href="http://…/ancoro203.css" type="text/css" />
赤字の部分は、②のCSSファイルのURLです。
テンプレートをいじりたくない場合は、牌画を表示させたい記事ごとに、記事の一行目に上の<link>タグを貼ります。

以上の設定が終われば、 disPai()ver.2.03 で作った HTMLコードが、牌画として表示されるようになります。
お試しあれ。
タグ ：
#disPai()
#小林立