Kyokumen.js

局面.js とは

局面図を文章に埋め込むための JavaScript ライブラリです。局面図を表示するだけでなく、文字にマウスカーソルをあわせたときに局面図を更新することができます（☗７六歩☖３四歩）。

使い方

局面.js は局面図を生成するプログラム kyokumen.js と、図の見栄えを設定する CSS ファイルからなります。それらの HTML ファイルの中で指定して、局面図は <figure class="kyokumen" > タグ、局面図の変更は class="mv" 属性をもつタグで行います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://junkoda.github.io/kyokumen/0/kyokumen.css">
  <title>例</title>
</head>
<body>
<script src="https://junkoda.github.io/kyokumen/0/kyokumen.js"></script>

<figure id="fig1" class="kyokumen" data-sente="先手" data-gote="後手"
     data-sfen="lnsgkgsnl/1r5b1/ppppppppp/9/9/9/PPPPPPPPP/1B5R1/LNSGKGSNL b - 1">
</figure>

<p><span class="mv" data-board="fig1"
         data-sfen="lnsgkgsnl/1r5b1/ppppppppp/9/9/2P6/PP1PPPPPP/1B5R1/LNSGKGSNL b">
  ☗７六歩</span></p>
</body>
</html>

局面図は Shogi Forsyth-Edwards Notation (SFEN) で記述し、data-sfen="" に書きます。