アプリ作成
WebAPI wheather-app

フリーAPIで天気情報を取得する (Wheather-app実装 3)

アプリ作成

こんにちは。Webエンジニアのkaoruです。

今回はお天気の情報をフリーAPIで取得してみます。

【前回】週間天気の枠を表示 (Wheather-app実装 2)

使用するフリーAPIを探す

フリー(無料)でお天気情報を取得したい

フリーAPIとは無料で使えるWeb APIです。

有料だと精度や天気の未来予測など性能がいいのです。

またアクセス数(APIの使用回数)も当然無料版より全然多いです。

今回は実装してみたいだけなので無料で使えるAPIを探します。

フリーだと週間天気はむずかしい？

「今日の天気」だけを取得するだけなら色々あります。

参考：人気の天気APIトップ10: Open Weather Map, Dark Sky

でも「週間(7日間)の天気」となるとフリー枠だとなかなか無いですね。

少し前ならあったようですけど、サービス終了や法人向けのみになったりしているようです。

昨今、異常気象により気象情報へのニーズは高まっていると思うので、その影響ですかね。。

Rakuten Rapid API の Wheather

フリープランでは150回/日ですけど、7日間以上の情報が取れそうです！

さっそくAPIを使えるように

Rakuten Rapid APIへ登録

https://api.rakuten.net/ へアクセス

今回はGitHubアカウントを使用します。

料金プランのページで移動します。

Basicプランを選びます。

クレジットカード情報を入力して登録完了です。

無料ですけど 150回/日を超過した分は100回に付き8円です。

高くはないですけ、お金が動くのでちゃんと意識します。

React実装でたまに無限ループしたりするので、対策が要りそうですね。

呼び出し処理を実装

上記APIの該当ページでは、呼び出しに必要な情報やサンプルが載っています。

サンプルではunirestモジュールが使われていますが、今回はsuperagentモジュールを使います。特別理由はありません。

$ yarn add superagent @types/superagent

呼び出し処理を書きます。

import superagent from 'superagent'
import {APIKeys} from './apiKeyInfo'

const getWheatherInfo = async () => {
	console.log('getWheatherInfo');
	const result = await superagent
		.get('https://weatherbit-v1-mashape.p.rapidapi.com/forecast/daily')
		.query({ "lang": "en", "lat": "35.681236", "lon": "139.767125"})
		// .use(nocache)  // Prevents caching of *only* this request. Need require('superagent-no-cache');
		.set('x-rapidapi-host', 'weatherbit-v1-mashape.p.rapidapi.com')
		.set('x-rapidapi-key', APIKeys.Wheather)
		.set('useQueryString', "true")
		.end((err, res) => {
			if (res.error) console.log('res.error: ', res.error);
			console.log(res.body);
	});
}
getWheatherInfo()

呼び出して、結果(res.body)をコンソールに出しているだけですね。

地域を指定

地域は緯度(latitude)・経度(longitude)で指定します。

今回はGeocoding で「東京駅」を検索しましょう。

便利ですねー。

リクエストのクエリ情報にセットです。

.query({ "lang": "en", "lat": "35.681236", "lon": "139.767125"})

APIのキー情報を設定

先程のAPIページでは「X-RapidAPI-Key」というキーが割り振られています。

このキーを含めないとAPIは使えません。

今回のWheatherアプリのGitHubリポジトリはpublic(公開)にしているので、キーはベタ書きにはできません。他の人のコードでも自由に使えてしまうからです。

実際にはapiKeyInfo.tsというファイルを作成して、そこから読み取るようにします。

export const APIKeys = {"Wheather":"xxxxxxxxxxxxxxxxxxxxxxxxxxx"} //実際にはランダム文字列

呼び出し側(WheatherWeek.tsx)ではこうですね。

import {APIKeys} from './apiKeyInfo'

(中略)
.set('x-rapidapi-key', APIKeys.Wheather)

そして、GitHubへ上げないように.gitignoreファイルに追記します。

apiKeyInfo.ts

ちなみに、一度Gitへ追加したものはGit管理上では残っているので、該当ファイルを管理から外します。

$ git rm -r --cache apiKeyInfo.ts

取得結果をDevToolsで確認

さて、取得結果はどうでしょう？

…うん。取れていそうですね。

中身がどうなっているのかはそれぞれの名前で見ていくしかないっぽいですね。
（APIのページに説明が特に無い..)

今回のCommit

Commit差分です。

では、また〜。

コメント