Responsive-Kifu

2019年6月4日

 前回、将棋棋譜再生盤のKifu for JSの導入について書いたが次に見つけたのがResponsive-Kifuというソフト。




 導入の仕方は、下記のサイトを参考にさせて頂いた。



 Ubuntu Serverを利用しているのでコマンドで環境を整える。

$ cd /var/www/html/wp-content/uploads
$ sudo wget https://github.com/air-h-128k-il/Responsive-Kifu/archive/master.zip
$ sudo mv Responsive-Kifu-master Responsive-Kifu
$ cd Responsive-Kifu/img

 Responsive-Kifuの将棋駒は、デフォルトだとアルファベットで表示されるので、漢字の駒に変更しておく。

$ sudo mv pieces pieces-en
$ sudo cp -rp pieces-jp pieces
$ sudo chown -R www-data:www-data /var/www/html/wp-content/uploads/Responsive-Kifu

 表示サンプルのHTMLファイルpagagm584.htmlがResponsive-Kifu/html以下に存在するので、ブラウザでhttps://導入ドメイン/wp-content/uploads/Responsive-Kifu/html/pagagm584.htmlにアクセスし、将棋盤が表示されるか確認する。

pagagm584.html

 上の表示は、導入ドメイン以下にあるHTMLファイルであるがWordPressとは独立したページになっているのでWordPressの投稿ページ中に<iframe>タグを使って上のHTMLファイルを埋め込む。
 WordPressで試したところ<iframe>タグ1個の場合は、うまく表示されたが2個使って2つの将棋盤を表示させようとすると最初の1つだけしか表示されなかった。ネットで探したところ、iframeというプラグインがあり、これを導入して大括弧でiframeを囲ったショートコードで挿入したところ、2つとも表示されるようになった。





 WordPressの投稿ページ中にResponsive-Kifuを直接埋め込むのは、WordPress、テーマのCSSの影響を受けてフォントサイズ、ボタン、色などオリジナルの表示と変わってしまうので<iframe>タグを使って上のHTMLファイルを埋め込む方法が一番手間がかからなくて良いと思われる。
 <iframe>タグのもうひとつの利点は、iPadなどで表示させた場合、将棋盤の再生ボタンを連続して押すとタブルタップになって画面が拡大して意に反した動作になってしまうのを防ぐことができることである。
 パソコンでは、駒音再生にチェックをつけると駒音も再生された。iPadでは、表示と再生は正常だったが駒音は再生されなかった。iPhoneでは、将棋盤が大き過ぎて左半分しか表示されなかった。調整次第で正常に表示されるのかもしれない。
 表示サンプルのHTMLファイルpagagm584.htmlの9行目に棋譜ファイルの指定があるのでここを他の棋譜ファイルに変えることで別の棋譜を再生することができる。

 将棋ウォーズ棋譜検索βからダウンロードした棋譜ファイルをResponsive-Kifuで再生させたところ正常に動作したがKifu for JSのexamplesに入っていたjt201409130101.kifは、エラーが発生して再生させることができなかった。
 将棋盤は、見やすいと思う。将棋ウォーズの棋譜再生に向いているかもしれない。