JavaScriptで動く将棋の棋譜再生盤Kifu for JSをiPhone6sやXperia XZ1 SO-01Kのようなスマートフォンでも表示できるようにレイアウトを変更してみた。
Kifu for JSの対局情報、駒台、棋譜リスト、棋譜保存のレイアウトを将棋盤の左右から上下に移し、表示を90%に縮小した。以下がその表示になる。
スマートフォン用の表示
（iPhone6s、Xperia XZ1 SO-01Kで確認）
実際にiPhone6sのSafariで表示させると以下になる。
Xperia XZ1 SO-01KのChromeで表示させると以下になる。
レイアウトを変更するにあたり参考とさせて頂いたのは、「Kifu-for-JSをWordPressのブログに貼り付ける方法」のページ。kifuforjs-wp-pluginというWordPressのプラグインを紹介されており、これを参考にさせて頂いた。
kifuforjs-wp-pluginでは、オリジナルのKifu for JSをロードさせた後にafter_kifu_load関数で駒台、棋譜リストを将棋盤の上下に表示させている。棋譜情報などは削除されている。
WordPressへは、ショートコードを使って投稿記事に埋め込み、将棋盤を表示させている。
今回、これを参考にさせて頂き、棋譜情報、後手の駒台を将棋盤の上に、先手の駒台、1手進むなどの矢印ボタン、棋譜リスト、分岐、棋譜保存、自動更新、コメントを先手の駒台の下に表示させてみた。
表示させるサンプルHTMLファイル（sample.html）は以下になる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <title>kifuforjs-mobile sample</title> <meta charset="utf-8"> <script src="../jquery-3.4.1.min.js"></script> <script src="../kifu-for-js-2.0.0.min-mobile.js" charset="utf-8"></script> <script src="../after_kifu_load.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="../kifuforjs-mobile.css"> </head> <body> <script>var kifu = KifuForJS.load("sample_sjis.kif", "board");</script> <script>after_kifu_load();</script> <div id="board"></div> </body> </html> |
5行目でJavaScriptライブラリjQueryを読み込み、6行目でkifu-for-js-2.0.0.min-mobile.jsというJavaScriptファイルを読み込む。オリジナルのファイルは、kifu-for-js-2.0.0.min.jsでKifu for JSのLatest releaseのページからダウンロードできる。
オリジナルのkifu-for-js-2.0.0.min.jsとの変更点は以下の3箇所になる。
1. Kifu for JSの横幅が570pxに設定されている箇所を323pxに変更。
|
1 |
t = e.exports = n(332)(!1), t.push([e.i, ".kifuforjs{width:323px}.kifuforjs |
2. 「1手戻る」矢印「<」を「<-」とハイフン「-」を追加。
これは、iPhone6sで表示させた際に、「<<」「<|」のボタンの横幅に合わせるようにするために追加した。
|
1 |
}, "<-")), A.createElement("li", null, A.createElement("input", |
3. 「1手進む」矢印「>」を「->」とハイフン「-」を追加。
|
1 |
}, "->")), A.createElement("li", null, A.createElement("button", |
7行目でafter_kifu_load.jsというJavaScriptファイルを読み込む。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function after_kifu_load(){ setTimeout(function(){ // Kifu読み込み待ち var board_id = "board"; var e = $('#'+board_id); e.find('.info').insertBefore(e.find('.ban')); // 棋譜情報をbanの上に移動 e.find('.mochi1').insertBefore(e.find('.ban')); // 持ち駒をbanの上に移動 e.find('.mochi0').insertAfter(e.find('.ban')); // 持ち駒をbanの下に移動 e.find('.panel').insertAfter(e.find('.mochi0')); // 棋譜リストなどのパネルを持ち駒の下に移動 e.find('.inline.go').insertAfter(e.find('.mochi0')); // 矢印ボタンを持ち駒の下に移動 e.find('.inline.tools').insertAfter(e.find('.inline.go')); // 反転ボタンを矢印ボタンの下に移動 e.find('.kifuforjs > tbody > tr:first-child > td:first-child').remove(); // banの左のtdタグを削除 e.find('.kifuforjs > tbody > tr:first-child > td:last-child').remove(); // banの右のtdタグを削除 e.find('.kifuforjs button:contains("credit")').remove(); },100); } |
8行目でレイアウト変更に伴う部分のスタイルシートkifuforjs-mobile.cssの読み込みを行っている。
パソコンのブラウザChromeでは問題なかったのだが、iPhone6sやiPadでは、解説欄の文字色が黒を指定しても薄いグレーになってしまい、未だに原因がわからない状態で色を赤に変更したところ、多少は見やすくなったので色を赤に変更した。
|
1 2 3 4 5 6 |
.kifuforjs textarea { color: #ff0000; background-color: #ffffff; font-weight: bold; width: 312px; } |
12行目のKifuForJS.loadでKifu for JSを表示させた後、13行目のafter_kifu_load.jsで棋譜情報、後手の駒台を将棋盤の上に、先手の駒台、1手進むなどの矢印ボタン、棋譜リスト、分岐、棋譜保存、自動更新を先手の駒台の下にレイアウト変更している。
以上のサンプルHTMLファイル（sample.html）を表示は以下のリンクになる。
上の表示は、導入ドメイン以下にあるHTMLファイルであるがWordPressのようなブログとは独立したページになっている。WordPressの投稿ページ中にKifu for JSを直接埋め込むのは、WordPress、テーマのCSSの影響を受けてフォントサイズ、ボタン、色などオリジナルの表示と変わってしまうのでiframeタグを使って上のHTMLファイルを埋め込む方法が良いと思われる。
iframeタグのもうひとつの利点は、iPadなどで表示させた場合、将棋盤の再生ボタンを連続して押すとタブルタップになって画面が拡大して意に反した動作になってしまうのを防ぐことができることである。
そこでWordPressのようなブログの投稿ページ中にiframeタグを使って上のHTMLファイルを埋め込む。
WordPressで試したところiframeタグ1個の場合は、うまく表示されたが2個使って2つの将棋盤を表示させようとすると最初の1つだけしか表示されなかった。ネットで探したところ、iframeというプラグインがあり、これを導入して大括弧でiframeを囲ったショートコードで挿入したところ、2つとも表示されるようになった。
では、実際の導入を以下に記載する。ファイル一式をGitHubに置いたのでここからダウンロードする。
Ubuntu Server、WordPressで行った例
1. ファイルの導入、展開
$ cd /var/www/html/wp-content/uploads $ sudo wget https://github.com/hnakada123/kifuforjs-mobile/archive/master.zip $ sudo unzip master.zip $ sudo rm master.zip $ sudo mv kifuforjs-mobile-master kifuforjs-mobile $ sudo chown -R www-data:www-data kifuforjs-mobile
2. ブラウザで「https://導入ドメイン/wp-content/uploads/kifuforjs-mobile/sample/sample.html」にアクセスし、リンクのように表示されることを確認する。
3. WordPressの投稿ページに以下のタグを記載し、投稿ページを確認する。
「reiwa-period.com」の部分は、導入ドメインに変更が必要。
iPhone6sに合わせて上のsample.htmlの表示の90%にしてある。
参考にさせて頂いたページは、「Kifu for JSをブログに貼り付ける」
|
1 2 3 4 5 6 |
<center> <div style="width:297px; height:1026px; overflow:hidden;"> <iframe class="kifuforjs" src="https://reiwa-period.com/wp-content/uploads/kifuforjs-mobile/sample/sample.html" flameborder="0" width="330" height="1140" scrolling="no" frameborder="0" style="transform:scale(0.9);-o-transform:scale(0.9);-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;"> </iframe> </div> </center> |
iframeプラグインを導入した場合は、iframe部分の括弧を以下に変える必要がある。
|
1 2 3 4 5 |
<center> <div style="width:297px; height:1026px; overflow:hidden;"> [iframe class="kifuforjs" src="https://reiwa-period.com/wp-content/uploads/kifuforjs-mobile/sample/sample.html" flameborder="0" width="330" height="1140" scrolling="no" frameborder="0" style="transform:scale(0.9);-o-transform:scale(0.9);-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;"][/iframe] </div> </center> |
パソコンだけの表示でOKなら、オリジナルで完璧だが、スマートフォンで表示させたい場合もあると思うのでレイアウト変更を試してみた。
パソコン用の表示
本当は、画面の横幅のサイズを判定してパソコンやタブレットは、オリジナルのKifu for JSの表示、スマートフォンでは、レイアウト変更した表示にできれば一番良いと思われるが、技術的にどうすれば良いのかわからないので、今後の課題になる。
また、オリジナルのKifu for JSでもそうなのだがiPhone6sやiPadでは、解説欄の文字色が黒を指定しても薄いグレーになってしまう現象が解決できていない。これも暫定的に赤色にしているが、本来は黒色の方が良いので今後の課題である。
最後にKifu for JS、kifuforjs-wp-pluginの作者様に感謝致します。