タイトル：Astro×D1で作る！EVコックピットとフルスタック開発

概要：ARIYAシミュレーターの裏側。グラスモーフィズムUIの構築から、Clerk認証、OpenWeather API連携、Cloudflare D1へのデータ保存まで、フロントからバックエンドまでを一気に駆け抜けた開発記録です。

コンセプトを形にする技術

前回までの記事（A面）で、Noteshelf AIを使って整理した「総監督専用チューン」の計算ロジック。今回は、その「脳みそ」を実際に動かすための「体（コックピット）」を作り上げた、怒涛の技術開発（B面）の記録です。

今回の開発スプリントでは、以下の5つの技術要素をAstro上で一気に統合しました。

1. グラスモーフィズムな「サイバーUI」の構築

まずは見た目から。EVの先進的なイメージに合わせ、ダークモードを基調とした半透明（グラスモーフィズム）のメーターUIをCSSで構築しました。ルートや乗車人数の選択は、スマホで片手操作しやすい「チップ型」のボタンを採用し、ネオンブルーの発光で操作の気持ちよさを演出しています。

2. Clerkによる「鉄壁の結界」

このシミュレーターは私のリアルな走行データと現在地を扱うため、プライバシー保護は必須です。そこで、Astroに Clerk を導入。わずか数行のコードで、画面右上にGoogleログインのユーザーアイコンを配置し、私しかアクセスできない完全なプライベート空間を実現しました。

3. OpenWeather API × GPSの自動化

外気温の入力は面倒なので、自動化しました。 ブラウザの navigator.geolocation で取得した現在地の緯度・経度を、自作したAstroの裏側（APIルート：weather-gps.ts）に送信。サーバー側で安全に OpenWeather API を叩き、取得したリアルタイムの気温を1タップで画面に反映させる魔法を実装しました。

4. Cloudflare D1へのデータ蓄積

計算して終わりではありません。予測値（NissanConnect vs 独自AI）を今後の答え合わせに使うため、Cloudflare D1 データベースに保存する save-simulator.ts を作成。フロントエンドから送られたJSONデータをSQLに変換し、瞬時にDBへ書き込むフルスタックな処理を実現しました。

5. UI/UXの徹底的な磨き込み

最後に、ダッシュボードに戻るための「HOMEボタン」の追加や、データベースへの保存が成功した瞬間にボタンが「パァン！とサイバーブルーに発光する」アニメーションを追加。この細部のフィードバックが、データを蓄積するモチベーションに直結します。

（執筆協力：Gemini / 編集・監修：古老）