将棋｜ブラウザ上でJavaScriptを使って棋譜データを再生する方法【jsShogiKifu】

将棋の棋譜データをブラウザ上で再生する方法を調べて分かったことを紹介します。

スマホ上では Flash Player が使えないため、スマホにも対応するため JavaScript を使ったものを探していて、再生できるものが見つかりました。

「jsShogiKifu」というものです。

こちらの GitHub にアクセスし、「clone or download」からZIPファイルで一式ダウンロードします。

https://github.com/knu/jsShogiKifu

解凍すると複数のフォルダ、ファイルが展開されますが、「test」フォルダにサンプルが入っているので、好みに合わせたものを選びます。テンプレートで指し手に対するコメントウィンドウの有り無しなどを選べるようになっています。

テンプレートは５つあり、それぞれ、

• jquery_shogi_board.html  ← 棋譜データ・コメント有り（コメント位置：サイド）
• jquery_shogi_board_mate_problem.html  ← 棋譜データ・コメント有り（コメント位置：下部）
• jquery_shogi_board_min.html  ← 棋譜データ・コメント無し（盤面のみ）
• jquery_shogi_board_no_comment.html  ← 棋譜データ有り・コメント無し
• jquery_shogi_board2.html  ← jquery_shogi_board_mate_problem.html とほぼ同じ？

となっています。

今回は、コメントウィンドウは必要なかったので、jquery_shogi_board_no_comment.html を指定しました。

sample.html などを参考にして、以下のような html ファイルを用意しました。

「./081217-h.kif」のところで、棋譜ファイルを指定しています。

棋譜のファイル形式は、以下の３つに対応しているようです。

KIF形式：プロ棋戦、将棋倶楽部２４等で広く用いられている形式。各指手ごとの消費時間の指定もできる。
KI2形式：指手の表記方法が日本将棋連盟準拠である。各指手ごとの消費時間は指定できない。
CSA形式：コンピュータ将棋の棋譜で用いられている形式。各指手ごとの消費時間の指定もできる。

今回は、KIF形式のサンプルを用いました。

無事、ブラウザ上で棋譜を再生することができました。