FlaskでササっとWebアプリケーション作成 〜応用編③外部のAPIと画面入力を動的に反映させる
前回までにざっくりとFlaskのなんとなくを学びました。
今回はWebブラウザの画面上から入力した値を利用して、外部のAPIで取得した情報を画面上に表示させるという応用編をやっていきたいと思います。
1. 完成イメージ
今回は天気を知りたい地域を指定したら、その地域の天気情報や気温などが表示されるWebアプリケーションを作ってみたいと思います。
その際、自らがDB等で保有する情報を表示するのでなく、外部のAPIを利用することでFlaskのササっと感を活かしたいと思います。
完成形は以下です。
(1) Webアプリケーションイメージ
(2) 利用した外部サービス（API）
今回利用させていただいたのは、livedoorの天気予報APIです。
所定のフォーマットで、所定のURLにリクエストを送信すると、JSON形式という辞書型のデータでレスポンスが受け取れます。
どんな感じかざっくりみてみましょう。
2. JSONファイルを読み込む
https://weather.tsukumijima.net/api/forecast/city/400040 にrequestsモジュールを使って、リクエストを送信してレスポンス情報をrという変数に格納してます。(❶)
jsonモジュールのloadsメソッドで、引数として渡したレスポンスのテキストをjsonファイルとしてweather_json変数に格納します。(❸)
(1)APIを利用する
test.py
import requests
import json
#❶
r = requests.get("https://weather.tsukumijima.net/api/forecast/city/400040")
#❷
weather_json = json.loads(r.text)
print(weather_json)printで出力すると、どういうデータが返ってくるのかが分かります。
{
'publicTime': '2024-03-24T17:00:00+09:00',
'publicTimeFormatted': '2024/03/24 17:00:00',
'publishingOffice': '福岡管区気象台',
'title': '福岡県 久留米 の天気',
'link': 'https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=400000',
'description': {
'publicTime': '2024-03-24T16:35:00+09:00',
'publicTimeFormatted': '2024/03/24 16:35:00',
'headlineText': '',
'bodyText': '\u3000福岡県は、前線や湿った空気の影響により雨や曇りとなっています。\n\n\u3000２４日は、前線や湿った空気の影響により雨や曇りとなるでしょう。\n\n\u3000２５日は、前線や湿った空気の影響によりおおむね曇りで次第に雨となり、夜は雷を伴う所があるでしょう。\n\n＜天気変化等の留意点＞\n\u3000２４日１８時から２５日１８時までに予想される１時間降水量は、多い所で、筑後地方で５ミリ、２４日１８時から２５日１８時までに予想される２４時間降水量は、多い所で、筑後地方で１５ミリの見込みです。',
'text': '\u3000福岡県は、前線や湿った空気の影響により雨や曇りとなっています。\n\n\u3000２４日は、前線や湿った空気の影響により雨や曇りとなるでしょう。\n\n\u3000２５日は、前線や湿った空気の影響によりおおむね曇りで次第に雨となり、夜は雷を伴う所があるでしょう。\n\n＜天気変化等の留意点＞\n\u3000２４日１８時から２５日１８時までに予想される１時間降水量は、多い所で、筑後地方で５ミリ、２４日１８時から２５日１８時までに予想される２４時間降水量は、多い所で、筑後地方で１５ミリの見込みです。'
},
'forecasts': [
{
'date': '2024-03-24',
'dateLabel': '今日',
'telop': '雨時々止む',
'detail': {
'weather': '雨\u3000夜のはじめ頃\u3000くもり',
'wind': '北の風\u3000後\u3000北東の風',
'wave': '０．５メートル'
},
'temperature': {
'min': {
'celsius': None,
'fahrenheit': None
},
'max': {
'celsius': None,
'fahrenheit': None
}
},
'chanceOfRain': {
'T00_06': '--%',
'T06_12': '--%',
'T12_18': '--%',
'T18_24': '60%'
},
'image': {
'title': '雨時々止む',
'url': 'https://www.jma.go.jp/bosai/forecast/img/302.svg',
'width': 80,
'height': 60
}
},
{
'date': '2024-03-25',
'dateLabel': '明日',
'telop': '曇のち雨',
'detail': {
'weather': 'くもり\u3000夕方\u3000から\u3000雨\u3000所により\u3000夜\u3000雷\u3000を伴う',
'wind': '北東の風',
'wave': '０．５メートル'
},
'temperature': {
'min': {
'celsius': '14',
'fahrenheit': '57.2'
},
'max': {
'celsius': '17',
'fahrenheit': '62.6'
}
},
'chanceOfRain': {
'T00_06': '40%',
'T06_12': '30%',
'T12_18': '80%',
'T18_24': '90%'
},
'image': {
'title': '曇のち雨',
'url': 'https://www.jma.go.jp/bosai/forecast/img/212.svg',
'width': 80,
'height': 60
}
},
{
'date': '2024-03-26',
'dateLabel': '明後日',
'telop': '雨のち曇',
'detail': {
'weather': '雨\u3000後\u3000くもり',
'wind': '北の風',
'wave': '０．５メートル'
},
'temperature': {
'min': {
'celsius': '11',
'fahrenheit': '51.8'
},
'max': {
'celsius': '15',
'fahrenheit': '59'
}
},
'chanceOfRain': {
'T00_06': '90%',
'T06_12': '90%',
'T12_18': '90%',
'T18_24': '90%'
},
'image': {
'title': '雨のち曇',
'url': 'https://www.jma.go.jp/bosai/forecast/img/313.svg', 'width': 80, 'height': 60
}
}
],
'location': {
'area': '九州',
'prefecture': '福岡県',
'district': '筑後地方',
'city': '久留米'
},
'copyright': {
'title': '(C) 天気予報 API（livedoor 天気互換）',
'link': 'https://weather.tsukumijima.net/',
'image': {'title': '天気予報 API（livedoor 天気互換）',
'link': 'https://weather.tsukumijima.net/',
'url': 'https://weather.tsukumijima.net/logo.png',
'width': 120,
'height': 120
},
'provider': [
{
'link': 'https://www.jma.go.jp/jma/',
'name': '気象庁 Japan Meteorological Agency',
'note': '気象庁 HP にて配信されている天気予報を JSON データへ編集しています。'
}
]
}
}(2) 日付と天気を取り出す
辞書型のようにキーを指定したり、辞書の値がリストであればリストの要素を指定したりしながら、データを取り出します。
日付は、forecastsというキーの値であるリストの1番目の要素内にdateというキーの値として格納されています。（❸）
天気情報は、forecastsというキーの値であるリストの1番目の要素内にtelopというキーの値として格納されています(❹)
test.py
import requests
import json
r = requests.get("https://weather.tsukumijima.net/api/forecast/city/400040")
weather_json = json.loads(r.text)
#日付と天気を取り出す
forecasts_date = weather_json["forecasts"][0]["date"] #❸
forecasts_telop= weather_json["forecasts"][0]["telop"] #❹
print(forecasts_date)
print(forecasts_telop)出力結果
2024-03-24
雨時々止むこうやってPythonファイルの中で欲しい値を取り出し、HTMLファイルに値を渡して表示させるという作戦です。
3. FORMから入力されたIDを利用する
次に必要な要素として、どこの天気予報を取得したいのかをWebブラウザのフォームで入力受付し、入力されたIDを利用してAPIを取得するという動きに繋げる必要があります。
要件としては、以下2点。
都道府県・都市名・IDの一覧と、IDを入力するためのフォーム
入力されたIDをPythonファイル側で取得し、該当の都市の天気情報をAPIで取得する
(1) 都道府県・都市名・IDの一覧と入力フォーム
一覧はテーブルで用意しました。(❶)多少なりとも見栄えを気にしてBootstrapを利用してますが、初めはそんなもの気にしなくていいと思います。
下の方にフォームを用意しpostメソッドを利用、formactionは入力された値を送信する先を表しています。(❷)
IDはplace_idという変数名で取得できるように送信しています。(❸)
weather.html
ここから先は
この記事が気に入ったらチップで応援してみませんか？