btoメモ

なんか適当に書く

javascriptで動作する将棋棋譜ビューワを作った

最近というかここ2年くらいから将棋にはまってて、いろんな将棋を観るのが趣味になってます。特にプロのタイトル戦は解説付きの棋譜が公開されてて、観るだけでも楽しい。やはり素人にはプロの解説がないと指し手の意味がよく分からない。

公開されている棋譜のビューワにはKifu for Flashがよく使われています。他にも棋譜ビューワはいろいろありますが、ほとんどがFlash製です。Javascriptの実装もいくつかあるようですが、他のサイトに組み込んで利用するようなケースはあまり想定されていないような感じでした。Flashの最大の欠点がiPhoneで表示できないこと。Kifu for iPhoneでいいじゃないかと言われそうですが、特定のアプリじゃWebサービスに組み込みできんだろということでJavascriptで動く棋譜ビューワを作ってみました。githubで公開してます。今のところ柿の木形式とCSA形式に対応。

jsShogiKifu サンプルページ

使い方

ソース一式をダウンロードします。 jsShogiKifuダウンロードページ

"src"ディレクトリにあるファイル一式を適当なディレクトリに突っ込む。

jQueryもダウンロード jQuery

jQuery, kifu.js, jquery_shogi_board.jsを読み込む。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="kifu.js"></script>
<script type="text/javascript" src="jquery_shogi_board.js"></script>
棋譜ビューワを表示する場所にspanなりdivタグをid付きで追加。
<div id="board"></div>
適当なdivなりspanなりのid付き不可視(style="display:none")タグに棋譜データを突っ込む。 "Kifu"に"棋譜データのid", "フォーマット(kif or csa)"を渡してkifuオブジェクトを作成。 jQuery棋譜ビューワを表示するタグに"shogiBoard"メソッドにkifuオブジェクトを渡して表示する。
<span id="kifu_text" style="display:none">
棋譜データ...
</span>

<script>
var kifu = Kifu('kifu_text', 'kif');
$('#board').shogiBoard(kifu);
</script>
別ファイルの棋譜データを読み込むにはKifu.ajaxLoad()を使います。 Kifu.ajaxLoad()に"棋譜ファイルのURL", "フォーマット", "関数オブジェクト"を渡します。 関数オブジェクトにkifuオブジェクトが渡りますので、上記と同様にshogiBoardにkifuオブジェクトを渡します。
<script>
Kifu('./kifu_text.kif', 'kif', function() {
  $('#board').shogiBoard(kifu);
});
</script>

以下、プログラマ向け説明

棋譜解析とビューワを完全に分離

棋譜解析部とビューワを完全に分離してます。棋譜解析の結果は全てkifuオブジェクトに格納されて、盤面の操作や情報の取得はkifuオブジェクトのメソッドを通して行います。ビューワはkifuオブジェクトから取得した情報を元に表示処理だけ行います。

jsShogiKifuにはjQueryプラグインとして実装したjQueryShogiBoardが付属していますが、ビューワが完全に独立しているため全く違う実装に置き換える事が可能です。jQueryShogiBoardはいろいろとアレなので、自分で好きなプログラムに変更するといいでしょう。

jQueryShogiBoardはデザインがダサダサなんですが、html部分は別ファイルになっているので、これを置き換えるだけでもいいかと思います。

kifu.jsはjQuery非依存

Kifuクラスの処理は一部を除いてどのライブラリにも依存してません。ajax棋譜データを読み込む(Kifu.ajax(), Kifu.ajaxLoad())ときのみjQueryを使用しています。それ以外はどのライブラリにも依存してませんので、ajaxを使用しなければ外部ライブラリは一切必要ありません。

jQueryShogiBoardがjQueryプラグインなので、jQueryが必要かと勘違いしてしまいがちですが、そんな事はありませんので好きなように組み込めます。

名前空間を汚さない

kifu.jsを読み込んだ時に使用するグローバルな名前は"Kifu"のみです。他にはグローバルな名前空間を使用しませんので、他のJavascriptライブラリと名前空間で衝突する心配はありません。

"Kifu"も衝突する場合はkifu.jsを読み込んだ後に"Kifu.noConflict()"で実行することで、"Kifu"を元に戻し別名に変更できます。

var jsKifu = Kifu.noConflict();  // Kifuを元に戻し、代わりにjsKifuに変更する

ファイル形式ごとにモジュール化

ファイル形式ごとに解析プログラムをモジュール化してます。kif形式だろうと、csa形式でも最終的な解析結果はkifuオブジェクトに格納されます。このような実装になっているため、他の形式の棋譜ファイルを読み込む場合に、その棋譜形式用のモジュールを作るだけですむようになります。