将棋の神様〜0と1の世界〜

「三間飛車のひとくちメモ」管理人、兼「フラ盤」&「チェスクロイド」作者がおくる、将棋コラム

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

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

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

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

shogizumen.jsを設置しておく

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

shogizumen.js

なおjsファイルを直接設置できない場合の例として、「はてなブログ」に設置する場合を詳しく解説したページを紹介しておく(先日も紹介しているので再掲)。このページでは、スタイルシートについてや、以降の手順のはてなブログにおける解説も詳しく載っているので、とても参考になる。

www.fgfan7.com

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

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

後手の持駒:なし
9 8 7 6 5 4 3 2 1
+---------------------------+
|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 class="shogizumen">

後手の持駒:なし
9 8 7 6 5 4 3 2 1
+---------------------------+
|v香v桂v銀v金v玉v金v銀v桂v香|一
| ・v飛 ・ ・ ・ ・ ・v角 ・|二
|v歩v歩v歩v歩v歩v歩v歩v歩v歩|三
| ・ ・ ・ ・ ・ ・ ・ ・ ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ ・ ・ ・ ・ ・ ・ ・|六
| 歩 歩 歩 歩 歩 歩 歩 歩 歩|七
| ・ 角 ・ ・ ・ ・ ・ 飛 ・|八
| 香 桂 銀 金 玉 金 銀 桂 香|九
+---------------------------+
先手の持駒:なし

</pre>

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

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

【第1図は27手目▲3九玉まで】
後手の持駒:なし
 9 8 7 6 5 4 3 2 1
+---------------------------+
|v香v桂 ・v金 ・v金 ・v桂v王|一
| ・v飛 ・ ・ ・ ・ ・v銀v香|二
|v歩 ・v歩v歩v銀v歩v角v歩v歩|三
| ・ ・ ・ ・v歩 ・v歩 ・ ・|四
| ・v歩 ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ 歩 歩 歩 歩 歩 ・ ・|六
| 歩 歩 角 ・ 銀 金 ・ 歩 歩|七
| ・ ・ 飛 ・ ・ ・ 銀 ・ ・|八
| 香 桂 ・ ・ ・ 金 王 桂 香|九
+---------------------------+
先手の持駒:なし
手数=27  ▲3九玉  まで

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

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

改訂新版 スタイルシート ポケットリファレンス 〔CSS3対応〕

改訂新版 スタイルシート ポケットリファレンス 〔CSS3対応〕

 

まとめ

はじめに述べたとおり、「shogizumen.js」の設置が一番の難関だと思う。

が、これを乗り越えれば、以降は画像ファイルを作成しアップロードする手間が省け、盤面テキストを貼り付けるだけになるので、局面図の設置がとても楽になるはずだ。

興味を持った方は一度お試しあれ。