棋譜を暗記するWebアプリ作った

# TL;DR

将棋で新しい戦法を取り入れるための学習ツールとして、
棋譜を暗記するためのWebアプリを作りました。
(以降、棋譜暗記Webという)

ゼロから将棋GUIを実装するのは骨が折れるので、OSSの将棋アプリ「[Electron将棋](https://sunfish-shogi.github.io/electron-shogi/)」のコードを改造して作りました。

この記事では、開発日誌的な感じで「棋譜暗記Web」について共有したいと思います。

# デモンストレーション

### 棋譜暗記モード

[こちらのリンク](https://kif-anki-web.web.app/index.html?flip=false&data=eJxNUEtuxSAMvMqs09XDBpJb5ArhZ1i0eWqinr%252FDayt1Ywk8Xz%252FPa9zj%252FMB1H5%252F387zwfn7VC85cg2QpiBYbNGuBDO1YkyS45ipckgw%252FQoccmhB67PBHSPDmG0KKCWJC7uET1LTBZ1%252FghhgkOf4N3xHTmrD2aIgHGbGvHZp8RhzU2%252FJWsNk2uaEgWGjTl9ymlSr01cpomjhcdRyZY18oL0UYsrOHKzNue8xGc9G40EKcdjX44isejfn2RTOVZXpQz%252Fdgk5sRWqgIhcM3gmk0wf%252Fc6sRNZfeXz156PEQ0Xmhf5DffTyqKvkGqTIzMInIw4OvpjKdcecBZeF9YONRYsLZQvgEHTHNd)は、「船江恒平 六段 vs. 西川和宏 六段 ヒューリック杯第95期棋聖戦 一次予選」の棋譜を暗記するためのページになります。

将棋YoutuberのSuger氏によって生み出された「[へなちょこ急戦](https://youtu.be/SZ4h7TFelyA?si=f0pxZWt8o07egFZk)」という戦法が指されたプロ対局になります。

![スクリーンショット 2023-11-10 22.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/b3fce5b3-74e6-fbce-ff86-b7c09815336e.png)
![スクリーンショット 2023-11-10 22.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/970468c7-a11c-239d-7a2a-e258c305f312.png)
![スクリーンショット 2023-11-10 22.13.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/9e71669c-ba06-97c8-8551-64066681c930.png)

自分の手駒を動かして、棋譜データと指し手が合致している場合は、画面左側に「⭕️ 正解」と表示されます。
合致しない場合は「❌ 不正解」と表示されるようにしています。

次の指し手がわからない場合は、画面の左側の「? 次の指し手」ボタンを押すと、
棋譜データ通りに自動で手が指されます。

### 棋譜作成モード

以下のページで新しく暗記する用の棋譜を作ることができます。

https://kif-anki-web.web.app/index.html

##### 【棋譜データをインポートする場合】

棋譜データ(KIF形式やCSA形式)が入手可能な場合は、棋譜データを棋譜暗記Webにインポートすることができます。
(因みにですが、プロ対局の棋譜は[将棋DB2](https://shogidb2.com/), 将棋ウォーズの棋譜は[将棋ウォーズ棋譜検索](https://www.shogi-extend.com/swars/search)等のサイトで手に入ります)

画面左の「ファイル」ボタンを押して、貼り付けダイアログにKIFデータをペーストするだけです。

![スクリーンショット 2023-11-10 22.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/585dce30-17c8-a100-7696-2dd00d9a5169.png)

インポート後は、画面右側の「棋譜暗記用URL」から棋譜暗記ページが利用可能になります。
棋譜データは`data`というクエリパラメータの載せるようにしているため、URLをブクマしておくと暗記が捗りそうです。

##### 【棋譜データを打ち込む場合】

自分で棋譜を打ち込む場合は、棋譜作成画面で駒を動かして、
画面右側の棋譜暗記用URLを利用するだけです。

![スクリーンショット 2023-11-10 22.41.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/4a548acd-6420-fbef-6d71-f157046f3cb7.png)

# 技術的なところ

アドベントカレンダー記事公開に間に合うように、やっつけ仕事で開発したということもあり、
全体的に雑な作りになってます。

しかしながら、改造元の[Electron将棋](https://sunfish-shogi.github.io/electron-shogi/)がかなり作り込まれているので、アプリケーションとしては土台がしっかりしている感があります。

### 改変元のElectron将棋がすごい

機能数がかなり多く作り込みがすごいです。

https://sunfish-shogi.github.io/electron-shogi/webapp/index.html

<!--
### フロントエンド実装が参考になった

普段バックエンドエンジニアをやっている身分としましては、
手軽にフロントエンド開発のイメージを得る
-->

### URL長い問題

以下は棋譜暗記用URLですが、棋譜データを全部URLに乗っける仕様にしたためかなり長いです。
`data`パラメータに、USI[^1]形式の棋譜データをDeflate圧縮したものを載せています。

[^1]: USI(Universal Shogi Interface)は、将棋GUIソフトと思考エンジンが通信をするためのプロトコルです

手数が多いような棋譜データですとURLの見栄えが悪くなるので、なんとかしたいですね :thinking: 

```
https://master--stately-puppy-af6267.netlify.app/index.html?flip=false&data=eJxNUEtuxSAMvMqs09XDBpJb5ArhZ1i0eWqinr%252FDayt1Ywk8Xz%252FPa9zj%252FMB1H5%252F387zwfn7VC85cg2QpiBYbNGuBDO1YkyS45ipckgw%252FQoccmhB67PBHSPDmG0KKCWJC7uET1LTBZ1%252FghhgkOf4N3xHTmrD2aIgHGbGvHZp8RhzU2%252FJWsNk2uaEgWGjTl9ymlSr01cpomjhcdRyZY18oL0UYsrOHKzNue8xGc9G40EKcdjX44isejfn2RTOVZXpQz%252Fdgk5sRWqgIhcM3gmk0wf%252Fc6sRNZfeXz156PEQ0Xmhf5DffTyqKvkGqTIzMInIw4OvpjKdcecBZeF9YONRYsLZQvgEHTHNd
```

### 最近のホスティングサービスがすごい

将棋暗記Webは[netlify](https://www.netlify.com/)というホスティングサービスを使ってデプロイしてみましたが、
めちゃくちゃ簡単にデプロイできました。

Github Pagesの設定するのと同じようなUI/UXで、
githubのアカウント連携をして、ホスティングしたいアプリのリポジトリを選択し、
ビルドコマンド(`npm run build`)とビルド展開先パッケージのパスを画面入力するだけでした。

数年前とかだと、自作のWebサービスを公開するには、もっと面倒な手順を踏まされたイメージがありましたが、
この度は非常に簡単にデプロイができてホスティングサービスの進化を感じました。