Skip to main content

盤の設置方式

ライブラリを読み込んだ後、盤を表示するには次のような方式があります。

タグ方式​

タグ方式は、HTMLタグを書くだけで盤を設置できる方式です。ブログやwebサイトなどに最適です。

DOM (HTML)のロード時点で存在する全ての <script type="text/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>

外部ファイルを読み込む例​

.kif などの棋譜ファイルを読み込むこともできます。

<script type="text/kifu" data-src="./great-tsume.kif"></script>
caution

ブラウザによるセキュリティ上の制約

  • 通常、同一ドメイン上の棋譜しか読み込めません。
  • ローカルのファイルシステム上にあるファイルの読み込みはできません。ローカルでサーバを立てるか、実際のサーバ上にアップロードして確認してください。

JavaScript関数方式​

JavaScriptを直接書いて局面を動的に呼び出す方式です。Webアプリなどに便利です。

棋譜を埋め込む例​

<div id="board-1"></div>
<script>
  button.addEventListener("click", function() {
    KifuForJS.load({
      kifu: "▲７六歩 △３四歩",
    }, "board-1");
  });
</script>

外部ファイルを読み込む例​

<div id="board-1"></div>
<script>
  button.addEventListener("click", function() {
    KifuForJS.load({
      src: "./great-tsume.kif",
    }, "board-1");
  });
</script>
caution

Kifu for JS 4以前では、次の２つの関数が存在しました。

  • load(ファイルパス, id, オプション)
  • loadString(棋譜, id, オプション)

Kifu for JS 5では、APIの簡素化のため load(オプション, id) に統一されました。引数の順序にご注意ください。

  • load(ファイルパス, id, オプション) → load({src: ファイルパス, ...オプション}, id) と書き換えられます。
  • loadString(棋譜, id, オプション) → load({kifu: 棋譜, ...オプション}, id) と書き換えられます。

Reactコンポーネント方式​

Kifu for JSはReactで実装されており、Reactコンポーネントとしても利用できます。Reactアプリケーションに組み込む場合、<KifuLite>コンポーネントを使用してください。

タグ方式のように棋譜を子要素に渡すか、

MyApp.tsx
import {KifuLite} from "kifu-for-js";

export default function MyApp() {
  return (
    <KifuLite>
▲７六歩 △３四歩
    </KifuLite>
  )
}

または、JavaScript関数方式のようにkifuプロパティに棋譜を渡すことができます。

MyApp.tsx
import {KifuLite} from "kifu-for-js";

export default function MyApp() {
  return (
    <KifuLite kifu="▲７六歩 △３四歩" />
  )
}

詳しくは、<KifuLite> Reactコンポーネントを参照してください。

Kifu for Java/Flashの自動解釈方式​

Kifu for Java (2015年頃対応終了)やKifu for Flash (2020年頃対応終了)が設置されたページの棋譜を自動解釈する方式です。

<script>
  KifuForJS.recover()
</script>