皆さんはこのページを知っていますか？
https://stopcovid19.metro.tokyo.lg.jp/
この度、東京都は、新型コロナウイルス感染症対策に関する様々な情報やデータをワンストップで閲覧できるサイトを開設しました。＊prtimes 参照
このような目的で作成されたようです。
もちろん東京以外にもこのページから派生したものが多くあります。
https://github.com/tokyo-metropolitan-gov/covid19/blob/development/FORKED_SITES.md
リンク切れのサイトもありますが、まだ残っているサイトもあるみたいです。
しかし、中には最終更新日が去年のものや更新されていないものもあります。
そこで今回はこのステータスを可視化できるサイトを作ってみました https://status-check.komisan19.dev/
使った技術
- github actions
- Go
- Next.js + TypeScript + Chakra UI
- Vercel
図のとおりですが、github actions を使って Go のスクレイピングバッチを動かし取得できたデータを json 化、それを検知して build が走り Vercel に反映される流れをしています。
getServerSidePorps or getStaticProps
当初、ホスティングを Heroku で運用していました。
getServerSideProps を使って Heroku にアクセスしていましたが、
- アクセスしすぎて Heroku がダウンしてしまう点
- そこまで規模がでかくない
この２点の懸念から Heroku をやめて、Go でスクレイピングして Next で json を読み込む方法を取りました。
Go のクローリングについて
今回は Node ではなく、Go でクローリングしました。
使ったパッケージはこちらです。
https://github.com/PuerkitoBio/goquery
以下のようなコードで習得することができます。
res, err := http.Get("http://example")
if err != nil {
log.Fatal(err)
}
defer res.Body.Close()
doc, err := goquery.NewDocumentFromReader(res.Body)
if err != nil {
log.Fatal(err)
}
title := doc.Find("title").Text()jQuery のように指定してかけるのこのような感じに書くこともできます。
title := doc.Find(".date time").Text()まだ残っている課題
https://stopcovid19.metro.tokyo.lg.jp/
上記からそのまま派生したサイトは、更新データを取得できたのですが
少し class 名を変更してあるサイトでは取得できませんでした。
今後実装したいところ
- 取得できていない都道府県に対応
- UI の改善（特にスマホ）