新型コロナウイルス対策サイト（石川県版）を開発した学生の話

# 完成物
~~https://covid19-ishikawa.com/~~

# 自己紹介
こんにちは、東洋大学 情報連携学部 新４年になるものです。
![iniad.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/4c10bb2b-5021-38c0-e24d-5ce8da6a410e.jpeg)

まだまだひよっこ中のひよっこなので暖かい目で見ていただけると幸いです。（どMなので厳しいのでもOK!）
最近は、何かと大変ですね。僕も春休みに入りインターンも一時休業となりました。
給料がなくて悲しいのです、、、
もし、お仕事あれば連絡ください！！

# 開発の経緯
避難も兼ねて地元に石川県に帰ったわけですが、あらびっくりやることがございません。
なのでずっとゴロゴロ。。。
そんな日々を２週間続けてたある日、なにやら面白い活動が、、、
### 東京都 新型コロナウイルス対策サイトの話ですねー。
<img width="1440" alt="スクリーンショット 2020-03-28 4.44.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/877dbf16-0534-d452-27c4-3b24f205dd9e.png">

俺も作りたい！！
そう思いまして、作ることになりました。
クソな経緯でごめんなさい

# まずなにから？
どうやって作ろうか、、、考えました。
ソースコードを持って来れば行けそうですね！！

https://github.com/tokyo-metropolitan-gov/covid19

実は、貢献する方法も乗せて来れているんですねー。

https://qiita.com/FPC_COMMUNITY/items/b9cc072813dc2231b2b2

### じゃあ簡単じゃん！！！

実は、vueとかnuxtとかさっぱりなんですねー。
でも、とりあえず東京都の部分を全部石川県に置き換えますねー。
ogp？favicon？も初めて知ったのですが、adobeを使ってうまく石川県ようにしますねー。

# 割と簡単に置き換えられた
<img width="1440" alt="スクリーンショット 2020-03-28 4.44.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/ecf66338-0bab-b65f-ffd1-3d98f6a237cf.png">

なんだ！簡単じゃーん！！余裕余裕。。。。
肝心のデータがないじゃん！！
これほど準備も計画もなにも立てていないことを悔やんだことはありません。
どれどれ、石川県のコロナウイルスのデータはどこかな〜？？
ちゃんとあるじゃーん！！
ポチッと、、
<img width="1440" alt="スクリーンショット 2020-03-28 4.44.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/983006b5-9b94-07c1-2d12-bc9724969aa3.png">

https://www.pref.ishikawa.lg.jp/kansen/coronakennai.html

はーい！おっけー。なんらかのcsvとかexcelデータはないんだ。（悲）
それでも一応オープンデータ？！
大学で学んだことを生かして、、、

# しっかりスクレイピング
割とpythonならできると思っていたので、bs4とpandasでデータを整形しますねー。
まあこんな感じで書けましたわい。（冗長なコードがあったら教えて欲しいと甘えたい）

追記
当初の石川県ホームページと現在とで少しずつコロナ情報フォーマットが変わっていった。
そのため、幾度となく修正をした。
のちに、県の情シスより連絡がありフォーマットを統一してくれるということだったので
それ以降は問題なし。

https://github.com/Retsuki/covid19-ishikawa-scraper/tree/master/src


# いよいよデプロイ？
さてとどうすればあげられるのか？？
私はherokuしか使ったことのないものだったので、、、
んー、悩みました。

### そして見つけた一筋の光　〜netlifyとの出会い〜
![netlify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/91266a5e-4a19-ca1d-0e3a-3db28bd1406b.png)

https://tech.moyashidaisuke.com/entry/covid19-netlify
こんな簡単にできるの？！
すげー時代だなと感心しました。

# よっしゃー！公開できたぜ！(４月２３日のスクショ)
<img width="717" alt="スクリーンショット 2020-04-22 21.05.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/98506c3f-8285-f72f-cc83-d6f776a083bb.png">


https://covid19-ishikawa.com/
まあまあええやん！
しかし！！！ここでもう一つの問題が、、、
これってデータの更新は手動？？

