牌譜ビューアのブログ貼り付け(ただしアメブロは除く) | 無気力無関心(仮)

牌譜ビューアのブログ貼り付け(ただしアメブロは除く)

天鳳の牌譜ビューア(HTML+JS版)がブログに貼り付け可能になったので、それについて解説してみたいと思います。

ただし、アメブロはiFrameのタグが使用不可で貼り付けられませんので、FC2ブログにサンプルページを作ってみましたのでそちらをご覧ください。(ビューア再生については『?』のアイコンをクリックすると説明が表示されます。)


それではブログへの貼り付け方を説明します。

1.貼り付けタグの雛形ゲット

まず、(アメブロでは記事に使用禁止な文字列なので)こちらからタグをコピペしてしてきます。

2.牌譜URLを挿入

↑のタグの『牌譜URL』の部分に貼り付けたい牌譜のURLを挿入するのですが、その際にURLの『http://tenhou.net/0/~』を『http://tenhou.net/5/~』に書き換えます。

http://tenhou.net/0/?log=2014030600gm-0039-0000-502a13a1&tw=0
         ↓ ↓ ↓
http://tenhou.net/5/?log=2014030600gm-0039-0000-502a13a1&tw=0

これで牌譜ビューアの再生がHTML+JS版に固定されます。

その他に視点・局・巡目などの指定は天鳳のマニュアルを参照してください。

3.牌譜ビューアのサイズ変更

widthとheightの数値を変更することでビューアのサイズを変更できます。

なるべく大きい方が牌譜も見やすいので、自分のブログに合わせて調整してください。

ちなみに、widthには数値(●●px)でなく『100%』と入れると自動で横幅の最大に合わせてくれます。

4.記事にコピペ

iFrameのタグが使用可能なブログ(FC2やlivedoorなど)なら、記事にタグをコピペすれば牌譜ビューアの貼り付け完了です。


それから、牌譜エディタの機能も実装されましたので、こちらの説明も簡単にしておきたいと思います。

まずは(元は天鳳の牌譜ですが)手動で編集したサンプルをご覧ください。

※天鳳牌譜の編集なら、URLを『http://tenhou.net/0/~』から『http://tenhou.net/6/~』に書き換えれば対戦結果の局一覧から編集できるようになりました。

これでリアル麻雀の牌譜も天鳳牌譜と同様にURLで再生・保存が可能になります。(牌譜が天鳳のサーバに保存されるのではなく、牌譜の内容がそのままURLに変換されるという仕組み。)

ただし、現時点では『1つのURLにつき1局ぶんの牌譜しか編集できない』『細かいルール設定に対応できない(赤ドラの有無のみ)』という注意点もあります。

編集のやり方としては、紙の牌譜の読み書きがわかる人ならエディタ本体から直感的に入力可能です。(入力したらページ最下部のボタンでURL変換やタグ変換できる。)