ゆっくり開発

開発したい時に開発するブログ

将棋ウォーズの直近の対局について,棋譜データを手軽に表示したい

将棋をはじめました

研究室の後輩に誘われて,最近はじめました. まだまだ初心者なので,定石を知ってるプレイヤーに狩られまくってます.

将棋の対局アプリとして,僕は日本将棋連盟公認の将棋アプリ「将棋ウォーズ」を使っています.

対局後の検討には主に「ぴよ将棋」というスマホアプリを使っています.

将棋ウォーズはプレイヤーのアカウント名でその人の対局結果(棋譜)を検索する機能があり, おそらく,ぴよ将棋はその機能を使って将棋ウォーズと連係しています. また,各対局結果について棋譜を検討する機能があります.

f:id:uttnaoki:20181123183735p:plain
f:id:uttnaoki:20181123183738p:plain

今は 将棋ウォーズで対局->ぴよ将棋で検討 の流れで勉強しています.

直近の対局データ(棋譜データ)をWebページで表示

ぴよ将棋を使っていれば必要ないのですが, 他のアプリやソフトを使うと,将棋ウォーズと直連携していない場合があります.

このため,対局結果を手軽に表示するWebページを作りました.

https://uttnaoki.github.io/kifu-viewer/?uid=uttnaoki

一番必要な処理だけを実装したので,デザインはこの上ないくらいポンコツです.

f:id:uttnaoki:20181123191825p:plain

各URLは以下のようなページにリンクしています.

f:id:uttnaoki:20181123191906p:plain

また,将棋ウォーズのユーザーIDをテキストフォームかクエリに入力とすると その人の対局結果に関するリンクが表示されます.

実装について

まず,ソースコードは以下のリポジトリです.

github.com

今回作ったページの実装は以下の流れになっています.

  1. 将棋ウォーズから対局結果一覧ページのHTMLを取得
  2. 取得したHTMLから各対局結果ページのURLを取得
  3. 将棋ウォーズの棋譜データを表示してくれる外部ページへのリンクを作成

将棋ウォーズからHTMLを取得するところで外部サイトにアクセスしているので, ブラウザがCORS関係のエラーを吐きます.

なので,間に別のサーバーを挟む実装にしています.

このため,以下のサイトの内1つでも動かなくなると今回開発したページは機能しなくなります.

  • GitHub
  • 中間サーバ
  • 将棋ウォーズ
  • 棋譜データ変換サイト

感想

やりたいことできたので満足. 気が向いたらデザイン面と機能面を改善したい.