ブラウザ棋譜再生ツール「kifPlayer」

ブラウザで動作する棋譜再生ツール「kifPlayer」を作成しました。

はじめに

棋書レビュー、戦法別対策等に利用する目的で棋譜再生ツールを色々探しましたが、私の要件(レスポンシブ対応、KIF対応)を満たすものが得られませんでした。
そこで、棋譜再生ツール探しの過程で得た先人の知恵(公開ソース)をお借りして、自分用にカスタマイズし「kifPlayer」を作成しました。

 

「kifPlayer」の特徴

「kifPlayer」の特徴は以下の通りです。

レスポンシブ対応(PC、モバイル等、異なるデバイスに表示対応)←重要
・JavaScript製
・KIF形式ファイルに対応

将棋DB2に似たGUI
・評価値表示
・盤面タッチに対応

レスポンシブ対応

PC、タブレット、スマートフォン等、デバイスによって異なる画面サイズでも、柔軟に対象となる画像を調整して表示してくれます。

JavaScript製

これまでWebで棋譜再生ツールは、Adobe Flash Playerを利用したものが主流でした。
しかし、Adobe社より2020年末にAdobe Flash Playerのサポート終了する発表がありました。
それに伴い、棋譜再生ツールもAdobe Flash Playerに依存しないものが求められるようになり、それに代わって主流になりつつあるJavaScriptを採用しています。

KIF形式ファイルに対応

私が愛用するShogiGUIの標準が、KIF形式ファイルであった為。残念ながらCSA形式ファイルには対応していません。

将棋DB2に似たGUI

駒のグラフィックは、スマートフォンでの表示では煩雑な感じがありましたので、シンプルなものにしました。
デザインは将棋DB2を参考にしています。

将棋DB2

評価値表示

ShogiGUIで棋譜解析していることが前提ですが、局面ごとの評価値を表示します。

盤面タッチに対応

スマートフォンアプリの将棋DB2と同じように、盤面の左半分をタッチすると一手戻り、盤面の右半分をタッチすると一手進みます。

 

サンプル

通常

<script type=”kif”>
sample1.kif
</script>
開始局面(0手目)の状態で開始します。

局面を指定して表示

<script type=”kif” start=”17″>
sample2-1.kif
</script>
指定局面(17手目)の状態で開始します。

反転して初期表示

<script type=”kif” start=”17″ reverse>
sample2-1.kif
</script>
上の例に加え、先手後手を反転した状態で開始します。

詰将棋等の部分図

<script type=”kif”>
sample3.kif
</script>
平手以外に、詰将棋等の部分図にも利用可能です。

参考

本記事中に4つのkifPlayerを表示していますが、4つのHTMLファイルを作成し、「iframe 」タグ(※)で記事内に埋め込んでおります。
※)プラグイン「iframe」を利用

 

ダウンロード

  kifPlayer.zip (12.2 KB, 882 hits)

  kifPlayer_ローカルPC動作確認版.zip (14.2 KB, 654 hits)

 

さいごに

本ツール作成に際して、以下のツールを参考にさせていただきました。

Kifu Nyamo(仮)

将棋タイム

Blog

概要 将棋タイムは、ブラウザ上で将棋の棋譜を再生するJavaScript製のプレイヤーです。 KIF形式の文字……

「Kifu Nyamo(仮)」作成者のえむいー様、「将棋タイム」作成者様のお二方には、この場をお借りしてお礼申し上げます。