JSだけで動作する棋譜ビューワ

Javascript

KiFLA

公開は停止されているのですが、昔FLASHで棋譜再生ができるKiFLAというツールがありました。

まあもうFLASHは淘汰されている時代ですし、いまさらKiFLAは要らないのですが当時からしたらすごい発明だったわけです。

以下のブログで使い方解説されていますが、そもそも入手が困難なんですよね…

将棋動画制作者向け・・・KiFLAの使い方:四駒関係(KKPP)のブロマガ
なんか需要がありそうだと風の噂で察知したので。 タイトルの通りKiFLAの使い方です。特に面白みはないです。 以下箇条書き...

ぼくはHTMLとJavascriptだけでシンプルな棋譜再生をしたいだけなのに、どうしてこんなにもツールがないんでしょう?

現状困っていること

ここでも簡単に述べているのですが、日本将棋連盟が運営する棋譜中継サイトは全部FLASHを採用しています。

「えっ、未だにFLASH使っているんですか!?」っていう感じなのですが将棋倶楽部24がJavaを使っているところから察するに(そもそもあれは譲り受けたものですが)ITに弱い団体なのでしょう。

有志による開発

同じように思っている方はぼく以外にも結構居たみたいで、HTML上で動作する棋譜ビューワは他にも結構ありました。

Responsive-Kifu

WordPress向けのレスポンシブな将棋棋譜再生ビューワです。

確かに高機能ですごい!っていう感じはするのですが、こんなに高機能なものは実はあんまり必要でなかったり…

将棋アルバトロス

Web棋譜再生 将棋アルバトロス
あなたの棋譜を再生します!将棋サイト運営者様のお役立ちツール。スマホでも再生可能です。

シンプルなのは好きなのですが、最終手がわからないのとレスポンシブではないのは最近のインターフェースとしてはちょっと物足りない気がします。

Kifu for JS

Kifu for JS example

これもやっぱり高性能すぎる気がします。

もっとシンプルなのがいいんです!!

棋譜DB

伊藤沙恵 女流三段 vs. 里見香奈 女流四冠 第1期ヒューリック杯清麗戦予選
伊藤沙恵 女流三段 vs. 里見香奈 女流四冠(2019年05月31日 第1期ヒューリック杯清麗戦予選)の棋譜です。無料の棋譜データベースサービス「将棋DB2」では、プロ棋士やコンピューター将棋などの様々な棋譜を鑑賞できます。

選ばれたのは棋譜DBでした。

シンプルな表示でとてもいいと思います。

ところが、この棋譜再生ビューワは公開されていないんですよね、残念。

というわけで、自分でコードを書いてみることにしました。

Kifu Nyamo(仮)

棋譜DBっぽい感じで棋譜再生ビューワを作成中なのでちらっと公開します。

正式名称募集中なので投票お願いします(笑)

ボタンをクリックするたびに局面がどんどん進んでいく感じです。

動作条件

  • HTMLにJavascriptを読み込むだけで動作します。
    • SVGなので拡大縮小しても無劣化
    • Snap.svgを別途ロード必要
  • 棋譜はSfen形式でのみロード可
    • KIF形式だと文字化けしてめんどくさかった
    • 文字コードはUTF8限定
      • JSと同じドメインに棋譜が必要
      • JQueryは外部からファイルダウンロードできないため
    • 初手配置からだとバグる(単にコードを書いていないだけ)
      • 公開までには修正したい
  • レスポンシブなはず
    • スマホでみると何故かすごく小さい
    • さっさと修正したい
  • SVG描画のメソッドが非常にダサい
    • 要リファクタリング
  • 駒の配置も結構愚直
    • もっと簡単に書けるはず
    • クラスを使えばいいかもしれない
Snap.svg - Home

ちなみに棋譜をSfen形式で出力するためには例えばShogiGUIから「棋譜コピー」「Sfen」と選択するのが手っ取り早いです。

まとめ

これをつくるのに四日くらいかかりました、大変でした。

これだけずーっとプログラムやってたのはコミケに行きたくて冬休みの課題二日間徹夜で大学の計算機室で書いてたとき以来ですね。

「上手く書けているな」って思うところもある反面、もっと上手く書けるはずのコードもたくさんあります。

特に変数のスコープとか参照のタイミングとかに対する理解が不十分なのでその辺が杜撰なコードになっています。

コメント

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