月間29,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

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

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

 

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

 

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

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

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

 

僕のプロフィールはこちら

 

 

環境

Angular:7.1.0

Node:11.13.0

 

 

まず最初に成果物を公開

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

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

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

 

悲観的な天気予報

 

 

悲観的な天気予報って?

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

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

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

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

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

 

 

まずは環境構築

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

僕のアプリ名は「pessimistic-weather」で作成しました。

あと、CSSは「Stylus」を使っています。使いたかっただけ。

 

 

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

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

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

■GitHub

URL:「https://github.com/izumin0401/pessimistic-weather」

 

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

 

 

Advertisement

 

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

※別記事作成中。

 

 

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

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

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

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

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

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

 

 

おすすめ書籍

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

 

 

 

まとめ

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

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

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

ではまた!

 

 

関連記事

以下の記事も合わせて読まれています。

Travelerを知らないの?