TL;DR
将棋で新しい戦法を取り入れるための学習ツールとして、
棋譜を暗記するためのWebアプリを作りました。
(以降、棋譜暗記Webという)
ゼロから将棋GUIを実装するのは骨が折れるので、OSSの将棋アプリ「Electron将棋」のコードを改造して作りました。
この記事では、開発日誌的な感じで「棋譜暗記Web」について共有したいと思います。
デモンストレーション
棋譜暗記モード
こちらのリンクは、「船江恒平 六段 vs. 西川和宏 六段 ヒューリック杯第95期棋聖戦 一次予選」の棋譜を暗記するためのページになります。
将棋YoutuberのSuger氏によって生み出された「へなちょこ急戦」という戦法が指されたプロ対局になります。
自分の手駒を動かして、棋譜データと指し手が合致している場合は、画面左側に「⭕️ 正解」と表示されます。
合致しない場合は「❌ 不正解」と表示されるようにしています。
次の指し手がわからない場合は、画面の左側の「? 次の指し手」ボタンを押すと、
棋譜データ通りに自動で手が指されます。
棋譜作成モード
以下のページで新しく暗記する用の棋譜を作ることができます。
【棋譜データをインポートする場合】
棋譜データ(KIF形式やCSA形式)が入手可能な場合は、棋譜データを棋譜暗記Webにインポートすることができます。
(因みにですが、プロ対局の棋譜は将棋DB2, 将棋ウォーズの棋譜は将棋ウォーズ棋譜検索等のサイトで手に入ります)
画面左の「ファイル」ボタンを押して、貼り付けダイアログにKIFデータをペーストするだけです。
インポート後は、画面右側の「棋譜暗記用URL」から棋譜暗記ページが利用可能になります。
棋譜データはdataというクエリパラメータの載せるようにしているため、URLをブクマしておくと暗記が捗りそうです。
【棋譜データを打ち込む場合】
自分で棋譜を打ち込む場合は、棋譜作成画面で駒を動かして、
画面右側の棋譜暗記用URLを利用するだけです。
技術的なところ
アドベントカレンダー記事公開に間に合うように、やっつけ仕事で開発したということもあり、
全体的に雑な作りになってます。
しかしながら、改造元のElectron将棋がかなり作り込まれているので、アプリケーションとしては土台がしっかりしている感があります。
改変元のElectron将棋がすごい
機能数がかなり多く作り込みがすごいです。
URL長い問題
以下は棋譜暗記用URLですが、棋譜データを全部URLに乗っける仕様にしたためかなり長いです。
dataパラメータに、USI1形式の棋譜データをDeflate圧縮したものを載せています。
手数が多いような棋譜データですとURLの見栄えが悪くなるので、なんとかしたいですね 
https://master--stately-puppy-af6267.netlify.app/index.html?flip=false&data=eJxNUEtuxSAMvMqs09XDBpJb5ArhZ1i0eWqinr%252FDayt1Ywk8Xz%252FPa9zj%252FMB1H5%252F387zwfn7VC85cg2QpiBYbNGuBDO1YkyS45ipckgw%252FQoccmhB67PBHSPDmG0KKCWJC7uET1LTBZ1%252FghhgkOf4N3xHTmrD2aIgHGbGvHZp8RhzU2%252FJWsNk2uaEgWGjTl9ymlSr01cpomjhcdRyZY18oL0UYsrOHKzNue8xGc9G40EKcdjX44isejfn2RTOVZXpQz%252Fdgk5sRWqgIhcM3gmk0wf%252Fc6sRNZfeXz156PEQ0Xmhf5DffTyqKvkGqTIzMInIw4OvpjKdcecBZeF9YONRYsLZQvgEHTHNd
最近のホスティングサービスがすごい
将棋暗記Webはnetlifyというホスティングサービスを使ってデプロイしてみましたが、
めちゃくちゃ簡単にデプロイできました。
Github Pagesの設定するのと同じようなUI/UXで、
githubのアカウント連携をして、ホスティングしたいアプリのリポジトリを選択し、
ビルドコマンド(npm run build)とビルド展開先パッケージのパスを画面入力するだけでした。
数年前とかだと、自作のWebサービスを公開するには、もっと面倒な手順を踏まされたイメージがありましたが、
この度は非常に簡単にデプロイができてホスティングサービスの進化を感じました。
-
USI(Universal Shogi Interface)は、将棋GUIソフトと思考エンジンが通信をするためのプロトコルです ↩