WordPress 向けのレスポンシブな将棋棋譜再生ビューアつくってみました。
想像していない不具合はあるかと思いますが、以前に比べればかなりマシになったかと。
評判がよければ一般公開を考えますが、誰かメンテしてくれる人が欲しいです！
某所でけっこう「いいね」を集めたのでまずは github 上で公開しました。
→ https://github.com/air-h-128k-il/Responsive-Kifu
導入記事は『Responsive-Kifu 使い方』で解説してあります。
→ https://phazor.info/air/?p=1072
なお、棋譜は将棋実況系 Youtuber の人気者、chrono vs ayumu さんのものです。→ファイル見失いました。絶好調（プロ入りなるか？！→なったーー！！）、アゲアゲさんの棋譜に変更。現在は駒表記が英語になっております。外国の方から要望があったので。駒（盤も）は変更できますので、コメント欄を参照してください。
Fireworks さんのフラ盤ブログ記事へのコメントから来ました．
Responsive-Kifu，なかなかよいですね！
フラ盤の代わりになりそうな予感がします．
Kifu for JS は，多機能ではあるのですがレイアウトの調整がほとんど効かず，フラ盤の代わりにはならないなぁとずっと思っていました．
Responsive-Kifu は，その点で勝っていると思います．
2点，質問があります．
1.
駒の文字がなんとなくぼやけてしまっているように見えるのですが，これは Kifu for JS と同様に，駒用の画像がビットマップで解像度が粗いことが原因でしょうか．
2.
フラ盤にあった，「フリーモード」を実装する予定はございますか？
どうぞよろしくお願いいたします．
こんにちは、NOIKEさん。
1.表示上は、駒は .png ファイルを貼り付けているだけです。
コード上だと Responsive-Kifu/img/pieces に fu0.png などがあるので、駒を変えたければ、それらをお好みの .png ファイルで置き換えれば良いと思われます。
2.私、フラ盤って使ったことないんですよ。フリーモードって何でしょうか？
なお、Kifu For JS の作者の na2hiro さんとはネット上ではお友達です。
本業が忙しいらしくなかなか更新できないと言ってました。
> 1.表示上は、駒は .png ファイルを貼り付けているだけです。
> コード上だと Responsive-Kifu/img/pieces に fu0.png などがあるので、駒を変えたければ、それらをお好みの .png ファイルで置き換えれば良いと思われます。
ありがとうございます．
なるほど，盤などの他のパーツも，画像ファイルとして Responsive-Kifu/img/ の下にありました．
了解しました．
> 2.私、フラ盤って使ったことないんですよ。フリーモードって何でしょうか？
マウス操作で，駒を自由に動かせるモードです．
駒を自分の思うように動かせるので，棋譜の検討などをすることができます．
フラ盤のフリーモードは成ったり取ったりする操作さえ自分で行わなければならないため，検討するには少々面倒なのですが，ある意味で完全に自由なモードということになります．
フリーモード、理解しました。
やってやれないことはないと思うのですが、ソースコードに大幅な手入れが必要です。
Responsive-Kifu は
・ワードプレスなどで簡易に棋譜を表示させる（iPhone, andoroid 対応で）
・サーバと連動して局面検索する
を目指してました。前者はまあまあ実現できたと思うのですが、後者はまったく実装できてません。
実装したのがかなり以前のことなので曖昧になっているんですが、後者を目指していたので、内部的には確か .kif ファイルをいったん下記の形式に変えてます。
p=1b191716101617191b0014000000000012001d1d1d1d1d1d1d1d1d000000000000000000000000000000000000000e000000000000000e000e0e0e0e0e0e0e0003000000000005000c0a08070207080a0c26;
h1=;
h2=;
p は盤面の駒配置、h1 は先手の持ち駒、h2 は後手の持ち駒、です。
実際の盤面右上から駒の種類を並べて表記してます。
１一が 1b で香、２一が 19 で桂… という具合です。なお最後の26だけはマーカーで、この場合は初期平手配置で、先手が飛車先の歩を伸ばしたところをを表してます。
この形式だとある局面を一つの文字列（少々長いですがw）で表記できるのでデータベースで検索をかけるとき、有利だと考えたわけです。
だから、.kif を読み込んでそのまま表示させているプログラムよりはフリーモードは実装しやすいと思います。
マクスをクリックしたときにその位置と掴んだ駒の種類を調べて、クリックした場所は駒がない状態を示す 00 に置換、そして駒異動先などの処理の結果を反映させた「新たな駒配置 p」をつくってしまえばいいわけです。
時間に余裕があればやりたいんですけどね。
内部データの形式の解説までしてくださって，どうもありがとうございます．
> この形式だとある局面を一つの文字列（少々長いですがw）で表記できるのでデータベースで検索をかけるとき、有利だと考えたわけです。
あっ，私も棋譜プレイヤとは別に「あるソフトウェア」を考えているのですが，同じ思想かも（笑）．
フリーモードの実装の件，了解しました．
「実装するだけではあるものの，コードを書く手間がかなりかかる」ということ，私にもわかります．
ひとまず，何らかの形で Responsive-Kifu をそのまま使わせていただくと思います．
そして，フリーモードの実装よりは，まずは駒の解像度上げか駒の SVG 化などのほうを考えてみたいと思います．
何かできたときに，また別途，連絡させてください．
ありがとうございました．