#個人開発 #開発ログ

雨量シミュレーターを公開しました - 開発ログ

アプリを開く →

作ったもの

街の背景に対して雨が降る様子をシミュレートするWebアプリ。指定した降水量(mm/h)に応じて、 雨粒の密度・落下速度・跳ね返り・視界の悪さ(もや)が変化し、気象庁の降水強度区分 (小雨〜猛烈な雨)に沿ったリアルな体感を再現する。

主な機能

  • 降水量(0〜120mm/h)をスライダーまたはプリセット(小雨・弱い雨・やや強い雨・強い雨・ 激しい雨・非常に激しい雨・猛烈な雨)で指定
  • 降水量に応じて雨粒の密度・速度・跳ね返り・視程(もや)がリアルタイムに変化
  • 街並みの背景と昼/夜の切り替え

使用技術

  • React + TypeScript + Vite
  • Canvas2Dによる雨粒パーティクルの自作レンダリング
  • SVG/CSSで自作した街並み背景
  • Cloudflare Pages + GitHub

開発時の工夫

雨のリアルさをどう出すか、最初はThree.jsでシェーダーを使う案も検討したが、密度・速度・ 視程といった気象学的に妥当なパラメータ設計の方が体感には効くと判断し、Canvas2Dベースの 自作パーティクルシステムにした。気象庁の降水強度区分を基準に、mm/hから雨粒の密度・速度・ 跳ね返り・視程(もや)へ変換するロジックを用意し、50mm/h付近から視界が急激に悪化するよう カーブを調整した。

開発中には、画面サイズがまだ確定していないタイミングで雨粒を配置してしまい、画面の隅に 固まって表示される不具合に遭遇した。原因はcanvasの実寸が確定する前に初期配置をしてしまう レースコンディションで、リサイズ処理で実寸が判明したタイミングで初回配置を行うよう設計を 変更して解決した。

デプロイ時には、Cloudflareへのブラウザ認証(OAuth)がローカル環境の制約で完結できず、 APIトークン方式に切り替える一幕もあった。

今後の改善

  • Cloudflare PagesとGitHubのビルド連携(push時の自動デプロイ)
  • 雷・風向きなど演出の追加
  • 実ブラウザでの体感調整
← 記事一覧に戻る