将棋局面図作成プログラムを作ってみた(SVG,PNG)

2017/12/15ブログ関連

将棋ブログ用の局面図の作成方法を何度か書いたのですが、どの方法も手間暇がかかって面倒臭いと感じます。私はSVG形式の画像を主に使っているのですが、その場合はさらに手数がかかります。

さすがに毎回同じ作業を繰り返すのも面倒臭くなってきたので、プログラム書いてみました。私自身が使えればいいという程度の出来なのですが、もしかしたら他にも使う人がいるかもしれないので、利用方法を書いておきます。

手順1. 作成用Webを開く

ブラウザで https://shogi.zukeran.org/shogi-draw/を開きます。
（ChromeとWindows10のEdgeで動くことは確認しました。Firefoxは対応中ですしました。 IEでは動作しませんし、対応予定もありません）


将棋のBOD/sfen文字列から、局面図の画像(SVG,PNG)を作成


手順2. Kifu for Windows または ShogiGUI で局面を作成

局面を作成したら、編集→局面のコピー　でBOD形式の局面図をコピーします。

（Kifu for Windowsの場合）


（ShogiGUIの場合）


手順3. Webに局面図を貼り、画像を生成する

コピーした局面図を、Web画面に貼り、局面図を作成するボタンを押します。


画像リンクが表示されますので、右クリックして画像をダウンロードしてください。ダウンロードされるファイル名は “年月日-時分秒.png” の形式です。


画像サンプル

SVG形式

SVG形式は綺麗に表示されるけど、ブログによっては使えないのが弱点。ココログは手間がかかるが可能、seesaaは貼れるけどPC版のみ表示される（スマホでは見えない）、amebloとhatenaはそもそもアップロードできない。


PNG形式(600×500)

下の画像は表示時に300×250に縮小しています。その方が綺麗に見えます。


PNG形式(300×250)

素直に300×250で貼るとボケることがあります。最近のスマホやPCは見かけの倍の解像度があるので（いわゆるRetina display）、等倍のつもりが拡大されてしまう。


ココログなどのブログに貼り付けるときも、PNG画像（600×500）をダウンロードして、貼り付け時に300pxに縮小したほうが綺麗に表示されるようです。

追加してほしい機能があればコメントください

私が必要な最低限の機能だけを実装しています。例えば、タイトルは、ブログの地の文で書けばいいと考えて省略しています。
対局者名が長い場合（寿限無な場合）は、持ち駒部分の表示がおかしくなるはずです。

いろいろ手抜きしているので、おかしな動作をする場合があるかもしれません。その際はコメントいただけると幸いです。

ブログ関連

Posted by ず