将棋 | 令和時代

Webサイトに将棋の棋譜を再生させようとすると、Adobe Flashで開発されたKifu for Flashが定番になっていたように思う。しかし、Adobeが2020年にFlashのサポートを終了すると発表したことで将棋の棋譜再生でもKifu for Flashの代替ソフトが求められるようになった。 ネットで検索したところ、JavaScriptで動く将棋の棋譜再生盤Kifu for JSが有名であることがわかった。 今回、WordPressで構築したこのサイトにKifu for JSで棋譜を再生することができたので、導入手順を書いてみる。再生盤を以下に表示してみた。 パソコンでは、問題なく表示できている。非常に素晴らしいソフトで導入できて本当に嬉しい。作者様に感謝致します。 タブレットやスマートフォンでは、まだ上手く表示できていないところがある。iPadでは、「反転」の文字が「反」しか表示されていなかったり、「credit」の表示レイアウトが微妙に位置ずれしている。iPhoneでは、将棋盤が横にはみ出てしまった。駒台や棋譜表示を将棋盤の横ではなく縦にもってくればいいように思われるが、バージョンアップ等で解決されるかもしれない。 導入は、Kifu for JSからZIPファイルをダウンロードして行う。WordPressを /var/www/htmlに導入した場合の例を示す。Ubuntu Serverなのでコマンドで作業している。 test.htmlを以下のように修正する。 &lt;html&gt; &lt;head&gt; &lt;title&gt;Kifu for JS example&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script src="../bundle/jquery-3.4.1.min.js"&gt;&lt;/script&gt; &lt;script src="../bundle/kifu-for-js-2.0.0.min.js" charset="utf-8"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt;var kifu = KifuForJS.load("../examples/files/kif/jt201409130101.kif");&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; ブラウザでhttps://導入ドメイン/wp-content/uploads/Kifu-for-JS/examples/test.htmlにアクセスし、将棋盤が表示されるか確認する。以下は、Kifu for JSに収録されていた棋譜の表示。 https://reiwa-period.com/wp-content/uploads/Kifu-for-JS/examples/test.html 上の表示は、導入ドメイン以下にあるHTMLファイルであるがWordPressとは独立したページになっているのでWordPressの投稿ページ中に&lt;iframe&gt;タグを使って上のHTMLファイルを埋め込む。 WordPressで試したところ&lt;iframe&gt;タグ1個の場合は、うまく表示されたが2個使って2つの将棋盤を表示させようとすると最初の1つだけしか表示されなかった。ネットで探したところ、iframeというプラグインがあり、これを導入して大括弧でiframeを囲ったショートコードで挿入したところ、2つとも表示されるようになった。 &lt;center&gt; &lt;/center&gt; WordPressの投稿ページ中にKifu for JSを直接埋め込むのは、WordPress、テーマのCSSの影響を受けてフォントサイズ、ボタン、色などオリジナルの表示と変わってしまうので&lt;iframe&gt;タグを使って上のHTMLファイルを埋め込む方法が一番手間がかからなくて良いと思われる。 &lt;iframe&gt;タグのもうひとつの利点は、iPadなどで表示させた場合、将棋盤の再生ボタンを連続して押すとタブルタップになって画面が拡大して意に反した動作になってしまうのを防ぐことができることである。 &lt;iframe&gt;タグを使わず、Kifu for JSを直接埋め込むと自分のサイトでは以下の表示のように文字サイズやボタンのレイアウト、ボタンの色などがオリジナルの表示と変わってしまった。