画像をつくらずに将棋の局面図を添付する ~shogizumen.js~

WordPress
この記事は約5分で読めます。

この記事の目標

本ブログで将棋の記事を書きたい。局面図を画像ファイルとして1つ1つ作成するのは手間なので、ライブラリshogizumen.jsを導入して局面図のテキストからSVG画像を生成して表示させたい

shogizumen.js

WordPressでJavaScriptファイルを読み込む方法

JavaScriptファイルをどのタイミングで読み込むか

JavaScriptファイルを読み込む場所はbodyタグ内とheaderタグ内の2つがある。

結論はbodyタグ内で読み込ませるのが良いらしい。headerタグ内でJavaScriptファイルを読み込ませると、その分bodyタグ内を読み込む処理が遅れるためとのこと。

そのため、bodyタグ内でJavaScriptファイルを読み込ませる方法を調査した。

JavaScriptを書く場所や読み込む場所はどこがいいのか?
JavaScriptはHTMLにscriptタグを使ったり外部ファイルを読み込んで実行しますが、その記述場所はhead内やbody内の最下部です。そのどこがいいのでしょうか?

子テーマの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' );
includes_url()は、インクルードディレクトリURL(例えば「https://[ドメイン名]/wp-includes」)を返す関数。
[WordPress]外部JavaScriptファイルを読み込んでjQueryなどのライブラリを使う方法
こんにちは。でんすけ(@notgeek_densuke)です。 WordPressで外部のJavaScript…

kyokumenzu.jsの注意点

最終手にszLastMoveクラスが指定されるため、CSSで最終手の強調を行うことができる。その際につまずいた箇所がいくつかあったので下記にまとめておく。

最終手で駒を取ったときに最終手が強調されない

結論は制限事項で、最終手が「同〇」のときはどのマスが最終手か判定できない。最終手を強調したいときは手動で最終手を書き換える必要がある。

後手の持駒:角 金 
  9 8 7 6 5 4 3 2 1
+---------------------------+
| ・ 龍 ・v銀 ・ ・ ・v桂 ・|一
| ・ ・v銀 ・ ・ ・ ・v玉v香|二
| ・ ・ ・ ・ ・v金 ・v銀 ・|三
|v歩 ・v歩 ・v桂 桂v歩v歩v歩|四
| ・ ・ ・ ・ 馬 歩 ・ ・ ・|五
| 歩 歩 ・ ・ 歩 金 歩 歩 歩|六
| ・ ・ ・ ・ ・ ・ 桂 ・ ・|七
| ・ ・ ・ ・ ・ ・ 香 玉 ・|八
| ・ ・ 歩v龍 ・ 香 ・ ・ 香|九
+---------------------------+
先手の持駒:金 銀 歩五 
手数=124  △同 玉(11) まで
後手の持駒:角 金 
  9 8 7 6 5 4 3 2 1
+---------------------------+
| ・ 龍 ・v銀 ・ ・ ・v桂 ・|一
| ・ ・v銀 ・ ・ ・ ・v玉v香|二
| ・ ・ ・ ・ ・v金 ・v銀 ・|三
|v歩 ・v歩 ・v桂 桂v歩v歩v歩|四
| ・ ・ ・ ・ 馬 歩 ・ ・ ・|五
| 歩 歩 ・ ・ 歩 金 歩 歩 歩|六
| ・ ・ ・ ・ ・ ・ 桂 ・ ・|七
| ・ ・ ・ ・ ・ ・ 香 玉 ・|八
| ・ ・ 歩v龍 ・ 香 ・ ・ 香|九
+---------------------------+
先手の持駒:金 銀 歩五 
手数=124  △同 玉(11) まで

最終行の「手数=124 △同 玉(11) まで」を「手数=124 △22玉(11) まで」と書き換えてやることで最終手を強調(下記の例では太字化)できるようになった。

後手の持駒:角 金 
  9 8 7 6 5 4 3 2 1
+---------------------------+
| ・ 龍 ・v銀 ・ ・ ・v桂 ・|一
| ・ ・v銀 ・ ・ ・ ・v玉v香|二
| ・ ・ ・ ・ ・v金 ・v銀 ・|三
|v歩 ・v歩 ・v桂 桂v歩v歩v歩|四
| ・ ・ ・ ・ 馬 歩 ・ ・ ・|五
| 歩 歩 ・ ・ 歩 金 歩 歩 歩|六
| ・ ・ ・ ・ ・ ・ 桂 ・ ・|七
| ・ ・ ・ ・ ・ ・ 香 玉 ・|八
| ・ ・ 歩v龍 ・ 香 ・ ・ 香|九
+---------------------------+
先手の持駒:金 銀 歩五 
手数=124  △22玉(11) まで

最終手が1筋のときに最終手が強調されない

結論は不具合で、最終手が1筋のときに最終手マスがうまく計算できない。

既に同じ問題に直面した方がおり、下記のとおりGitHub上に修正箇所をコミットされていたので拝借した。

最終手が1筋の場合も最終手を強調(下記の例では太字化)できるようになった。

後手の持駒:角 金 
  9 8 7 6 5 4 3 2 1
+---------------------------+
| ・ 龍 ・v銀 ・ ・ ・v桂 銀|一
| ・ ・v銀 ・ ・ ・ ・v玉v香|二
| ・ ・ ・ ・ ・v金 ・v銀 ・|三
|v歩 ・v歩 ・v桂 桂v歩v歩v歩|四
| ・ ・ ・ ・ 馬 歩 ・ ・ ・|五
| 歩 歩 ・ ・ 歩 金 歩 歩 歩|六
| ・ ・ ・ ・ ・ ・ 桂 ・ ・|七
| ・ ・ ・ ・ ・ ・ 香 玉 ・|八
| ・ ・ 歩v龍 ・ 香 ・ ・ 香|九
+---------------------------+
先手の持駒:金 歩五 
手数=125  ▲1一銀打 まで

コメント

タイトルとURLをコピーしました