チェスの勉強のために始めた個人開発が、気づけば75種類のオープニング解説サイトに。キツネのキャラクター「ジーン」が一手ずつ丁寧に解説します。Stockfishで検証済み、日英バイリンガル対応、完全無料。
キツネのキャラクター「ジーン」が一手ずつ丁寧に解説します。Stockfishエンジンとpython-chessによる検証済みで、ルール上あり得ない手や明らかな悪手が入っていないことを確認しています。日英バイリンガル対応、完全無料。初心者やお子様にもおすすめです。このブログでは、そのサイトを作るまでの道のりを記録しています。
🦊 KitsuneChess開発記録 vol.18 — 5種類から75種類への道（6/27〜28）
バグ修正 まず英語モードにしても「開始局面 / Starting Position」のように日英が混ざって表示されるバグを直しました。 表示用の文字列を単一の文字列ではなく、日本語と英語を別々に持つ形に分けて、表示側のコードもそれに合わせました。 その勢いで、シシリアン・ディフェンス、フレンチ・ディフェンス、カロ・カン・ディフェンスの3つを、同じフォーマットで一気に完成させました。これで個別ページは合計5種類になりました。 チャット欄への直接貼り付けだと、長いコードが途中で切れて盤面が真っ白になる事故が起きていたので、それ以降は完成したファイルをダウンロードして受け取る形に変更しました。これで…
🦊 KitsuneChess開発記録 vol.17 — 本当の原因と、個別ページの誕生（6/25〜26）
マフィアっぽいジーン シシリアンディフェンスにかけています ずっと疑問に思っていたこと 一覧ページの改修が進んだところで、ずっと引っかかっていた疑問をぶつけてみました。 前回の審査でも、実は同じページの中に75種類の詳細解説をすべて作り込んで載せていたのに、それでも落ちた。 今回は解説を別ページに独立させるだけで、文章の量自体はそう変わらない。本当にこれで大丈夫なのか、という疑問です。 見えていなかった本当の原因 この問いをきっかけに、本当の原因がわかりました。 問題は文章の量ではなく、サイトの構造だったのです。 これまでは1つのHTMLファイルの中に75種類すべてを詰め込み、JavaScri…
🦊 KitsuneChess開発記録 vol.16 — 一覧ページの大改修（6/25）
トロンボーンを吹くジーン 定跡解説一覧ページ（openings_list.html）の改修 Jeminiに、定跡解説一覧ページ（openings_list.html）の改修に臨みました。スマホでもきちんと見やすく、そして海外のユーザーにも対応できるサイトにするための、大きなアップデートです。 まずスマホ表示の最適化です。これまでスマホ画面だと言語ボタンが右側にはみ出して見切れてしまっていたので、レイアウトを修正しました。 デザインと世界観の統一 個別の解説ページと共通のナビゲーションバーを導入しました。 背景やボタンの色味も、サイト全体で使っている深みのあるキツネ色、ブラウンとベージュの世界観…
🦊 KitsuneChess開発記録 vol.15 — デザインをスッキリさせる（6/22〜6/25）
ジーンin Moscow デザインの改善と修正 今日は、デザインの改善と、英語表記の修正に取り組んでいました。歴史ページの最終確認も行いました。 日本語と英語、どちらの表記でも「OUR VISION」の枠がきれいに表示されているか確認しました。 英語ボタンを押したあと、新しく入れた翻訳文へパッと切り替わるかどうかもチェックしました。 デザインをスッキリと 大きな枠を消して、スマホでも見やすいデザインに整えました。 右上のボタンと、日本語・英語の切り替えも連動させました。将来を見据えて、ブランド名を主語に統一する調整も行いました。 練習ページとクイズページのオープニング選択を、プルダウン式にする…
🦊 KitsuneChess開発記録 vol.14 — 審査結果とAIの方針のブレ（6/18〜6/21
ジーンin France 審査結果 審査待ちの間は、サイトの作業からは少し離れていました。 その代わり、実際のチェスサイトのトーナメントに参加したり、自分自身の腕を磨くことに時間を使っていました。 オープニングを教えるサイトを作っている以上、自分自身がちゃんと指せることも大事にしたいという気持ちがありました。 そうして少し離れていた6/18、2回目の不合格通知が届きました。 文面は「ポリシー違反」という表現で、明確な理由は書かれていませんでした。 この時点では「コンテンツが足りないのだろう」と考えていましたが、実は違いました。 あとになって分かった本当の原因は、文章量ではなく構造の方でした。7…
🦊 KitsuneChess開発記録 vol.13 — キツネ語と独自ドメイン（6/6〜6/9）
キツネ語（ジーン語）を使う 説明文の口調をキツネ語に変える作業を続けていました。戦略や定義といった専門的な部分の意味は省略せず、あくまで口調だけをキツネらしく整える形で、何度も書き換えました。 この日の時点では、75種類完了とまではいかず、もう少し詰める必要がありました。 75種類、ついに完成 翌日、ついに75種類のオープニングが揃いました。 OPENING_TIPSも全75種類分、充実した解説文として整えました。英語切り替えも完全対応させ、フィルター機能も実装しました。 あわせて、アナリティクスで自分自身のアクセスを除外する設定も行いました。 これで純粋な訪問者データだけを見られるようになり…
🦊 KitsuneChess開発記録 vol.12 — 英語表示への切り替えと75種類への道（6/4〜6/5）
ラーメンを食べるジーンin博多 Jeminiに作ってもらったら、いつもより立体感のある仕上がりになりました 主言語を英語に変える練習 フィルターボタンを、日英併記の表示から、言語ごとに切り替える表示に変更する練習をしました。 検索窓以外は、どちらかの言語に統一した方がいいと思ったからです。 373〜401行目のあたりです。 applyLang()内のbuildOpeningTabs();の直前にJSを追加する形にしました。クイズページの方にも、同じようにフィルターボタンを装着しました。 クイズページのフィルター実装 test.htmlで確認しながら、クイズページにもフィルター機能を組み込みまし…
🦊 KitsuneChess開発記録 vol.11 — お任せをやめた日（6/3）
スノボしているジーン in北海道 お任せをやめた日 夜22:52、画像を差し替える前に、5/24のアドセンス審査提出後の状態に一度戻すことにしました。 確認をtest.htmlでしていなかったせいで、本番のKitsuneのindexファイルの方が表示されてしまっていたことに気づいたのがきっかけです。 最速チェック方法を発見 ここで良い発見がありました。test.htmlを修正したあと（心臓部はJavaScript）、別のブラウザでChromeを開いてそこにURLを貼り付けてプレビューすれば、数十秒でチェックできます。 GitHubにcommitしてからブラウザで開くより、こちらの方がずっと早い…
🦊 KitsuneChess開発記録 vol.10 — 消えたコードと戦った日（6/1〜6/2）
めんそ～れ ジーンin沖縄 タキシードからかりゆしに着替えさえてみました 音が消えるバグのあとの問題 574行目のあたりで、また問題が起きました。 以前に音が消えるバグを直したとき、AudioCtxの定義をうっかり576行目に巻き込んでしまっていたことに気づきました。576行目を削除する必要がありましたが、AIの言うとおりにやっても、こういうことがちゃんと起きます。 この時ばかりは、直前の状態を控えておいて本当によかったと思いました。F12でコードとエラー表示をブラウザ上で確認しながらの作業でした。 二重定義との決着 Web Audio APIの二重定義を解消しました。 574行目付近でAud…
🦊 KitsuneChess開発記録 vol.9 — 画像アップスケールとバグの深みへ（6/1）
画像アップスケール キツネの画像まわりをいろいろChatGPTにお願いすることにしました。 トップページに使う画像は1024pxで作ってもらいました。4Kまで上げることもできるらしいですが、そこまでしなくても大丈夫とのことでした。 ここに至るまでにも苦労がありました。 最初の画像をクッキリさせようとするたびに、背景の色が変わってしまったり、枠のようなものが付いてしまったり、しかも肝心の画像本体はぼやけたままだったりと、なかなか思うようにいきませんでした。 そこで背景透過もあわせてお願いすることにしました。 3つのAI、それぞれの得意分野 ここで3つのAIを比べてみることになりました。 長いin…
🦊 KitsuneChess開発記録 vol.8 — 審査のことで頭がいっぱい（5/31）
🦊審査のことで頭がいっぱい（5/31） なかなか審査待ちが終わりません。 アナリティクスを見てもアメリカ（Googleの本拠地）からのアクセスがありません。 グーグルにサイトを見つけてもらうには、Google Search Consoleに登録する必要があるらしいです。 フォルダをGitHubにアップロードして、少しでも早く見つけてもらえるようにしました。ロボットに見つけてもらうための最短ルートを整えた形です。 そして夜、コンソールにあれこれ貼り付けた直後、アドセンスから不合格の返事が届きました。 たまたま1週間というタイミングが重なっただけとのことですが、アナリティクス上でアメリカからのアク…
🦊 KitsuneChess開発記録 vol.7 — タグマネージャーとの格闘（5/29〜5/30）
タグマネージャーとの格闘 朝からJeminiに相談していました。 別アカウントでキツネチェスサイトを管理できるようなので、設定の仕方を聞いていたのですが、途中でGoogleタグマネージャーの設置をClaudeに見てもらうことにしました。 そうしたら見当違いの返事が返ってきました。 認識していないようでした。 仕方なく画面のスクリーンショットを撮って読み取ってもらったら、あっさり解決しました。 見当違いだった原因は単純で、見るべき場所を勘違いしていたらしく、もっと上の方に見当をつけないとダメだったとのことでした。文字だけで説明するより、画面をそのまま見せた方が早いというのは、今回よくわかった教訓…
🦊 KitsuneChess開発記録 vol.6 — AdSense審査を待つ（5/28）
Geminiからの忠告 この日はGeminiから「審査が通るまで一切触るな」と言われたので、そうすることにしました。 GeminiはGoogleのAIなので、審査botがどこを見るかについて、他のAIより詳しく教えてくれ、万一落ちた場合の改善点もアドバイスしてくれました。 審査に関する気になる指摘 ゲームサイトだからbotが基準を読み違えて、文字数が少ないと判断するかもしれないこと。 独自ドメインでなくても審査は通るが、できれば1000円前後で取っておいた方がいいかもしれないこと。 いずれにしても人間の目によるチェックもあるそうで、結果が出るまでには2〜4週間かかるとのことでした。 合格後に丸…
🦊 KitsuneChess開発記録 vol.5 — GitHubで直接編集へ（5/27）
GitHubで直接編集という決断 この日から、開発の進め方を大きく変えることにしました。 Live Serverというツールをインストールしました。更新のたびにGitHubにアップしなくても確認できるというものでしたが、とにかくエラーが続いたため断念。 この日からGitHubのWebエディタで直接編集してcommitする方針に完全に切り替えました。遠回りに見えて、これが結果的に一番安定した方法でした。 Claudeが突然HTMLを全部書き直してくれた 嬉しいことがありました。 キツネの1024px画像をClaudeに入力したところ、HTMLを全部書き直してくれたのです。 以前は「文字数が多すぎ…
🦊KitsuneChess開発記録 vol.4 — 140万文字の壁（5/26）
免責事項の中央寄り修正 この日のテーマは免責事項の中央寄り修正でした。 前日に見送っていたVSCodeを、この日はインストールして挑戦してみました。（結局やった笑） キツネ画像を1024pxの高画質に差し替えたかったのですが、今度はアカウントエラーが出て1行も進まず。それどころかファイルはいつの間にか140万文字にまで膨らんでいました。 完全に手詰まりです。 AIにブチ切れ 「もう新しいアプリはインストールしない」とClaudeに宣言しました。Claudeは私が素人だということをついつい忘れて、プロ向けのアプリを次々と勧めてくる癖があります（すみません笑）。 使いこなせなかったのは私の力不足で…
🦊KitsuneChess開発記録 vol.3 — バグとの格闘、続く（5/25）
バグと格闘した一日 この日もAIに相談しながら、バグと格闘した一日でした。 余白の問題は307行目あたりを確認したところ、AdSenseの広告枠が審査前の状態で大きな空白を作っていたことが原因と判明。 その行のスタイルに修正を加えてようやく解決しました。小さな修正一つで画面が変わるのが、コードの世界らしいところです。 駒の大きさ変更 駒の大きさを95から100に変更しました。 キツネ画像を高画質に キツネ画像をさらに改善しようとファイルを確認したところ、文字数がなんと70万文字。 これはキツネの画像がSVG形式だったためです。SVGはJPEGやPNGのような写真データと違い、画像の線や色・形を…
🦊KitsuneChess開発記録 vol.2 — バグと戦った（5/24）
前回の記事で「index.htmlを10回以上ダウンロード・アップロードしてものすごく疲れた」と書きましたが、翌日の5月24日も、地味な修正作業が続きました。 この日に直したこと ① スコアの表示バグ9問中9問正解で「200%」と表示されてしまっていたのを修正。累積の計算が二重になっていたのが原因でした。正しくは「9/9 100%」です。 ② 重複していた表示を削除SHOW Resultというボタンが二重に表示されていたので、片方を削除。細かいことですが、こういう小さなズレが積み重なると、サイト全体の印象が一気に雑に見えてしまうものです。 ③ キツネの輪郭を調整しようとして断念キャラクターの輪…
🦊KitsuneChess開発記録 vol.1 — チェス初心者がオープニングサイトを作るまで（きっかけ〜5/23）
チェスアプリ作成までの道のり きっかけ チェスを始めて、もっと序盤の勉強がしたいと思った時、chess.comの学習モードが有料会員限定だったことに少し引っかかりました。 「それなら、自分の勉強も兼ねて、オープニングに特化したサイトを自分で作ってしまおう」 そう思い立ったのが、KitsuneChessの始まりです。2026/5/14のことでした。 実はその前に、家計簿アプリを作ったことがあり、それが私にとって最初の「アプリ作り」の経験でした。今思えば、あれが無ければチェスサイトを作ろうとも思わなかったかもしれません。 キャラクターはキツネに🦊 サイトの土台は、AIのClaudeに手伝ってもらい…
![[6m] SSNが低くても6mは大賑わい](https://img.blogmura.com/sites/1231488/post-images/79874386.webp/crop/120x120)
