na2hiro / kifu-for-js Goto Github PK
View Code? Open in Web Editor NEWJavaScriptで動く将棋の棋譜再生盤とそのブックマークレット `kifu-for-js`、JSON棋譜フォーマット(JKF)の定義とKIF, KI2, CSAからの変換ライブラリ `json-kifu-format`、将棋のモデル`shogi.js`を含むmonorepo
License: MIT License
JavaScriptで動く将棋の棋譜再生盤とそのブックマークレット `kifu-for-js`、JSON棋譜フォーマット(JKF)の定義とKIF, KI2, CSAからの変換ライブラリ `json-kifu-format`、将棋のモデル`shogi.js`を含むmonorepo
License: MIT License
npmに公開されているのはバージョン1.1.5のようですが、最新の1.2.0をnpmに公開していただけるとありがたいです。
こちら、iPhoneでの環境です。
先日まで、Kifu for JS ブックマークレットにてタイトル戦(Frashサイト)の観戦が出来ていたと思うのですが、本日開催の竜王戦を観ようと思ったところ、ブックマークレットが機能してくれません。
過日、iOSのバージョンアップがありましたが(Safariも?)これが関係しておりますでしょうか?
ご確認の程、宜しくお願い致します。
10手目以降から分岐が生じる棋譜の読み込みをしようとすると、「棋譜ファイルが壊れています: 0手目で失敗しました: cannot move opposite piece」というエラーがでて棋譜を表示できません。読み込めなかった棋譜は以下になります。以下の棋譜はkifu形式ですが、保存形式によらず10手目以降に分岐がある棋譜についてはエラーが発生しました。
#KIF version=2.0 encoding=UTF-8
開始日時:2015/08/17 00:32:18
終了日時:2015/08/17 00:32:35
手合割:平手
先手:
後手:
手数----指手---------消費時間--
1 2六歩(27) ( 0:01/00:00:01)
2 8四歩(83) ( 0:01/00:00:01)
3 2五歩(26) ( 0:01/00:00:02)
4 8五歩(84) ( 0:00/00:00:01)
5 7八金(69) ( 0:01/00:00:03)
6 3二金(41) ( 0:01/00:00:02)
7 2四歩(25) ( 0:01/00:00:04)
8 同 歩(23) ( 0:00/00:00:02)
9 同 飛(28) ( 0:01/00:00:05)
10 2三歩打 ( 0:05/00:00:07)+
11 中断 ( 0:01/00:00:06)
まで10手で中断
変化:10手
10 1四歩(13) ( 0:01/00:00:03)
11 中断 ( 0:01/00:00:06)
まで10手で中断
9手目以前から分岐する棋譜の場合は読み込めました。以下は読み込めた棋譜です。
#KIF version=2.0 encoding=UTF-8
開始日時:2015/08/17 00:32:18
終了日時:2015/08/17 00:32:35
手合割:平手
先手:
後手:
手数----指手---------消費時間--
1 2六歩(27) ( 0:01/00:00:01)
2 8四歩(83) ( 0:01/00:00:01)
3 2五歩(26) ( 0:01/00:00:02)
4 8五歩(84) ( 0:00/00:00:01)
5 7八金(69) ( 0:01/00:00:03)
6 3二金(41) ( 0:01/00:00:02)
7 2四歩(25) ( 0:01/00:00:04)
8 同 歩(23) ( 0:00/00:00:02)
9 同 飛(28) ( 0:01/00:00:05)+
10 2三歩打 ( 0:05/00:00:07)
11 中断 ( 0:01/00:00:06)
まで10手で中断
変化:9手
9 2六飛(28) ( 0:01/00:00:05)
10 中断 ( 0:01/00:00:03)
まで9手で中断
For example
お邪魔します。
KIFファイルの一箇所に3つ以上の分岐があると、最初の2つまでしか表示されないようです。
例えば、
1 7六歩(77) ( 0:00/00:00:00)+
変化:1手
1 2六歩(27) ( 0:00/00:00:00)+
変化:1手
1 7八金(69) ( 0:00/00:00:00)
みたいなKIFですと、7八金の分岐が見えません。
サンプルコードの henka.kif で何とぞご確認をお願いいたします。
初めまして
いつも愛用させてもらっています。
本日、王位戦をブックマークレットで観戦しようとしたところ棋譜形式エラーがでました。
エラーメッセージからおそらく封じ手に対応できていないんだろうと思われます。
お手数ですが、ご調査の程よろしくお願いいたします。
元の形式のまま棋譜からコメントを削除して貼り付ける方法がわからないので、
封じ手の部分だけ下記に記します
50 封じ手 (33:00/04:12:00) まで49手で封じ手
多分ちゃんと出せてない
Fluxスタイルのコードへの書き直しによって,コードの見通しが良くなるだけでなく,
といった,汎用的な将棋盤としてWebアプリに組み込めるようにすることを視野に入れることができる.
現状上下キーで進む/戻る操作が可能ではあるが,左右キーに慣れ親しんだユーザに配慮してこれを用意することが考えられる.
その際,ページ内の他の要素での入力をキャプチャしないようにフォーカスの概念を導入する必要がある.
優先度は低め.
外部のスクリプトから更新棋譜データの流し込み、最新の局面の表示などの制御が出来るようにしたい。
以下のような2つの方向性は如何でしょうか。
一手で複数の駒が移動する変則将棋を表現するため,着手による変化以外の局面の差分を着手に付随させる.具体的形式は要検討.
http://kiftwi.net/ にて失敗する.
盤上の駒のクリックやドラッグ等により,
などができるようにする.いつかやる.
Cypress is a modern testing framework suitable especially for this kind of interactive UIs. Let's use this to cover main use cases and list up supported browsers with more confidence.
load関数等に表示等の設定オブジェクトを渡せるようにする.
例えばこのforkでは更新時間の秒数を変更しているが,ソースコードを変更しなくても最初に設定で選択可能秒数や既定値を渡せるようにする.
sunfish-shogi@6c358bf
https://shogidb2.com/games/12aa48b21c47e76afd0b6b65bc0f28ab017f3a98
上記サイトから取得したkifファイル
開始日時:2016/12/24 9:00:00
終了日時:2016/12/24 20:43:00
棋戦:竜王戦
手合割:平手
先手:加藤一二三
後手:藤井聡太
手数----指手---------消費時間--
1 7六歩(77) (00:00/00:00:00)
2 8四歩(83) (00:00/00:00:00)
3 6八銀(79) (00:00/00:00:00)
4 3四歩(33) (00:00/00:00:00)
5 7七銀(68) (00:00/00:00:00)
6 6二銀(71) (00:00/00:00:00)
7 2六歩(27) (00:00/00:00:00)
8 4二銀(31) (00:00/00:00:00)
9 4八銀(39) (00:00/00:00:00)
10 5四歩(53) (00:00/00:00:00)
11 7八金(69) (00:00/00:00:00)
12 3二金(41) (00:00/00:00:00)
13 5六歩(57) (00:00/00:00:00)
14 4一玉(51) (00:00/00:00:00)
15 6九玉(59) (00:00/00:00:00)
16 5二金(61) (00:00/00:00:00)
17 3六歩(37) (00:00/00:00:00)
18 3三銀(42) (00:00/00:00:00)
19 5八金(49) (00:00/00:00:00)
20 3一角(22) (00:00/00:00:00)
21 7九角(88) (00:00/00:00:00)
22 4四歩(43) (00:00/00:00:00)
23 6六歩(67) (00:00/00:00:00)
24 7四歩(73) (00:00/00:00:00)
25 6七金(58) (00:00/00:00:00)
26 6四角(31) (00:00/00:00:00)
27 3七銀(48) (00:00/00:00:00)
28 3一玉(41) (00:00/00:00:00)
29 6八角(79) (00:00/00:00:00)
30 4三金(52) (00:00/00:00:00)
31 7九玉(69) (00:00/00:00:00)
32 2二玉(31) (00:00/00:00:00)
33 8八玉(79) (00:00/00:00:00)
34 9四歩(93) (00:00/00:00:00)
35 1六歩(17) (00:00/00:00:00)
36 9五歩(94) (00:00/00:00:00)
37 1五歩(16) (00:00/00:00:00)
38 7三桂(81) (00:00/00:00:00)
39 6五歩(66) (00:00/00:00:00)
40 5三角(64) (00:00/00:00:00)
41 4六銀(37) (00:00/00:00:00)
42 6四歩(63) (00:00/00:00:00)
43 5五歩(56) (00:00/00:00:00)
44 同歩(54) (00:00/00:00:00)
45 同銀(46) (00:00/00:00:00)
46 6五桂(73) (00:00/00:00:00)
47 6六銀(77) (00:00/00:00:00)
48 6三銀(62) (00:00/00:00:00)
49 3七桂(29) (00:00/00:00:00)
50 8五歩(84) (00:00/00:00:00)
51 5四歩打 (00:00/00:00:00)
52 同銀(63) (00:00/00:00:00)
53 同銀(55) (00:00/00:00:00)
54 同金(43) (00:00/00:00:00)
55 6三銀打 (00:00/00:00:00)
56 4三銀打 (00:00/00:00:00)
57 2五桂(37) (00:00/00:00:00)
58 2四銀(33) (00:00/00:00:00)
59 1三桂成(25) (00:00/00:00:00)
60 同銀(24) (00:00/00:00:00)
61 1四歩(15) (00:00/00:00:00)
62 同銀(13) (00:00/00:00:00)
63 5四銀成(63) (00:00/00:00:00)
64 同銀(43) (00:00/00:00:00)
65 5五歩打 (00:00/00:00:00)
66 4三銀(54) (00:00/00:00:00)
67 1四香(19) (00:00/00:00:00)
68 同香(11) (00:00/00:00:00)
69 5四銀打 (00:00/00:00:00)
70 同銀(43) (00:00/00:00:00)
71 同歩(55) (00:00/00:00:00)
72 3一角(53) (00:00/00:00:00)
73 6五銀(66) (00:00/00:00:00)
74 同歩(64) (00:00/00:00:00)
75 4六角(68) (00:00/00:00:00)
76 8三飛(82) (00:00/00:00:00)
77 2五桂打 (00:00/00:00:00)
78 1二歩打 (00:00/00:00:00)
79 4一金打 (00:00/00:00:00)
80 6九銀打 (00:00/00:00:00)
81 3一金(41) (00:00/00:00:00)
82 同金(32) (00:00/00:00:00)
83 6四角打 (00:00/00:00:00)
84 8六桂打 (00:00/00:00:00)
85 6八金(67) (00:00/00:00:00)
86 7八桂成(86) (00:00/00:00:00)
87 同金(68) (00:00/00:00:00)
88 同銀成(69) (00:00/00:00:00)
89 同飛(28) (00:00/00:00:00)
90 6七金打 (00:00/00:00:00)
91 6九銀打 (00:00/00:00:00)
92 8六銀打 (00:00/00:00:00)
93 3一角成(64) (00:00/00:00:00)
94 同玉(22) (00:00/00:00:00)
95 6四角(46) (00:00/00:00:00)
96 4二香打 (00:00/00:00:00)
97 7七銀打 (00:00/00:00:00)
98 8七銀成(86) (00:00/00:00:00)
99 同玉(88) (00:00/00:00:00)
100 8六銀打 (00:00/00:00:00)
101 同銀(77) (00:00/00:00:00)
102 同歩(85) (00:00/00:00:00)
103 同角(64) (00:00/00:00:00)
104 同飛(83) (00:00/00:00:00)
105 同玉(87) (00:00/00:00:00)
106 6四角打 (00:00/00:00:00)
107 7五桂打 (00:00/00:00:00)
108 8五歩打 (00:00/00:00:00)
109 同玉(86) (00:00/00:00:00)
110 9四角打 (00:00/00:00:00)
111 投了 (00:00/00:00:00)
をutf-8で保存してKifu.loadに渡した所、文字化けにより読み込めませんでした。
shift_jisで保存した所、文字化けは解消されましたが、フォーマットエラーで読み込めませんでした。
リポジトリ内にある棋譜ファイルをshift_jisで保存した所、読み込みに成功しました。
kif以外にも、ki2、csaもフォーマットエラーにより読み込めませんでした。
はじめまして。FC2ブログにて「四間飛車で最強になりたい」というブログを運用しているRest48 と申します。よろしくお願いします。
http://rest48shogi.blog.fc2.com/
当方が所持している .kif で、「Kifu-for-JS」で読めない棋譜がございましたので、ご報告いたします。
http://rest48shogi.web.fc2.com/20170223_2.kif
以下は要望です。
今まで「Kifu for Flash」を用いてブログ上に棋譜を表示しておりました。FC2 ブログでは .kif 形式のファイルはアップロードできませんが、「Kifu for Flash」は .txt でも読むことができるので、拡張子を .kif から .txt に変更してup することで対応していました。
このたび、貴殿が作成された「Kifu-for-JS」を用いてブログ上で表示したかったのですが、 .txt のファイルはスクリプト上で読むように記載しても読まないようです(なぜかWeb 上に表示されたソフトに .txt 形式のファイルをドラッグ&ドロップすると読めるようですが)。
以下の通りに記載しています。なお、FC2 ブログでは改行すると勝手に
を挿入して走らなくなるので、改行はなくしてあります。
大変お手数ですが、もしよろしければ .txt 形式でも読めるようにできないでしょうか?ご検討よろしくお願いいたします。
Kifu for Java/Flashがなく棋譜がベタ張りのサイトにて、棋譜部分を選択するとそこに再生盤を表示する機能の追加
モバイル向けにはよりシンプルなUIを用意する.例としては
改善案
以下がより好ましい
IE10以下でXHRオブジェクトにoverrideMimeTypeメソッドがないため,sjisの読み込みで文字化けする問題がある.また,overrideMimeTypeは非標準なのでこれに頼るのもよくなさそう.
バイナリでデータを取ってきて,文字コード変換ライブラリ(~180KB)を使うことで対応可能か. https://www.npmjs.com/package/iconv-lite
#36 ではご対応ありがとうございました。
実はもう一つ、エラーになってしまう KIF データがあります。
下記は Kifu for Windows で作った棋譜です。
これが現行の json-kifu-format 1.1.1 + kifu-for-js 1.2.1 では「棋譜形式エラー」になってしまいます。
ファイルを編集して「同 飛」を「2二飛」に書き換えると正常になります。(回避策にはなりますが、一時凌ぎに過ぎません。)
どうやら変化手順の変化手順が「同 」の手で始まると、エラーになる場合があるようですが、不具合の発生する正確な条件はわかりません。
react-dnd/react-dnd#120 によるとFirefoxがdragstartを発火しないバグがある?
現バージョンでは、詰将棋の.kifファイルが読み込めません。
サンプルの.kifでも読み込めないのでkifファイルの中身のフォーマットの問題ではありません。
仕方が無いので、.kifを.csaに変換すれば読み込めました。
是非、改善をお願いします。
それと、平手の棋譜でも「盤面反転」している状態で保存したものは読み込めません。
これは.kifファイルの中の「盤面反転」の行を削除すれば読み込めましたが、できればプログラム側でも対処してほしいと思います。
初めまして。
FC2ブログにて「詰将棋の欠片」というブログを運営しております、hirotsumeshogiと申します。
現在、ブログに掲載している詰将棋のKifu for JS化を進めております。
ki2ファイルをtxtファイルに変換しFC2ホームページにアップロード、htmlファイルにてKifu.load関数による読み込みを行っております。
この度、「棋譜形式エラー」が発生いたしました。
ファイル名の変更等を試みましたが、エラーは解消できておりません。
下記に対象ファイルを配置いたしましたので、お手数ですが、ご調査の程よろしくお願いいたします。
https://hirotsume.web.fc2.com/kobayashi_kinsho196702.txt
https://hirotsume.web.fc2.com/kobayashi_kinsho196702.html
それでは、失礼いたします。
If somebody does not understand Chinese then what it make sense so please add a transship Tinto readme.md file.
上記棋譜において、
20手目:後手の持駒が「歩2」→「角歩2」なのに表示が「角歩」
29手目:先手の持駒が「飛金桂歩3」、歩の表示が縦にはみ出す
などの不具合があるように見受けられます。
持駒の歩の枚数が2-3枚の場合は縦に並べる、という部分が混乱の元になっているように見受けられるので、このような場合にも歩は横に並べるようにしては如何でしょうか。
現在ドラッグアンドドロップの実装にmousemove
イベントを元にしたHTML5Backend
を使用している.これはD&Dが開始したという判定を,マウスがある程度移動してから行う.ドラッグ開始時に合法手を表示するようにするとこの表示がマウスダウンから遅れるように感じられる.マウスダウンでドラッグが開始されるようにしたい.
現在駒画像は個別になっているが,読み込みが遅いのと,再生時の更新にタイムラグが起こることがある.
そこで,駒画像を一体化してCSS Spriteにより描画を行う.
この棋譜読み込みに失敗. http://d.hatena.ne.jp/r_ikeda/20100505/shogi
手番が「先手」「後手」ではなく「上手」「下手」となっている場合は,初手は上手が指すものと判定すべきか
Invariant Violation: ReactMount: Two valid but unequal nodes with the same
data-reactid
同一ページで複数回ブックマークレットを使用した時に例外が出る.実用に支障はなさそうだが要調査.
I've set up a Github Action for bumping npm version, but it doesn't bump the versions in the code comment and README. Ideally it should update everything so we don't need to modify them manually.
(IEがなくデバッグが遠い)
最終手が投了等のspecialでないにもかかわらず,コメントがない場合直前のコメントを表示してしまう
スマホでボタンを押しづらいため.
将棋ウォーズのようなイメージ
http://shogiwars.heroz.jp:3002/games/na2hiro-GoldPona-20130905_001354
This library was originally created for Kifu for JS which is a viewer of Kifus. This is why there are not exhaustive checks which would be needed for usages like UIs which allows inputs of moves.
Currently it checks legality in the following points:
(2018-02-24) Following checked were added
It's not difficult to imagine some usages like to provide UI for playing Shogi. For such case we don't want allow users to input illegal moves.
Let's consider adding some more checks which would make sense:
There should be needs to handle illegal moves. Consider an option to accept such moves other than only throwing exceptions.
使われているところと代替
$(document).ready
: https://developer.mozilla.org/ja/docs/Web/API/Document/readyState$.ajax
: XHR, Fetch, それらのPolyfilldataset
: Polyfillあるいはattribute操作A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.