コロナウイルスの疾患者人数を可視化するサイトを作成しました

コロナウイルスの疾患人数を可視化できるサイトを作る

疾患者が増えていると断片的にニュースで聞くものの、私自身人数規模がいまいちピンときていませんでした。
適切な危機感を持つには定量的な情報を把握するのが大事だと思い、疾患者人数をグラフ化したサイトを作りたいと思っていました。

疾患者情報を提供するAPIがあると小耳に挟んだので週末で作ることにしました。

仕様要件

• 世界及び日本の疾患者数の状況が一目で分かる
• 国ごとのランキングが視覚的に分かる
• スマホでスクロールせずに見れる

制約条件

• 土日だけで完成させる（週を跨いだら多分完成しない。リリースするなら早い方がいい）
• qiitaも土日中に書き終える（アウトプットとして残す）

出来上がったもの

https://github.com/growsic/covid-overview


レポジトリURL

コロナウイルスの疾患状況を可視化するサイトを作成しました。
15分おきにデータは更新されます。

サイト作成前は2000人代だった日本の疾患者は3000人を超え、アメリカに至っては30万人を超えグラフが突出した状態です。

コロナの現状を正しく知る一助になれば幸いです。https://t.co/mVICf6Pril pic.twitter.com/cqPXGJBTIA

— しましま Backend Engineer (@growsic) April 5, 2020

使った技術

• RapidAPI
• GitHub Pages
• Vue.js
• APEXCHARTS

を使いました。

データ取得：COVID-19のRapidAPI

RapidAPIでは有償/無償で多くのAPIが提供されています。
世界各国の疾患状況をリストで返してくれる無償のAPIがあったのでこちらを使いました。

今回使ったAPI:
https://rapidapi.com/api-sports/api/covid-193/details

サイトの公開: GitHub Pages

RapidAPIを使うことで静的サイトのみの公開で済むため、GitHub Pagesを利用しました。
GitHubでレポジトリを作成し、Settings > GitHub Pages > Sourceでmasterブランチを選択すれば、masterブランチにcommit/mergeするだけで自動的にGitHub Pagesに反映されるのでとても便利です。

JavaScript: Vue.js

ロジックや値の管理用です。復習がてら使いました。

グラフ描画: APEXCHARTS

グラフを描画するJavaScriptのライブラリとして、APEXCHARTSを使いました。
グラフの描画であればChart.jsの方が有名で使おうと思ったのですが、縦方向のグラフ

を描画しようとした時に縦の長さの調節が上手くできず、各Q&Aサイトでも解決仕切れていなそうだったので代わりのライブラリを探しました。

「chartjs alternative」で検索した中で比較的人気が高く、見た目も良かったAPEXCHARTSを使いました。

大抵のグラフ描画系ライブラリは

{
    series: [
      {
        data: []←値（Y軸。今回で言えば人数）
      },
    ],
    xaxis: {
      categories: []←ラベル(X軸。国名や時間など)
    },
}

のような描画オプションの中にあるリストに、表示したい値の情報をpushして行けば簡単にグラフの表示が出来ます。
後は描画オプションをドキュメントにしたがってカスタマイズしていくことで希望通りの見た目に出来ます。

グラフ描画系ライブラリはライブラリの提供するオプション以外での見た目変更がやりにくいため、望み通りの描画が出来ない場合は他のライブラリに乗り換えるのもありです。

困ったこと

アメリカの疾患者が多過ぎてグラフが潰れる(30万人 vs 2000人)

アメリカの30万人規模のグラフと他国を同じスケール上で並べると

2000人以上いる日本がほとんどいないように見えてしまいました。

一部の飛び値に引っ張られて他が小さく埋もれるのは意図と異なるので、人数ごと10国ずつにページングする仕様にしました。

表が思い通りの見え方にならない

先述の通りChart.jsからAPEXCHARTSに変えたところ、使用例が少なく本家ドキュメント以外参考になるサイトがありありませんでした。
ひたすらドキュメントのsearchボックスに描画オプションのキーワードを入れ、ドキュメントと公式サンプルを見比べ試行錯誤しながら解決方法を探しました。
グラフ描画系ライブラリはライブラリが提供する以外の見た目変更が難しいため、根気強くドキュメントから探すのも大切です。

見た目がカッコ良くならない/レスポンシブ対応したい

普段webフロントを触らなく基本的なhtml/cssしか分からないが、せっかくなら見た目も良いものにしたい。
今回で言えばグラフはAPEXCHARTSを使ったためグラフの見た目は問題なく、世界/日本のサマリ情報の表を特になんとかしたいと思っていました。
週末で完成まで持っていきたかったので、html/cssのテンプレートを活用/改良することにしました。

世界/日本のサマリ情報の表はGitHubのプラン別料金表のような表を加工すれば出来そうだと考えたので
「html css price table template」
で調べて出てきた沢山のテンプレートの中からイメージに近いものを見つけ、加工して使いました。

ある程度レスポンシブ対応はされているものの細部は修正が必要だったため、要点を絞って検索して修正して行きました。

最後に

会社のとびっきり優秀なエンジニアの方に、どうやったら優秀なエンジニアになれるか聞いた時に教えてもらった一つが、
「やりたいことを決めたら、現在到達可能そうなものを作りきってみる」
ということでした。

「要素技術をある程度理解したら、出来るような気持ちになってしまう。
でもいざ作り切ろうとしたら見えていなかった難しさが沢山見えてくる。
作りきってみてようやく理解できる」

ということだったので、作りたいもの決めたら必ず作りきることを最近考えるようにしていました。
今回はVue.jsとChart.js組み合わせればさくっと作れるだろうと思っていたものの、いざ着手してみると細かいハマるポイントがいくつかあり、半日で作るはずが1日半以上かかっていました。

何とか見てもらえるクオリティに仕上がったものの、今後も作りきることに真摯に向き合わないとなーと思っています。