将棋の棋譜暗記Webアプリを作った
KIF/CSAファイルを読み込んで、棋譜を問題形式で暗記できるWebアプリ、「キフマスター」を作りました。
開発経緯
将棋を本格的に勉強しようとすると、定跡や囲いを頭に入れる作業が避けられません。自分の場合、棋譜を並べるのが一番身につくと感じているのですが、「同じ棋譜を何度も繰り返す」のを手動でやるのが面倒でした。
既存のソフトは暗記に特化していなかったり、スマホで使いにくかったりと、自分にとって「ちょうどいい」ものがなかったので作ることにしました。
どんなアプリか
「次の一手は？」を繰り返し問われ、すべての分岐を覚えるまで続きます。PCでもスマホでも使えます。
機能紹介
暗記モード（全譜 / 対局形式）
2種類の暗記モードがあります。
- 全譜モード: 棋譜のすべての手を自分で指すモード。相手の指し手も含めて完全に覚えたいときに使います
- 対局形式モード: CPが相手側（先手または後手）を担当し、自分の番だけ問われるモード。実戦に近い感覚で覚えられます
間違えたとき・わからないとき
間違えると盤面に 赤いバツ印 が出て、指した手を戻されます。
「カンニング」ボタンを押すと 赤い矢印 が盤面上に表示され、正解の手を教えてくれます。
暗記完了ダイアログ
すべての分岐を指し終えると完了ダイアログが出ます。間違えた手数とカンニングした手数が表示され、「友達に自慢する」ボタンでLINEやXにシェアできます。
棋譜Boxでクラウド保存
アカウントを作ると棋譜をクラウドに保存でき、スマホで登録した棋譜がPCでもそのまま表示されます。
技術スタック
| 項目 | 採用技術 |
|---|---|
| フロントエンド | HTML / CSS / JavaScript（フレームワークなし） |
| 認証・DB | Supabase（PostgreSQL + Auth） |
| 決済 | Stripe |
| デプロイ | Vercel |
実装でこだわった点
将棋ロジックをゼロから書いた
フレームワークを使わず、駒の動き・合法手判定・持ち駒管理・成り判定などをすべて自前で実装しました。KIF・CSA形式のパーサーも同様です。将棋の棋譜フォーマットは「同○○」表記や変化記法など方言が多く、実際のファイルで試すたびに細かいバグが出てきました。
カンニング矢印はSVGで描画
ヒント表示は盤面をオーバーレイするSVGに矢印を動的に描画しています。marker 要素で矢印の先端を作り、セルのピクセル座標を計算して line を引いています。
const ns = 'http://www.w3.org/2000/svg';
const marker = document.createElementNS(ns, 'marker');
marker.setAttribute('id', 'ah');
marker.setAttribute('orient', 'auto');
// defs に追加 → line の marker-end に指定
棋譜をURLに乗せてシェア
暗記完了時にシェアできるURLを生成しています。棋譜テキストをUTF-8でエンコードしてBase64（URL-safe）に変換し、クエリパラメータに埋め込んでいます。リンクを開くと棋譜が自動で読み込まれます。
const enc = new TextEncoder().encode(kifText);
let bin = '';
for (let i = 0; i < enc.length; i++) bin += String.fromCharCode(enc[i]);
const b64 = btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
shareUrl = `https://kifanki.com/?k=${b64}`;
SupabaseでクラウドSync
棋譜Boxのデータは kifu_box テーブルで管理しています。Row Level Security（RLS）で自分のデータしか読み書きできないようにしています。
CREATE POLICY "users_own_kifu" ON kifu_box
FOR ALL
USING (auth.uid() = user_id)
WITH CHECK (auth.uid() = user_id);
ログインするとSupabaseの onAuthStateChange が発火して棋譜一覧を取得し、ログアウト時はリストをクリアするようにしています。
おわりに
定跡を覚えるための「ちょうどいいツール」が欲しくて作り始めたアプリです。スマホで通勤中に少しずつ暗記して、PCで確認するという使い方を想定しています。
よければ使ってみてください → https://kifanki.com