クソアプリAdvent Calendar 2023

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

Posted at 2023-12-25

手がかゆくなるアプリ作りましたのRyommさんの紹介でクソアプリ Advent Calendar 2023の存在を知ってまだ3日もあるのでやることにした

↑これがきっかけ

ということでクソアプリ Advent Calendar 2023の記事のです。12/25狙いでしたが、埋まってしまったので開いている12/24に入れておきます。

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

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

アイデア出し

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

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

リストアップしてもらったタイトルを元にクソアプリのアイデアをいくつか考えてもらいました。

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

最終的に選んだのはこちらの「逆天気予報アプリ」です。全く誰にも役に立たないクソアプリですね！予報アプリなのに逆を攻めているあたりが良いと思いました。

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

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

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

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

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

です。

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

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

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

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

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

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

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

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

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

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

$ git add docs

Github Pagesの設定は以下の通りです

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

『使い方』

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