いものおと

やまいもの将棋ノート

ブログでの将棋盤表示

ツール

ブログで将棋の記事を書くにあたって、ほしいのが将棋盤の表示。 符号だけ並んでいても難しいからね。

調べてみるとKifu for JSというJavaScriptのライブラリがお手軽でよさげだった。

設置方法

Kifu for JSはCDNが用意されているので、ファイルをアップロードしたりせずに簡単に設置できる。

一番簡単なのは記事の中で以下のコードを書いておくだけ：

<script src="https://cdn.jsdelivr.net/npm/kifu-for-js@5/bundle/kifu-for-js.min.js" charset="utf-8"></script>

これだけで将棋盤を表示できるようになる。

ただ、これを毎回記事に書いていると面倒なので、はてなブログでは設定であらかじめ埋め込んでおくといい。

ブログのダッシュボードを開き、「設定」から「詳細設定」を選び、「<head>要素にメタデータを追加」に上記のコードを追加しておく。 すると記事にコードを書くことなくいきなり将棋盤を表示できる。

表示方法

表示するには<script type="text/kifu">と</script>の間にKIF形式の棋譜を書いておけばいい。

たとえばこんな感じ：

<script type="text/kifu">
開始日時：2019/08/15 14:00:00
終了日時：2019/08/15 15:31:00
棋戦：朝日杯将棋オープン戦
場所：東京都渋谷区｢シャトーアメーバ｣
持ち時間：40分
消費時間：75▲40△40
手合割：平手
先手：戸辺　誠 七段
後手：青野照市 九段
戦型：三間飛車
手数----指手---------消費時間--
1 ７六歩(77) (00:00/00:00:00)
2 ３四歩(33) (00:00/00:00:00)
3 ７五歩(76) (00:00/00:00:00)
4 ４二玉(51) (00:00/00:00:00)
5 ６六歩(67) (00:00/00:00:00)
6 ６二銀(71) (00:00/00:00:00)
7 ７八飛(28) (00:00/00:00:00)
8 ６四歩(63) (00:00/00:00:00)
9 ４八玉(59) (00:00/00:00:00)
10 ６三銀(62) (00:00/00:00:00)

〜長いので省略〜

71 ４六香打 (00:00/00:00:00)
72 ４五香打 (00:00/00:00:00)
73 同　香(46) (00:00/00:00:00)
74 同　桂(33) (00:00/00:00:00)
75 ３五金打 (00:00/00:00:00)
76 投了 (00:00/00:00:00)
</script>

すると次のように表示される：

ちなみに分岐にも対応しているしコメントも表示される。

オプション指定

開始局面を指定する場合、data-plyオプションで手数を指定する。 たとえば3手目を開始局面として表示したい場合、<script type="text/kifu" data-ply="3">のように指定する。

そして盤面を反転して表示したい場合、data-reverseオプションを指定する。 <script type="text/kifu" data-reverse>といった具合。

スタイルの設定

スタイルを調整したい場合、CSSで.kifuforjs-liteに対して指定すればいい。

はてなブログの場合、ブログのダッシュボードを開き、「デザイン」から「カスタマイズ」を選び、「デザインCSS」で設定する。

このブログでは、将棋盤の背景を白くして記事の中央に配置されるように、次のように指定している：

.kifuforjs-lite {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}