こんにちは！
最近は成果物作成意欲(?)がすごいので
どんどん作っていってPythonとGitに慣れていこうと思います！
今回は天気予報Webページを作成します！
どういうもの？
翌日の天気予報を見ることができるWebページを作成します
PythonとHTMLを使用して作っていきます！
どんな感じで作っていくの？
今回もGitHubに保存しながらやっていきます
①準備とプロジェクトのセットアップ
②バックエンドの基礎を作成する
③天気予報取得の機能を実装する
④フロントエンドを作成する
⑤バックエンドとフロントエンドを連携させる
以上の5ステップで作成していきます！
プロジェクトのセットアップなどについては
前回と一緒なので割愛します！
バックエンドの基礎を作成
webサーバーのコードを書いていきます
webサーバーのコード
from flask import Flask
# Flaskアプリの本体を作成
app = Flask(__name__)
# ルートURL ("/") にアクセスがあったときに実行される関数を定義
@app.route('/')
def home():
return "天気予報アプリへようこそ！"
# このファイルが直接実行された場合にのみ、Webサーバーを起動
if __name__ == '__main__':
app.run(debug=True)
ちょっとだけコードの解説をすると
"from flask import Flask" → Flaskの読み込み
"app = Flask(name)" → Flaskを使ってWebサーバー本体を作成
"@app.route('/')" → トップページにアクセスが来たときにhome() 関数を実行
"if name == 'main'" → 開発用のWebサーバーを起動するための文
って感じですね(Markdown記法に吸われて正しいコードが書けてない...)
ここから天気予報取得の機能を実装していきます！
天気予報取得の機能を実装
PythonでOpenWeatherMapのAPIに問い合わせて天気予報データを
取得する機能をapp.pyを作成してそこに追加していきます！
まず、.gitignoreを作成します
これはGitにこのファイルは無視してほしいというもので
この後、openweathermapからAPIキーを保存しておくための
ファイルを作成しますが、そのAPIキーがGitHubに
アップロードされるのを防ぐものになります
めちゃ大事です
次はAPIキーを保存しておくためのconfig.pyファイルを作成します
API_KEY = "APIキーをここに貼り付け"
そして先ほど書いたapp.py(Webサーバーのコード)を少し書き換えます！
import requests
from flask import Flask, jsonify
from config import API_KEY # config.py から API_KEY を読み込む
app = Flask(__name__)
@app.route('/')
def home():
# APIに問い合わせる都市名
city_name = "Tokyo"
# OpenWeatherMapのAPIエンドポイントURL
# units=metric: 温度を摂氏に
# lang=ja: 表示を日本語に
api_url = f"http://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={API_KEY}&units=metric&lang=ja"
# APIにリクエストを送って、結果を取得する
response = requests.get(api_url)
# 結果をJSON形式に変換する
data = response.json()
# 変換したデータをブラウザに表示する
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
動かして確認します！
{
"base": "stations",
"clouds": { "all": 75 },
"cod": 200,
"coord": { "lat": 35.6895, "lon": 139.6917 }
}
ここまでで一旦GitHubに保存します
フロントエンドを作成
初のHTML...
うまくできるかな...
とりあえずやってみます！！
HTMLファイルを置くためのフォルダを作成する
まずは保管用のフォルダを作成します
(FlaskはHTMLファイルを特定の場所で管理するようになっているらしい)
今回はtemplatesというフォルダを作成しました
weather_app/
├── app.py
├── config.py
├── .gitignore
├── README.md
└── templates
HTMLファイルを作成する
templatesフォルダの中にindex.htmlというファイルを作成します
その中に以下のコードを書きます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天気予報アプリ</title>
<style>
body { font-family: sans-serif; background-color: #f0f4f8; color: #333; max-width: 600px; margin: 40px auto; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
h1 { color: #005a9c; }
form { margin-bottom: 20px; }
input[type="text"] { padding: 10px; width: 70%; border: 1px solid #ccc; border-radius: 4px; }
input[type="submit"] { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
.weather-info { background-color: #fff; padding: 20px; border-radius: 4px; }
</style>
</head>
<body>
<h1>天気予報アプリ</h1>
<form action="/" method="post">
<input type="text" name="city" placeholder="都市名を入力 (例: London)">
<input type="submit" value="天気を調べる">
</form>
{% if weather_data %}
<div class="weather-info">
<h2>{{ weather_data.name }}の天気</h2>
<p>天気: {{ weather_data.weather[0].description }}</p>
<p>気温: {{ weather_data.main.temp }} °C</p>
<p>体感温度: {{ weather_data.main.feels_like }} °C</p>
<p>湿度: {{ weather_data.main.humidity }} %</p>
</div>
{% endif %}
</body>
</html>
form action="/" method="post"：ユーザーが入力した情報を、このアプリのトップページ(/)にpostという方法で送信するためのフォーム
input type="text" name="city"：ユーザーが都市名を入力するテキストボックス
(name="city"という名前が重要で、後でPython側がこの名前を使って入力内容を受け取る)
{% if weather_data %} や {{ weather_data.name }}：これらはFlaskのテンプレートエンジン（Jinja2）の特殊な記法
{% ... %}：if文のような制御文を書く場所
{{ ... }}: 変数を表示する場所
app.pyを修正してHTMLを表示させる
以下のコードが最終版です！
import requests
from flask import Flask, render_template, request
from config import API_KEY
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def home():
weather_data = None
if request.method == 'POST':
city_name = request.form.get('city')
api_url = f"http://api.openweathermap.org/data/2.5/weather?q={city_name}&appid={API_KEY}&units=metric&lang=ja"
response = requests.get(api_url)
if response.status_code == 200:
weather_data = response.json()
return render_template('index.html', weather_data=weather_data)
if __name__ == '__main__':
app.run(debug=True)
できた！！
こんな感じで殺風景ですが、できました！
試しに地点を入れてみましょう！
おー！！すごい！！
HTMLすごいなぁ...
これは色々バージョンアップできそうですね！
今度こそこれをアップデートしていく気持ちで
さらに勉強していきます！
まとめ
今回はPythonとHTMLを使用して天気予報Appを作ってみました！
これは色々アップデートができるような気がしています...
なんか便利機能を追加してみたい気がする...
思いついたらアップデートをしていこうと思います！
次はゲーム作りたいなぁ...
作り方調べてやってみます！！
それではまた次回！