Skip to main content

はじめる

Kifu for JSは、お持ちのサイトやブログへ簡単に設置できます。さっそくやってみましょう。

1. Kifu for JSライブラリを読み込む​

次のコードをページ内に埋め込むことで、そのページ内でKifu for JSが利用できるようになります。

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

2. 盤を設置する​

さっそく再生盤を表示してみましょう。KI2棋譜を含んだ次のようなタグをページ内に埋め込んでください。

<script type="text/kifu">
後手の持駒：飛二　金四　桂四　香四　歩十八
  ９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
| ・ ・ ・v銀v玉v銀 ・ ・ ・|一
| ・ ・ ・ ・ ・ ・ ・ ・ ・|二
| ・ ・ ・ ・ 銀 ・ ・ ・ ・|三
| ・ ・ ・ ・ ・ ・ ・ ・ ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ ・ ・ ・ ・ ・ ・ 角|六
| ・ ・ ・ ・ ・ ・ ・ ・ ・|七
| ・ ・ ・ ・ ・ ・ ・ ・ ・|八
| ・ ・ ・ ・ ・ ・ ・ ・ ・|九
+---------------------------+
先手の持駒：銀
*最も有名な古典詰将棋。
*銀で押さえ込むのは難しそうに見えるが？
▲５二角成
*焦点の捨て駒が好手。
△同銀右 ▲６二銀打
*どちらで取っても玉のコビンが空いて詰み。
まで3手で詰み
</script>

これで、ページに再生盤が表示されました。おめでとう！🎉

９一８二７三６四５五４六３七２八１九銀玉銀銀角銀　駒持0八十歩四香四桂四金二飛　駒持0
* 開始局面
*1 ☗５二角成
 2 ☖同　銀右
*3 ☗６二銀打
  詰
最も有名な古典詰将棋。 銀で押さえ込むのは難しそうに見えるが？

つづいて​

オプションでKifu for JSをカスタマイズする方法も見ていきましょう。

KIFファイルを読み込むなど、これ以外の読み込み方式については以下をご覧ください。