클로드(Claude)로 한정판 거래 플랫폼, 크림 (Kream : https://kream.co.kr)의 실시간 차트를 크롤링하는 예제를 준비했습니다.
1. 클로드(Claude)란 무엇인가?
Claude(클로드)は、OpenAIの従業員たちが設立し、Googleの強力なサポートを受けている人工知能スタートアップAnthropicのAIチャットボットサービスです。
クロード2は2023年7月11日に発表され、約3か月後の10月17日に韓国でも発売されました。
クロードは韓国語チャットはもちろん、最大10MBのPDF、TXT、CSVファイルを最大5つまで添付できる機能を提供します。プロンプトでは10万個のトークンをサポートし、GPT-4（最大32,768個）よりもはるかに多くのトークンを入力できる特徴があります。
2. ClaudeでHTML解析する
今回はKreamのリアルタイムチャートにある価格変動情報をクローリングしてみましょう。
商品リストを持つ<ul>タグのHTMLをコピーして解析をリクエストしてみます。
以前のChatGPTで完成するクローリングボットの投稿では、GPT-4はトークン数の問題でした。GPT-4でこのHTMLを解析できるかどうか見てみましょう。
やはりトークン数制限により処理できません。
クロードはどうでしょうか？
まず、クロードはHTMLをtxtファイルとして受け取って解析します。
解析結果を見ると、商品情報だけでなくHTMLタグ情報、どのライブラリを使用したかまで分析してくれます。分析結果をもとにどの情報を収集できるか確認できます。
3. ClaudeでWebデータを抽出する
さて、本格的にデータ抽出のためのコードをクロードに質問してみましょう。
3.1. プロンプトの作成
以下のようにプロンプトを入力しました。
셀레니움으로 웹 페이지 데이터를 추출하고자 해. 언어는 Python을 사용해줘.
위 HTML에서 상품 이미지 URL, 상품명, 모델 번호, 사이즈, 가격, 가격 변동, 가격 변동 비율을 가져와줘.
위 항목은 모두 필수 데이터이므로 해당 데이터가 없다면 나에게 어떤 데이터를 찾을 수 없는지 오류 메시지를 전달해야 해.
모든 HTML element는 xpath로 찾아줘.
위 조건을 가지고 JSON 형식으로 데이터를 출력해줘.
3.2. 第1の応答
上の画像からわかるように、セレニウムでxpathを見つけてデータを取得するコードを書いてくれます。
しかし、最新バージョンのセレニウムはfind_element_by_xpathをサポートしていないため、次のように修正を要求しました。
내 셀레니움 버전에서는 `find_element_by_xpath`를 사용할 수 없어.
`By`를 import해서 `find_element`로 요소를 찾도록 수정해줘.
3.3. 第2の応答
find_elementとByを使用するように修正されました。
次は、クロードが書いてくれたコード全体です。
from selenium import webdriver
from selenium.webdriver.common.by import By
import json
driver = webdriver.Chrome()
driver.get("<https://www.example.com>")
products = []
items = driver.find_elements(By.XPATH, "//ul[@class='trading-items-container']/li")
for item in items:
try:
img_url = item.find_element(By.XPATH, ".//picture/img").get_attribute("src")
except:
img_url = "Image URL not found"
try:
name = item.find_element(By.XPATH, ".//div[contains(@class,'name')]").text
except:
name = "Name not found"
try:
code = item.find_element(By.XPATH, ".//div[contains(@class,'style-code')]").text
except:
code = "Code not found"
try:
size = item.find_element(By.XPATH, ".//div[contains(@class,'option')]").text
except:
size = "Size not found"
try:
price = item.find_element(By.XPATH, ".//div[contains(@class,'current-price')]").text
except:
price = "Price not found"
try:
change = item.find_element(By.XPATH, ".//div[contains(@class,'change-price')]/span").text
except:
change = "Price change not found"
try:
change_pct = item.find_element(By.XPATH, ".//div[contains(@class,'change-percent')]").text.split()[0]
except:
change_pct = "Change percentage not found"
product = {
"image": img_url,
"name": name,
"code": code,
"size": size,
"price": price,
"price_change": change,
"price_change_pct": change_pct
}
products.append(product)
print(json.dumps(products, indent=2))
driver.quit()
このコードを見ると、例外処理からjson形式の出力まで、プロンプトの要件をすべて満たしていることがわかります。
3.4. 第1の修正
ここで、Chromeドライバーの設定だけを変更すればよさそうです。
パッケージのimportからChromeブラウザを起動するまでのコードを次のように変更しました。
import json
from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
url = "<https://kream.co.kr/trading-chart>"
driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))
driver.get(url)
3.5. 第1の実行
さて、準備が整ったので実行してみましょう。
[
{
"image": "<https://kream-phinf.pstatic.net/MjAyMzA0MDNfMTE1/MDAxNjgwNDkxOTQ4NjQ0.W-mLA596MM6US4gSI6jNsJ9NhCbIeUR5mg0qxQ6p_AUg.Ec1REyClrXQ38dSM40zZhVidrYf0gxBsnc7C1SqK71kg.JPEG/a_e78ed04e3a1948a09a7b26bff5b27634.jpg?type=m>",
"name": "Nike x Peaceminusone LS T-Shirt Black (DR0098-010)",
"code": "DR0098-010",
"size": "M",
"price": "152,000",
"price_change": "\u25b2",
"price_change_pct": "+1.3%"
},
{
"image": "<https://kream-phinf.pstatic.net/MjAyMTAxMjBfNTAg/MDAxNjExMTIyMzAzMTY2.0QpenidH075iEa1_gVzZTKOxJPiB8W6KyX4YmiELcfIg.ydUN0Aq9T8nWA5frqrsbwnbFfsNMNHDx6ezU5WxGAfQg.PNG/p_28c110281b3f4e109e30a6247d503e2a.png?type=m>",
"name": "Nike Dunk Low Pro Premium Medium Curry",
"code": "DD1390-100",
"size": "255",
"price": "107,000",
"price_change": "\u25b2",
"price_change_pct": "+0.9%"
},
{
"image": "<https://kream-phinf.pstatic.net/MjAyMTAzMDVfMjQz/MDAxNjE0OTE0NzIzMTQ4.tsuFUJtHGm4g4KE5EDikVMScORptOQqIB7afi1Nz2Qwg.sftz3YQOuw48xpNSJa1tV4uEsz5iU4mjIvpllgHWEn8g.PNG/p_8f7b72adbc924b5bbf7c670d55865e6b.png?type=m>",
"name": "Adidas Samba OG Cloud White",
"code": "B75806",
"size": "215",
"price": "130,000",
"price_change": "\u25b2",
"price_change_pct": "+0.8%"
}
]
<div data-v-4f90d828="" class="change-price up" style="color: rgb(241, 87, 70);">
<span data-v-4f90d828="" class="arrow">▲</span>
<span data-v-4f90d828="">27,000</span>
</div>
ほぼすべての情報を正常に取得しましたが、上記のHTML構造のために▲に対応する\\u25b2文字だけを取得し、変動額は取得できなかったようです。
3.6. 第2の修正
変動額も取得できるように次のように修正します:
try:
change = item.find_element(By.XPATH, ".//div[contains(@class,'change-price')]").text.replace("\u25bc", "-").replace("\u25b2", "+")
except:
change = "Price change not found"
3.7. 第2の実行
再度実行した結果です:
[
{
"image": "<https://kream-phinf.pstatic.net/MjAyMTA3MzBfNTYg/MDAxNjI3NjI3OTg5ODM5.p-9pRcc3cQ_eaTl7UZdCmPJz8Astbjg2N6_HkEhLrHsg.ekjxXxJ-kcnoaZC6gCQH_-KBCUJORPTRC791UZ_C3ukg.PNG/p_e1ef5e002eda49adb7f5d0c8a41f798d.png?type=m>",
"name": "Jordan 1 x Travis Scott x Fragment Retro Low OG SP Military Blue",
"code": "DM7866-140",
"size": "260",
"price": "1,875,000",
"price_change": "+27,000",
"price_change_pct": "+1.5%"
},
{
"image": "<https://kream-phinf.pstatic.net/MjAyMzA0MDNfMTE1/MDAxNjgwNDkxOTQ4NjQ0.W-mLA596MM6US4gSI6jNsJ9NhCbIeUR5mg0qxQ6p_AUg.Ec1REyClrXQ38dSM40zZhVidrYf0gxBsnc7C1SqK71kg.JPEG/a_e78ed04e3a1948a09a7b26bff5b27634.jpg?type=m>",
"name": "Nike x Peaceminusone LS T-Shirt Black (DR0098-010)",
"code": "DR0098-010",
"size": "M",
"price": "152,000",
"price_change": "+2,000",
"price_change_pct": "+1.3%"
},
{
"image": "<https://kream-phinf.pstatic.net/MjAyMjEwMTJfMjQ3/MDAxNjY1NTYyODI3ODMw.YeSueVotfq5mgVXlQIVeV-uL_Q2otMk6nkvlbG2rHncg.vMJPWgosd9OjOn-s75jjEnjk44sB1gNqftQSN8CEkTAg.PNG/a_b2325461062d47e2887459a3e6928d88.png?type=m>",
"name": "Adidas Puffylette Core Black",
"code": "GY4559",
"size": "265",
"price": "78,000",
"price_change": "+1,000",
"price_change_pct": "+1.3%"
}
]
これで変動額とその方向も正しく表示されるようです。
4. 結論
このように、クロードを活用してKreamのリアルタイムチャートクローラーを作成してみました。
クロードには最大10MBのファイルを添付できるため、長いHTMLも分析できました。
ChatGPTにクローラーを作成してもらうにはHTMLのサイズを縮小する必要がありますが、クロードは長いHTMLも問題なく処理する様子を見せてくれました。
回答速度はChatGPTに比べて遅いですが、回答に不満はありませんでした。
結論として、Webクローラーを作成するには、ChatGPTよりもクロードの方がより有用だと考えられます。
この記事も一緒に読んでみてください:
データ収集、今度は自動化してください
コーディングなしで5分で開始・5,000以上のウェブサイトクローリング体験
