全国に派生した新型コロナウイルス感染症対策サイトの特徴的なカスタマイズ

東京都が公開した [東京都 新型コロナウイルス感染症対策サイト](https://stopcovid19.metro.tokyo.lg.jp/) は、GitHub でオープンソース化されていることから、全国各地でたくさんの派生サイトがまたたく間に開設され、今日も運用されています。

* [このサイトから派生したサイト covid19/FORKED_SITES.md tokyo-metropolitan-gov/covid19](https://github.com/tokyo-metropolitan-gov/covid19/blob/development/FORKED_SITES.md)

によればその数は **「60」** です（[2020/5/10現在](https://github.com/tokyo-metropolitan-gov/covid19/commits/development/FORKED_SITES.md)）。

中には、東京版を Fork して文言やデータを入れ替えただけ[^1] でなく、独自の発展を遂げているサイトもあります。
かくいう私自身も、[愛知県版の開発](https://github.com/code4nagoya/covid19/commits?author=amay077) に参加しており、各地のオリジナリティ溢れる追加機能には、大いに影響を受けて参考にさせていただいています。

[^1]: それ「だけ」でも十分に価値があります。たとえオリジナルより少ない機能やデータ量だとしても。

この記事では、そのような各地の新型コロナウイルス感染症対策サイトの、個人的に「オッ」と感じた独自の機能や表現を挙げてみました。

注)前述の FORKED_SITES.md を上から順に観て初出の機能を列挙したため、「あの機能はオレたちの方があの県よりも先に付けたぞ！」という事案もあるかと思いますがご了承ください。

## 北海道

* [JUST道IT（有志団体）](https://github.com/codeforsapporo/covid19)

### グラフ表示期間のスライダー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/01e50a00-2922-162c-8fb5-849d03b306b7.png)

グラフの表示範囲を絞れるスライダーが付いています。期間の長期化と共に必要になる機能をいち早く導入されていました。
我々 [愛知県版も、マネ](https://github.com/code4nagoya/covid19/issues/227) させていただきました。

### ページング付き一覧表

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/398de5bb-c474-ec44-3798-b211d1117d99.png)

感染者の一覧表は、感染者数が多い地域では表示が重くなったりすることがあります。
北海道版ではページングが導入され、表示コストが改善されています。

こちらのページング機能は、[オリジナルの東京版にも導入されました](https://github.com/tokyo-metropolitan-gov/covid19/pull/3868) ね。提案者は北海道版にこれを実装されたその人のようで、すばらしいです。

## 青森県

* [Code for Aomori](https://github.com/CodeForAomori/covid19)

### 病床占有率を示した円グラフ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/43d6ef2e-6de6-50e9-ee3c-6c249ee0eabc.png)

地域での、病床の逼迫度がわかりやすいです。


## 茨城県

* [個人](https://github.com/a01sa01to/covid19-ibaraki)

### 市区町村毎の感染状況地図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/5ba7cf48-1106-89de-fa71-53aaf23aa1f0.png)

風評被害に配慮する必要はあるものの、やはり「どこ」で感染者が多いのかは気になりますね。

### 年代別陽性患者数（円比率グラフ型）

* [Project Ume(有志)](https://github.com/BenataY/covid19)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/2ce18422-34c9-bd0c-890b-be7371b8a539.png)

データに基づく機械的な描画なので、マスメディアのような円グラフにはならないのが安心です。

## 千葉県

* [地域情報サイト「まいぷれ」](https://github.com/keisuke-kimura/covid19)

### 無症状者の推移を表した積み上げ棒グラフ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/b3c3578f-68b0-ea2c-240f-a7a14312ea13.png)

陽性である人の内の、無症状である人の数の推移を表すのは特徴的です（すいません目的はちょっとわかりません）

### Q&A ボット

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/b1bd6167-d3e0-693e-dc89-ab85f52fa6b5.png)

すごい、質問に答えてくれるボットが付いてる！

## 八千代市

* [有志（学生）](https://github.com/taichi1222/covid19-yachiyo)

### 年代別陽性患者数（図型）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/5b43691c-4f11-2f55-cae2-96ce82b05808.png)

このような図形での表現は特徴的です。

## 神奈川県

* 県公式（非公開プロジェクト）

### 検査陽性率の推移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/89b6cd65-d4d3-90db-f963-180954767d27.png)

陽性率の推移は、正確なデータが提供されるか不明なものの、今後欠かせない情報になると思われます。

## 横浜市

* [個人](https://github.com/covid19yokohama/covid19)

### オリジナリティ溢れすぎｗ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/6a07667c-8abd-25ec-81be-4dc0df2895fd.png)

個人の方なのに、いやだからこそなのか、「普通の情報なら他で見りゃいいんだよ」という強い意志を感じますｗ

## 新潟県

* [Code for Niigata](https://github.com/CodeForNiigata/covid19)

### 棒グラフの休日を別色に

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/31abb8da-e96c-31a5-f241-71f738619d47.png)

色違いは何かな？と思ったらどうやら土曜日曜を色付けしているようですね。説明が無いと分かりづらいけど、特異点を特異なものとして見せたい、という意志はわかります。


## 福井県

* [地元有志](https://github.com/nomunomu0504/covid19)

### 年代別陽性患者数（タテ棒グラフ型）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/c7ac67bb-49e5-27fd-c072-4562f4ce2d6a.png)

タテ棒グラフバージョン。個人的には円グラフよりも好みかも。

## 長野県

* [個人](https://github.com/kanai3id/covid19)

### 隣接県の状況

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/46712fce-1e27-93b4-8534-4ab421e1a9f8.png)

「他県への移動を自粛しましょう」という状況下では、「なるほど」といえる情報提供です。他県ナンバー狩りはダメよ。

## 愛知県【PR】

筆者が参加しているプロジェクトのため、少々口数が増えます。

* [有志](https://github.com/code4nagoya/covid19)

### 週別グラフ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/e7bac3e1-3f0c-598a-e2d1-04e9ade6e2a4.png)

長期化に備えて、週次のグラフを用意しました。まだ一部のみですが、全てのグラフに展開するつもりです。累計も週次になるかも。

### 陽性者状況の推移グラフ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/6d7b7a5d-4bec-81ed-19b1-b96c53954f32.png)

感染者の累計数よりも、現在患者数や退院者数の推移が重要と考え用意しました。累計は頭打ちになり退院者が確実に増えているのがわかって安心できます。

### 市町村別感染状況（カラム地図）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/3474ef8a-9d55-8ab4-a9b2-f8a4abd7dbd4.png)

「地域ごとの状況の地図ほしいね」という意見は我々でもありまして、我々は「[カラム地図](https://github.com/tabularmaps/hq)」を採用しました。
これは [新型コロナウイルス対策ダッシュボード](https://www.stopcovid19.jp/) でも使われている「地図を表に模した表現」で、このようなダッシュボードでは最適と判断しました。愛知県って、西の方に市町村が密集していて面積的には東側が目立っちゃうので。

### 陽性患者の属性の撤廃

オリジナルの東京版を始め、各地域版にある全患者の一覧を見る表は、愛知県版では撤廃しました。
モバイルでのパフォーマンス悪化原因だったのと、この狭い領域内で全ての情報を表示する意味がないと判断したためです。
代わりに、我々は元データとして CSV を生成してコミットしているので、GitHub の CSV へのリンクを提供しました。
GitHub は CSV ファイルをテーブル形式で表示してくれ、検索もできるので「これでええやろ」ということです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/58cc59c4-139b-1463-385e-f342691d1acb.png)


## 滋賀県

* [滋賀県（公式)](https://github.com/Shiga-pref-org/covid19)

### 有料道路通行台数の折れ線グラフ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/12407654-8965-ebec-eeb0-768deabc957a.png)

県内有料道路の車両通行台数を折れ線グラフで、昨年との比較もでき大変見やすいです。
鉄道の利用量可視化は主に都市部で行われていますが、車両は初めて見ました。

### LINEパーソナルサポートの友だち数

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/67ffb708-3c9a-8e37-3d80-0ebaca93f2ec.png)

各都道府県単位で展開されていると思われる LINE の「新型コロナ対策パーソナルサポート」、その登録者数を表示してます。どうやって取得してるんだろ？

## 大阪府

* [大阪府（公式）](https://github.com/codeforosaka/covid19)

### 検査陽性者の状況（タテ型）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/b892551d-7ec6-9dd4-1d97-65bdc80613dd.png)

オリジナルの東京版に右へ倣えで項目を横に並べている事例が多い中、項目をタテに並べることで主にモバイル端末での視認性が向上しています。
[愛知県版もマネしたい](https://github.com/code4nagoya/covid19/issues/368)です。
[東京版もヨコ型からタテ型になりました](https://github.com/tokyo-metropolitan-gov/covid19/pull/4298) ね、大阪版にインスパイアされたかは定かではありませんが。

### 感染経路不明者数の推移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/07cadad0-c5b2-8012-f5ff-ae5111bac042.png)

感染爆発の兆候として重要な「感染経路不明者の数」の推移をグラフ化しています。有用な可視化だと思います。

## 兵庫県

* [有志](https://github.com/stop-covid19-hyogo/covid19)

### 年代別陽性患者数（ヨコ棒グラフ型）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/bf528634-d51e-1cd1-58de-48711e257af2.png)

年代別陽性患者数グラフはさまざまなバリエーションが見られます。兵庫県はオーソドックスなヨコ棒グラフ。

### クラスター別陽性患者数

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/0f4033ac-436b-8054-cfb0-9b732b4791b5.png)

クラスター（Disease cluster）の分類と、それに属する陽性者の発生を時系列に示したグラフ。
クラスターの状況可視化は初めて見ました。

## 香川県

* [学生エンジニア(有志)](https://github.com/codeforkagawa/covid19)

### 詳細が見られる陽性患者の属性

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/3eab146f-90bb-1b36-3fb9-946718a70933.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/a9df8027-a74c-e60a-7545-d6bf315ff6f8.png)

事例ごとに、詳細が時系列で見られます。大抵は県や市のホームページで PDF などで公開されるので、それより見やすいです。

## 福岡県

* [Code for Fukuoka, Code for Kurume](https://github.com/Code-for-Fukuoka/covid19-fukuoka)

### 居住地別の患者数と地域ごとの推移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/c2a37df6-bd2d-cff5-3ea4-2e9abee6faea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/1defd688-b082-30ec-cc76-74ab66edad2c.png)

ちょっと変わったグラフです。
まずは居住地ごとの患者数が棒グラフで表示されていますが、ドロップダウンから特定の地域を選ぶと、その地域での発生患者数の推移が見られるグラフへと変わります。
簡単にやるなら２つのグラフにするところ、用途がよく練られたグラフと感じました。

## 長崎県

* [Code for Nagasaki](https://github.com/CodeForNagasaki/covid19)

### 相談窓口一覧表

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/5022df3a-5447-6305-0c4e-412328359684.png)

新型コロナウイルスについての相談窓口がまとめられています。
県や市のホームページは、得てして情報が探しにくかったりするので、こうして見やすくまとめられているのは使いやすいと思います。
グラフを出すだけがやるべきことではないということですね。

## 沖縄県

* [有志](https://github.com/Code-for-OKINAWA/covid19)

### 地図での表現いろいろ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/a9437d09-ecb0-7ae0-4d4e-d87e50b0068f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/06476cf3-50f1-a397-952c-039a116bd164.png)

地図による可視化が充実していますね。
１つ目は、まるで新聞記事のような見やすいレイアウトでの本島、各島の状況の可視化、
２つ目は、インタラクティブな地図による可視化です。
１つ目はどうやって情報を得て、作成しているのでしょうね？

また、Q&Aボットもありました（３例目）。

## 全国

* [個人](https://github.com/mm0202/covid19-jp)

### 全国の状況をまとめて

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/6034492d-8dd0-f716-3c81-3e72c0a5597d.png)

日本全国版とのことで扱う情報量的に厳しそうですが、居住地・性別・年齢で絞り込みができるのも特徴ですね。
(事実上？)共通になっているデータ仕様とそれに基づいたデータがあるから実現できたと思います。


## まとめ

各地で入手可能なデータ、実現可能なメンバ、必要とされる情報がそれぞれ異なるため、さまざまなバリエーションが生まれています。
これからもお互いインスパイアし、されながら改善を繰返していきたいですね。

これもオープンソース、オープンデータのおもしろいところの一つかと思います。
それも、まずオリジナルの東京版がオープンソース・オープンデータベースで公開されたことに感謝しきりです。
また、学生さんや個人でもサイトを開設・運営していたり、中には自治体の公式サイト化される例もあり、こうした成果が少しでも住民の役に立っていると実感できると参加者としては嬉しいですね。

新型コロナウイルスとのお付き合いは長くなりそうですが、対策サイトも役割が徐々に変わっていく中で、表現するもの、扱うデータ、インフラなど考えることも変わっていきます。可能な範囲で、可能な限りで継続していくとよいなと思います。

コントリビュートに興味が湧いたら、お近くのプロジェクトを覗いてみてはどうでしょうか。