🔋
新型コロナウイルス感染症対策サイトのステータスを確認できるサイトを作った話
皆さんはこのページを知っていますか？
この度、東京都は、新型コロナウイルス感染症対策に関する様々な情報やデータをワンストップで閲覧できるサイトを開設しました。
＊prtimes参照
このような目的で作成されたようです。
もちろん東京以外にもこのページから派生したものが多くあります。
https://github.com/tokyo-metropolitan-gov/covid19/blob/development/FORKED_SITES.md
リンク切れのサイトもありますが、まだ残っているサイトもあるみたいです。
しかし、中には最終更新日が去年のものや更新されていないものもあります。
そこで今回はこのステータスを可視化できるサイトを作ってみました
使った技術
- 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でクローリングしました。
使ったパッケージはこちらです。
以下のようなコードで習得することができます。
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の改善（特にスマホ）
Discussion