東京都 新型コロナウイルス対策サイトがSPAで構築されてたりGithubでコントリビューターを募ってたりして良さげだったのでちょっとどんな感じになってるのかを調べてみました。
30分程度で調べてこの記事書いてって感じで軽めにしか調べてないので勘違いしてたり間違ってたりする可能性が色々あるので詳細が気になる人はリポジトリを直接見てください。
見ていくのは3/5更新があった
https://github.com/tokyo-metropolitan-gov/covid19/tree/v1.0.5
のツリーをベースに見ていきます。
またWebサイトのURLは
https://stopcovid19.metro.tokyo.lg.jp/
です。
各種情報など
リポジトリのREADME
基本的なことはすべてリポジトリのREADMEに書いてあるのでここを見ればやり取りしたり、コントリビュートする大体の方法はわかりそうでした。
リポジトリのWiki
コントリビュートの方法や行動方針 についてはリポジトリのGithub Wikiに記載されてました。
ただこのリンクもREADMEに書いてあるので特に探すのに困ることはなさそうです。
チャットなどのコミュニケーション方法
こちらはコントリビュートの方法のページに記載されていますが https://cfjslackin.herokuapp.com/ から登録できるSlackの#covid19 チャンネルでリポジトリの管理者の方とのやり取りができるようです。
デザインについて
これもコントリビュートの方法のページに記載されていますが
https://www.figma.com/file/V7vt80p2gauhdgTZeVNbgj/UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=121%3A156
にてfigmaで作られた各ページのワイヤーフレームを見ることができるようです。
開発方法について
開発スタイル
開発スタイルについてはREADMEに
masterブランチがアップデートされると、自動的にproductionブランチにHTML類がbuildされます。そして、本番サイト https://stopcovid19.metro.tokyo.lg.jp/ が更新されます。
stagingブランチがアップデートされると、自動的にgh-pagesブランチにHTML類がbuildされます。そして、ステージングサイト https://stg-covid19-tokyo.netlify.com/ が更新されます。
developmentブランチがアップデートされると、自動的にdev-pagesブランチにHTML類がbuildされます。そして、開発用サイト https://dev-covid19-tokyo.netlify.com/ が更新されます。
とあり、Pull Requestを見る限りfeature/xxx などのようにブランチが切られており、それが development ブランチにマージされていることからGit Flowか、それに近い開発スタイルだと思われる。
CI/CDについて
CI/CDについてはGithub Actionsで行われているようで
https://github.com/tokyo-metropolitan-gov/covid19/tree/v1.0.5/.github/workflows
にいくつかのアクションが定義されている。
定義を軽く読んでみるとおおまかにこんな感じな気がする。
- develop.yml: developmentブランチへpush時にユニットテスト~成果物のビルド~開発環境へデプロイが行われる
- staging.yml: stagingブランチへpush時にユニットテスト~成果物のビルド~検証環境へデプロイが行われる
- deploy.yml: masterブランチへpush時にユニットテスト~成果物のビルド~本番環境へデプロイが行われる
- build.yml: stagingブランチへpush時にビルドした成果物をGithubのartifacts機能を使って永続化しているよう
- screenshot.yml: おそらくまだ使われてないと思われる
利用している技術など
データベース
通信を軽く見てる限りバックエンドのサーバーなどは特に用意していないようで、おそらく
https://github.com/tokyo-metropolitan-gov/covid19/blob/v1.0.5/data/data.json
に置かれたデータをデータベースとして各種グラフなどを描画しているよう。
そのためシステムとしてはHTMLをホスティングしているホスティングサービスだけで完結しているように見える。
Webサイトのホスティング
Github Actionsのデプロイを見ている限り各環境それぞれでGithub Pagesを利用してデプロイを行っているよう。
別途netlifyの設定ファイルなどもあるように思うがどこで利用しているのかは不明。
フレームワーク
NuxtJSの設定ファイルっぽいのがあるので多分NuxtJS。
https://ja.nuxtjs.org/
言語
tsconfig.jsonファイルがあるのでTypeScriptを利用しているみたい。
現在の開発状況
昨日Slackを覗いた限り
とまだ色々準備中だったようだが、今日見てみたら
とPull Requestをレビューしてもらえる体制が整いつつあるよう
まとめ
- Github Pagesだけでホスティングされている静的なSPAサイトで構築されていて結構良さげっぽかった
- CI/CDもGithub Actionsを取り入れていて良い感じ
- コントリビューション方法の提示やSlackチャンネルの解説などコミュニケーションを取りやすい環境が整備されていて素晴らしかった
- 台湾の事例を参考にしたんだと思うんだけど、東京都が出しているサイトとしてGithubでのコントリビューションの受付やGithubにコードを公開するなどを行った意義はかなり大きい気がしてる
