アルザ制作　ブログ　HPで棋譜再生「Kifu for JS」の導入、ハマり解消メモ

今回はブラウザ上で将棋の棋譜再生が行える「Kifu for JS」の導入方法についてです。

（連続してマニアックネタですみません）

いつもお世話になっている「福井子供将棋教室」の運営者さまから、「javascriptプラグインがありますよ」と伺ったので導入できるか実験してみました。

なんとかうまくいったものの、ハマったところがあったのでポイントをメモ。

プラグイン全体像を把握しているわけではないので、参考にする際は自己責任でお願いいたします。

【その1】プラグインを入手

https://github.com/na2hiro/Kifu-for-JSの「clone or download」をぽちっとでzipをダウンロード。

zipを解凍すると「Kifu-for-JS-master」というフォルダになっているはず。

【その2】プラグインを設置

ルート直下に「Kifu-for-JS-master」をそのまま置く（ムダファイルが気持ち悪ければ適宜削除）。図示すると以下の感じ。

root/
　├ css/
　├ js/
　├ Kifu-for-JS-master/
　└ index.html

【その2】コードを書き換え

head内に以下をコピペ。

（マニュアルだとbody内でもいけるらしいけど、なんか気持ち悪いので。その辺はお好みで）

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="Kifu-for-JS-master/css/kifuforjs.css">
<script src="Kifu-for-JS-master/out/kifuforjs.js" charset="utf-8"></script>
<script>var Kifu = require("Kifu");Kifu.settings={ImageDirectoryPath: "Kifu-for-JS-master/images"};</script>

ここに注意

・マニュアルと参照の場所が変わっている。

・すでにjquery入れてしまっている場合は、念のため古いバージョンを削除。

・最終行の「var Kifu = require("Kifu");」がないと、「Kifuなんて定義されてねえよ！」とブラウザにキレられた…。

【その3】いよいよbody内に棋譜を表示

body内に以下をコピペすれば動くハズ。

<script>Kifu.load("Kifu-for-JS-master/node_modules/json-kifu-format/test/files/jkf/ryuou201409020101.jkf", "board");</script>
<div id="board"></div>

ちなみに第1引数が棋譜ファイルの場所、第2引数がid名。

【まとめ】

さて、うまく設置できたでしょうか？（動かなかったら、ごめんなさい）

「役にたったぜ！」という方は、このサイトを他の人に紹介してくれるとうれしいです。

【追記】

「外部ファイルとかよくわからん」とご意見ありましたので、ＨＰにコピペすれば使える棋譜再生コード「将棋アルザJS」を作成しました。こちらもぜひご利用ください