# 使い方

# インストール

<script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
<shogi-player-wc></shogi-player-wc>

単体で開く

上の2行だけのHTMLを作るか、既存のサイトにコピペして動けば次へ。

# 文字コードやスマホを考慮する (重要)

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
</head>
<body>
  <shogi-player-wc></shogi-player-wc>
</body>
</html>

単体で開く

棋譜を正しく読むため UTF-8 を明示する
反応遅延や意図しない画面ズームを防ぐため viewport を指定する

# 棋譜再生

# SFEN

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
</head>
<body>
  <shogi-player-wc
    sp_body="position startpos moves 7g7f 3c3d 8h2b+ 3a2b"
    sp_turn="3"
    sp_controller="true"
    sp_slider="true"
    ></shogi-player-wc>
</body>
</html>

単体で開く

最後の局面から表示させたいなら sp_turn を -1 にする。

# KIF

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
</head>
<body>
  <shogi-player-wc
    sp_body="
      1 ７六歩(77)
      2 ３四歩(33)
      3 ２二角成(88)
      4 ２二銀(31)
    "
    sp_turn="3"
    sp_controller="true"
    sp_slider="true"
    ></shogi-player-wc>
</body>
</html>

単体で開く

SFEN と KIF (BOD) に対応している。どちらも sp_body に指定する。

# スタイル変更

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
  <style>
    shogi-player-wc::part(root) {
      --sp_board_color: LightSkyBlue;
    }
  </style>
</head>
<body>
  <shogi-player-wc></shogi-player-wc>
</body>
</html>

単体で開く

CSS変数は普通に定義しても Shadow DOM 内には届かない。用意した root に対して適用する。

# コンポーネントタグ内に直接指定したい場合

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
</head>
<body>
  <shogi-player-wc
    sp_pass_style="{'--sp_board_color': 'LightSkyBlue'}"
    ></shogi-player-wc>
</body>
</html>

単体で開く

引数の sp_pass_style に書いても変更できるようにしてある。これはタグの style を直接書くのに似ていて分けて書いたときより詳細度が高い。古の技術駆動では機能とスタイルは分けるべきとされているが目的駆動として見ればまとめて書く方が理に適っている。

# イベント受信

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
  <script type="module">
    const el = document.querySelector("shogi-player-wc")
    el.addEventListener("ev_play_mode_move", e => {
      alert(e.detail[0].last_move_info.to_kif)
    })
  </script>
</head>
<body>
  <shogi-player-wc sp_mode="play"></shogi-player-wc>
</body>
</html>

単体で開く

このように addEventListener を使う形になってあまり綺麗には書けない。このあたりが負担になるなら Lit (opens new window) などと組み合わせた方がいいかもしれない。

# レイアウト例

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100dvh;
    }
    shogi-player-wc {
      flex-basis: 640px;
    }
  </style>
</head>
<body>
  <div class="container">
    <shogi-player-wc></shogi-player-wc>
  </div>
</body>
</html>

単体で開く

コンポーネントはブロック要素のためデスクトップでは大きくなりすぎてしまう。そこで中央配置した上で、最大横幅を指定し、それ以下であれば縮小するようにしたのが上の例になる。

# 命令型APIの呼び方

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://cdn.jsdelivr.net/npm/shogi-player@2.0.0"></script>
  <script type="module">
    document.querySelector("shogi-player-wc")
      .shadowRoot
      .querySelector(".ShogiPlayer")
      .__vue__
      .api_board_shuffle()
  </script>
</head>
<body>
  <shogi-player-wc></shogi-player-wc>
</body>
</html>

単体で開く

基本的に使うことはないが特別なことをしたいときは上のようにして呼ぶ。隔離したはずの世界を自由に触れてしまうこの仕組みは数年後にはできなくなっているかもしれない。

# CDN

どちらも production 版へのショートカットになっている。

# CDNの正確なURL

production と development 版の2つがあり development 版を使うときはフルパスで書く。

# バージョンを固定する

適当に最新版を試すときには次のように書いてもよいが、

本番では @x.x.x をつけてバージョンを固定した方がよい。

最新バージョン → (opens new window)

# トラブルシューティング

# Invalid regular expression

Uncaught SyntaxError: Invalid regular expression: /.../: Range out of order in character class
    at new RegExp (<anonymous>)
    at ae (xregexp.js:707:18)

<head> 内に <meta charset="UTF-8"> を追加する。

ローカルに置いた js を読み込んだときだけ上のエラーになる。CDN 経由の場合はたまたまエラーにならない。理由はレスポンスヘッダの content-type に charset=utf-8 が含まれているからと思われる。

# スマホでタップの反応が遅い

<head> 内に <meta name="viewport" content="width=device-width, initial-scale=1.0"> を追加する。

# スマホで画面ズームしてしまう

同上

← Introduction 表示カスタマイズ例 →