~~いや、ちょっと待てちょっと待てお兄さん。。。
実は、インターン先でcronを使った経験があったので
すぐに察しましたよ！~~

# ~~さくらさんにサーバーを借りて、、、~~
![sakuracloud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/1460d1dc-6375-0dc0-f419-051d76316f2c.png)

~~一瞬でしたね。
さくらさんにメールをしたら迅速に対応してくださり
多分、サーバーの費用はかからないはず！
クラウドサーバーに仕掛けます。
シェルに実行コマンドを書いて~~

~~cronで定期実行~~

# Github Actionsでの自動更新に変更

内容は以下の長野県の記事を参考に、、、
https://qiita.com/wataruoguchi/items/0f69f72777237674074b

実際のコード
https://github.com/Retsuki/covid19-ishikawa-scraper

### 完成しましたね！！

# かかった日数
４日？
1日目：サイトを石川版に改良
２日目：データをスクレイピング
３日目：悲しいことがあって、、休んだ。
４日目：データ自動更新
　　　：Twitter apiで朝６時に状況ツイートしている。
５日目：石川県のコロナウイルスサイトの情報開示が変わったため、再度スクレイピングコードを修正
２０日目：netlifyにコロナ対策サイトとしてサービスが無制限使用できるように申請（当日に無制限となる）
２０日目：本番用デプロイ
２１日目：google search consoleでurl登録
２２日目：ドメイン取得, netlifyでドメイン変更
２４日目：Github actionsにて自動更新
２４日目：ロゴデザインの変更
２４日目：サイトマップを作成, search consoleで送信（SEO対策）
２５日目：石川県コロナのニュースを表示（自動更新）
２５日目：居住地別の感染者数グラフを追加
　　　
# 取り組んでみて
非常に楽しかったよ！！
ほぼほぼパクリだけど、東京都を作った人たちは本当に偉大ですよ。
全部その人たちのおかげでできましたから。
今年は「達成」が目標の僕だったので
実は、大変嬉しい日々でした。

# 工夫した点
#### スクレイピング
当初より元サイトの石川県ホームページのフォーマットが少しずつ変わっていたりと
統一性がなかったので、都度修正をして汎用性を高めていった。

#### Twitterで自動ツイート
地元の友達などはSNSの方が利用していたので
ツイッターにて朝６時に自動ツイートするようにした。

#### 県内コロナニュースを上位６件のリンクも公開するように
元サイトの更新がニュースよりも遅いので、
それであれば上位６件の最新ニュースを見せた方がいいと考えた。

#### 居住地別の感染者数棒グラフ
元サイトの石川県のホームページではtableとして公開してある。
<img width="235" alt="スクリーンショット 2020-04-22 21.06.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/2d766713-2002-556a-73c7-7cd00f6d8225.png">

<img width="575" alt="スクリーンショット 2020-04-22 23.01.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201115/74aa41d7-6a57-f04d-f5c8-6d41dbdcb35e.png">


しかし、１９の市区町村があるため見にくいと感じた。
また知り合いに聞くと、感染者が確認されていない市区町村もあったため
どのくらい自分たちが外出自粛をすれば良いかの目安がわからなかったと言っていた。
なので、棒グラフにすることで自分の地域の感染者情報を一目でわかるようにした。


# 日本へ
頑張ろうとは言いません。
困っている人がいたら助ける。それで少しは平和になるんじゃないかな。
世界に平和を祈って、、、
we can do it!!!

~~# 石川県コロナアカウント~~
~~https://twitter.com/Ishikawa_Covid~~



# お世話になったサイトたち
[東京都新型コロナウイルス対策サイト]
https://stopcovid19.metro.tokyo.lg.jp/
[東京都新型コロナウイルス感染症対策サイトをforkしてnetlifyでdev環境を立ち上げる手順]
https://tech.moyashidaisuke.com/entry/covid19-netlify
[新型コロナウイルス感染症の県内の患者発生状況]
https://www.pref.ishikawa.lg.jp/kansen/coronakennai.html
[さくらクラウド]
https://cloud.sakura.ad.jp/
[我が学部]
https://www.iniad.org/