# Markdownのコードブロックで将棋の棋譜プレーヤーを埋め込む

## 棋譜プレーヤー

```kifu:mykifu
先手：相手 3級
後手：自分 26級
棋戦：将棋ウォーズ(10分切れ負け)
持ち時間：10分
先手の戦型：UFO銀
後手の戦型：四間飛車
先手の囲い：居玉
先手の備考：居飛車, 対振り, 対抗型
後手の備考：振り飛車, 対抗型
手合割：平手
手数----指手---------消費時間--
   1 ２六歩(27)   (00:01/00:00:01)
*▲備考：居飛車
   2 ４二飛(82)   (00:22/00:00:22)
*△戦型：四間飛車
*△備考：振り飛車
   3 ３八銀(39)   (00:05/00:00:06)
   4 ７二銀(71)   (00:05/00:00:27)
   5 ２七銀(38)   (00:02/00:00:08)
   6 ６二玉(51)   (00:08/00:00:35)
   7 ３六銀(27)   (00:03/00:00:11)
*▲戦型：UFO銀
   8 ３二銀(31)   (00:11/00:00:46)
   9 ２五歩(26)   (00:06/00:00:17)
  10 ３四歩(33)   (00:13/00:00:59)
  11 ２四歩(25)   (00:03/00:00:20)
  12 ２四歩(23)   (00:07/00:01:06)
  13 ２四飛(28)   (00:01/00:00:21)
  14 ２三歩打     (00:09/00:01:15)
  15 ２八飛(24)   (00:03/00:00:24)
  16 ７一玉(62)   (00:05/00:01:20)
  17 ２五銀(36)   (00:02/00:00:26)
  18 ３三銀(32)   (00:24/00:01:44)
  19 ２四歩打     (00:02/00:00:28)
  20 ２四歩(23)   (00:01/00:01:45)
  21 ２四銀(25)   (00:02/00:00:30)
  22 ２四銀(33)   (00:06/00:01:51)
  23 ２四飛(28)   (00:01/00:00:31)
  24 ３三桂(21)   (01:36/00:03:27)
  25 ２三飛成(24) (00:08/00:00:39)
  26 ４五桂(33)   (00:03/00:03:30)
  27 ４八金(49)   (00:08/00:00:47)
  28 ４四角(22)   (01:04/00:04:34)
  29 ３三銀打     (00:25/00:01:12)
  30 ３三角(44)   (00:38/00:05:12)
  31 ３三龍(23)   (00:05/00:01:17)
  32 ２八歩打     (00:07/00:05:19)
  33 ３四龍(33)   (00:19/00:01:36)
  34 ３九銀打     (00:35/00:05:54)
  35 ５八金(48)   (00:11/00:01:47)
  36 ５七桂成(45) (00:10/00:06:04)
  37 ５七金(58)   (00:04/00:01:51)
  38 ４八銀打     (00:14/00:06:18)
  39 ６八玉(59)   (00:03/00:01:54)
  40 ２九歩成(28) (00:06/00:06:24)
  41 ５八金(57)   (00:10/00:02:04)
  42 ４九銀成(48) (00:50/00:07:14)
  43 ７六歩(77)   (01:14/00:03:18)
  44 ４八銀成(39) (00:32/00:07:46)
  45 ４八金(58)   (00:16/00:03:34)
  46 ４八成銀(49) (00:05/00:07:51)
  47 １一角成(88) (00:03/00:03:37)
  48 １九と(29)   (00:27/00:08:18)
  49 ２一馬(11)   (00:46/00:04:23)
  50 ３二飛(42)   (00:47/00:09:05)
  51 ２三香打     (00:10/00:04:33)
  52 ３四飛(32)   (00:04/00:09:09)
  53 ４三馬(21)   (00:02/00:04:35)
  54 ３七飛成(34) (00:27/00:09:36)
  55 ７五桂打     (00:24/00:04:59)
  56 ４七龍(37)   (00:05/00:09:41)
  57 ５三馬(43)   (00:03/00:05:02)
  58 ６二金打     (00:05/00:09:46)
  59 ３五馬(53)   (00:09/00:05:11)
  60 ５六桂打     (00:03/00:09:49)
  61 ７七玉(68)   (00:03/00:05:14)
  62 切れ負け
まで61手で時間切れにより先手の勝ち
```

## 解説

