静的図面モード (static)
再生盤ではなく、動かすことのできない静的な局面画像を表示することができます。盤面領域のみが横6:縦5 (300:250)で表示されます。棋譜解説などの際、一つずつ画像を生成する手間を省けます。
これには static オプションを指定します。
棋譜中の局面を指定する場合
- タグ方式
- JavaScript関数方式
- Reactコンポーネント方式
<script type="text/kifu" data-static data-ply="3">
▲７六歩 △３四歩 ▲７五歩 △８四歩
</script>
<div id="board-1"></div>
<script>
KifuForJS.load({
"kifu": "▲７六歩 △３四歩 ▲７五歩 △８四歩",
"static": true,
"ply": 3
}, "board-1");
</script>
import {KifuLite} from "kifu-for-js";
export const MyComponent = () => {
return <KifuLite static ply={3}>
▲７六歩 △３四歩 ▲７五歩 △８四歩
</KifuLite>
}
局面の指定も参照してください。
着手表示を抑制する
通常、初期局面や局面読み込みなどの場合を除き、最終手が着手表示され太字になります。 static-last オプションに hidden を指定すると、着手表示を抑制することができます。
- タグ方式
- JavaScript関数方式
- Reactコンポーネント方式
<script type="text/kifu" data-ply="3" data-static data-static-last="hidden">
▲７六歩 △３四歩 ▲７五歩 △８四歩
</script>
<div id="board-1"></div>
<script>
KifuForJS.load({
"kifu": "▲７六歩 △３四歩 ▲７五歩 △８四歩",
"ply": 3,
"static": {
"last": "hidden"
}
}, "board-1");
</script>
import {KifuLite} from "kifu-for-js";
export const MyComponent = () => {
return <KifuLite ply={3} static={{"last":"hidden"}}>
▲７六歩 △３四歩 ▲７五歩 △８四歩
</KifuLite>
}
局面を直接指定する場合
棋譜中の一局面ではなく、局面形式も同様に読み込むことができます。以下はBOD形式の例です。
- タグ方式
- JavaScript関数方式
- Reactコンポーネント方式
<script type="text/kifu" data-static>
後手の持駒：飛 金三 銀三 桂二 香四 歩十三
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
| ・ ・ ・ ・ 馬 ・ ・v桂 ・|一
| ・ ・ ・ ・ ・ ・ ・v玉 ・|二
| ・ ・ ・ ・ ・ ・v歩v歩 ・|三
| ・ ・ ・ ・ ・ ・ ・v金v歩|四
| ・ ・ ・ ・ 歩 ・ ・ ・ 歩|五
| ・ ・ ・ ・ ・ ・ ・ ・ ・|六
| ・ ・ ・ ・ ・ ・ ・ ・ ・|七
| ・ ・ ・ ・ ・ ・ ・ ・ ・|八
| ・ ・ ・ ・ ・ ・ ・ ・ ・|九
+---------------------------+
先手の持駒：飛 角 銀 桂
先手：
後手：
</script>
<div id="board-1"></div>
<script>
KifuForJS.load({
"kifu": "\n後手の持駒：飛 金三 銀三 桂二 香四 歩十三\n ９ ８ ７ ６ ５ ４ ３ ２ １\n+---------------------------+\n| ・ ・ ・ ・ 馬 ・ ・v桂 ・|一\n| ・ ・ ・ ・ ・ ・ ・v玉 ・|二\n| ・ ・ ・ ・ ・ ・v歩v歩 ・|三\n| ・ ・ ・ ・ ・ ・ ・v金v歩|四\n| ・ ・ ・ ・ 歩 ・ ・ ・ 歩|五\n| ・ ・ ・ ・ ・ ・ ・ ・ ・|六\n| ・ ・ ・ ・ ・ ・ ・ ・ ・|七\n| ・ ・ ・ ・ ・ ・ ・ ・ ・|八\n| ・ ・ ・ ・ ・ ・ ・ ・ ・|九\n+---------------------------+\n先手の持駒：飛 角 銀 桂\n先手：\n後手：\n",
"static": true
}, "board-1");
</script>
import {KifuLite} from "kifu-for-js";
export const MyComponent = () => {
return <KifuLite static>
後手の持駒：飛 金三 銀三 桂二 香四 歩十三
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
| ・ ・ ・ ・ 馬 ・ ・v桂 ・|一
| ・ ・ ・ ・ ・ ・ ・v玉 ・|二
| ・ ・ ・ ・ ・ ・v歩v歩 ・|三
| ・ ・ ・ ・ ・ ・ ・v金v歩|四
| ・ ・ ・ ・ 歩 ・ ・ ・ 歩|五
| ・ ・ ・ ・ ・ ・ ・ ・ ・|六
| ・ ・ ・ ・ ・ ・ ・ ・ ・|七
| ・ ・ ・ ・ ・ ・ ・ ・ ・|八
| ・ ・ ・ ・ ・ ・ ・ ・ ・|九
+---------------------------+
先手の持駒：飛 角 銀 桂
先手：
後手：
</KifuLite>
}
SFEN形式にも対応しています。
- タグ方式
- JavaScript関数方式
- Reactコンポーネント方式
<script type="text/kifu" data-static>
ln1gkg1nl/6+P2/2sppps1p/2p3p2/p8/P1P1P3P/2NP1PP2/3s1KSR1/L1+b2G1NL w R2Pbgp 42
</script>
<div id="board-1"></div>
<script>
KifuForJS.load({
"kifu": "ln1gkg1nl/6+P2/2sppps1p/2p3p2/p8/P1P1P3P/2NP1PP2/3s1KSR1/L1+b2G1NL w R2Pbgp 42",
"static": true
}, "board-1");
</script>
import {KifuLite} from "kifu-for-js";
export const MyComponent = () => {
return <KifuLite static>
ln1gkg1nl/6+P2/2sppps1p/2p3p2/p8/P1P1P3P/2NP1PP2/3s1KSR1/L1+b2G1NL w R2Pbgp 42
</KifuLite>
}
着手表示箇所を指定する
局面データには着手というものが存在しないため、着手表示をするには着手したマスを指定します。
３二へ着手表示をする場合、static-last オプションに [3, 2] を指定します。
- タグ方式
- JavaScript関数方式
- Reactコンポーネント方式
<script type="text/kifu" data-static data-static-last="[3,2]">
ln1gkg1nl/6+P2/2sppps1p/2p3p2/p8/P1P1P3P/2NP1PP2/3s1KSR1/L1+b2G1NL w R2Pbgp 42
</script>
<div id="board-1"></div>
<script>
KifuForJS.load({
"kifu": "ln1gkg1nl/6+P2/2sppps1p/2p3p2/p8/P1P1P3P/2NP1PP2/3s1KSR1/L1+b2G1NL w R2Pbgp 42",
"static": {
"last": [
3,
2
]
}
}, "board-1");
</script>
import {KifuLite} from "kifu-for-js";
export const MyComponent = () => {
return <KifuLite static={{"last":[3,2]}}>
ln1gkg1nl/6+P2/2sppps1p/2p3p2/p8/P1P1P3P/2NP1PP2/3s1KSR1/L1+b2G1NL w R2Pbgp 42
</KifuLite>
}