牌画表示プラグイン (Tilesプラグイン) って何？

tDiary上で麻雀の牌画 (列) を表示するためのプラグインです。麻雀牌列を文字列として与えると、画像を表示します。また、単独の牌画の表示も可能です。

使い方 (牌画列の表示)

tiles関数により、牌画列を表示することが可能です。

tiles関数は2つの引数をとります。第1引数は牌名 (後述します) を空白文字 (rubyのsplit関数の認識する空白文字) で区切った列をとります。第2引数は牌画列のキャプション用文字列をとります。

例を挙げると、

<%=tiles( "b1 b2 b5 b7 b9 c2 c4 c5 d2 d4 we we ws sp ws", "東1局 1本場 東家 1順目 配給原点" )%>

と書くと、

と表示します。HTML的には、以下の様なものを吐きます。

<DIV class=tiles>
<P class=tiles_images>
<IMG class=tile height=32 alt=一索 src="./tiles_images/b1.png" width=24>
<IMG class=tile height=32 alt=二索 src="./tiles_images/b2.png" width=24>
<IMG class=tile height=32 alt=五索 src="./tiles_images/b5.png" width=24>
<IMG class=tile height=32 alt=七索 src="./tiles_images/b7.png" width=24>
<IMG class=tile height=32 alt=九索 src="./tiles_images/b9.png" width=24>
<IMG class=tile height=32 alt=二萬 src="./tiles_images/c2.png" width=24>
<IMG class=tile height=32 alt=四萬 src="./tiles_images/c4.png" width=24>
<IMG class=tile height=32 alt=五萬 src="./tiles_images/c5.png" width=24>
<IMG class=tile height=32 alt=二筒 src="./tiles_images/d2.png" width=24>
<IMG class=tile height=32 alt=四筒 src="./tiles_images/d4.png" width=24>
<IMG class=tile height=32 alt=東 src="./tiles_images/we.png" width=24>
<IMG class=tile height=32 alt=東 src="./tiles_images/we.png" width=24>
<IMG class=tile height=32 alt=南 src="./tiles_images/ws.png" width=24>
<IMG class=tile height=32 alt=　 src="./tiles_images/sp.png" width=24>
<IMG class=tile height=32 alt=南 src="./tiles_images/ws.png" width=24>
</P>
<P class=tiles_comment>東1局 1本場 東家 1順目 配給原点</P>
</DIV>

使い方 (単独牌画の表示)

tile関数により、単独の牌画を表示することが可能です。tile関数は1つの引数として、牌名の文字列をとります。

インラインで

<%=tile( "b1" )%>

と書くとの様に牌画が単独で埋め込まれます。HTML的には、

<IMG class=tile height=32 alt=一索 src="./tiles_images/b1.png" width=24>

を吐きます。

牌名

牌名とそのサンプルは以下の通りです。なお、末尾に "l" を加えると、横向きの牌画になります。

牌種	表記
索子 (bamboos)	b1=, b2=, b3=, b4=, b5=, b5r=, b6=, b7=, b8=, b9=
萬子 (characters)	c1=, c2=, c3=, c4=, c5=, c5r=, c6=, c7=, c8=, c9=
筒子 (dots)	d1=, d2=, d3=, d4=, d5=, d5r=, d6=, d7=, d8=, d9=
風牌 (winds)	we=, ws=, ww=, wn=
三元牌 (dragons)	dw=, dg=, dr=
その他	bk=, ar=, sp=

使い方 (cssの作製)

cssの例として、comjong.com内での設定を以下に示します。お好みで調整して下さい。

div.tiles {
	border-style: solid;
	border-color: #cc0000;
	border-width: 1px 1px 1px 6px;
	padding: 4px;
	margin-left: 3em;
	margin-right: 3em;
}
img.tile {
	margin-left; 0em;
	margin-right; 0em;
}
p.tiles_images p.tiles_comment {
	font-size: small;
}

ダウンロード

tiles.rbはGPLソフトウェアです。

牌画像は一二四十の牌画をご厚意で再配布させていただいております。なお、再配布にあたりファイル名の変更やファイルフォーマットの変換を行った上で再アーカイブをしております。牌画の権利は田中猛彦氏に帰属しますので、利用の際は一二四十のライセンスをご確認ください。

• tiles.rb (ver.1.1.0)
• tiles.rb 用牌画セット

インストール

tiles.rbをプラグインディレクトリ (標準では misc/plugin) に置くだけで、tDiaryの設定画面から利用可能になります。

牌画は、tDiaryディレクトリの直下にtiles_imageディレクトリがくるように置いて下さい。このディレクトリは、Tilesプラグインの設定画面から変更可能です。

他の牌画を使用するには

他の牌画を利用する場合は、以下の二つの方法のうち、どちらかをとってください。

一つ目の方法は、牌画の名前をTilesプラグインの標準に合わせる方法です。tiles_images以下のディレクトリの牌画ファイルを入れ替えるだけで動作します。標準のpng以外のフォーマットを使用する場合はTilesの設定画面から、補完する拡張子を設定して下さい。なお、heightとwidthは画像ファイルから自動的に拾います。

二つ目の方法として、Tilesプラグインの標準と異なる牌名を使用することも可能です。Tilesプラグインは、画像ファイルを参照する際に、単に牌名に画像ファイルの拡張子を結合しています。ただし、alt属性は内部のテーブルを引いているため、それを書き換える必要があります。詳細はソースをみて下さい。

謝辞

素晴らしい牌画をご提供いただいた田中猛彦氏に感謝いたします。

絵日記プラグイン内の、画像ファイル内のヘッダ情報読み取りルーチンを利用させていただきました。ありがとうございました。

更新履歴

1.1.0: 公開できるように少しドキュメントを書いた。ディレクトリ名くらいは指定できるようにした。

1.0.0: とりあえず作ってみる

ToDo

以下、ToDoリストです。

• ドラ表示もきれいにかけるとうれしいかも。どういうhtmlを吐くのが良いだろうか？ (これを入れるとインタフェースが変わるかも)
• 牌符の様に複数行に渡るものもサポートしたいがどういうインタフェースにしよう?
• 東風荘のログを張り付けると整形された牌符が表示されるとうれしい?