棋譜 (kifu, src)

読み込む棋譜を指定します。棋譜文字列か、棋譜ファイルのパス・URLのどちらかを指定します。

棋譜文字列

読み込み方式により、kifu オプションを使用するか、タグの中身として書きます。

タグ方式

タグの中身として書きます。

<script type="text/kifu">
# KIF形式棋譜ファイル
# Generated by Shogidokoro
後手の持駒：飛　金三　銀三　桂二　香四　歩十三
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
| ・ ・ ・ ・ 馬 ・ ・v桂 ・|一
| ・ ・ ・ ・ ・ ・ ・v玉 ・|二
| ・ ・ ・ ・ ・ ・v歩v歩 ・|三
| ・ ・ ・ ・ ・ ・ ・v金v歩|四
| ・ ・ ・ ・ 歩 ・ ・ ・ 歩|五
| ・ ・ ・ ・ ・ ・ ・ ・ ・|六
| ・ ・ ・ ・ ・ ・ ・ ・ ・|七
| ・ ・ ・ ・ ・ ・ ・ ・ ・|八
| ・ ・ ・ ・ ・ ・ ・ ・ ・|九
+---------------------------+
先手の持駒：飛　角　銀　桂
先手：
後手：
手数----指手---------消費時間--
1 ５二飛打      (00:31 / 00:00:31)
2 ３二金打      (00:00 / 00:00:00)
3 ３一角打      (00:00 / 00:00:31)
4 同　玉(22)    (00:00 / 00:00:00)
</script>

改行が含まれない場合は、data-kifu 属性に指定することもできます。

<script type="text/kifu" data-kifu="▲７六歩 △３四歩"></script>

JavaScript関数方式

kifu プロパティを使用します。

<div id="board-1"></div>
<script>
  KifuForJS.load({kifu: `# KIF形式棋譜ファイル
# Generated by Shogidokoro
後手の持駒：飛　金三　銀三　桂二　香四　歩十三
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
| ・ ・ ・ ・ 馬 ・ ・v桂 ・|一
| ・ ・ ・ ・ ・ ・ ・v玉 ・|二
| ・ ・ ・ ・ ・ ・v歩v歩 ・|三
| ・ ・ ・ ・ ・ ・ ・v金v歩|四
| ・ ・ ・ ・ 歩 ・ ・ ・ 歩|五
| ・ ・ ・ ・ ・ ・ ・ ・ ・|六
| ・ ・ ・ ・ ・ ・ ・ ・ ・|七
| ・ ・ ・ ・ ・ ・ ・ ・ ・|八
| ・ ・ ・ ・ ・ ・ ・ ・ ・|九
+---------------------------+
先手の持駒：飛　角　銀　桂
先手：
後手：
手数----指手---------消費時間--
1 ５二飛打      (00:31 / 00:00:31)
2 ３二金打      (00:00 / 00:00:00)
3 ３一角打      (00:00 / 00:00:31)
4 同　玉(22)    (00:00 / 00:00:00)
`}, "board-1");
</script>

Reactコンポーネント方式

import {KifuLite} from "kifu-for-js";

const kifu = `
# KIF形式棋譜ファイル
# Generated by Shogidokoro
後手の持駒：飛　金三　銀三　桂二　香四　歩十三
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
| ・ ・ ・ ・ 馬 ・ ・v桂 ・|一
| ・ ・ ・ ・ ・ ・ ・v玉 ・|二
| ・ ・ ・ ・ ・ ・v歩v歩 ・|三
| ・ ・ ・ ・ ・ ・ ・v金v歩|四
| ・ ・ ・ ・ 歩 ・ ・ ・ 歩|五
| ・ ・ ・ ・ ・ ・ ・ ・ ・|六
| ・ ・ ・ ・ ・ ・ ・ ・ ・|七
| ・ ・ ・ ・ ・ ・ ・ ・ ・|八
| ・ ・ ・ ・ ・ ・ ・ ・ ・|九
+---------------------------+
先手の持駒：飛　角　銀　桂
先手：
後手：
手数----指手---------消費時間--
1 ５二飛打      (00:31 / 00:00:31)
2 ３二金打      (00:00 / 00:00:00)
3 ３一角打      (00:00 / 00:00:31)
4 同　玉(22)    (00:00 / 00:00:00)
`;

export const MyComponent = () => {
  return <KifuLite kifu={kifu} />
}

タグの中身のインデント自動処理

タグ方式およびReactコンポーネント方式において棋譜がタグの中身に書かれていて、棋譜全体に対して同一のインデントがなされている場合でも適切に処理されます。

タグ方式の例：すべての行に半角スペース2つが入っている

<script type="text/kifu">
  # KIF形式棋譜ファイル
  # Generated by Shogidokoro
  後手の持駒：飛　金三　銀三　桂二　香四　歩十三
  ９ ８ ７ ６ ５ ４ ３ ２ １
  +---------------------------+
  | ・ ・ ・ ・ 馬 ・ ・v桂 ・|一
  | ・ ・ ・ ・ ・ ・ ・v玉 ・|二
  | ・ ・ ・ ・ ・ ・v歩v歩 ・|三
  | ・ ・ ・ ・ ・ ・ ・v金v歩|四
  | ・ ・ ・ ・ 歩 ・ ・ ・ 歩|五
  | ・ ・ ・ ・ ・ ・ ・ ・ ・|六
  | ・ ・ ・ ・ ・ ・ ・ ・ ・|七
  | ・ ・ ・ ・ ・ ・ ・ ・ ・|八
  | ・ ・ ・ ・ ・ ・ ・ ・ ・|九
  +---------------------------+
  先手の持駒：飛　角　銀　桂
  先手：
  後手：
  手数----指手---------消費時間--
  1 ５二飛打      (00:31 / 00:00:31)
  2 ３二金打      (00:00 / 00:00:00)
  3 ３一角打      (00:00 / 00:00:31)
  4 同　玉(22)    (00:00 / 00:00:00)
</script>

棋譜ファイルのパス・URL

src オプションを使用します。

タグ方式

<script type="text/kifu" data-src="/kifu/jt201409130101.kif"></script>

JavaScript関数方式

<div id="board-1"></div>
<script>
  KifuForJS.load({
    "src": "/kifu/jt201409130101.kif"
  }, "board-1");
</script>

Reactコンポーネント方式

import {KifuLite} from "kifu-for-js";

export const MyComponent = () => {
  return <KifuLite src={"/kifu/jt201409130101.kif"}></KifuLite>
}