♟️

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

公開日
11か月前
2024-01-20
更新日
5か月前
2024-07-21
更新履歴

棋譜プレーヤー

 3  62
  開始局面
*1 ☗2六歩
*2 ☖4二飛
 3 ☗3八銀
 4 ☖7二銀
 5 ☗2七銀
 6 ☖6二玉
*7 ☗3六銀
 8 ☖3二銀
 9 ☗2五歩
 10 ☖3四歩
 11 ☗2四歩
 12 ☖2四歩
 13 ☗2四飛
 14 ☖2三歩
 15 ☗2八飛
 16 ☖7一玉
 17 ☗2五銀
 18 ☖3三銀
 19 ☗2四歩
 20 ☖2四歩
 21 ☗2四銀
 22 ☖2四銀
 23 ☗2四飛
 24 ☖3三桂
 25 ☗2三飛成
 26 ☖4五桂
 27 ☗4八金
 28 ☖4四角
 29 ☗3三銀
 30 ☖3三角
 31 ☗3三龍
 32 ☖2八歩
 33 ☗3四龍
 34 ☖3九銀
 35 ☗5八金寄
 36 ☖5七桂成
 37 ☗5七金
 38 ☖4八銀打
 39 ☗6八玉
 40 ☖2九歩成
 41 ☗5八金引
 42 ☖4九銀成
 43 ☗7六歩
 44 ☖4八銀成
 45 ☗4八金
 46 ☖4八成銀
 47 ☗1一角成
 48 ☖1九と
 49 ☗2一馬
 50 ☖3二飛
 51 ☗2三香
 52 ☖3四飛
 53 ☗4三馬
 54 ☖3七飛成
 55 ☗7五桂
 56 ☖4七龍
 57 ☗5三馬
 58 ☖6二金打
 59 ☗3五馬
 60 ☖5六桂
 61 ☗7七玉
  時間切れ

解説

Markdownのコードブロックに書いた棋譜を@na2hiro氏のKifu for JSを使って、棋譜プレーヤーに変換して表示しています。Mermaidみたいですね。

文章内から、特定の手数に移動させることもできます。開始局面 に飛んだり、3手目 に飛んだり。

特定の手数への移動の記述例
:kifu-to[mykifu:0]{label="開始局面"}
:kifu-to[mykifu:3]
棋譜プレーヤーの記述例

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

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

ソースコード

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