あなたが生まれた日のお天気がわかる「あの日の天気」を作ってみた

[手がかゆくなるアプリ作りました](https://zenn.dev/ryomm/articles/c6e514efe986d8)のRyommさんの紹介で [クソアプリ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/kuso-app)の存在を知って`まだ3日もある`のでやることにした

https://twitter.com/KintoTech_Dev/status/1737756551228895467

![まだ３日あるのでいけますよ！！！！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/0cb5afb3-be51-e8c8-8e45-4c7c09fc06c6.png)

↑これがきっかけ

ということで[クソアプリ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/kuso-app)の記事のです。12/25狙いでしたが、埋まってしまったので開いている12/24に入れておきます。

クソアプリを作るつもりが思わぬ仕様変更でちょっとだけ面白いアプリになってしまったは残念ですが、ぜひ最後までご覧ください。

作ったアプリの名前は『あの日の天気』です。「あの日、あの場所のお天気」を知ることが出来ます。

# アイデア出し

クソアプリのアイデアは全く出てこないのでChatGPTせんせいに頼ります。

まずはURLを渡してクソアプリのタイトル一覧を取得します。

![クソアプリ一覧を取得](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/a4035444-caad-afb6-1d93-4633a3257d79.png)
リストアップしてもらったタイトルを元にクソアプリのアイデアをいくつか考えてもらいました。

- 歴史上の有名な猫の冒険を再現するアプリ
- 宇宙で最も退屈な宇宙飛行シミュレーター

など、タイトルを見ても良く分からないものをいくつか考えてもらいました。

最終的に選んだのはこちらの「逆天気予報アプリ」です。全く誰にも役に立たないクソアプリですね！予報アプリなのに逆を攻めているあたりが良いと思いました。
![逆天気予報アプリ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/591d9bab-6b15-1977-1dd7-7cf196b6e5c9.png)

少し会話した結果以下のようにユーザーが天気予報の地点を選んでその地球の裏側の天気予報を出すことにします。

![地球の反対側の天気予報](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/6ecfab18-949e-1245-6ba2-63a76c58f8bf.png)

# 実装開始の予定が方針転換
調べていくと位置情報から天気情報を取得できる Open-Meteo.com　というサービスを発見しました。これですぐにアプリができると思ったのですが、なんと1940年からのデータを取得できることがわかりました。これは過去のデータを活用しない手はありません。

![earth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/82337850-4c42-66e2-bee2-b0a13c60cf78.png)

ということで、方針を転換して指定日、指定場所のお天気を知ることができるアプリを作ることに変更しました。誰の役にも立たないクソアプリを開発する予定でしたが、これで自分が生まれた日の天気を知ることができるという「世界の誰かに役立つかもしれないアプリ」に進化しました。

# 技術選定

使い慣れたFlutter Webを使って開発を行い、無料でWebページをホストできるGithub Pagesにデプロイして動くようにしていきます。

Github PagesにFlutter Webをホストするということはまだやったことが無いのでごれが出来るようになると今後のWebアプリ開発も捗るし良い事づくめです。

# 機能検討

- 地図表示
- 日付選択
- 天気表示

です。

## 地図表示
費用もかからないようにOpenStreetMapを使います。5年前にFlutterでまだ地図が使えなくてこんな事([FlutterでインラインMapViewを作ってみた](https://qiita.com/aoinakanishi/items/35bef7de85fdee46bef9))をして地図アプリを作ったことがありますが、最近は数行追加するだけで簡単にFlutter上で地図を表示する事が出来ます。

タップした場所にピンを置いて緯度経度を取得するようにします。ピンが置かれたら画面の中央に移動します。

## 日付選択

FlutterにはDatePickerがあるのでそれを使います。期間の指定も出来るので便利なやつです。

![Flutter DatePicker](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/11842c01-b25f-5ed4-a7a0-cc10901d6f97.png)


## 天気表示

Open-Meteo.com が無料でAPIを提供しているのでそれを活用します。今回の要となる機能です。運命的な出会いでしたが、1940年からの80年間の気象データにアクセス出来るのは今後様々な事業にも活用出来そうな気がします。

未来を予測するAPIと過去のアーカイブを提供するAPIがあるので今回はアーカイブ版のAPIを使っていきます。

# お天気のアイコン化

数字だけ見てもお天気ってよくわからないですよね？と言うことで天気はアイコン化します。ドキュメントを読むとWMO codeという値があるのでそれで画像をだし分けましょう。

晴れや曇は以下のようなアイコンになりました。

![clear-sky.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/34c1393d-3b3b-acfe-50a8-dbf6a27d0d00.png)

![overcast.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/6e0a45e3-e658-b5c8-0988-2b0aae92e358.png)

# Github Pagesにデプロイ

```
ビルド
$ flutter build web --base-href　/flutter-weather-app/

生成ファイル格納用ディレクトリ作成
$ mkdir docs
$ cd docs

$ cp -pfr ../build/web/* .

$ git add docs
```

Github Pagesの設定は以下の通りです
![Github Pages設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/96177489-f658-83a9-8b13-168660c1f45f.png)

# 完成

こんなアプリが出来ました。

『あの日の天気』
https://aoinakanishi.github.io/flutter-weather-app/#/

『使い方』
- 日付を選択
- 指定場所にピンを置く
- 「Go」

![あの日の天気](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129712/ce5bc74d-10d4-ff6b-2b0a-1f9eb66422e0.png)

# 最後に

12/25までの時間がない中で、家族サービスの合間のスキマ時間を使って開発しました。今回の開発で獲得したスキルは以下のとおりです。

- Flutter WebのGithub Pagesへのデプロイ
- FlutterでOpen Street Mapの利用
- Open-Meteo.comのAPIの活用