宮城県版非公式新型コロナウイルス感染症対策サイトを作った時の覚書

#宮城県版を作ってみました！
世界的にも話題になっている東京都新型コロナウイルス対策サイト。全国各地にクローンが出来てその数30以上！すごいですね〜。そのうちの宮城県版を作ったのでその時の覚書です。

宮城県版はこちら
https://miyagi.stopcovid19.jp/

##データについての注意事項
この新型コロナウイルス対策サイトのウリはグラフによって視覚化されてわかりやすいこと。これらグラフの中には見た目が似通っているものもあります。
<img width="1093" alt="スクリーンショット 2020-04-01 19.55.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/723e42a6-ccc4-0f9b-dc0c-9f86f1c42aa1.png">

ところがこの2つのデータは見た目はそっくりさんなのに内部の保持形式は全然違うんですよ！そんな訳で(？)、「このデータはこのファイルのここだよ〜」というのをまとめていきます。

###データはどこに？
GitHubからクローンしてきた中のこのdataフォルダの中にあるdata.jsonファイルが新型コロナウイルス感染症対策サイトのデータファイルです。
<img width="618" alt="スクリーンショット 2020-04-01 20.06.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/58466068-7d36-c116-fac0-a4797d149b11.png">
データは複数種類ありますがデータファイルはこれのみ。
なので複数種類あるグラフのデータが「このファイルの中のどこにあるか？」がこれから説明していくことです。

###検査陽性者の状況
新型コロナウイルス感染症対策サイトの顔ともなっているグラフ。
<img width="533" alt="スクリーンショット 2020-04-01 21.17.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/8c7eef09-efc1-a384-71d6-ff8c8e665138.png">
一番目立つグラフなのですが、実は東京都新型コロナウイルス感染症対策サイトに最初から入っていたグラフではないので、初期に分岐した派生版には入ってないところもあったり。
このデータはどこにあるのかというとファイルの下の方にある「main_summary」です。
<img width="601" alt="スクリーンショット 2020-04-01 21.21.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/1e12c116-3d0a-e172-daf2-364006a9384e.png">
この数字が表示されている訳ですね。構造もシンプルでいじりやすいところです。
この画像の「main_summary」の上にある「lastupdate」はこのグラフの中での最終更新日ですがサイト全体の更新日にもなっています。
ところで、この中に検査実施人数が書いてありますがグラフには出てきません。なので、私も更新してなかったり……。この後こういう話がちらほら出てきますが。

###陽性患者の属性
表形式のところです。
<img width="537" alt="スクリーンショット 2020-04-01 21.37.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/3f18ec7a-767f-a114-c2de-0d65296835f6.png">
ここのデータは「patients」です。比較的素直な構造なのでわかりやすいですよね。
<img width="664" alt="スクリーンショット 2020-04-01 21.39.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/1ffee627-a3d6-8a72-b06c-118f9e0c7f24.png">

一番上の「date」のところはグラフの「最終更新日」になります。他はグラフと見た目が一緒ですね。
「退院」の欄を空欄にするときは「null」とします。「ぬるぽ！ガッ！」のnullです。

###陽性患者数
感染者はどう増えているのか？一番興味を持たれるグラフですね。
<img width="533" alt="スクリーンショット 2020-04-01 21.46.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/303db728-e9eb-1a5c-858b-f90b3bb4f625.png">
ここのデータは「patients_summary」にあります。
<img width="519" alt="スクリーンショット 2020-04-01 21.50.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/5d1352dc-7300-736c-fbe7-1e22ae07e894.png">
一番上の「date」のところはグラフの「最終更新日」になります。「日付」の時間部分は無視されます。

