Flutterでopenweathermapを使って天気予報アプリを作る
お久しぶりです。
とにかくアウトプットしようと思い、なけなしの休みでさくっとFlutterで天気予報アプリを作成してみました。
何を作るめて（要件定義）、どうやって作るか決めて（設計）、ちゃんと作る（実装）っていう感じで進めます。正直、設計と実装を一緒にやっちゃう方が楽なので厳密にタスクを分けたりしないですが、、
要件
開いたら、無駄なアクションが一切なく一瞬で今日の天気を確認できるアプリを作る。
設計
一旦、画面仕様書はこんな感じに作りました。
アイコンとAPIは用意しないといけないです。
前準備〜アイコン〜
アイコンはLottieFilesっていういい感じのアニメーションを使用しました。これは様々な（Lottie libraries and plugins available for Web, iOS, Android, Flutter, React, React Native, Xamarin, NativeScript, Windows, Vue, Angular, QT, Skia, Framer X, Sketch, Figma & After Effects.）環境で動かせる、jsonだけでアニメーションを実現できます。
それっぽいアニメーションを探して、jsonファイルを取得し、アプリからライブラリ呼び出すだけで使えます。
前準備〜APIの準備(OpenWeatherMap)〜
APIは、OpenWeatherMapの無料枠を利用します。
APIを利用するには登録が必要なので、ここ https://home.openweathermap.org/users/sign_up から登録します。
API仕様は https://openweathermap.org/current ここにあり、都市名、都市ID、緯度経度、ZIPコード（郵便番号の米国版・・・ZIPコード - Wikipedia）をキーに特定の都市の天気を取得できるようです。
プルダウンで選択する４７都道府県の情報からAPIを叩く必要があり、OpenWeatherMapで使える英語表記都市名やzip codeの情報に変換するの結構めんどくさそう、、と思ってましたが、緯度経度でのAPI叩いと時もレスポンス早かったので、緯度経度をリクエストパラメータに使います。
http://tancro.e-central.tv/grandmaster/maps/capitalTable.html こういうサイトで、県庁所在地と緯度経度情報の対応表をゲットして、矩形選択でいい感じのjsonに整形します。
実装準備
とりあえずデータはそろったので、flutterの新規プロジェクトを作ります。
jsonフォルダ下に作成した都道府県⇄緯度経度対応ファイルと、Lottieから取得したjsonを置いておきます。
*pubspec.yamlに配置したファイルを読み込ませるように設定しておきます。
flutter:
assets:
- json/
実装
はい、すんません。早速画面の追加です。プルダウンで想定していましたが、やっぱり画面遷移して地域を選択させましょう。（これ仕事だと怒られるやつ、、）
今回はProviderで一旦実装しますので、↓のリンクを参考にしました。
本当はstate_notifierとやらがいい感じらしいですが、、いったんね、、
で、なんやかんや苦戦しながら作ります。
ディレクトリ構成はこんな感じです。一つ目のリンク(Flutterのpackage:providerを使ったBloc的アーキテクチャ全体像をサンプルで理解するまとめ - Qiita)を参考しています。
コードは以下のリポジトリに配置していますので、興味のある方はみてみてください。（レビューして欲しい、、）
（コードの解説もしたかったんですが長くなるので、書くとしてもモジュールごとに分解して今度書きます笑）
動作はこんな感じです
久しぶりにはてなブログに投稿しました #はてなブログ
— かれきゃす (@karekyasu) 2020年9月22日
Flutterで天気予報アプリを作る - かれきゃぶろぐ https://t.co/tyRinujvJ2
動作はこんな感じです pic.twitter.com/9MkhL0Cksj
