shogizumen.js

ホーム > 将棋 > shogizumen.js

shogizumen.js は、まあさ（maasa.）さんが作った、将棋の局面図をきれいなSVG（※1）で表示するJavaScript。また、元のkif型式のテキストも表示可能。

http://maasa.g2.xrea.com/shogizumen/ で公開中（以前は http://www.geocities.jp/ookami_maasa/shogizumen/ で公開されていた）。

shogizumen.jsはMITライセンスになっているので、これに従っていれば改造なども可能。

hiromisoさんによって、shogizumen.jsのバグ（1筋への移動が強調されない）を修正するdiffファイルが公開されている。

このshogizumen.js は、ブログなどで使われている。また、生成されるSVGの局面図をWordなどワープロソフトに貼り付ければ、拡大してもギザギザのないきれいな表示が可能になる。そのため、電子出版でも大いに力を発揮できそう。

ただ、指し将棋の局面図を表示しているため、持駒の部分が「先手／後手」の形になっていて、詰将棋用には使いにくい。

そこで、tumeksterさんのtweetを参考に持駒の部分を改造した。さらに将棋盤を正方形から少し縦長（※2）にして、星も追加した。

詰将棋用 shogizumen.js （と書式設定用の zumen.css）、とりあえずうまく動いているみたい。

詰将棋用 shogizumen.js による表示例

後手の持駒：飛二　角二　金二　銀　桂三　香三　歩十六　

９８７６５４３２１

+---------------------------+

| ・・・・・・金v桂v香|一

| ・・・・・・銀v玉・|二

| ・・・・・・v銀v歩・|三

| ・・・・・・・・・|四

| ・・・・・・・・歩|五

| ・・・・・・・・・|六

| ・・・・・・・・・|七

| ・・・・・・・・・|八

| ・・・・・・・・・|九

+---------------------------+

先手の持駒：金　銀　

</pre>

スタイルシートでフォントを明朝体に指定

<style>

svg { font-family : '游明朝','YuMincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ＭＳＰ明朝','MS Mincho',serif; }

</style>

後手の持駒：飛二　角二　金二　銀　桂三　香三　歩十六　

９８７６５４３２１

+---------------------------+

| ・・・・・・金v桂v香|一

| ・・・・・・銀v玉・|二

| ・・・・・・v銀v歩・|三

| ・・・・・・・・・|四

| ・・・・・・・・歩|五

| ・・・・・・・・・|六

| ・・・・・・・・・|七

| ・・・・・・・・・|八

| ・・・・・・・・・|九

+---------------------------+

先手の持駒：金　銀　

</pre>

生成された局面図のsvgファイル（整形済）

<g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</svg>

注

※1 SVGは、Scalable Vector Graphicsの略。くわしくは、WikipediaのScalable Vector Graphicsを参照のこと。

※2 将棋盤は縦が1尺2寸、横が1尺1寸だそうなので、縦横の比率を 12 ÷ 11 ≒ 1.09 として計算した。

2023年2月15日作成/2023年4月20日修正

ホーム > 将棋 > shogizumen.js