将棋局面図作成プログラムを作ってみた(SVG,PNG)
将棋ブログ用の局面図の作成方法を何度か書いたのですが、どの方法も手間暇がかかって面倒臭いと感じます。私はSVG形式の画像を主に使っているのですが、その場合はさらに手数がかかります。
さすがに毎回同じ作業を繰り返すのも面倒臭くなってきたので、プログラム書いてみました。私自身が使えればいいという程度の出来なのですが、もしかしたら他にも使う人がいるかもしれないので、利用方法を書いておきます。
手順1. 作成用Webを開く
ブラウザで https://shogi.zukeran.org/shogi-draw/を開きます。
(ChromeとWindows10のEdgeで動くことは確認しました。Firefoxは対応中ですしました。 IEでは動作しませんし、対応予定もありません)
手順2. Kifu for Windows または ShogiGUI で局面を作成
局面を作成したら、編集→局面のコピー でBOD形式の局面図をコピーします。
手順3. Webに局面図を貼り、画像を生成する
コピーした局面図を、Web画面に貼り、局面図を作成するボタンを押します。
画像リンクが表示されますので、右クリックして画像をダウンロードしてください。ダウンロードされるファイル名は “年月日-時分秒.png” の形式です。
画像サンプル
SVG形式
SVG形式は綺麗に表示されるけど、ブログによっては使えないのが弱点。ココログは手間がかかるが可能、seesaaは貼れるけどPC版のみ表示される(スマホでは見えない)、amebloとhatenaはそもそもアップロードできない。
PNG形式(600×500)
下の画像は表示時に300×250に縮小しています。その方が綺麗に見えるので。
PNG形式(300×250)
ココログなどのブログに貼り付けるときも、PNG画像(600×500)をダウンロードして、貼り付け時に300pxに縮小したほうが綺麗に表示されるようです。
追加してほしい機能があればコメントください
私が必要な最低限の機能だけを実装しています。例えば、タイトルは、ブログの地の文で書けばいいと考えて省略しています。
対局者名が長い場合(寿限無な場合)は、持ち駒部分の表示がおかしくなるはずです。
いろいろ手抜きしているので、おかしな動作をする場合があるかもしれません。その際はコメントいただけると幸いです。
ディスカッション
コメント一覧
ありがとうございます!my次の一手集用に使わせて頂きます。
一点、要望です。
段と筋も画像につけられるようにできないでしょうか?
当方まだ初心者で、読み筋を付けたときにパッと理解できず、苦心しております。
※もちろん今のままでも十分です。
とても綺麗に作図されるので、重宝しています
ぴよ将棋(iPhone版)からだと持ち駒の表示がされません。
以下は画像化しようとした局面ファイルです。
確認いただけましたら幸いです。
—
後手の持駒:銀 桂 香 歩三
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と ・ 銀 ・ 飛 ・|八
| ・ ・ ・ ・ 玉 金 ・ ・ 香|九
+—————————+
先手の持駒:角 桂 歩
武馬さん、こんばんは。確かに表示されないですね……
ぴよ将棋のBOD型式は先手番/後手番が明記されてなく、それで誤動作していたようです。
プログラムを修正し、ぴよ将棋の局面も表示できるようにしてみました。ご確認ください。
(ブラウザのキャッシュが効いていると思いますので、リロードが必要です)
報告ありがとうございました。
ず 様
早々にご対応頂きありがとうございました。
確認致しました。問題なく成銀の表記されます。
日本将棋連盟庄内支部様、コメントありがとうございます。
ご指摘の通り、棋譜を読み込む際に、成銀を誤って金と判定していました。
取り急ぎ修正いたしましたので、ご確認いただけると幸いです。
有用なツールの提供ありがとうございます。
当ブログの次の一手問題の変化に便利に使わせて頂いています。
一点気になる点がありました。
SVGで出力した際に成銀の表記が金になるようです。
成桂、成香、と金に関しては問題ありません。
お時間ある時に対処して頂ければ幸いです。