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>
  )
}

デフォルトオプション​

ページ内で基本的に同じオプションを指定しておきたい場合、オプションのデフォルト値を指定することができます。 setDefaultOptions関数を呼びます。

<script>KifuForJS.setDefaultOptions({
    reverse: {
        name: "na2hiro" // 対局者na2hiroが手前に来るようにする
    },
    maxWidth: 500 // 幅最大500px
})</script>

<!-- デフォルトオプションが適用される -->
<script type="text/kifu" data-src="./great-tsume.kif"></script>
<!-- オプションを上書きすることもできる -->
<script type="text/kifu" data-src="./great-tsume-2.kif" data-maxWidth="200"></script>

ライブラリをCDNから読み込む場合​

次のように、読み込むscriptタグの直後に配置します。

<script src="https://cdn.jsdelivr.net/npm/kifu-for-js@5/bundle/kifu-for-js.min.js" charset="utf-8"></script>
<script>KifuForJS.setDefaultOptions({
    // ここにoptionsオブジェクトを記述。例えば次の通り
    reverse: {
        name: "na2hiro" // 対局者na2hiroが手前に来るようにする
    },
    maxWidth: 500
})</script>
info

もしHTMLファイルを１つ１つ管理していて、複数のページで同じデフォルトオプションをまとめて指定したい場合、この記述をJSファイルに書き出すと、デフォルトオプションの一括管理ができて良いでしょう。

kifuforjs-options.js
KifuForJS.setDefaultOptions({
    // ここにoptionsオブジェクトを記述。例えば次の通り
    reverse: {
        name: "na2hiro" // 対局者na2hiroが手前に来るようにする
    },
    maxWidth: 500
})
個々のHTMLファイル
<script src="https://cdn.jsdelivr.net/npm/kifu-for-js@5/bundle/kifu-for-js.min.js" charset="utf-8"></script>
<script src="./kifuforjs-options.js"></script>

npmモジュールとして利用する場合​

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

setDefaultOptions({/*...*/})