注意:著者は初心者なので間違ってることがあるので注意してください。
さて、前回の続きです。まずは今回使うAPIがどんなものか見ていきましょう。
Weather Hacksここに仕様が書いてありますね。
簡単にまとめると、
- このAPIたたくとJson形式のデータがもらえるよ
- 基本URLの後ろにIDを入れるとその地域のデータがもらえるよ
そのほか細かいのは仕様を見てみるといいでしょう。
APIからデータを受け取ってみる
では実際にデータを受け取ってみましょう。
どうやらrequestsというライブラリを使うっぽいのでpipで入れましょう。
pip install requests --user
一番最後の--user
コマンドはパーミッションエラーが出たのでつけています。
これでインストールできたのでview.pyをいじってみましょう!
import requests # 追加
import json # 追加
...
def get_context_data(self, **kwargs):
api = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=400040'
get_data = requests.get(api)
json_data = json.loads(get_data.text)
context = super().get_context_data(**kwargs)
context["data"] = json_data
return context
今回選択する地域とかは、例にあるものをそのまま持ってきます。
requests.get(api)
でリクエストを送ってデータをもらいます。
そしてjson.loads(get_data.text)
で受け取ったテキストをjson形式からデコードしてます。
以降は前回のものと同じですね。
base.htmlも変更しておきましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--dataを表示するように変える-->
{{data}}
</body>
</html>
では実行してみましょう!
こんな結果が出ますでしょうか。どうやらちゃんとデータを受け取れてるみたいですね。
受け取ったデータの表示してみる
でもでも、これではいくら何でも見ずらいですね。必要なデータだけ取り出して見えるようにしましょう。
今回はテンプレートを変更してデータを表示しましょう。
表示したいデータは
- title
- location
- description
- forecasts
こんなところでしょうか。それぞれについては仕様を確認しましょう。
これらを表示するのは非常に簡単です。
...
{{data.title}}<br/>
{{data.location}}<br/>
{{data.description}}<br/>
{{data.forecasts}}
...
さて、このままではまだlocationとかは表示がきれいではないですね?
さっきやったように.
でつなげていくことで子のデータを表示できます。なので
...
{{data.title}}<br/><br/>
{{data.location.area}}/{{data.location.prefecture}}/{{data.location.city}}<br/><br/>
{{data.description.text}}<br/><br/>
{{data.forecasts}}
...
これでforecasts以外はきれいに表示されました。
forecastsだけまだしてないのですが、じつはこれだけ周りとちょっとデータ形式が違いまして。
jsonデータをよく見ると{}と[]があるのがわかりますね?あるのですよ。
[]はリスト型で、配列のようなものです。[A,B,C,...]
のような構造になっており、テンプレート上でAを持ってきたいときは[0]
とすると持ってこれます。
対して{}は辞書型で、{key1:val1,key2:val2,....}
のような構造になっており、テンプレート上でval2を持ってきたいときは.key2
とすると持ってこれます。
そのためforecastsのデータを持ってくるにはまずリストの0番目を指定してあげる必要があるので
...
日付:{{data.forecasts.0.date}}<br/>
天気:{{data.forecasts.0.telop}}<br/>
最高気温:{{data.forecasts.0.temperature.max.celsius}}℃
...
このようになりますね。
まとめ
おぉ!見やすいじゃないですか!
ただのままだとさすがに汎用性が少ないですね...
というわけで次回はこれと同じものをview.pyをいじって作っていきましょう。
Kiteのサジェストは便利なのでスラスラかけますね。
サジェストの左の方にちっちゃく内容がわかるようにアイコンが出てるっぽいんですが、まだ使って日が浅いのでよくわからんですよ...