少し思うところがあり将棋のサイトでも作ってみようかと思ったのですが、 いかんせん JavaScript で使いやすい棋譜表示ライブラリがない。 Flash なら結構たくさんあったんですが、サポートが終了してしまったものはどうしようもないので作りました。 ゼロから作るよりは、良さそうなものを改良したいと思い、ライセンス的に利用しやすい kifPlayer を改良させてもらいました。 kifPlayer はレスポンシブ表示に強いのが特徴です。
将棋盤の表示って、画像を使うと微妙に軽量さが欠けてしまうので、使わないか選択できるライブラリにしたいと思っていました。 あと決まりきった UI が多いので、柔軟性のある軽量ライブラリが欲しかった。 具体的には kifPlayer を以下のように改良しました。
- Vanilla JS
- jQuery と Snap.svg を削除して 21KB で動作するように
- レンダリングをかなり高速化
- UI をカスタマイズしやすい実装に
- 外部依存は Material Icons + Bootstrap だけ (依存ゼロ可能)
- カスタム化機能 (UI, コメント, イベント)
- 完全なクラス化をして名前空間を綺麗に
- 複数棋譜の同時表示に対応
- キーバインド対応
- 駒落ち対応
- 変化の分岐に対応
- 様々な GUI の表示改善とバグ修正
- 軽量高速なので局面図表示ライブラリとして利用可
改良しまくってるので kifPlayer と見栄えは似ていますが、原形をあまり留めてません。 同じ名称だと逆に紛らわしいと思われるため kifu-viewer という名前で配布することにしました。 超軽量ながら他のライブラリにはない機能がたくさん入ってます。 ちなみに IE11 は Microsoft でさえ 2021/08/17 でサポートが終了する現状なので、無視することにしました。 サポートしたい人は Babel でトランスコンパイルすれば良いだけだし、 無視すれば ES6 + esbuild で最高の開発体験が得られるので、そろそろ切っても良いよね。
実装のお話
この手のライブラリで一番実装を悩むのは棋譜のファイル形式ですが、最近よく使われているフリーソフトでは kif形式が基本に見えます。 その反面 ki2, csa, psn, psn2, sfen, jkf など形式が昔より増えてて、とてもサポートする気が起きません。 これだけ形式が増えると下手にサポートするより完璧な変換ライブラリを作ったほうが良いと思う。 しかしそれを組み込むとファイルサイズが無駄に大きくなってしまいます。 Web 上では minify して表示が基本なので、やる気がしない。 またファイルサイズという意味では、kif形式はファイルサイズが大きいのが欠点ですが、その原因の大半は消費時間の記述です。 消費時間を削れば、ファイルサイズはたいてい 1/2 以下になり、かなり最適化された形式になります。 正直、もともとの実装通り kif形式だけサポートすれば良いのではないかと思いました。またコメントの処理ですが、セキュリティと記述能力のバランスを取るのは難しいです。 記述能力を重視した innerHTML をデフォルトに使っているので、外部サーバからデータを読み込むようなことはしないほうが良いです。 なおオプションでセキュアモードを ON にできるようになってます。 ON にすれば外部サーバから読み込んでも安心。
ちなみに kifu-viewer を使って作りたかったのは、将棋びぎなーず というサイトです。 名前でだいたいやりたいことわかると思いますが、詳しい説明はこちら。 kifu-viewer はこのサイトでバグや機能のチェックをしながら作ったので、結構使いやすくできたと思う。
0 件のコメント:
コメントを投稿