画像ファイルを使用せずに綺麗な局面図（SVG形式）を載せる方法

2017 7/19

2017.07.19 2021.08.27

ブログやウェブサイトに将棋の局面図を載せたいとき、「局面図作成」、「Kifu for Windows」などのアプリケーションソフトを使用して局面図画像ファイルを作成しアップロードするか、「クラウド将棋局面図ジェネレーター」などのWebAPIを利用して局面図画像を埋め込む方法が一般的だ。

しかし前者の方法だと、作成した局面図画像ファイルをいったんどこかのローカルフォルダに保存した後所定のサーバにアップする手間が発生したり、ローカルスペース、サーバスペースを少しずつ消費していく欠点が挙げられ、後者の方法だと、WebAPIサービスの提供が終了した場合局面図が表示されなくなるというリスクが伴う。

そこで今回、画像ファイルを使用せず、APIを埋め込むこともなく、カスタマイズ性に優れたSVG形式の美しい局面図を載せる方法を紹介する。

shogizumen.jsを設置しておく

最初にして最大の難関。js(JavaScript)ファイル「shogizumen.js」を、局面図を載せたいブログやウェブサイトに組み込んでおく。「shogizumen.js」は、後述するBOD形式の盤面テキストを、SVGで描いた局面図に置き換えて表示するスクリプトで、下記サイトからダウンロードでき、使い方やスタイルシートによるカスタマイズ方法についても紹介されている。

BOD形式の盤面テキストを作成する

BOD形式、と言われても聞き慣れないかもしれないが、

後手の持駒：なし
９８７６５４３２１
+---------------------------+
|v香v桂v銀v金v玉v金v銀v桂v香|一
| ・v飛・・・・・v角・|二
|v歩v歩v歩v歩v歩v歩v歩v歩v歩|三
| ・・・・・・・・・|四
| ・・・・・・・・・|五
| ・・・・・・・・・|六
| 歩歩歩歩歩歩歩歩歩|七
| ・角・・・・・飛・|八
| 香桂銀金玉金銀桂香|九
+---------------------------+
先手の持駒：なし

という形式の盤面テキストデータのことで、例えば

「Kifu for Windows」なら「編集」－「局面のコピー」
「将棋所」なら「編集」－「局面コピー(KIF/KI2形式)」
「ShogiGUI」なら「編集」－「局面コピー」－「BOD」

から、現在表示中の局面の盤面テキストを出力可能だ。また、アプリケーションソフトを使用しなくても、「将棋盤局面図を作成」を利用すれば盤面を編集しながらBOD形式の盤面テキストを取得できる。

盤面テキストを貼り付ける

作成した盤面テキストを、「shogizumen.js」を仕込んでおいたブログやウェブサイトに貼り付ける。その後、この盤面テキストの前後に、

</pre>

のようにタグを挿入する。

これにより、JavaScriptが盤面テキストに適用され、自動的に綺麗な局面図に変換し、描画表示してくれる。参考例は以下の通り。

【第１図は27手目▲３九玉まで】

後手の持駒：なし
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
|v香v桂 ・v金 ・v金 ・v桂v王|一
| ・v飛 ・ ・ ・ ・ ・v銀v香|二
|v歩 ・v歩v歩v銀v歩v角v歩v歩|三
| ・ ・ ・ ・v歩 ・v歩 ・ ・|四
| ・v歩 ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ 歩 歩 歩 歩 歩 ・ ・|六
| 歩 歩 角 ・ 銀 金 ・ 歩 歩|七
| ・ ・ 飛 ・ ・ ・ 銀 ・ ・|八
| 香 桂 ・ ・ ・ 金 王 桂 香|九
+---------------------------+
先手の持駒：なし
手数＝27  ▲３九玉  まで

うまく表示できたら、スタイルシートを使ったカスタマイズに挑戦するのも良いだろう（上の例はオリジナルのスタイルシートを適用済み）。最終手の太字の強調表示や、色、サイズ、フォントの変更など、様々なカスタマイズが可能だ。上述のshogizumen.jsにカスタマイズ方法が載っている。

「そもそもスタイルシートって何？」という方は、ネットで調べたり参考書を読んでみたりすると良いと思う。