###PCR検査実施件数
東京都版では「検査実施状況」。宮城県の公式サイトの表記に合わせました。単位も件に変える対応をしたのですが、その後東京都版に「検査実施件数」と別なグラフができたり。
<img width="531" alt="スクリーンショット 2020-04-01 21.55.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/8aa557e6-2d56-1c80-9421-b0edad26ddfb.png">
さきほどの陽性患者数とグラフはそっくりさんじゃないですか！でもデータは全然違うんですよ！
<img width="544" alt="スクリーンショット 2020-04-01 21.58.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/bc9df5da-36f4-5c56-f636-be8d49727d94.png">
一番上の「date」がグラフの「最終更新日」なのは一緒。
ただ、そのあとは「labels」に表示日付がずらっと並んで……
<img width="468" alt="スクリーンショット 2020-04-01 22.00.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/79723f1d-eb68-3d53-8629-aba400e30a5e.png">
「datasets」中の「data」の中に各日付のデータが入ります。日付との対応がわかりづらい……。

###新型コロナウイルス感染症相談窓口（コールセンター）対応状況
東京都版の「新型コロナコールセンター相談件数」。「病院内で感染広げたりしないためにも、まずは電話で相談してみましょう」という非常に意味のあるグラフです。
<img width="531" alt="スクリーンショット 2020-04-01 22.04.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/9db96c61-b4b4-b797-f2f6-70ca0d3efa99.png">
グラフ的には先ほどの「陽性患者数」「PCR検査実施件数」のそっくりさんです。ただ、こちらもデータ形式は全然違います！
<img width="549" alt="スクリーンショット 2020-04-01 22.09.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/1e896f20-a524-51c1-959f-0e7e299c752b.png">
一番上の「date」がグラフの「最終更新日」なのは一緒。
「data」の中身がグラフの一本分のデータです。日付が複数ありますが一応全部更新してます。
ただ、グラフの表示に関係ないデータも多いため、グラフに関係ないところは更新が適当になっていつの間にか毎日が水曜日に。
<img width="590" alt="スクリーンショット 2020-04-01 22.12.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/5e39c864-d429-303f-d75b-2618a28cb1f1.png">

##その他
###意外と知られていない機能
<img width="267" alt="スクリーンショット 2020-04-03 12.27.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/76168fc3-5649-e66b-bfd9-894b129d7b03.png">
この上矢印のボタンを押すとこんな表示が出てきます。
<img width="263" alt="スクリーンショット 2020-04-03 12.28.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/dc08c95d-877c-c669-b1a5-8b9ebdc4a388.png">
「埋め込み用コード」と書かれていますね。そうです。各グラフは実は自分のサイトに簡単に埋め込めるんですよ！
当然東京都をはじめとした各自治体版でもできます。ちゃんと更新もされるのでHTMLに覚えのある方はぜひ埋め込んでみてください。

###今後について
実は本家東京都のサイトはいまでもすごい勢いで進化しているのですが、そこから分岐した各地方版は分岐した時点で止まっていて本家では直されているところがそのままのところもあります。

ただ、独自進化を遂げているところもあって、北海道版はグラフに出す日付をスライダーで調整できます。
<img width="517" alt="スクリーンショット 2020-04-03 12.43.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/f597e6b3-dc74-00ad-fe11-49ebea3a9e48.png">
これは東京都版にも反映して欲しい機能ですよね。期間が長引くとどうしても表示領域が足りなくなってしまいますし。

そういう意味でも今後は各地方の新型コロナウイルス対策サイトが横の繋がりを作って行くことが重要になってきそうです。

###最後に
宮城県版非公式新型コロナウイルス感染症対策サイトのGitHubリポジトリはこちらです。
https://github.com/code4shiogama/covid19-miyagi

Code for Shiogamaで作成していて、現在データ更新にはネトボラ宮城さんにもお手伝いいただいています。
お手伝いしてくれる人絶賛募集中です！

新型コロナウイルスに負けないよう、ねばぎば！
![sd_gibasachan.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4518/e7e82f1d-b79b-8dae-a526-86608dcdc5c8.jpeg)