Vercel v0だけでつくる天気予報Webアプリ①ーGoogleサイトで作るグループウェア(189)ー
🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！
この記事を読んで欲しい方
企業DXや学校DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方
AIの利用に悩んでいる方
①Vercel v0だけで天気予報アプリ作ってみる
みなさんこんにちは！
v0使ってますか？
わたしはとうとうClaude氏に別れを告げてしまいました。
本格的にAIコーディングを進めていく上で、Claudeでは色々と非力な部分が出てきたのです。
もちろん、Claudeは会話や知識は非常にレベルが高いのですが、v0がアップデートしてちょっとかしこくなってきたこと、科学やプログラミングに特化したOpen AIのo1が出てきたことが原因です。
さて、本格的にv0に取り組むうえで、まずWebアプリを作って覚えるのが、私のやり方なので、天気予報アプリを作ってみました。
なぜ天気予報かと言うと、将来、アナログ時計ジェネレータに組み込んで、時計の中で天気がわかるAppleWatchのようにしたいと思っているからです。
さて、v0はReactで作るのが本筋なのでしょうが、小さなWebアプリをそこまでの大きな仕組みで作る必要もありませんので、今まで通りHTMLコードでちまちま作ります。（覚えるのも面倒だし）
Reactを使わずにHTMLコードを常につくりださせるおまじないは、プロンプトの最初に「HTMLコードで出力して」と書くだけです。
②天気予報アプリの公開
まず、出来上がったアプリを見てください。
これは、v0の新機能であるパブリッシュを使っています。いわゆるv0のサーバサービス上でアプリが動いて公開できる機能です。
Forkもできるので、自分のv0にダウンロードもできます。
（なぜか、noteに埋め込めませんでした。）
これは、初級者の練習用に作ったもので、すべて自然言語入力（話し言葉）のプロンプトで生成されました。一切自分でコードをいじってはいません。
AIとの対話だけで作られたものです。
②都市の位置検索と天気情報検索
天気予報では、まず天気を知るための都市の位置を検索するのがセオリーですので、天気情報検索と都市の位置検索が無料で、かつKEYも不要で使えるAPIを探して、土台を作ってもらいました。
APIとは、ネット上のデータベースからAPIという仕組みでデータ（情報）を取ってくる機能です。
天気情報はopen-meteo.comのAPI、都市の位置検索はnominatim.openstreetmap.orgのAPIを利用します。どちらも利用料無料で、KEY無しで使えます。
KEYとは、ネット上のデータベースに入るための鍵のことです。このKEYを手に入れるのが初級者には敷居が高いので、KEYが必要なAPIはあえて利用しませんでした。
④表形式のデータ表示とグラフ
24時間予報は、気温と降水確率のグラフと、その下に表形式でデータが細かく見れるようにしました。
グラフはChart.jsを使って作ってくれたので、インタラクティブなものができました。
データは、現在の時刻より後の24時間を取得して表示させています。
また、週間予報は、一般的な内容で表形式で表示しています。
⑤パーフェクト天気予報はAIが勝手に名付けた
ちょっと恥ずかしい名前ですが、これはAIが勝手に名付けたので、そのままにしています。（笑）
ちなみに、パーフェクトになった部分は、ダークモードの追加と、検索時のぐるぐるの表示部分でした。
⑥バグが多く出た部分
バグが多く出た部分は、天気コード（WMOコード）の内容と表示アイコンの不一致です。
画面の動きをチェックしていると、晴れアイコンなのに、天気内容は不明と表示されていました。
コードを見ると、よくわからない天気を不明にして、晴れのアイコンに割り当てていました。（アイコンはopenweathermap.orgから引用していました）
まあ、AIがおおまかにWMOコードにopenweathermapのアイコンを割り当てたんだろうなと言うことです。
かといって、直接コードいじるのはAIノーコード的にご法度ですので、「天気が不明で晴れマークがついているところがありますが、これはなぜですか？」と聞くと、AIが気がついたようで修正案をすぐに出してくれました。
その案をOKすると、コードの修正がはじまり、きちんとしたアイコンと天気内容の表示になりました。
⑦おわりに
以上が、v0で天気予報アプリを作った流れです。
最初はデータをネットから取得する部分を作り、つぎにタブなどの画面全体の配置を作り、タブの内部の詳細を作って、さいごに画面全体のデザインをAIの創造性に任せて作り直してもらいました。
やり方は、長いプロンプトを書いて一発で作るのではなく、AIと対話しながら作っていく方式です。（以下を参考にしてください）
v0のアップデートで、無料版で使えるメッセージ数が1日10回になり（以前は6回でした）、パブリッシュ（公開機能）もついたので、初級者の勉強には無料版でちょうどよくなりました。
今回の開発の流れ（とプロンプト）については、ある程度資料ができたら、こちらで公開していこうと思います。
プロンプト自体は創造的対話と問いかけの話法をつかった対話形式で、とくにマークダウン表記で構造化はしていませんので、特別なものではありません。
むしろ、APIを知っているかとか、使えるJavascriptライブラリ名を知っているかとか、天気コードを知っているかとか、そちらのほうが重要でした。（いわゆるドメインの知識ですね）
初級者が簡単にAIコーディングができるからといっても、ドメイン知識がなければ、バグが発生した場合、問題がどこにあるのかさえ分からないでしょう。
一発芸のようにアプリを作るのではなく、ドメイン知識をAIとの対話で学びながら作り上げていくことこそ重要なのではないでしょうか？
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？