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

KiFLA

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

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

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

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

現状困っていること

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

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

有志による開発

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

Responsive-Kifu

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

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

将棋アルバトロス

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

Kifu for JS

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

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

棋譜DB

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

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

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

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

Kifu Nyamo(仮)

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

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

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

動作条件

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

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

まとめ

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

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

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

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

シェアする