HTML文章内の文字列を解釈して、自動的に画像に変換してしまうスクリプトの利用方法。
画像データのダウンロードも、イメージタグのコピペ作業も必要ありません。
めっちゃ簡単に、普通のホームページや、テキスト投稿サイトや、自分で管理する各種ブログ・日記にマージャン牌を表示できます。
商用ブログサービスの場合は、使えない可能性が高いので注意を。
2013年12月現在、利用可能なブログサービスは、
・Blogger ・livedoor ・@nifty ココログ ・FC2 ブログ 等です。
利用できないのは、
・アメブロ ・goo ・Seesaa ・ウェブリブログ（BIGLOBE） ・excite.ブログ 等です。
無料でも（ブログでなく）ホームページならOKです。
【2014.11.11 追記】
一部のブログでは表示が崩れる（画像の後に "> みたいなゴミが出る）という現象があった。
これは、まさか、一つの HTML 内で何度も関数コールされるとは思っていなかったためで、そういった場合の対処を行った。使い方は従来のままで、ゴミが出なくなっただけだ。
【2017.12.31 追記】
本スクリプトの設置場所 paiga.net が SSL 化されたことに伴い、以下の記載の「http://」を「https://」に変更しました。
今まで利用できなかったサイトでも、利用できる可能性が高まりました。
使い方
牌を定義してある HTML 文章の body 部（の一部）を <div class="Paiga"> と </div> で囲み、
最後に（通常は、</body> の前）、以下の一行を記述。
<script src="https://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="https://paiga.net/openjs/sj-pn_cvt.js"></script><script>PN_Convert();</script>
記述サンプル
… 省略 …
<div class="Paiga">
<p>今日も負けた。<br />
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。<br />
その時の手配は、<br />
①①③③④④④④赤５６７東東白ポッチ</p>
<p>次巡にツモった赤五筒がうらめしかった。</p>
</div>
<script src="https://paiga.net/openjs/pn_cvt.js"></script><script>PN_Convert();</script>
… 省略 …
詳細な仕様
牌名の記述について
| 索子牌の記述方法 | 一索、二索、三索、．．九索。 |
|---|
| 筒子牌の記述方法 | 一筒、二筒、三筒、．．九筒。 |
|---|
| 萬子牌の記述方法 | 一萬、二萬、三萬、．．九萬。「万」でも可。 |
|---|
| 字牌の記述方法 | 東、南、西、北、白、發（発）、中。 |
|---|
| 赤牌の記述方法 | 赤三索、赤五索、赤三筒、赤五筒、赤三萬、赤五萬。 |
|---|
| その他の牌 | 白ポッチ、裏（縦向きのみ）。 |
|---|
| 横向きの牌 | 横赤三筒、横一索、等。「横」でなく半角の「Y」も可。 |
|---|
牌譜上の一般的な記述方法（「１」「２」「３」「一」「ニ」「三」「(1)」「(2」「3)」など）でも、うまく変換できるかもしれません。
機種依存文字である①②③なども使えるかもしれません。
横向きの記述は１枚だけ有効です。複数の牌を横向かせる場合には（って、そんな場合はナイだろ！）、「横一索横二筒横三索」のように１牌毎に記述しなければいけません。
別の画像タイプを使う場合
最後に追加する行内の PN_Convert(); を以下のように書き換えます。
PN_Convert( 'B3' ); → 本サイト内の画像「標準立体：タイプ B3」が表示されます。
PN_Convert( 'J2' ); → 本サイト内の画像「黄ばんだ紙平板：タイプ J2」が表示されます。
本サイト内の「牌の画像データ」内で、アルファベットと数字の二文字のタイプだけ（数字は２か３のみ）が対応しています。
牌の大きさを小さくしたい場合
最後に追加する行内の PN_Convert(); に２番目の引数に「1」か「2」を書き加えます。
PN_Convert( 'F3', 1 ); → 元の大きさの 75% のサイズ。
PN_Convert( 'G3', 2 ); → 元の大きさの 50% のサイズ。
PN_Convert( 'D3', 0 ); → 元の大きさ。「PN_Convert( 'D3' );」と書いたのと同じ。
最初の引数（画像タイプ）を省略することはできません。
イメージの隙間を埋めたい場合
Blogger（Google のサービス）等の一部のブログでは、画像によけいな装飾がされ、隙間が発生する場合があります。
これを解消するためには最後に追加する行内の PN_Convert(); に３番目の引数に「1」を書き加えます。
PN_Convert( 'F3', 0, 1 ); → 強制的に隙間を埋めます。
最初の引数（画像タイプ）と二番目の引数（縮小値：0）を省略することはできません。
文章の一部だけをイメージ変換したい場合
牌を表す文字は自動で変換されてしまうので、文章中に「東」や「中」などがある場合に困ります。
こういう場合には、変換したい箇所だけを半角の中括弧「{」と「}」で囲みます。
中括弧が一組以上ある場合は、中括弧に囲まれた部分しか変換しません。
「生牌の{西}を捨てたのは、東京から来た中学生の北山だった。」という文章にします。
「{生牌の西を捨てたのは、}東京から来た中学生の北山だった。」でもかまいません。
これは「３」や「八」や「①」でも同様です。中括弧があるテキストには、中括弧以外の文字を変換対象にしません。
また、class="Paiga" の定義は一つの HTML 文書内に複数定義できますので、変換対象を含む部分だけを class="Paiga" で囲んでください。
… 省略 …
<p>今日も負けた。<br />
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。<br />
その時の手配は、<br />
<span class="Paiga">①①③③④④④④赤５６７東東白ポッチ</span></p>
<p>次巡にツモった<span class="Paiga">赤五筒</span>がうらめしかった。</p>
<script src="https://paiga.net/openjs/pn_cvt.js"></script><script>PN_Convert();</script>
… 省略 …
上の定義の場合、文章中の「三筒」「四筒」は変換されませんが「赤五筒」は変換されます。
上の定義は、下の定義とまったく同じ結果になります。
… 省略 …
<div class="Paiga">
<p>今日も負けた。<br />
最後の半荘の荘家で、ドラが三筒の時に、四筒を槓したのがまずかった。<br />
その時の手配は、<br />
{①①③③④④④④赤５６７東東白ポッチ}</p>
<p>次巡にツモった{赤五筒}がうらめしかった。</p>
</div>
<script src="https://paiga.net/openjs/pn_cvt.js"></script><script>PN_Convert();</script>
… 省略 …
技術仕様
- ・PN_Convert の引数
-
１番目：牌タイプ／未定義の場合は「"F3"」
２番目：イメージの縮小度：「0」「1」「2」／未定義の場合は「0」
３番目：余白部の強制削除：「false」「true」／未定義の場合は「false」
４番目：部分抽出する括弧文字：「"{}"」「"｛｝"」「"[]"」「"［］"」／未定義の場合は「"{}"」
５番目：変換対象部の属性文字列／未定義の場合は「"Paiga"」
- ・起牌と倒牌の判定
-
連続した牌の内、一枚でも「裏」か横向きがあれば倒牌、その他は起牌／立体画像のタイプにのみ適用
- ・赤牌の定義
-
牌名の前に「R」か「r」が追加された３と５も赤牌とみなす
- ・横向き牌の定義
-
牌名の前に「Y」か「y」が追加された場合は横向きの副露牌とみなす
- ・class でなく id でも定義
-
id でも定義できる／HTML 内に一つだけ
- ・できないこと
-
牌画ネット以外の画像ファイルを表示させる
- ・できそうにないけど実はできること
-
１ページ内に別の画像タイプを表示する
１ページ内に違うサイズの画像を表示する
＊本サイト内の「牌の画像データ１」は、本スクリプトだけを使用して複数種類の牌タイプを表示しています。判る方はブラウザでソースを閲覧するなりして参考にしてください。
の時に、
を槓したのがまずかった。
がうらめしかった。
の時に、
を槓したのがまずかった。
がうらめしかった。
の時に、
を槓したのがまずかった。
がうらめしかった。