年末で帰省予定なのですが、私の帰省はかなりの大移動なので距離が遠く、
天気が全然違ったり、服装がこちらのものと同じでいいのか毎回不安になる。。
天気予報サイトでもいいのですがいらない情報も多いため、
目的地の1週間の天気と、行き先前後の地図を表示してくれるのと、大まかな服装目安だけを
シンプルに教えてくれるアプリを作成。
以下ウェブアプリのリンク先
https://kan-taro.github.io/tenk_fuku/
説明は以下です。
https://github.com/kan-taro/tenk_fuku
🎯 何ができる?
- 都市名検索
- 東京都内・大阪府・京都市や町名で…好きな場所を入力すると、その位置にズームした地図と天気情報が表示されます。
- 7日間の天気予報
- 現在時刻から1週間先まで、天候(晴れ・雨・雪など)と最高/最低温度をアイコン付きで確認できます。
- 服装提案
- 温度・天気・UV指数・風速・アクティビティ別に「Tシャツ+サングラス」「コート+マフラー」など、1行で分かるおすすめ衣装を表示。
- アイコンも同時に提示し、見た目だけでも直感的に判断できます。
- 地図と天気の連動
- 検索した都市にマーカーが立ち、ポップアップで現在の天気・温度を即座に確認
🌐 使い方は簡単
- ブラウザで https://kan-taro.github.io/tenk_fuku/へアクセス。
- 上部のテキストボックスに「東京」や「大阪」など都市名を入力。
- 「検索」ボタンか Enter キーを押すと、マップ・天気・服装が自動で更新。
📦 何が必要?
- Web ブラウザ(Chrome/Firefox/Edge/Safari 推奨)
外部ライブラリは CDN 経由で読み込むだけなので、特別なセットアップは不要です。
🔧 こんな場面に便利
- アウトドア好き
- 今日の天気と服装を一目で確認して、持ち物チェックリストを作成。
- ファッションコーディネート
- 天候に合わせた衣類提案が自動で出るので、朝の準備時間短縮。
- 旅行前のチェック
- 行き先都市の週間天気とおすすめ装備を簡単に確認できる。
📜 まとめ
「服装天気帳」は、天気情報だけでなく「何を着ればいいか」を即座に提案する便利ツールです。
コードはシンプルな HTML/CSS/JavaScript で構成されているので、学習や改造も楽々。



コメント