Kifu for JS (ver. 2.1.4)

JavaScriptで動く棋譜再生盤とそのブックマークレット

概要

Kifu for JSは，Kifu for FlashやJava同様，HTML内で棋譜を読み込み表示，再生を行う．
- KIF, KI2, CSA, JKF形式に対応．
Kifu for JSブックマークレットは，1クリックで
- Kifu for FlashやKifu for JavaをKifu for JSに置き換えて盤面を表示する．
- 選択された棋譜テキストから盤面を表示する．
Flash, Javaなどを必要としないため，iOSやAndroidでも表示できる

動作例

こちら

Kifu for JS ブックマークレット

1クリックでKifu for {Flash/Java}をKifu for JSに置き換えて盤面を表示します．また，棋譜テキストを選択してブックマークレットを開くことで，盤面を表示できます．

使い方(Java/Flash置換)

あらかじめ次のコードをブックマークへ追加しておく→ javascript:!function(){var s=document.createElement("script");s.src="https://na2hiro.github.io/Kifu-for-JS/src/public-bookmarklet.min.js",document.body.appendChild(s)}();void 0;
Kifu for FlashやKifu for Javaが使われているページ(例)を開く
ブックマークレットを開く
FlashやJava部分が置き換えられ，Kifu for JSの再生盤になる

使い方(棋譜テキスト)

あらかじめブックマークレットを追加しておく
棋譜テキストが書かれているページ(例)を開く
棋譜テキストを選択する
ブックマークレットを開く
棋譜テキストの直後にKifu for JSの再生盤が表示される

Kifu for JS

機能

既にKifu for Flashとほぼ同等以上の機能を備えています．

対応棋譜形式: kif, ki2, kifu, ki2u, csa, jkf
駒落ちや詰将棋等の初期局面指定にも対応
変化手順の再生が可能
棋譜中継のための自動更新機能
棋譜クリックや矢印キーでの再生
棋譜入力機能
- 再生中に本譜以外の手を進めることができる
- 進めた手は変化手順(分岐)として格納
棋譜読み込み機能
- 棋譜ファイルをドラッグ&ドロップで読み込み

設置方法

Releases からどうぞ．kifu-for-js-*.*.*.min.jsを読み込むと，KifuForJS が使えるようになります．

jQuery(2.1以降で動作確認), kifuforjs.js (test/loadKif.htmlにコード例)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./kifu-for-js-2.1.4.min.js" charset="utf-8"></script>

KifuForJS.load (v1ではKifu.load)関数にkifファイルのアドレスを渡して呼び出すと，この場所に盤面を表示する．

<script>KifuForJS.load("../json-kifu-format/jt201409130101.kif");</script>

第二引数にidを渡すと，このコードがある場所ではなく，そのidを持つ要素の子の位置に盤面を挿入する．この方法の場合，ひと通り読み込みが済んでから挿入されるため，scriptはhead内などにあってもよい．

<script>KifuForJS.load("../json-kifu-format/jt201409130101.kif", "board");</script>
〜
<div id="board"></div>

動作環境

以下は確認済み．

Mac Chrome 37
Mac Firefox 32
Mac Safari 8
Windows Internet Explorer 11
Android Chrome 37
Android Firefox 32
Android Habit 1.1
iOS 8 Safari

以下は手元に確認環境がありません．情報を@na2hiroまでお待ちしています．

Internet Explorer 10以下

お願い

棋譜形式の対応には注意を払っていますが，もし動作しない棋譜がありましたら対応しますので，Twitterやissuesでご報告いただければ幸いです．
要望やバグ報告はissuesへよろしくお願いします．
棋譜形式そのものについてはJSON棋譜フォーマットもご参照ください．

開発環境

$ npm install

上記コマンドを実行することで開発に必要なパッケージをインストールできます．

na2hiro/json-kifu-format 1.0: 将棋の盤駒を扱うライブラリ
na2hiro/Shogi.js: 将棋の盤駒を扱うライブラリ
TypeScript 2
React 16
React DnD
MobX
Webpack 3 (バンドルツール)
Jest (テストフレームワーク，カバレッジ計測)
TSLint (Linter)

コマンド

$ npm run start

開発用サーバが立ち上がり，examples/以下のexample.htmlやloadJkf.htmlにアクセスすることで動作を確認できます．

$ npm run build
$ npm run build:watch
$ npm run build:analyze

ビルドが走ります．build:watchの場合，変更されるたびにビルドが走ります．build:analyzeの場合，バンドルの大きさの可視化ができます．

$ npm run test:watch

コンソールでテスト結果が表示されます．コードの変更が保存されるたびに必要なテストが再実行されるため，実装が既存の有効なテストを壊してないか簡単に確認できます．

$ npm run test

全てのテストが走るとともにカバレッジレポートが表示されます．coverage/lcov-report/index.htmlでは，行ごとのカバレッジを確認できます．追加されたコードのブランチカバレッジが100%になるようにしてください．push時にチェックされ満たしていなければ却下されるはずです．

$ npm run lint

コードの品質が検査されます．エラーがあればそれに従い直してください．push前にもチェックされます．

$ npm run lint:fix

自動的に修正可能な問題(インデント等)を直してくれます．

license

Shogi images by muchonovski below images directory are under a Creative Commons 表示-非営利 2.1 日本 License.

Other files are released under MIT license. See LICENSE.txt.

mizar/Kifu-for-JS