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

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

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

手順1. 作成用Webを開く

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



手順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に縮小したほうが綺麗に表示されるようです。

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

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

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

コメント

  1. レク より:

    画像上に数字、右に漢数字がつくようには無理でしょうか?

    • より:

      レクさん、コメントありがとうございます。

      私も付けたくて悩んでいるのですが、手間がかかりそうなので後回しになっています。上下反転時の扱いと、表示要不要の切り替えが(今のプログラムだと)難しい構造になっていて、描き直しが必要なのです。

      良いアイディアが思い浮かべば作業しますので、気長にお待ちください。

  2. yanchi76 より:

    ず様のNHK棋譜変換サイトは毎週のように利用させていただいております。
    ありがとうございます。

    sfn文字列の変換について、もしよろしければコメントいただけないでしょうか。

    sfn文字列が多数行記載されたファイルがあります。
    この1行(1局面)をそれぞれ1つの.kifファイルに変更して保存してソフトで読めるようにしたいと思っています。行数がすくなければ自分の手で1行ずつ実際にソフトを起動して保存しようと思っているのですが、行数が非常に多いのであきらめて、何かしらバッチを組めないかと思って色々調べているとこの記事にたどり着きました。
    もし、ヒント、アイデア、ご意見等いただけたら非常にありがたいです。

    • より:

      yanchi76さん、おはようございます。ブログ読んでいただき、ありがとうございます。

      sfen -> kif の変換ですが、 python-shogi ライブラリでできそうな気がします。

      https://github.com/gunyarakun/python-shogi

      こんな感じ。

      import shogi

      board = shogi.Board(‘lnsgkgsnl/1r5b1/ppppppppp/9/9/9/PPPPPPPPP/1B5R1/LNSGKGSNL b – 1’)
      print(board.kif_str())

      • yanchi76 より:

        ず様、早速アドバイス頂きましてありがとうございます。
        勉強いたします。

  3. ムラセ より:

    ありがとうございます!my次の一手集用に使わせて頂きます。

    一点、要望です。
    段と筋も画像につけられるようにできないでしょうか?
    当方まだ初心者で、読み筋を付けたときにパッと理解できず、苦心しております。

    ※もちろん今のままでも十分です。
    とても綺麗に作図されるので、重宝しています

  4. 武馬 より:

    ぴよ将棋(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型式は先手番/後手番が明記されてなく、それで誤動作していたようです。
      プログラムを修正し、ぴよ将棋の局面も表示できるようにしてみました。ご確認ください。
      (ブラウザのキャッシュが効いていると思いますので、リロードが必要です)

      報告ありがとうございました。

  5. ず 様

    早々にご対応頂きありがとうございました。
    確認致しました。問題なく成銀の表記されます。

  6. より:

    日本将棋連盟庄内支部様、コメントありがとうございます。

    ご指摘の通り、棋譜を読み込む際に、成銀を誤って金と判定していました。
    取り急ぎ修正いたしましたので、ご確認いただけると幸いです。

  7. 有用なツールの提供ありがとうございます。
    当ブログの次の一手問題の変化に便利に使わせて頂いています。
    一点気になる点がありました。

    SVGで出力した際に成銀の表記が金になるようです。
    成桂、成香、と金に関しては問題ありません。
    お時間ある時に対処して頂ければ幸いです。

タイトルとURLをコピーしました