Skip to main content

オプション

ここでは、Kifu for JSをカスタマイズできるオプションについて説明します。個別のオプション項目は次のとおりです。

options オブジェクト​

オプションは、一つのオブジェクト optionsとして表現されます。これらは、JavaScriptオプション方式とReactコンポーネント方式で使用されます。

optionsオブジェクトの例
const options = {
  kifu: "▲７六歩 △３四歩",
  ply: 2
};

表示方式ごとのオプションの指定方法​

盤の設置方式では、3つの表示方式を紹介しました。これらの方式によってオプションの指定方法がやや異なります。

タグ方式​

タグ方式では、data-オプション名="オプション値" というような属性を、タグの<script>タグに付与することで指定します。

ply オプションに2を指定する例：

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

static オプションを指定し、static-last オプションにhiddenを指定する例：

<script type="text/kifu" data-src="./great-tsume.kif" data-static data-static-last="hidden"></script>
<!-- trueを渡してもよい -->
<script type="text/kifu" data-src="./great-tsume.kif" data-static="true" data-static-last="hidden"></script>

JavaScript関数方式​

JavaScript関数方式では、KifuForJS.load() の第1引数にオプションオブジェクト options を渡します。

ply オプションに2を指定する例：

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

static オプションを指定する例の場合、trueを渡します。

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

static オプションを指定し、static-last オプションにhiddenを指定する場合、staticをオブジェクトとし、そのオブジェクトがlastプロパティを持つようにします。 static: trueは static: {...}に吸収されていることに注意してください。

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

Reactコンポーネント方式​

Reactコンポーネント方式では、<KifuLite>コンポーネントのプロパティに個別のオプションをプロパティとして指定します。

ply オプションに2を指定する例：

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

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

static オプションを指定し、static-last オプションにhiddenを指定する例：

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

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

スプレッド演算子を用いることで、optionsオブジェクトを<KifuLite> propsに渡すこともできます。

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

export default function MyApp() {
  const options = {
    static: {
      last: "hidden",
    }
  }
  return (
    <KifuLite {...options}>
▲７六歩 △３四歩
    </KifuLite>
  )
}