ポータルサイトブログコロナウイルス対策サイトに使用されている技術について
東京都のコロナウイルス対策サイトがオープンソースで公開されていますので、参考にしてみたいと思います。
以下のGitHubリポジトリでソースが公開されています。
https://github.com/tokyo-metropolitan-gov/covid19
公開URLはこちらです。
https://stopcovid19.metro.tokyo.lg.jp/
Nuxt.js
基本的にはNuxt.jsを基盤にしています。
扱ったことがある方はソースを見て親近感が湧くかもしれませんね。
Jestによるテストをどう書いているか参考にしたかったのですが、Seleniumでスクリーンショットを撮る部分した見つけられませんでした。
Vuetify
CSS（UI）フレームワークはVuetifyを選択しています。
アイコンはVuetify推奨のMaterial Design Iconsとオリジナルアイコンを組み合わせている（？）ようです。
グラフには軽量なChartjsを採用していました。
Netlify
サーバーはNetlifyです。
Nuxtのような静的サイトにはうってつけですね。
大量のアクセスも捌けそうです。
GitHubと連携してデプロイまで面倒を見てくれるので便利です。
おそらく、
masterにpullリクエスト → マージ → テスト実行 → productionブランチにマージ → Netlifyで検知しデプロイ
という流れではないでしょうか。
そのほか
面白かったのが、元のデータ（Excel）から、PHPを使ってグラフデータを生成しているところです。
/tool/convert.php
nodejsでもできそうではありますが、僕でも同じようにPHPでやってしまいそうです。
元のExcelデータはGoogleドライブにあるようで、そのデータをダウンロードするのはシェルスクリプトです。
/pull_datasource.sh
一方、Seleniumのテスト実行にはPythonが使われています。
/ui-test/screenshot.py
また、「新型コロナウイルス感染症が心配なときに」のページでは、複雑な構成をレスポンシブで組んでいるのかと驚きましたが、SVGをうまく使って様々な画面サイズに対応していました。
おわりに
Nuxt.jsのサイトとしてはスタンダードな構成ですが、複数人管理や効率化の方法など参考になります。
台湾のIT担当大臣である 唐鳳 氏がプルリクエストで文言修正してくれたのも話題になりました。
https://github.com/tokyo-metropolitan-gov/covid19/pull/827
こういったものはGitならではですね。
また、GitHub公開リポジトリ＋Netlify で、おそらく無料で運営しているのではないでしょうか。
無駄なコストをかけないのも重要なポイントだと思います。
静的サイトのツールは素早く作れるものが多いため、急いで公開する必要があり、かつ更新頻度が高くないサイトなら検討の余地は大いにありそうですね。