はじめに
僕、ちゃんプロっていうオンラインプログラミング講座の生徒なんですけど、そこでPythonやHTMLを一括管理できるサイトがあるのだけど、閲覧数とかハート数とかがサイトでしか見れないし、先生に聞いてみると…
とか言われたので、自分で作ってみようと思います。
って言っても…
どうすればわかんなかったので、
ほとんどchatgptにまかせました。
目標
今回は、上のメールのように、pico wなどで、PCを使わずに、管理することです。また、どれほど、僕のプログラムが閲覧されているかを、見たいから作ります。
どこで作ったらいい？
まずAIで聞いたら、よくわからないサイト出されまくってやってみたけど、全部有料、制限があるのだが…
chatgpt聞くと、APIはいつアクセスされるかわからないから、常にサーバを動かさないといけないから、無料枠でも制限とかかかるらしい。ま、普通に考えたらそうか、当たり前か。
探してもいいの見つからんので、信頼性が高い、なんで無料かわからない便利なアプリ、GitHabを使いました。APIではないのですが、GitHabほどよく知っているアプリはないから、定期実行でやる。
スクレイピングするサイトについて
スクレイピングするのは
上のサイトです。僕の実際に共有したプログラムです。
ちなみにちゃんプロとは、小学3年生から中学3年生を対象としたオンラインプログラミングができ、主にPythonを学ぶことができるオンラインプログラミング講座です。(詳細:https://chanpro.jp/)
まず先生にシステム的な話を聞いて、それをもとに作ってみるつもりでした。そして、ログインしないとアクセスできないといわれたので、アクセスするプログラムを作ろうとしましたが、知識が少ないからか、全然できずに困っていたところ、いつものと違うPCで開いてみると、ログアウト状態でも、普通に開けて普通にログインしなくとも開けました（笑）
コード説明
使用ライブラリ
from playwright.sync_api import sync_playwright
import json
import re
Playwrightとは
Playwrightはブラウザ自動操作ライブラリです。
Python→Chrome起動→ページアクセス→HTML取得ができる。
ブラウザを起動する
with sync_playwright() as p:
browser = p.chromium.launch(
headless=True
)
page = browser.new_page()
ここでは裏側でChromeを起動しています。
headless=Trueなので画面は表示されません。
ページ読み込み
page.goto(
URL,
wait_until="domcontentloaded"
)
page.wait_for_timeout(8000)
指定URLへアクセスします。
最近のWebサイトはJavaScriptで後から表示されることが多いため待機プログラムが必要。
投稿カードを取得する
cards = container.locator(
"div.clickable-element"
).all()
HTML内から投稿一覧を探します。
文字を取り出す
text = card.inner_text()
例：
<h1>〇✕ゲーム</h1>
<p>154</p>
<p>623</p>
を下のように取り出せる
| 名前 | 値 |
|---|---|
| タイトル | 〇✕ゲーム |
| ハート数 | 154 |
| 閲覧数 | 623 |
不要な文字を削除する
skip = [
]
画面上には、
いろいろな不要な情報があります。
それを除外します。
でも、classで結構絞っているので、なくても動きます。もし、サイトの形が変わるかもしれないので、残してはいる。
数字を抽出
nums = re.findall(
r"\d+",
text
)
正規表現で数字だけ抜きます。
例：
| 名前 | 値 |
|---|---|
| タイトル | 〇✕ゲーム |
| ハート数 | 154 |
| 閲覧数 | 623 |
を、
{
"〇✕ゲーム",
154,
623
}
にします。
JSONデータ化
return {
"title": title,
"like": int(nums[0]),
"views": int(nums[1])
}
最終的に：
{
"title":"〇✕ゲーム",
"like":154,
"views":623
}
になります。
ファイル保存
with open(
"data.json",
"w",
encoding="utf-8"
)
取得結果を保存します。
完成したAPI：
{
"last_updated": "2026-06-27T00:02:08.167707+00:00",
"count":1,
"posts":[
{
"title":"〇✕ゲーム",
"like":154,
"views":623
}
]
}
今回のソースコード
まだ動いているなら、ここから見れます。
今回のソースコード↓
感想
pico wの液晶で表示させてみたが、公開量が多くて、重い。
公開するものを限定的にした方がよさそう。