はじめに

かれこれ20年以上、乗馬クラブ「中島トニアシュタール」に通って乗馬を楽しんでいます。

長年通っているものの、クラブで馬を見かけたときに「あれ、この子の名前なんだっけ…？」とパッと思い出せないことが多々ありました。フリーデンやトーホーなど、普段から乗る機会が多い馬はすぐに分かるのですが、乗る機会が少ないとベテラン馬（ニアやイシドールスなど）でも、でも頭からすっぽりと抜けてしまいがちです。

また、これまでスマホやカメラで馬たちの写真をちょくちょく撮ってはいたものの、まったく整理できておらず「この馬の名前は何だっけ…？」状態になっていました。

そこで今回、「馬たちの写真をすっきり整理しつつ、楽しく名前を覚えられるWebアプリ」を個人開発してみることにしました！

NTSフォト

機能紹介

馬ごとの写真ギャラリー＆拡大表示
サイドバーの馬名一覧から見たい馬を選択すると、該当する馬の写真一覧（アルバム）が表示されます。写真をクリックすると拡大表示され、馬たちの可愛らしい表情や特徴をじっくり確認できます。
個別写真のアップロード機能
各馬の詳細画面から手軽に新しい写真をアップロードできます。アップロードした写真は自動的にその馬へ紐付けて登録・保存されるため、撮り溜めた写真の整理がスムーズに行えます。
10問連続！馬名当てクイズ＆成績管理
ランダムに表示される馬の写真を見て名前を当てる、4択形式のクイズ機能です。1回の挑戦につき10問連続で出題されます。
クイズの成績はアプリ内で管理されており、Googleアカウントを連携（ログイン）することで、個人のスコアや挑戦記録を保存・管理することができます。

技術スタック（開発者向け）

フロントエンド: Vanilla JavaScript
バックエンド / DB: Python (Flask) / MySQL
画像ストレージ: Rustfs
認証: Google Authentication (OAuth 2.0)
クイズAPI: ステートレス設計（JWT活用）

こだわったポイント：JWTを使ったステートレスな不正抑制

クイズ機能のバックエンドはステートレスなAPIとして実装しています。
出題時の画像IDや選択肢を暗号化した上でJWT（JSON Web Token）に含め、フロントエンドに渡しています。
さらに、有効期限を「1分」と非常に短く設定することで、通信のキャプチャや古いトークンの使い回しによる不正回答をある程度のレベルで抑制する仕組みにしました。サーバー側でクイズの状態をデータベース等に保持する必要がないため、シンプルかつスケーラブルな構成になっています。

デザインのこだわり：『ペルソナ5』風UIの採用

UIの配色や装飾には、アトラスの『ペルソナ5』をリスペクトしたテイストを取り入れました。黒と赤を基調としたエッジの効いたデザインや、画面全体の装飾によって、馬の写真を眺めたりクイズに挑戦したりする時間がちょっと楽しくなるような世界観に仕上げています。

ちなみに、UIの見た目はとことんこだわった一方で、アニメーションの実装については（工数や手間の都合で）すっきりと諦めました！動的な演出を作り込むよりも、まずはサクサク快適に動く実用性とシンプルさを優先する、という個人開発ならではのナイスな割り切りポイントです。