大学生が山口県版新型コロナウイルス対策サイトの立ち上げ, 運用, 県との交渉をしてみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289151/f3a12286-7cdf-4aa6-f955-f60d2b4d7e3d.png)

[山口県公認　新型コロナウイルス感染症対策サイト](https://stopcovid19.codeforyamaguchi.org/)

# はじめに

こんにちは。
[にっし](https://twitter.com/nsd244)です。
[東京都がOSSで開発した新型コロナウイルス感染症対策サイト](https://stopcovid19.metro.tokyo.lg.jp/)の[山口県版](https://stopcovid19.codeforyamaguchi.org/)を制作しました。

3/19リリース時点では非公式でしたが、4/24に山口県公認となりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">すでにご利用中の方もいらっしゃるかと思いますが、山口県内外の有志の方が開設・運営を行う、新型コロナウイルス感染症対策サイトがございます。<br>データが視覚的に整理され、県内の現状把握に大変役立ちます。ぜひご活用ください。<a href="https://t.co/XdJjd42jzw">https://t.co/XdJjd42jzw</a><a href="https://twitter.com/hashtag/%E6%96%B0%E5%9E%8B%E3%82%B3%E3%83%AD%E3%83%8A%E3%82%A6%E3%82%A4%E3%83%AB%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#新型コロナウイルス</a> <a href="https://twitter.com/hashtag/%E5%B1%B1%E5%8F%A3%E7%9C%8C?src=hash&amp;ref_src=twsrc%5Etfw">#山口県</a> <a href="https://twitter.com/hashtag/yamaguchi?src=hash&amp;ref_src=twsrc%5Etfw">#yamaguchi</a></p>&mdash; 山口県新型コロナウイルス感染症対策本部 (@CoronaYamaguchi) <a href="https://twitter.com/CoronaYamaguchi/status/1253551350564057088?ref_src=twsrc%5Etfw">April 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【ご報告】<br>オープンデータ化 &amp; 山口県公認 いただきました！！</p>&mdash; NSD (@nsd244) <a href="https://twitter.com/nsd244/status/1253556438598692871?ref_src=twsrc%5Etfw">April 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


この記事では、山口県コロナウイルス感染症対策サイト開発の経緯などについて語ろうと思います。

# 開発決意〜リリースまでの流れ

開発しようと決意したのが3/15で、実際に開発を始めたのが3/16、リリース日は3/19なので約4日でリリースまで行いました。　
ゆるゆる開発したので、他の県のサイトなどと比較すると早い方ではないと思います。（1日でリリースまで行っているサイトもあるので）


## 開発決意

3/15、いつものようにtwitterを徘徊していると、以下のtweetを見つけました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">東京都のコロナウィルス対策サイト、ハッカソンを元に日本のエンジニアたちが作ったものが東京都に採用され、そのソースは他の自治体にも提供されている。<br>多言語対応のうち繁体字は台湾のIT大臣が提供してくれた。<br>世界に誇るケースなんじゃないかなあ。<a href="https://t.co/WZtFMMxP9p">https://t.co/WZtFMMxP9p</a></p>&mdash; TAKASU@Nico-Tech Shenzhen ニコ技深圳コミュニティ (@tks) <a href="https://twitter.com/tks/status/1236683057207230464?ref_src=twsrc%5Etfw">March 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

「東京都がOSSで開発して派生サイトが開発されているらしい、、、」ということで他の県の派生サイトを調べてみると、三重県版は高専生たちが開発していることがわかりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ついに！！！<br>「三重県版」新型コロナウイルス感染症 対策サイト立ち上げ完了致しました！！<br>県内の高専生4人で開発しましたが、起案からなんと1日でローンチすることができました。本当に、開発メンバーに感謝です。<a href="https://t.co/Qti5m92HPd">https://t.co/Qti5m92HPd</a></p>&mdash; フレキシブル基板😱 (@FPC_COMMUNITY) <a href="https://twitter.com/FPC_COMMUNITY/status/1238416100968132608?ref_src=twsrc%5Etfw">March 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<b>"僕も元高専生として負けてられないな"</b> , <b>”多くの人が利用するOSSの開発に携わりたい”</b> , <b>”つよつよな人たちが開発しているプロジェクトに参加して圧倒的に成長したい”</b> という強い気持ちから、「とりあえずやろう！！！」と思い実現を決心しました。

まだ誰も山口県版を制作してないことを確認（2020/3/15時点）し、決意表明tweetをしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">山口県版コロナウイルス対策サイト作るかあ</p>&mdash; NSD (@nsd244) <a href="https://twitter.com/nsd244/status/1238843864837840896?ref_src=twsrc%5Etfw">March 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

また、code for japanのslackワークスペースに入り、山口県版の開発を始めることを宣言しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289151/76f2d0db-5979-a51c-a98a-913354c55072.png)

以上が、開発決意までの流れになります。

<b>自分は「とりあえず行動しよう」が合言葉でチャレンジ精神が豊富な人間</b>なので、勢い半分で開発を始めました。

## 2020/3/15

この日は、slackワークスペースの作成など開発する前の準備作業を行いました。

* [山口県版のワークスペース](https://join.slack.com/t/covid19-yamaguchi/shared_invite/zt-dpiqhr12-LgiU8gAKZ_02Alkc5BoV8w)の作成（[nsd](https://github.com/nishidayoshikatsu)）

* [東京都のリポジトリ](https://github.com/tokyo-metropolitan-gov/covid19)をforkして[山口県版のリポジトリ](https://github.com/nishidayoshikatsu/covid19-yamaguchi)を作成した（[nsd](https://github.com/nishidayoshikatsu)）

## 2020/3/16

この日は、東京都のリポジトリをながめてどのような議論をしているのか、システム構成はどのようになっているのか調査しました。

* [東京都のリポジトリ](https://github.com/tokyo-metropolitan-gov/covid19)のシステム構成の把握/理解（[nsd](https://github.com/nishidayoshikatsu)）

* ロゴの作成（[crispytaffyさん](https://github.com/crispytaffy)）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289151/a9216dcf-6d38-16b1-9837-8de39764899d.png)

## 2020/3/17

この日は、[code for japanの方が制作していただいた資料](https://hackmd.io/@homata/ryHz3P4BI#%E6%B4%BE%E7%94%9F%E7%89%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E3%81%BE%E3%81%9A%E3%80%81%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8%E3%83%AA%E3%82%B9%E3%83%88)をもとに山口県版への移行作業を進めました。

* [派生版を作るときにまず、やることリスト](https://hackmd.io/@homata/ryHz3P4BI#%E6%B4%BE%E7%94%9F%E7%89%88%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AB%E3%81%BE%E3%81%9A%E3%80%81%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8%E3%83%AA%E3%82%B9%E3%83%88)を見ながら、細かい設定の修正（[nsd](https://github.com/nishidayoshikatsu)）
* 山口県版で表示するデータの収集・反映1（[nsd](https://github.com/nishidayoshikatsu), [crispytaffyさん](https://github.com/crispytaffy)）
* プロモーション手段の提案/連絡（[crispytaffyさん](https://github.com/crispytaffy)）
* 山口県庁への連絡（「山口県公式ウェブサイト」へのリンク）（[crispytaffyさん](https://github.com/crispytaffy)）

## 2020/3/18

この日までで、フロントエンドのタスクはほぼ完了しました。

* 山口県版で表示するデータの収集・反映2（[nsd](https://github.com/nishidayoshikatsu)）
* データ自動更新スクリプトの作成1（[dream_expさん](https://github.com/dream-exp)）
* [facebookページ](https://www.facebook.com/stopcovid19yamaguchi/)の作成（[crispytaffyさん](https://github.com/crispytaffy)）
* サイトのテスト（[atososonさん](https://github.com/atososon)）
* さくらのクラウドの契約（無償提供）（[nsd](https://github.com/nishidayoshikatsu)）
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【新型コロナウイルス感染症対応支援】<br>さくらインターネットでは、新型コロナウイルス感染症に関する情報共有においてウェブサイトの構築などサーバーリソースを必要とされる方向けに、無料提供等の支援を行なっております。<br><br>例: <a href="https://t.co/Mc763heyIg">https://t.co/Mc763heyIg</a><br>(続く 1/2)</p>&mdash; さくらインターネット (@sakura_pr) <a href="https://twitter.com/sakura_pr/status/1238701617920147456?ref_src=twsrc%5Etfw">March 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

* さくらのクラウドの環境構築・本番サーバの立ち上げ1（[Tomitomiさん](https://github.com/Tomitomi1021), [nsd](https://github.com/nishidayoshikatsu))

## 2020/3/19

リリース後にhttps化の作業をするなど少々慌てる場面はありましたが、無事予定通りリリースを行うことができました。

* さくらのクラウドの環境構築・本番サーバの立ち上げ2（[Tomitomiさん](https://github.com/Tomitomi1021), [nsd](https://github.com/nishidayoshikatsu))
* Let's Encryptでhttps化（[Tomitomiさん](https://github.com/Tomitomi1021)）
* <b>[リリース](https://yamaguchi.stopcovid19.jp/)</b>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">約4日で、山口県版新型コロナウイルス感染症対策サイトのリリースまで持ってくることができました！<br><br>OSSに関わることができ、楽しかったです。<br><br>まだまだ改善点はあるため、<br>今後も開発を続けていきたいと思います！<a href="https://t.co/aDQH4vd1nf">https://t.co/aDQH4vd1nf</a></p>&mdash; NSD (@nsd244) <a href="https://twitter.com/nsd244/status/1240635431986716672?ref_src=twsrc%5Etfw">March 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

※ここにすべての方のお名前を載せることはできていませんが、制作に協力していただいた方、ありがとうございました！
※追加してほしいなどの要望がありましたら追加いたします

# 更新の完全自動化、オープンデータ化、公認化までの流れ

3/19のリリース時点では、データを完全に手作業で入力し更新していました。
リリース後は、運用コストをなるべく減らすため、更新の完全自動化を目標に作業を行いました。
更新の完全自動化を行うにあたって、[長野県版の開発者の記事](https://qiita.com/hisayan/items/3dc0dc3fa875d15dd680)を参考にしデータを外部ファイルから読み込むようにしました。

この時点ではオープンデータ化されていなかったので、新しくwebスクレイピング用のスクリプトを[dream_expさん](https://github.com/dream-exp)に作成していただきました。
しかし、スクレイピング先のサイトである山口県公式ページの一部削除やレイアウトの変更が不定期に行われ、そのたびに修正するという作業を行うことになってしまいました。

webスクレイピングでは運用コストが高いため、データを出している山口県庁の方にオープンデータ化の交渉をすることにしました。
（リリース直後に1度オープンデータ化の交渉を行いましたが、断られたためここでは別の部署の方に連絡を行いました）

[山口県 健康福祉部 厚政課](https://www.pref.yamaguchi.lg.jp/cms/a13200/index/)の方に連絡をとり、4/16に[山口県庁](https://goo.gl/maps/fiHrT4d26MCwqxyh7)に向かい詳細を直接お話をさせていただくことになりました。
この交渉には、[新型コロナウイルス感染症対策サイトのためのデータ公開支援](https://www.code4japan.org/activity/stopcovid19)の資料を利用させていただき進めました。
交渉の結果、[山口県オープンデータカタログサイト](https://yamaguchi-opendata.jp/ckan/organization/35000)に[オープンデータ](https://yamaguchi-opendata.jp/ckan/dataset/350001-covid19)を公開してもらえることが決定しました。
また、県庁の方の提案で、更新の完全自動化後に公認化をしていただけることになりました。

オープンデータはcsvデータで提供していただけるようになりました。
コロナサイトでは、jsonデータを読み込ませるようにしていたため、[csvデータをjsonデータに定期的に変換するためのリポジトリ](https://github.com/nishidayoshikatsu/covid19-yamaguchi-opendata)を作成しました。

以上の過程によって、4/19に<b>更新の完全自動化</b>、<b>オープンデータ化</b>、<b>県公認</b>の作業を完了することができました。

# 山口県版独自の実装

市区町村別陽性患者の累計データを以下のように地図形式で可視化しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289151/c67e842f-d2b9-23eb-90d7-38aba55c52a5.png)


本データの可視化を行う際に、3つの可視化手法を比較・検討いたしました。

1つ目は、地図形式です。本データにおけるこの手法の長所は、各市町村の位置関係が明快でわかりやすい点です。各市町村の位置関係を知識として持っておられる方であれば、すぐに知りたい市のデータを見つけることができます。短所は、各市町村ごとの面積が異なることによってデータの捉え方に影響が出るのではないかという点です。今回の場合ですと、山口市であれば面積が比較的面積が大きいですが、下松市であれば面積が小さい、全体でみると小さい市より大きい市が目立つため、面積が大きい市町村で感染者が多ければ、感染者が増えていると勘違いしてしまう人が増えてしまうかもしれません。また、市町村の数が多すぎると、一度にみることができる情報量が減ってしまうため見づらくなってしまう場合もあると考えています。

2つ目は、カラム地図形式（[参考](https://www.stopcovid19.jp/)）です。この手法の長所は、どの市町村も大きさを均一にすることで、地図形式のように、データを全体で見た時の捉え方の歪みがなくなる点です。短所としては、各市町村の位置がわかりずらくなってしまいすぐに知りたい市町村のデータを見つけ出せない点にあります。

3つ目は、地図上で感染者数をマルの大きさで表す形式（[参考](https://vdata.nikkei.com/newsgraphics/coronavirus-world-map/)）です。この手法の長所は、地図形式の長所を保ちつつ、地図形式の短所を克服している点にあります。一方、短所としては市町村データの大きさが小さすぎると他の市町村のデータと干渉してしまう可能性があるという点です。

以上の3つの可視化手法を本データにおいては検討いたしました。その結果、地図形式を採用いたしました。

理由といたしましては、本サイトは多くの山口県に関心がある方が閲覧しているため、各市町村の位置関係をわかりやすくしすぐにデータを見つけてもらえるようにしたほうがいいと思ったからです。

私自身、カラム地図を見た際に「僕の知りたい〇〇県はどこにあるんだ？」とデータの位置をすぐに見つけることができなかったことが体験としてあるため、カラム地図の採用は見送ることにしました。

地図上で感染者数をマルの大きさで表す形式では、面積が大きい市町村と小さい市町村の差が激しかったため、他の市町村データとの干渉が起こりやすいと考え、この手法も採用を見送ることにしました。
地図形式では、山口県は比較的市町村の数が少ないため、地図形式でも1度に十分な情報量を提供できると考えました。
最終的には、地図形式に各市町村名と感染者数の情報を追加したデータを可視化データとして提供しようと考えました。

可視化についての議論は今後も続けていくので、改善したほうが良いところなどあれば[issue](https://github.com/nishidayoshikatsu/covid19-yamaguchi/issues)を立ててくれるとありがたいです。


# 取材・報道

宇部日報の方では1面Topで掲載されました。

* 2020.03.21（土）宇部日報
[宇部日報](https://ubenippo.co.jp/2020/03/21/100888/)（[nsd](https://github.com/nishidayoshikatsu), [Tomitomiさん](https://github.com/Tomitomi1021), [atososonさん](https://github.com/atososon)）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289151/986d2ed5-3ca7-99de-ab49-f8324ec2e2f3.png)

* 2020.03.31（火）18:15～19:00放送　yab山口朝日放送　「Jチャンやまぐち」
　[「コロナ「より視覚的な理解を」山大生らがHP開発」（yab報道・YouTube）](https://www.youtube.com/watch?v=0LW0jWilTLA&feature=youtu.be)
* 2020.04.01（水）07:45～08:00放送　NHK山口　「おはよう山口」
　「新型コロナウイルス　感染状況まとめサイト　大学生が立上げ」
* 2020.04.01（水）12:15～12:20放送　NHK山口　「山口県のニュース」
　「新型コロナウイルス　感染状況まとめサイト　大学生が立上げ」
* 2020.04.01（水）18:10～19:00放送　NHK山口　「情報維新！やまぐち」
　「新型コロナウイルス　感染状況まとめサイト　大学生が立上げ」

* 2020.04.27（月）宇部日報
[宇部日報](https://ubenippo.co.jp/2020/04/27/105706/)（[nsd](https://github.com/nishidayoshikatsu), [Tomitomiさん](https://github.com/Tomitomi1021), [atososonさん](https://github.com/atososon)）

# 販促品の作成

制作サイトの認知度を向上させるために作成しました。
現在、山口県庁, 山口大学工学部などに掲示されています。

* [三角ポップ](https://drive.google.com/file/d/1DgRm_faMW33LQL8GHszvfVHCF2yzmTRt/view?usp=sharing)の作成（[crispytaffyさん](https://github.com/crispytaffy)）
* [ポスター](https://drive.google.com/file/d/1ifa83pT5IuHlCGgofh_HHM3Ip199Mi_n/view?usp=sharing)の作成（[crispytaffyさん](https://github.com/crispytaffy)）

# リンクをはっていただいたサイト（一部抜粋）

* [山口県公式ホームページ](https://www.pref.yamaguchi.lg.jp/cms/a10000/korona2020/202004240002.html)
* [山口県 新型コロナ関連情報 - Yahoo! JAPAN](https://hazard.yahoo.co.jp/article/covid19yamaguchi)
* [政府CIOポータル](https://cio.go.jp/node/2581)
* [StopCovid19全国版](https://stopcovid19.code4japan.org/)
* [ITライフハック](http://itlifehack.jp/archives/10206736.html)
* [ニコニコニュース](https://news.nicovideo.jp/watch/nw6890401)
* [窓の社](https://forest.watch.impress.co.jp/docs/serial/yajiuma/1244734.html)
* [山口大学　工学部　知能情報工学科](http://www.csse.yamaguchi-u.ac.jp/2020/03/20200323.html)
* [山口大学　工学部](http://www.eng.yamaguchi-u.ac.jp/42student/covid-19/links.html)
* [山口県感染症情報センター](http://kanpoken.pref.yamaguchi.lg.jp/jyoho/page5-7/page5-7-31.html)
* [山口県よろず支援拠点](https://y-yorozu.jp/corona/)
* [萩市インキュベーションセンター
山口大学サテライトラボ萩](https://r.goope.jp/hama-incu/info/3234769)
* [山口県オープンデータカタログサイト](https://yamaguchi-opendata.jp/www/contents/1596001304790/index.html)
* [山口県新型コロナウイルス感染症対策本部Twitterアカウント](https://twitter.com/CoronaYamaguchi)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">すでにご利用中の方もいらっしゃるかと思いますが、山口県内外の有志の方が開設・運営を行う、新型コロナウイルス感染症対策サイトがございます。<br>データが視覚的に整理され、県内の現状把握に大変役立ちます。ぜひご活用ください。<a href="https://t.co/XdJjd42jzw">https://t.co/XdJjd42jzw</a><a href="https://twitter.com/hashtag/%E6%96%B0%E5%9E%8B%E3%82%B3%E3%83%AD%E3%83%8A%E3%82%A6%E3%82%A4%E3%83%AB%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#新型コロナウイルス</a> <a href="https://twitter.com/hashtag/%E5%B1%B1%E5%8F%A3%E7%9C%8C?src=hash&amp;ref_src=twsrc%5Etfw">#山口県</a> <a href="https://twitter.com/hashtag/yamaguchi?src=hash&amp;ref_src=twsrc%5Etfw">#yamaguchi</a></p>&mdash; 山口県新型コロナウイルス感染症対策本部 (@CoronaYamaguchi) <a href="https://twitter.com/CoronaYamaguchi/status/1253551350564057088?ref_src=twsrc%5Etfw">April 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# まとめ

今回山口県版新型コロナウイルス対策サイトを無事立ち上げここまで運用してくることができたのは、東京都のOSSを開発してくださった方々を始め、[code for japan](https://www.code4japan.org/)の方々、サーバーを無償提供していただいた[さくらインターネット](https://www.sakura.ad.jp/)の方々、オープンデータ化の提案を受け入れていただいた山口県庁の方々、山口県版新型コロナウイルス感染症対策サイトに関わっていただいたすべての方々のおかげです。

今回の開発・運用を通して様々な知見を得ることができ、今まで「なんとなく開発」してきたことに対する反省点などを見つけることができました。
今後も様々なサービス開発に関わっていく予定なので、今後も技術力をより磨いていきたいです。