ホームページの文章内のマージャン牌の文字を自動で画像に変換させる方法。従来よりも簡単に定義できますが使えるブログには制限があります。

[雑録]牌画クラウド変換

これなら簡単、世の中のホームページを麻雀牌で飾ろう!

HTML文章内の文字列を解釈して、自動的に画像に変換してしまうスクリプトの利用方法。
画像データのダウンロードも、イメージタグのコピペ作業も必要ありません。
めっちゃ簡単に、普通のホームページや、テキスト投稿サイトや、自分で管理する各種ブログ・日記にマージャン牌を表示できます。

商用ブログサービスの場合は、使えない可能性が高いので注意を。
2013年12月現在、利用可能なブログサービスは、
・Blogger ・livedoor ・@nifty ココログ ・FC2 ブログ 等です。
利用できないのは、
・アメブロ ・goo ・Seesaa ・ウェブリブログ(BIGLOBE) ・excite.ブログ 等です。
無料でも(ブログでなく)ホームページならOKです。

【2014.11.11 追記】
一部のブログでは表示が崩れる(画像の後に "> みたいなゴミが出る)という現象があった。
これは、まさか、一つの HTML 内で何度も関数コールされるとは思っていなかったためで、そういった場合の対処を行った。使い方は従来のままで、ゴミが出なくなっただけだ。

使い方

牌を定義してある HTML 文章の body 部(の一部)を <div class="Paiga"> と </div> で囲み、 最後に(通常は、</body> の前)、以下の一行を記述。
<script src="http://paiga.net/openjs/pn_cvt.js"></script><script>PN_Convert();</script>
たった、これだけ。

↑ ホントにたったこれだけ! ↑

変換がうまくいかない場合は、元のHTMLのソースの文字コードが UTF-8 でないことが予想されます。
Shift-JIS で記述している場合には「pn_cvt.js」を「sj-pn_cvt.js」に変更してください。
<script src="http://paiga.net/openjs/sj-pn_cvt.js"></script><script>PN_Convert();</script>

記述サンプル

 … 省略 …
<div class="Paiga">
<p>今日も負けた。<br />
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。<br />
その時の手配は、<br />
①①③③④④④④赤567東東白ポッチ</p>
<p>次巡にツモった赤五筒がうらめしかった。</p>
</div>
<script src="http://paiga.net/openjs/pn_cvt.js"></script><script>PN_Convert();</script>
 … 省略 …

記述サンプルの画面上の表示

今日も負けた。
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。
その時の手配は、
一筒一筒三筒三筒四筒四筒四筒四筒赤五索六索七索東東白ポッチ

次巡にツモった赤五筒がうらめしかった。

画面上の表示2

下は、最後の行の一部「PN_Convert();」を「PN_Convert("C3", 1);」に変換した場合

今日も負けた。
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。
その時の手配は、
一筒一筒三筒三筒四筒四筒四筒四筒赤五索六索七索東東白ポッチ

次巡にツモった赤五筒がうらめしかった。

画面上の表示3

下は、最後の行の一部「PN_Convert();」を「PN_Convert("B2", 1);」に変換した場合

今日も負けた。
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。
その時の手配は、
一筒一筒三筒三筒四筒四筒四筒四筒赤五索六索七索東東白ポッチ

次巡にツモった赤五筒がうらめしかった。

詳細な仕様

牌名の記述について

索子牌の記述方法一索、二索、三索、..九索。
筒子牌の記述方法一筒、二筒、三筒、..九筒。
萬子牌の記述方法一萬、二萬、三萬、..九萬。「万」でも可。
字牌の記述方法東、南、西、北、白、發(発)、中。
赤牌の記述方法赤三索、赤五索、赤三筒、赤五筒、赤三萬、赤五萬。
その他の牌白ポッチ、裏(縦向きのみ)。
横向きの牌横赤三筒、横一索、等。「横」でなく半角の「Y」も可。

牌譜上の一般的な記述方法(「1」「2」「3」「一」「ニ」「三」「(1)」「(2」「3)」など)でも、うまく変換できるかもしれません。
機種依存文字である①②③なども使えるかもしれません。
横向きの記述は1枚だけ有効です。複数の牌を横向かせる場合には(って、そんな場合はナイだろ!)、「横一索横二筒横三索」のように1牌毎に記述しなければいけません。

別の画像タイプを使う場合

最後に追加する行内の PN_Convert(); を以下のように書き換えます。
PN_Convert( 'B3' ); → 本サイト内の画像「標準立体:タイプB3」が表示されます。
PN_Convert( 'J2' ); → 本サイト内の画像「黄ばんだ紙平板:タイプJ2」が表示されます。

本サイト内の「牌の画像データ」内で、アルファベットと数字の二文字のタイプだけ(数字は2か3のみ)が対応しています。

牌の大きさを小さくしたい場合

最後に追加する行内の PN_Convert(); に2番目の引数に「1」か「2」を書き加えます。
PN_Convert( 'F3', 1 ); → 元の大きさの 75% のサイズ。
PN_Convert( 'G3', 2 ); → 元の大きさの 50% のサイズ。
PN_Convert( 'D3', 0 ); → 元の大きさ。「PN_Convert( 'D3' );」と書いたのと同じ。

最初の引数(画像タイプ)を省略することはできません。

イメージの隙間を埋めたい場合

Blogger(Google のサービス)等の一部のブログでは、画像によけいな装飾がされ、隙間が発生する場合があります。
これを解消するためには最後に追加する行内の PN_Convert(); に3番目の引数に「1」を書き加えます。
PN_Convert( 'F3', 0, 1 ); → 強制的に隙間を埋めます。

最初の引数(画像タイプ)と二番目の引数(縮小値:0)を省略することはできません。

文章の一部だけをイメージ変換したい場合

牌を表す文字は自動で変換されてしまうので、文章中に「東」や「中」などがある場合に困ります。
こういう場合には、変換したい箇所だけを半角の中括弧「{」と「}」で囲みます。

中括弧が一組以上ある場合は、中括弧に囲まれた部分しか変換しません。
「生牌の{西}を捨てたのは、東京から来た中学生の北山だった。」という文章にします。
「{生牌の西を捨てたのは、}東京から来た中学生の北山だった。」でもかまいません。
これは「3」や「八」や「①」でも同様です。中括弧があるテキストには、中括弧以外の文字を変換対象にしません。

また、class="Paiga" の定義は一つの HTML 文書内に複数定義できますので、変換対象を含む部分だけを class="Paiga" で囲んでください。

 … 省略 …
<p>今日も負けた。<br />
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。<br />
その時の手配は、<br />
<span class="Paiga">①①③③④④④④赤567東東白ポッチ</span></p>
<p>次巡にツモった<span class="Paiga">赤五筒</span>がうらめしかった。</p>
<script src="http://paiga.net/openjs/pn_cvt.js"></script><script>PN_Convert();</script>
 … 省略 …

上の定義の場合、文章中の「三筒」「四筒」は変換されませんが「赤五筒」は変換されます。
上の定義は、下の定義とまったく同じ結果になります。

 … 省略 …
<div class="Paiga">
<p>今日も負けた。<br />
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。<br />
その時の手配は、<br />
{①①③③④④④④赤567東東白ポッチ}</p>
<p>次巡にツモった{赤五筒}がうらめしかった。</p>
</div>
<script src="http://paiga.net/openjs/pn_cvt.js"></script><script>PN_Convert();</script>
 … 省略 …

技術仕様

・PN_Convert の引数
1番目:牌タイプ/未定義の場合は「"F3"」
2番目:イメージの縮小度:「0」「1」「2」/未定義の場合は「0」
3番目:余白部の強制削除:「false」「true」/未定義の場合は「false」
4番目:部分抽出する括弧文字:「"{}"」「"{}"」「"[]"」「"[]"」/未定義の場合は「"{}"」
5番目:変換対象部の属性文字列/未定義の場合は「"Paiga"」
・起牌と倒牌の判定
連続した牌の内、一枚でも「裏」か横向きがあれば倒牌、その他は起牌/立体画像のタイプにのみ適用
・赤牌の定義
牌名の前に「R」か「r」が追加された3と5も赤牌とみなす
・横向き牌の定義
牌名の前に「Y」か「y」が追加された場合は横向きの副露牌とみなす
・class でなく id でも定義
id でも定義できる/HTML 内に一つだけ
・できないこと
牌画ネット以外の画像ファイルを表示させる
・できそうにないけど実はできること
1ページ内に別の画像タイプを表示する
1ページ内に違うサイズの画像を表示する
*本サイト内の「牌の画像データ」索引頁の一部に本スクリプトが使用されている。