将棋ウォーズの直近の対局について,棋譜データを手軽に表示したい
将棋をはじめました
研究室の後輩に誘われて,最近はじめました. まだまだ初心者なので,定石を知ってるプレイヤーに狩られまくってます.
将棋の対局アプリとして,僕は日本将棋連盟公認の将棋アプリ「将棋ウォーズ」を使っています.
対局後の検討には主に「ぴよ将棋」というスマホアプリを使っています.
将棋ウォーズはプレイヤーのアカウント名でその人の対局結果(棋譜)を検索する機能があり, おそらく,ぴよ将棋はその機能を使って将棋ウォーズと連係しています. また,各対局結果について棋譜を検討する機能があります.
今は 将棋ウォーズで対局->ぴよ将棋で検討 の流れで勉強しています.
直近の対局データ(棋譜データ)をWebページで表示
ぴよ将棋を使っていれば必要ないのですが, 他のアプリやソフトを使うと,将棋ウォーズと直連携していない場合があります.
このため,対局結果を手軽に表示するWebページを作りました.
https://uttnaoki.github.io/kifu-viewer/?uid=uttnaoki
一番必要な処理だけを実装したので,デザインはこの上ないくらいポンコツです.
各URLは以下のようなページにリンクしています.
また,将棋ウォーズのユーザーIDをテキストフォームかクエリに入力とすると その人の対局結果に関するリンクが表示されます.
実装について
今回作ったページの実装は以下の流れになっています.
- 将棋ウォーズから対局結果一覧ページのHTMLを取得
- 取得したHTMLから各対局結果ページのURLを取得
- 将棋ウォーズの棋譜データを表示してくれる外部ページへのリンクを作成
将棋ウォーズからHTMLを取得するところで外部サイトにアクセスしているので, ブラウザがCORS関係のエラーを吐きます.
なので,間に別のサーバーを挟む実装にしています.
このため,以下のサイトの内1つでも動かなくなると今回開発したページは機能しなくなります.
感想
やりたいことできたので満足. 気が向いたらデザイン面と機能面を改善したい.