<はじめに>
普段は、VBAやRPAを使った業務自動化をメインにしています。
WebアプリやJavaScriptは、ほぼ未経験でしたが、
「現場の天気・災害情報をひと目で確認できたら便利だろう」という思いから、
AIと一緒にリアルタイム気象MAPを作ってみました。
<作ったもの>
気象MAP
<内容>
全国の現場にピンを立て、天気・地震・津波・台風・雨雲・気温を
まとめて確認できるWebアプリです。
🔗 デモはこちら（Netlify）
https://weathermap-mobilephone.netlify.app/
<主な機能>
∙全国の現場を地図にピン表示 → 担当現場の状況を一目で把握
∙雨雲・地震・津波・台風・気温レイヤー → 必要な災害情報をワンクリック表示
∙住所検索 →気になる場所の天気を検索
∙今日の天気・週間予報・3時間予報
∙スマホ対応（レスポンシブ）
＜使用技術＞
∙Leaflet.js → 地図表示に使用
∙気象庁API → 天気•地震•津波•台風•気温データ
∙国土地理院API → 地図タイル・住所検索
∙Netlify → 公開用（GitHub連携で自動デプロイ）
<工夫したところ>
∙複数のAPIをうまく組み合わせる
気象庁APIは無料＆無登録で使える一方、データ構造のルールが少し独特で、
慣れるまで試行錯誤しました。
都道府県名 → 気象庁オフィスコードへの変換
temps[] の構造（最高だけ／最低・最高の2つ／3つ以上…） など、
日によって配列の形が変わるのでロジックを工夫しました。
∙スマホUIを別で作った（PCの縮小では破綻する）
PC向けレイアウトをそのまま縮小すると見づらかったため、
スマホ用に“地図メイン＋下スライド式パネル” を採用しました。
現場から見ることを想定して、指1本で操作できるようにしています。
∙ピンの色や階層を調整
地震レイヤー（震度カラー）と重ねると見づらくなるため、 現場ピンは緑に
統一して識別性を上げました。
∙AIとの協業について
今回の開発では、コードの生成・エラー解説・仕様読み取りをAIに
手伝ってもらいました。
ただし、どんなアプリにするか・どう見せるか・現場で何が必要か
といった設計・判断部分はすべて自分で担当しています。
結果としてVBAエンジニアでも、AIを味方にすれば Web アプリをゼロから
作れるということを強く実感しました。
＜おわりに＞
普段 VBA しか書かない自分でも、AIを活用することでここまで作れるとは
正直驚いています。
「Web は苦手だけど何か作ってみたい」
「AIをどう活用したらいいか分からない」
という方の参考になれば嬉しいです！
この記事も初めての投稿になりますが、AIに投稿してみんなに見てもらったら
新しい発見や刺激になると教えてもらい、投稿してみました。
何か気になる点などあればぜひコメントいただけたら嬉しいです。