🤖
browser-use のブラウザ操作でYahoo天気から対象地域の天気予報を取得する(環境構築後～)
はじめに
この記事では、Pythonライブラリのbrowser-useを用いて、Yahoo天気から都市の天気予報を取得する方法を解説します。
ブラウザ操作を自動化できるアプリケーションbrowser-useを使用すると、手動で行っていたWebスクレイピングが簡単に実現できます。
※環境構築の作業は割愛し、コードを作るところからの流れになります。
コード概要
今回のコードは、以下のようなステップで構成されます。
- Yahoo天気のトップページにアクセス。
- 検索ボックスに地域名を入力し、検索ボタンをクリック。
- 検索結果ページから天気情報を抽出。
- 抽出した情報を出力。
コードの詳細は以下に記載します。
実装コード(プロンプトの工夫は特にしていません)
以下が実装コードです。
browser-useの機能をまだ熟知できていないのでファイル出力の精度は改善の余地ありです。
import os
import sys
sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
import asyncio
from langchain_openai import ChatOpenAI
from browser_use.controller.service import Controller
from browser_use import Agent
import datetime
controller = Controller()
@controller.registry.action('output text data')
async def save_result(filename: str = "weather.txt", text: str = "") -> str:
with open(filename, "w") as f:
f.write(text)
return f"Save to {filename}"
async def main():
global agent
# NOTE: captchas are hard. For this example it works. But e.g. for iframes it does not.
# for this example it helps to zoom in.
llm = ChatOpenAI(model='gpt-4o')
today = datetime.date.today()
tomorrow = today + datetime.timedelta(days=1)
task = """
1. 'Yahoo 天気 {target}'で検索
2. 表示される{today}、{tomorrow}のテーブルに表示されている内容を絵文字付きのテキストに変換しweather_resultとして変数に保持。(ex: XX月YY日: ☀️/🌩️ ↑aa℃ / ↓bb℃ ☔cc%)
3. 表示されるweekのテーブルに表示されている内容全てを絵文字付きのテキストに変換しweather_resultに追加。
4. テキストデータをテキストファイルに出力。
"""
target = sys.argv[1]
agent = Agent(
task=task.format(target=target, today=today, tomorrow=tomorrow),
controller=controller,
llm=llm,
)
result = await agent.run()
print(result)
if __name__ == '__main__':
asyncio.run(main())
実行
神戸の街が好きなので神戸の天気を調べてみます。
python get_weather.py 神戸
処理中の画面と出力内容
実行直後以下のような画面が表示されるので、少しずつ画面が移り変わるのを眺めます。
ターミナルの出力内容
INFO [browser_use] BrowserUse logging setup complete with level info
INFO [root] Anonymized telemetry enabled. See https://github.com/gregpr07/browser-use for more information.
INFO [agent] 🚀 Starting task:
1. 'Yahoo 天気 神戸'で検索
2. 表示される2024-12-26、2024-12-27のテーブルに表示されている内容を絵文字付きのテキストに変換しweather_resultとして変数に保持。(ex: XX月YY日: ☀️/🌩️ ↑aa℃ / ↓bb℃ ☔cc%)
3. 表示されるweekのテーブルに表示されている内容全てを絵文字付きのテキストに変換しweather_resultに追加。
4. テキストデータをテキストファイルに出力。
INFO [agent]
📍 Step 1
INFO [agent] 🤷 Eval: Unknown - The starting point is a blank page, so no previous actions to evaluate.
INFO [agent] 🧠 Memory: Need to search for 'Yahoo 天気 神戸' and extract weather information for 2024-12-26 and 2024-12-27.
INFO [agent] 🎯 Next goal: Perform a Google search for 'Yahoo 天気 神戸' to find the relevant weather information.
INFO [agent] 🛠️ Action 1/1: {"search_google":{"query":"Yahoo 天気 神戸"}}
INFO [controller] 🔍 Searched for "Yahoo 天気 神戸" in Google
INFO [agent]
📍 Step 2
INFO [agent] 👍 Eval: Success - The search for 'Yahoo 天気 神戸' was executed successfully.
INFO [agent] 🧠 Memory: Locate and access the Yahoo weather page for Kobe to extract the required weather information.
INFO [agent] 🎯 Next goal: Click on the link for '南部（神戸）の天気 - Yahoo!天気・災害' to access detailed weather information.
INFO [agent] 🛠️ Action 1/1: {"click_element":{"index":18}}
INFO [controller] 🖱️ Clicked index 18
INFO [agent]
📍 Step 3
INFO [agent] 👍 Eval: Success - Accessed the Yahoo weather page for Kobe successfully.
INFO [agent] 🧠 Memory: Extract weather data for 2024-12-26 and 2024-12-27, and the weekly forecast, then format with emojis.
INFO [agent] 🎯 Next goal: Extract and format the weather data for 2024-12-26 and 2024-12-27, and the weekly forecast.
INFO [agent] 🛠️ Action 1/1: {"save_result":{"filename":"weather.txt","text":"12月26日: ☀️ ↑13℃ / ↓7℃ ☔0%\n12月27日: 🌤️ ↑10℃ / ↓4℃ ☔10%\n12月28日: 🌤️ ↑9℃ / ↓3℃ ☔30%\n12月29日: 🌤️ ↑10℃ / ↓2℃ ☔0%\n12月30日: ⛅ ↑11℃ / ↓3℃ ☔10%\n12月31日: ⛅ ↑12℃ / ↓5℃ ☔20%\n1月1日: 🌤️ ↑10℃ / ↓4℃ ☔0%\n1月2日: 🌤️ ↑10℃ / ↓3℃ ☔10%"}}
INFO [agent]
📍 Step 4
INFO [agent] ⚠️ Eval: Failed - The previous attempt to save the data was executed without extracting data from the visible content.
INFO [agent] 🧠 Memory: Extract weather data for 2024-12-26 and 2024-12-27, and the weekly forecast, format with emojis, and then save to a file.
INFO [agent] 🎯 Next goal: Extract and format the detailed weather data for the specified dates and the weekly forecast from the page content.
INFO [agent] 🛠️ Action 1/1: {"save_result":{"filename":"weather.txt","text":"12月26日: ☀️ 13℃ / 7℃ ☔0%\n12月27日: 🌤️ 10℃ / 4℃ ☔10%\n12月28日: 🌤️ 9℃ / 3℃ ☔30%\n12月29日: 🌤️ 10℃ / 2℃ ☔0%\n12月30日: ⛅ 11℃ / 3℃ ☔10%\n12月31日: ⛅ 12℃ / 5℃ ☔20%\n1月1日: 🌤️ 10℃ / 4℃ ☔0%\n1月2日: 🌤️ 10℃ / 3℃ ☔10%"}}
INFO [agent]
📍 Step 5
INFO [agent] 👍 Eval: Success - Weather data has been extracted and saved successfully.
INFO [agent] 🧠 Memory: The extracted weather data for 2024-12-26 and 2024-12-27, as well as the weekly forecast, is saved in the file.
INFO [agent] 🎯 Next goal: Ensure the text data is correctly formatted and saved in 'weather.txt'.
INFO [agent] 🛠️ Action 1/1: {"done":{"text":"Weather data extracted and saved in 'weather.txt' with the following content:\n\n12月26日: ☀️ 13℃ / 7℃ ☔0%\n12月27日: 🌤️ 10℃ / 4℃ ☔10%\n12月28日: 🌤️ 9℃ / 3℃ ☔30%\n12月29日: 🌤️ 10℃ / 2℃ ☔0%\n12月30日: ⛅ 11℃ / 3℃ ☔10%\n12月31日: ⛅ 12℃ / 5℃ ☔20%\n1月1日: 🌤️ 10℃ / 4℃ ☔0%\n1月2日: 🌤️ 10℃ / 3℃ ☔10%"}}
INFO [agent] 📄 Result: Weather data extracted and saved in 'weather.txt' with the following content:
12月26日: ☀️ 13℃ / 7℃ ☔0%
12月27日: 🌤️ 10℃ / 4℃ ☔10%
12月28日: 🌤️ 9℃ / 3℃ ☔30%
12月29日: 🌤️ 10℃ / 2℃ ☔0%
12月30日: ⛅ 11℃ / 3℃ ☔10%
12月31日: ⛅ 12℃ / 5℃ ☔20%
1月1日: 🌤️ 10℃ / 4℃ ☔0%
1月2日: 🌤️ 10℃ / 3℃ ☔10%
INFO [agent] ✅ Task completed successfully
AgentHistoryList(all_results=[ActionResult(is_done=False, extracted_content='🔍 Searched for "Yahoo 天気 神戸" in Google', error=None, include_in_memory=True), ActionResult(is_done=False, extracted_content='🖱️ Clicked index 18', error=None, include_in_memory=True), ActionResult(is_done=False, extracted_content='Save to weather.txt', error=None, include_in_memory=False), ActionResult(is_done=False, extracted_content='Save to weather.txt', error=None, include_in_memory=False), ActionResult(is_done=True, extracted_content="Weather data extracted and saved in 'weather.txt' with the following content:\n\n12月26日: ☀️ 13℃ / 7℃ ☔0%\n12月27日: 🌤️ 10℃ / 4℃ ☔10%\n12月28日: 🌤️ 9℃ / 3℃ ☔30%\n12月29日: 🌤️ 10℃ / 2℃ ☔0%\n12月30日: ⛅ 11℃ / 3℃ ☔10%\n12月31日: ⛅ 12℃ / 5℃ ☔20%\n1月1日: 🌤️ 10℃ / 4℃ ☔0%\n1月2日: 🌤️ 10℃ / 3℃ ☔10%", error=None, include_in_memory=False)], all_model_outputs=[{'search_google': {'query': 'Yahoo 天気 神戸'}}, {'click_element': {'index': 18}}, {'save_result': {'filename': 'weather.txt', 'text': '12月26日: ☀️ ↑13℃ / ↓7℃ ☔0%\n12月27日: 🌤️ ↑10℃ / ↓4℃ ☔10%\n12月28日: 🌤️ ↑9℃ / ↓3℃ ☔30%\n12月29日: 🌤️ ↑10℃ / ↓2℃ ☔0%\n12月30日: ⛅ ↑11℃ / ↓3℃ ☔10%\n12月31日: ⛅ ↑12℃ / ↓5℃ ☔20%\n1月1日: 🌤️ ↑10℃ / ↓4℃ ☔0%\n1月2日: 🌤️ ↑10℃ / ↓3℃ ☔10%'}}, {'save_result': {'filename': 'weather.txt', 'text': '12月26日: ☀️ 13℃ / 7℃ ☔0%\n12月27日: 🌤️ 10℃ / 4℃ ☔10%\n12月28日: 🌤️ 9℃ / 3℃ ☔30%\n12月29日: 🌤️ 10℃ / 2℃ ☔0%\n12月30日: ⛅ 11℃ / 3℃ ☔10%\n12月31日: ⛅ 12℃ / 5℃ ☔20%\n1月1日: 🌤️ 10℃ / 4℃ ☔0%\n1月2日: 🌤️ 10℃ / 3℃ ☔10%'}}, {'done': {'text': "Weather data extracted and saved in 'weather.txt' with the following content:\n\n12月26日: ☀️ 13℃ / 7℃ ☔0%\n12月27日: 🌤️ 10℃ / 4℃ ☔10%\n12月28日: 🌤️ 9℃ / 3℃ ☔30%\n12月29日: 🌤️ 10℃ / 2℃ ☔0%\n12月30日: ⛅ 11℃ / 3℃ ☔10%\n12月31日: ⛅ 12℃ / 5℃ ☔20%\n1月1日: 🌤️ 10℃ / 4℃ ☔0%\n1月2日: 🌤️ 10℃ / 3℃ ☔10%"}}])
出力箇所に絵文字が適度に用いられているので、
その時点での実行内容がわかりやすい設計になっていますね。
ちなみに👆️は.envのBROWSER_USE_LOGGING_LEVELをinfoにした時の出力結果です。
処理内容を詳しく見たいときはdebugといれるともう少し詳しい内容が見られます。
出力結果
12月26日: ☀️ 13℃ / 7℃ ☔0%
12月27日: 🌤️ 10℃ / 4℃ ☔10%
12月28日: 🌤️ 9℃ / 3℃ ☔30%
12月29日: 🌤️ 10℃ / 2℃ ☔0%
12月30日: ⛅ 11℃ / 3℃ ☔10%
12月31日: ⛅ 12℃ / 5℃ ☔20%
1月1日: 🌤️ 10℃ / 4℃ ☔0%
1月2日: 🌤️ 10℃ / 3℃ ☔10%
taskの部分を工夫していないことで時々おかしな出力になることもあります。
この辺りはまだまだ工夫の余地があるので少しずつ改良を重ねていきたいと思います。
閲覧ありがとうございました。
以上
Discussion