Markdownのコードブロックに書いた棋譜を[@na2hiro](https://twitter.com/na2hiro)氏の[Kifu for JS](https://kifu-for-js.81.la/)を使って、棋譜プレーヤーに変換して表示しています。[Mermaid](https://mermaid.js.org/)みたいですね。

文章内から、特定の手数に移動させることもできます。:kifu-to[mykifu#0]{label="開始局面"} に飛んだり、:kifu-to[mykifu#3] に飛んだり。

```markdown:特定の手数への移動の記述例
:kifu-to[mykifu#0]{label="開始局面"}
:kifu-to[mykifu#3]
```

<details><summary>棋譜プレーヤーの記述例</summary>

コードブロックの言語の部分を `kifu:<kifu ID>` にすることでプレーヤーに変換します。`<kifu ID>` は手数の移動に使用します。

````markdown
```kifu:mykifu
先手：相手 3級
後手：自分 26級
棋戦：将棋ウォーズ(10分切れ負け)
持ち時間：10分
先手の戦型：UFO銀
後手の戦型：四間飛車
先手の囲い：居玉
先手の備考：居飛車, 対振り, 対抗型
後手の備考：振り飛車, 対抗型
手合割：平手
手数----指手---------消費時間--
   1 ２六歩(27)   (00:01/00:00:01)
*▲備考：居飛車
   2 ４二飛(82)   (00:22/00:00:22)
*△戦型：四間飛車
*△備考：振り飛車
   3 ３八銀(39)   (00:05/00:00:06)
   4 ７二銀(71)   (00:05/00:00:27)
   5 ２七銀(38)   (00:02/00:00:08)
   6 ６二玉(51)   (00:08/00:00:35)
   7 ３六銀(27)   (00:03/00:00:11)
*▲戦型：UFO銀
   8 ３二銀(31)   (00:11/00:00:46)
   9 ２五歩(26)   (00:06/00:00:17)
  10 ３四歩(33)   (00:13/00:00:59)
  11 ２四歩(25)   (00:03/00:00:20)
  12 ２四歩(23)   (00:07/00:01:06)
  13 ２四飛(28)   (00:01/00:00:21)
  14 ２三歩打     (00:09/00:01:15)
  15 ２八飛(24)   (00:03/00:00:24)
  16 ７一玉(62)   (00:05/00:01:20)
  17 ２五銀(36)   (00:02/00:00:26)
  18 ３三銀(32)   (00:24/00:01:44)
  19 ２四歩打     (00:02/00:00:28)
  20 ２四歩(23)   (00:01/00:01:45)
  21 ２四銀(25)   (00:02/00:00:30)
  22 ２四銀(33)   (00:06/00:01:51)
  23 ２四飛(28)   (00:01/00:00:31)
  24 ３三桂(21)   (01:36/00:03:27)
  25 ２三飛成(24) (00:08/00:00:39)
  26 ４五桂(33)   (00:03/00:03:30)
  27 ４八金(49)   (00:08/00:00:47)
  28 ４四角(22)   (01:04/00:04:34)
  29 ３三銀打     (00:25/00:01:12)
  30 ３三角(44)   (00:38/00:05:12)
  31 ３三龍(23)   (00:05/00:01:17)
  32 ２八歩打     (00:07/00:05:19)
  33 ３四龍(33)   (00:19/00:01:36)
  34 ３九銀打     (00:35/00:05:54)
  35 ５八金(48)   (00:11/00:01:47)
  36 ５七桂成(45) (00:10/00:06:04)
  37 ５七金(58)   (00:04/00:01:51)
  38 ４八銀打     (00:14/00:06:18)
  39 ６八玉(59)   (00:03/00:01:54)
  40 ２九歩成(28) (00:06/00:06:24)
  41 ５八金(57)   (00:10/00:02:04)
  42 ４九銀成(48) (00:50/00:07:14)
  43 ７六歩(77)   (01:14/00:03:18)
  44 ４八銀成(39) (00:32/00:07:46)
  45 ４八金(58)   (00:16/00:03:34)
  46 ４八成銀(49) (00:05/00:07:51)
  47 １一角成(88) (00:03/00:03:37)
  48 １九と(29)   (00:27/00:08:18)
  49 ２一馬(11)   (00:46/00:04:23)
  50 ３二飛(42)   (00:47/00:09:05)
  51 ２三香打     (00:10/00:04:33)
  52 ３四飛(32)   (00:04/00:09:09)
  53 ４三馬(21)   (00:02/00:04:35)
  54 ３七飛成(34) (00:27/00:09:36)
  55 ７五桂打     (00:24/00:04:59)
  56 ４七龍(37)   (00:05/00:09:41)
  57 ５三馬(43)   (00:03/00:05:02)
  58 ６二金打     (00:05/00:09:46)
  59 ３五馬(53)   (00:09/00:05:11)
  60 ５六桂打     (00:03/00:09:49)
  61 ７七玉(68)   (00:03/00:05:14)
  62 切れ負け
まで61手で時間切れにより先手の勝ち
```
````

</details>

## ソースコード

GitHubの [hackersheet/javascript](https://github.com/hackersheet/javascript) リポジトリで、react-markdownで棋譜プレーヤーに変換するソースコードを公開しています。Markdownの投稿系のサービスを作っている方は、ぜひ取り入れてみて下さい。

- [packages/next-document-content-kifu/src/components/kifu/kifu.tsx](https://github.com/hackersheet/javascript/blob/main/packages/next-document-content-kifu/src/components/kifu/kifu.tsx)
- [packages/react-document-content/src/component-resolvers/pre-component-resolver.tsx](https://github.com/hackersheet/javascript/blob/main/packages/react-document-content/src/component-resolvers/pre-component-resolver.tsx)