この記事の目標
本ブログで将棋の記事を書きたい。局面図を画像ファイルとして1つ1つ作成するのは手間なので、ライブラリshogizumen.jsを導入して局面図のテキストからSVG画像を生成して表示させたい。
WordPressでJavaScriptファイルを読み込む方法
JavaScriptファイルをどのタイミングで読み込むか
JavaScriptファイルを読み込む場所はbodyタグ内とheaderタグ内の2つがある。
結論はbodyタグ内で読み込ませるのが良いらしい。headerタグ内でJavaScriptファイルを読み込ませると、その分bodyタグ内を読み込む処理が遅れるためとのこと。
そのため、bodyタグ内でJavaScriptファイルを読み込ませる方法を調査した。
子テーマのfunctions.phpで読み込む
下記のとおり子テーマのfunctions.phpにJavaScriptファイルの読み込み処理を追加した。
第2引数に「JavaScriptファイルのURL」、第4引数に「bodyタグ内でJavaScriptファイルを読み込むか」を指定している。今回はbodyタグ内でJavaScriptファイルを読み込ませたいので、第4引数はtrueとした。
function load_shogizumenscript() {
wp_enqueue_script("shogizumen",
includes_url().'/js/myscripts/shogizumen.js',
'ver.20170713',
true);
}
add_action( 'wp_enqueue_scripts', 'load_shogizumenscript' );
kyokumenzu.jsの注意点
最終手にszLastMoveクラスが指定されるため、CSSで最終手の強調を行うことができる。その際につまずいた箇所がいくつかあったので下記にまとめておく。
最終手で駒を取ったときに最終手が強調されない
結論は制限事項で、最終手が「同〇」のときはどのマスが最終手か判定できない。最終手を強調したいときは手動で最終手を書き換える必要がある。
後手の持駒：角 金 ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ | ・ 龍 ・v銀 ・ ・ ・v桂 ・|一 | ・ ・v銀 ・ ・ ・ ・v玉v香|二 | ・ ・ ・ ・ ・v金 ・v銀 ・|三 |v歩 ・v歩 ・v桂 桂v歩v歩v歩|四 | ・ ・ ・ ・ 馬 歩 ・ ・ ・|五 | 歩 歩 ・ ・ 歩 金 歩 歩 歩|六 | ・ ・ ・ ・ ・ ・ 桂 ・ ・|七 | ・ ・ ・ ・ ・ ・ 香 玉 ・|八 | ・ ・ 歩v龍 ・ 香 ・ ・ 香|九 +---------------------------+ 先手の持駒：金 銀 歩五 手数＝124 △同 玉(11) まで
後手の持駒：角 金 ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ | ・ 龍 ・v銀 ・ ・ ・v桂 ・|一 | ・ ・v銀 ・ ・ ・ ・v玉v香|二 | ・ ・ ・ ・ ・v金 ・v銀 ・|三 |v歩 ・v歩 ・v桂 桂v歩v歩v歩|四 | ・ ・ ・ ・ 馬 歩 ・ ・ ・|五 | 歩 歩 ・ ・ 歩 金 歩 歩 歩|六 | ・ ・ ・ ・ ・ ・ 桂 ・ ・|七 | ・ ・ ・ ・ ・ ・ 香 玉 ・|八 | ・ ・ 歩v龍 ・ 香 ・ ・ 香|九 +---------------------------+ 先手の持駒：金 銀 歩五 手数＝124 △同 玉(11) まで
最終行の「手数＝124 △同 玉(11) まで」を「手数＝124 △２２玉(11) まで」と書き換えてやることで最終手を強調(下記の例では太字化)できるようになった。
後手の持駒：角 金 ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ | ・ 龍 ・v銀 ・ ・ ・v桂 ・|一 | ・ ・v銀 ・ ・ ・ ・v玉v香|二 | ・ ・ ・ ・ ・v金 ・v銀 ・|三 |v歩 ・v歩 ・v桂 桂v歩v歩v歩|四 | ・ ・ ・ ・ 馬 歩 ・ ・ ・|五 | 歩 歩 ・ ・ 歩 金 歩 歩 歩|六 | ・ ・ ・ ・ ・ ・ 桂 ・ ・|七 | ・ ・ ・ ・ ・ ・ 香 玉 ・|八 | ・ ・ 歩v龍 ・ 香 ・ ・ 香|九 +---------------------------+ 先手の持駒：金 銀 歩五 手数＝124 △２２玉(11) まで
最終手が1筋のときに最終手が強調されない
結論は不具合で、最終手が1筋のときに最終手マスがうまく計算できない。
既に同じ問題に直面した方がおり、下記のとおりGitHub上に修正箇所をコミットされていたので拝借した。
最終手が1筋の場合も最終手を強調(下記の例では太字化)できるようになった。
後手の持駒：角 金 ９ ８ ７ ６ ５ ４ ３ ２ １ +---------------------------+ | ・ 龍 ・v銀 ・ ・ ・v桂 銀|一 | ・ ・v銀 ・ ・ ・ ・v玉v香|二 | ・ ・ ・ ・ ・v金 ・v銀 ・|三 |v歩 ・v歩 ・v桂 桂v歩v歩v歩|四 | ・ ・ ・ ・ 馬 歩 ・ ・ ・|五 | 歩 歩 ・ ・ 歩 金 歩 歩 歩|六 | ・ ・ ・ ・ ・ ・ 桂 ・ ・|七 | ・ ・ ・ ・ ・ ・ 香 玉 ・|八 | ・ ・ 歩v龍 ・ 香 ・ ・ 香|九 +---------------------------+ 先手の持駒：金 歩五 手数＝125 ▲１一銀打 まで
コメント