「shogizumen.js」はHTML中に書かれたkif形式(.bodファイル形式)の盤面テキストを、SVGで描いた将棋局面図に置き換えて表示するスクリプトです。
ホームページやブログに将棋の記事を書く際に、局面図画像の作成の手間や画像のアップロードの手間を減らし、美しい局面図を提供します。
Webページ読み込み後にJavascriptを用いインラインSVGに将棋局面図を描画し置換します。インラインSVGに対応してないブラウザやjavascriptを無効化している環境では将棋局面図には置換されませんが、その場合でもHTMLに記述した盤面テキストがそのまま表示されます。
また、元のkif形式テキストを表示できるようにしてますので、テキストをコピーして、将棋ソフトなどで局面をすぐ再現させることができる利点もあります。
HTMLソース
<script src="shogizumen.js"></script>
<pre class="shogizumen">
後手の持駒：なし
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
|v香v桂 ・ ・ ・v玉v角v桂v香|一
| ・v飛 ・v銀v金 ・v金 ・ ・|二
|v歩 ・ ・v歩 ・ ・v銀v歩v歩|三
| ・v歩v歩 ・v歩v歩v歩 ・ ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ 歩 歩 歩 ・ 歩 ・ ・|六
| 歩 歩 銀 金 ・ 歩 銀 歩 歩|七
| ・ ・ 金 ・ ・ ・ ・ 飛 ・|八
| 香 桂 角 玉 ・ ・ ・ 桂 香|九
+---------------------------+
先手の持駒：なし
手数＝25 ▲３七銀 まで
</pre>
ブラウザでの表示
後手の持駒：なし ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ |v香v桂 ・ ・ ・v玉v角v桂v香|一 | ・v飛 ・v銀v金 ・v金 ・ ・|二 |v歩 ・ ・v歩 ・ ・v銀v歩v歩|三 | ・v歩v歩 ・v歩v歩v歩 ・ ・|四 | ・ ・ ・ ・ ・ ・ ・ ・ ・|五 | ・ ・ 歩 歩 歩 ・ 歩 ・ ・|六 | 歩 歩 銀 金 ・ 歩 銀 歩 歩|七 | ・ ・ 金 ・ ・ ・ ・ 飛 ・|八 | 香 桂 角 玉 ・ ・ ・ 桂 香|九 +---------------------------+ 先手の持駒：なし 手数＝25 ▲３七銀 まで
inline-SVG非対応ブラウザ
Javascript無効設定ブラウザの表示
後手の持駒：なし ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ |v香v桂 ・ ・ ・v玉v角v桂v香|一 | ・v飛 ・v銀v金 ・v金 ・ ・|二 |v歩 ・ ・v歩 ・ ・v銀v歩v歩|三 | ・v歩v歩 ・v歩v歩v歩 ・ ・|四 | ・ ・ ・ ・ ・ ・ ・ ・ ・|五 | ・ ・ 歩 歩 歩 ・ 歩 ・ ・|六 | 歩 歩 銀 金 ・ 歩 銀 歩 歩|七 | ・ ・ 金 ・ ・ ・ ・ 飛 ・|八 | 香 桂 角 玉 ・ ・ ・ 桂 香|九 +---------------------------+ 先手の持駒：なし 手数＝25 ▲３七銀 まで
ver.20170713 shogizumen.min.js
非圧縮版 shogizumen.js
1. scriptタグでshogizumen.jsをページ内で読み込むようにする（<head>〜</head>間でも<body>〜</body>間でもどちらでも可）。
2. クラス名にshogizumenを指定したpreタグ内に局面図テキストを書く。
以上で、htmlのロード完了時に局面図が置き換わるようになります。
スタイルシートで大きさやファントなどをカスタマイズすることが出来ます。
サイズ・・・局面図のSVGは、shogizumenクラスを指定したpreタグのサイズを超えない 横12×nピクセル 縦10×nピクセル (nは整数)の最大の大きさになります。288x240px（推奨） 336x280px（大きめ）264x220px（少し小さめ）などページの文章の文字サイズとのバランスをみて好みの大きさを、pre.shogizumenに指定すると良いでしょう。（指定の際preタグのpaddingやborderの幅も含むサイズになる点に注意）
フォント、色・・・文字と将棋盤の枠線は、shogizumenクラスを指定したpreタグの親要素のfont-familyとcolorを継承して描画します。(pre.shogizumenにfont-familyや色を指定しても、SVG局面図には影響ありません。それは、代替表示の局面図テキストのフォントと色を指定しているにすぎません。)
また、最終手にはsvLastMoveクラスが指定されていますので、font-familyやfont-weightなどで最終手を強調することが出来ます。
<figure class="zumen">
<figcaption>図は25手目３七銀まで</figcaption>
<pre class="shogizumen">
後手の持駒：なし
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
|v香v桂 ・ ・ ・v玉v角v桂v香|一
| ・v飛 ・v銀v金 ・v金 ・ ・|二
|v歩 ・ ・v歩 ・ ・v銀v歩v歩|三
| ・v歩v歩 ・v歩v歩v歩 ・ ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ 歩 歩 歩 ・ 歩 ・ ・|六
| 歩 歩 銀 金 ・ 歩 銀 歩 歩|七
| ・ ・ 金 ・ ・ ・ ・ 飛 ・|八
| 香 桂 角 玉 ・ ・ ・ 桂 香|九
+---------------------------+
先手の持駒：なし
手数＝25 ▲３七銀 まで
</pre>
</figure>
後手の持駒：なし ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ |v香v桂 ・ ・ ・v玉v角v桂v香|一 | ・v飛 ・v銀v金 ・v金 ・ ・|二 |v歩 ・ ・v歩 ・ ・v銀v歩v歩|三 | ・v歩v歩 ・v歩v歩v歩 ・ ・|四 | ・ ・ ・ ・ ・ ・ ・ ・ ・|五 | ・ ・ 歩 歩 歩 ・ 歩 ・ ・|六 | 歩 歩 銀 金 ・ 歩 銀 歩 歩|七 | ・ ・ 金 ・ ・ ・ ・ 飛 ・|八 | 香 桂 角 玉 ・ ・ ・ 桂 香|九 +---------------------------+ 先手の持駒：なし 手数＝25 ▲３七銀 まで
shogizumen.jsはMITライセンスとします。
shogizumen.jsは改変、配布、商用利用等、自由に利用できます。ただし、スクリプト記載の著作表記は残してください。
作者はこのスクリプトの利用によるいかなる責任も負いません。