やっほー
悲観的な天気予報

Angular&OpenWeatherMapで天気予報アプリ『悲観的な天気予報』を作成した件

  • 2019年11月26日
  • 2021年3月16日
  • Angular
  • 11view

この前こんな記事を書きました。

前回記事

天気予報アプリをAngularで作ります。 が、今回は「OpenWeatherMap」を使うところまでです。 なぜOpenWeatherMapなのかというと、そこにOpenWeatherMapがあったから。 OpenWeath[…]

OpenWeatherMapのアカウント登録と使い方を解説するんやで

 

Angularは元々得意?というか業務で触っているのもあるので、AngularとOpenWeatherMapを組み合わせて天気予報をアプリを作ってみました

その名も『悲観的な天気予報』!!

詳細は順を追ってお話ししますが、最終的にはAWSを利用してアプリを公開するところまでいきますぜぃ。

環境

  • Angular:7.1.0
  • Node:11.13.0

まず最初に成果物を公開

エンジニアがググる時、特に画面に関して情報を仕入れたい時って、先に記事の中でゴールがどこなのか知りたいものです。

ってことで今回作成したアプリを先に公開します。

こういうのに似たものを作りたい場合は役に立つかと思われ。

 

悲観的な天気予報って?

今回、AngularとOpenWeatherMapでアプリを作ることは決めていましたが、普通に作るだけだと面白みに欠けるので、少し遊び心を加えてみました。

悲観的というのは、「降水確率20%以上はすべて雨」という、なんともネガティブな天気予報なのです。

ただ、後々気付いたのですが、OpenWeatherMapは無料枠だと降水確率が取得できない。。

てことで、悲観的=「曇り度20%以上はすべて雨」というルールにして実装することにしました。

通常の天気予報も見れるように画面構成を工夫しています。

まずは環境構築

まずは環境構築ですが、これは本記事の趣旨とずれるので以下を参照してください。

関連記事

Angular7で新規プロジェクトを作りたい! Angularでプロジェクトを作成するのは非常に簡単です! ということで今回は、Angular7で新規プロジェクトを作成する方法を解説します! 前提 前提として、以下がインスト[…]

超簡単!Angular7で新規プロジェクトを作成する方法!
僕のアプリ名は「pessimistic-weather」で作成しました。
あと、CSSは「Stylus」を使っています。使いたかっただけ。

悲観的な天気予報のソースコード

では、僕が書いたソースコードのすべてを載せていきたいところですが、ファイル数もそれなりなので重要な部分だけ記載します。

すべてのソースが見たい方は以下を参照してくださいまし。

styles.styl

custom-themes.css」はマテリアルデザインの色をカスタマイズしたかったので定義しています。

index.html

画面をローディングする際のスピナーの設定をしています。

environment.ts

OpenWeatherMapの「URL」と「API Key」を定義しています。

environment.prod.ts」も同様です。

app.module.ts

app-routing.module.ts

api.service.ts

天気予報を取得するAPIを実行するためのサービスです。

idは東京のIDを、unitsは摂氏で温度を取得するために指定しています。
なぜか言語を指定すると速度が遅かった気がするのですが、もしかすると気のせいかもしれません。

http.service.ts

router.service.ts

util.service.ts

clouds.pipe.ts

曇り度は「%」をつけます。

temp.pipe.ts

気温は「」を付けます。

time.pipe.ts

時刻は「YYYY/MM/DD HH時」とします。

material.module.ts

pipe.module.ts

shared.module.ts

pessimistic-weather.ts

main.component.html

メインの画面です。

main.component.styl

main.component.ts

main.module.ts

error.component.html

エラー画面です。無駄に凝ってます。

error.component.styl

error.component.ts

error.module.ts

天気予報アプリをAWS S3×CloudFrontで公開してみる

関連記事

VueやAngularで作ったアプリを公開できると楽しさ倍増。 ってことで、AWSの「CloudFront+S3」を使って、ビルドしたアプリを公開するところまで行きマックスオリックス。 今回はVueアプリを公開してみますが、Angu[…]

バケットの作成

↑はVueアプリを公開した手順ですが、やることは同じです。

天気予報アプリを作ってみて

正直このアプリが役に立つことはほぼないです

が、自分の成果物を見て満足できれば個人的にはOKです。

それにしても、天気予報API以外にも、世の中には便利なAPIがあるもんですね。

APIを呼ぶだけで情報が取得できるので自分でサーバ側を用意する必要がなく、フロントだけを構築したいって人にはおすすめだなと、今回特に感じました。

次はVue.jsで何か作りますわ

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

Angularは普段業務で触っているので他の言語でも良かったのですが、とりあえず1つくらいAngularの作品が欲しくて作りました

Angularの良さはやっぱりマテリアルデザインを惜しみなく使えるところでしょう。

マテリアルデザインを使用するだけでそれなりの画面に見えますからね。

ではまた!

悲観的な天気予報
フォローしてもらえると泣いて喜びます