無料無限更新covid19グラフ


<img width="600" alt="12_covid19_death.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/0eea8db0-8bb4-144c-052a-ccf88c5912d5.jpeg">
https://akiraak.github.io/covid19-death/

covid-19の死者数を厚生労働省が用意してくれているファイルを使ってグラフ表示するサイトを作ります。

[厚生労働省オープンデータ](https://www.mhlw.go.jp/stf/covid-19/open-data.html)

ホスティングには Github Pages を利用し、データの更新には Github Actions を利用します。どちらもリポジトリを Public で作成すれば無料で使えます。

##リポジトリを作りましょ。

<img width="600" alt="01_new_repo.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/d70782ad-6202-d3da-d13b-f40c5c2d763d.jpeg">

##Github Pagesの設定をしましょ。

リポジトリの Settings - Options の下の方、Danger Zone の上に Github Pages の設定があります。

<img width="600" alt="02_setting_pages-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/4ba36304-e5e8-7a59-fcc2-540f23144070.jpeg">

Branch を main にします。ディレクトリはデフォルトだと root になるはずです。Save をクリックします。これで index.html を Commit & Push すると https://akiraak.github.io/covid19-death/ で見れるようになります。

##ファイルをアップしましょ。

以下の４つのファイルをリポジトリにアップします。```death_total.csv``` を読み込んでグラフ表示するだけのファイルです。

- index.html
- chart.css
- chart.js
- death_total.csv

<img width="600" alt="04_add_files_2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/2845eb3e-b32d-d4d6-c042-816231a88b5c.jpeg">

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>新型コロナ　死亡者数</title>
  <link rel="stylesheet" href="chart.css" />
</head>
<body>
  <h1>新コロナ　死者数</h1>
  <canvas id="myChart" width="400" height="200"></canvas>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
  <script src="chart.js"></script>
</body>
</html>
```

```css:chart.css
body {
  background-color: #071a2b;
}

h1 {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
}

#myChart {
  width: 100%;
}
```

```js:chart.js
function makeChart(cvs_ar) {
    var dates = []
    var dailies = []
    var totals = []
    for(var index = 1; index < cvs_ar.length; ++index) {
        let elem = cvs_ar[index]
        dates.push(elem[0]);
        totals.push(elem[1]);
        if(index == 1) {
            dailies.push(elem);
        } else if(elem[0] == '2020/4/22') {
            dailies.push(0);
        } else {
            dailies.push(cvs_ar[index][1] - cvs_ar[index - 1][1]);
        }
    }

    var ctx = $('#myChart');
    var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dates,
            datasets: [{
                label: '死亡者数',
                data: dailies,
                backgroundColor: "rgba(227, 126, 25, 0.8)"
            }],
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        suggestedMax: 100,
                        suggestedMin: 0,
                        stepSize: 10,
                        callback: function(value, index, values){
                            return  value +  '人'
                        }
                    }
                }]
            },
            legend: {
                display: false
            },
        }
    });
}

function csvArray(cvs_str) {
    var result = [];
    for(let row of cvs_str.split("\n")) {
        result.push(row.split(','));
    }
    return result;
}

function getCsv(dataPath) {
    const request = new XMLHttpRequest();
    request.addEventListener('load', (event) => {
        let cvs_array = csvArray(request.responseText);
        makeChart(cvs_array);
    });
    request.open('GET', dataPath, true);
    request.send();
}

getCsv('death_total.csv');
```

death_total.csv は厚生労働省のページからダウンロードしてください。

[厚生労働省オープンデータ](https://www.mhlw.go.jp/stf/covid-19/open-data.html)
[death_total.csv](https://www.mhlw.go.jp/content/death_total.csv)

<img width="600" alt="04_add_death.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/852dcd81-5097-b35d-7a66-d7af3f5ec62f.jpeg">

これらのファイルをリポジトリに Push するとグラフのページが表示されます。

<img width="600" alt="12_covid19_death.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/0eea8db0-8bb4-144c-052a-ccf88c5912d5.jpeg">
https://akiraak.github.io/covid19-death/

##Github Actions で death_total.csv を更新しましょ。

Github Actions は特定のタイミングで処理を行える仕組みです。Push したらテストを回したりデプロイしたりできるのですが、今回は１日に１回 death_total.csv を取得してリポジトリに Push するのに使います。

Github Actions の設定ファイルはリポジトリ内の ```.github/workflows``` ディレクトリに yml 形式のファイルとして作成します。このディレクトリを自動で作成するために以下の作業を行います。

Github のリポジトリに行き Actions を選択します。

<img width="600" alt="05_action-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/14fabdd6-d56b-a4dd-33a9-b66f9824c94c.jpeg">

"set up a workflow yourself" をクリックします。

<img width="600" alt="06_action_yourself-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/fd533697-23da-882f-3e19-66d981436a31.jpeg">

"Start commit" をクリックします。

<img width="600" alt="07_action_main-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/92d8e028-49fd-662b-903b-354b34a5991a.jpeg">

"Commit new file" をクリックします。

<img width="600" alt="08_action_new_file-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/268e488e-a532-1d10-ad62-97e306a08eaa.jpeg">

これで ```.github/workflows/main.yml``` がリポジトリに追加されたので git pull で取得してください。 ```main.yml``` は main ブランチに Push すると Hello と表示するだけの無害な Actions ファイルです。 

##update_data.yml と update_data.sh をアップしましょ。

```yml:update_data.yml
name: Update data file

on:
  schedule:
    - cron:  '0 0 * * *'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - name: Update file
      run: |
        bash update_data.sh
    - name: Commit files
      run: |
        git config --local user.email "action@github.com"
        git config --local user.name "GitHub Action"
        git add .
        git commit -m "Add changes" -a
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
```

```sh:update_data.sh
curl https://www.mhlw.go.jp/content/death_total.csv --output ./death_total.csv
```

```.github/workflows/update_data.yml``` を追加します。cron で１日に１回、```bash update_data.sh``` を実行したのち、```death_total.csv``` ファイルに変更があれば Commit & Push をします。

##Github Actions が成功したら。

成功すると緑のアイコンが付きます。

<img width="600" alt="11_action_sucess-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/289303ae-b2c8-9d0c-c5ea-673795eabb12.jpeg">

##おわり

Github Pages と Github Actions を使うとデータが更新できるサイトが無料で作れます。こんな使い方していいのかしらんけどなー。