Marathon Color Countdown - フルマラソン準備を彩る進捗管理アプリ

概要

フルマラソン（42.195km）に向けた練習の進捗を、虹色のグラデーションで視覚的に表現するWebアプリです。走った距離に応じて画面の色が赤→オレンジ→黄→緑→青→藍→紫と変化し、ゴールに近づく実感を得られます。

こんな課題を解決します

• マラソン練習のモチベーションが続かない


• どれだけ走ったか、あとどれくらいか把握しづらい


• 練習の達成感を感じにくい

主な機能

• 🌈 7色グラデーション進捗表示: 走行距離に応じて背景色が変化


• 📅 大会カウントダウン: 本番まであと何日かを大きく表示


• 📝 走行履歴管理: 記録の編集・削除が可能


• 🌤️ 天気連携: 今日がランニング日和かどうかを表示


• ⚙️ 初期設定ウィザード: 初回アクセス時に大会情報を設定

使い方

1. 初回アクセスで大会名と大会日を設定
2. 走った距離を入力して「記録」をタップ
3. 色の変化を楽しみながら42.195kmを目指す！

技術的な学び

• Railwayの使い方: GitHub連携で自動デプロイ、環境変数の設定、ドメイン変更など一通り習得


• APIプロキシの実装: フロントエンドにAPIキーを露出させず、サーバー経由で安全にAPI連携する方法


• 日本時間(JST)の扱い: JavaScriptでタイムゾーンを考慮した日時処理

AIとの協働で発見したこと

• 企画書をしっかり作っておくと、AIがその意図を汲み取って実装してくれる


• 「〇〇したい」と要望を伝えるだけで、必要な修正箇所を全て把握して対応してくれる


• 小さく試す→問題なければ本実装、という進め方がAIとの協働に合っている

次に活かしたいこと

• 通知機能（Push Notification）の追加


• PWA化してスマホのホーム画面から使えるように


• 走行ペースや時間の記録機能