新型コロナウィルスの新規陽性者数グラフを作る

2021/12/11更新（厚生労働省のcsvデータの形式が変更されていたので，それに対応）

Step1 全国の新規陽性者数グラフを作る

(1) 厚生労働省のオープンデータを利用して，全国の陽性者数を受信する

サンプルプログラムはここ。

当サイト用に，厚生労働省のオープンデータ(CSV)から必要なデータを取得するAPIを作りました。このAPIをプログラム中で呼び出し，データを受信します。

!非同期モード

API＝「./api/get_pcr_positive_daily.php」。
APIからAJAX受信。  // #1
対象を表示。       // #2

必ず「なでしこv3.2.25」以降の「非同期モード」を使ってください。

#1 AJAX受信 … URIを指定して，データを受信します。受信したデータは，対象という変数に格納されます。

#2 … 対象という変数の中身を表示します。実態はCSV形式で，日付と新規陽性者数が並んでいます（次の説明を参照）。

(2) 受信したデータを利用して，棒グラフを描く

サンプルプログラムはここ。

!非同期モード

API＝「./api/get_pcr_positive_daily.php」。
APIからAJAX受信。
対象をCSV取得して棒グラフ描画。  // #3, #4

対象という変数には，次のような形式(CSV形式)でデータが入っています。

日付,新規陽性者数
2020/1/26,1
2020/1/27,0
2020/1/28,3
2020/1/29,1
 ...

#3 CSV取得 … CSV形式のデータを，二次元配列形式に変換します。詳しい説明は本家で。

#4 棒グラフ描画 … 二次元配列データを与えると，自動的に棒グラフを描いてくれます！　詳しい説明は本家で。

なでしこでは，様々な種類のグラフをカンタンに描くことができます！

Step2 都道府県別の新規陽性者数グラフを作る

(3) 全国の値と，都道府県別の値を受信する

サンプルプログラムはここ。

!非同期モード

API＝「./api/get_pcr_positive_daily2.php」。  // #5
APIからAJAX受信。
対象を表示。

(1)の時とはAPIが異なる(#5)ので注意。こちらのAPIでは，全国の値と各都道府県の値をCSV形式で受信します。

(4) (3)で受信したデータを利用して，全国の陽性者数グラフを描く

サンプルプログラムはここ。

!非同期モード

API＝「./api/get_pcr_positive_daily2.php」。
APIからAJAX受信。
対象をCSV取得して結果へ代入。    // #6

// 全国データを作成
日付＝結果の0を表列取得。        // #7
陽性者数＝結果の1を表列取得。    // #8
データ＝「{日付}{改行}{陽性者数}」をCSV取得。  // #9
データ＝データの表行列交換。                   // #10

// グラフ描画
データ[0]＝["日付", "全国"]。    // #11
データを棒グラフ描画。

受信するデータ（対象に格納されるデータ）は，次のように「日付」「全国」「北海道」「青森」…の順にデータが並んでいます。

Date,ALL,Hokkaido,Aomori,Iwate,Miyagi, ....
2020/8/14,1355,12,1,1,0, ....
2020/8/15,1233,14,0,0,0, ....
2020/8/16,1015,8,0,1,0,  ....
2020/8/17,630,5,0,0,1,   ....

これを見やすく表形式にすると，次のようになっています。

#6 … 上記のデータ(CSV形式)を，二次元配列形式に変換して，結果という変数へ代入します。

次に，前述の(2)と同じように「日付」と「全国の陽性者数」をカンマで区切ったデータ（全国の新規陽性者数の配列）を作るために，#7から#10で処理をしています。

#7 … 結果という変数の0列目（列は0,1,…と数えるので結果の0をと書く）を取り出して，日付という変数へ格納します。

#8 … 結果という変数の1列目（「ALL」と書かれている，全国の値が入っている列）を取り出して，陽性者数という変数へ格納します。

#9「{日付}{改行}{陽性者数}」をCSV取得 … 2つの配列（日付と陽性者数）をくっつけて，二次元配列にしています。それをデータという変数へ格納します。このとき，配列の中のデータは，横並び（列がたくさんあり，行は2つのみ）に並んでいます。

#10 表行列交換 … グラフを表示させるためには，縦並びの配列（行がたくさんあり，列が2つ）にする必要があります。そこで，表行列交換という命令を使って，配列の並びを変換します。これで データという変数 の中身は，次のように，縦並びの二次元配列になりました。

#11 … データという変数（二次元配列）の0行目（つまり先頭行）はグラフに表示される表題として使われます。そこで，表題を 「日付」「全国」という文字列 に変更します。

最後は，データという変数（二次元配列）を利用して，棒グラフを描画します。

(5) (3)で受信したデータを利用して，全国と東京の陽性者数グラフを描く

サンプルプログラムはここ。

!非同期モード

API＝「./api/get_pcr_positive_daily2.php」。
APIからAJAX受信。
対象をCSV取得して結果へ代入。

// 全国データを取得
日付＝結果の0を表列取得。
陽性者数＝結果の1を表列取得。

// 地域データを取得
地域列＝14。                            // #12
地域陽性者数＝結果の地域列を表列取得。  // #13
地域名＝地域陽性者数[0]。               // #14

// 表示用の二次元配列を作成
データ＝「{日付}{改行}{陽性者数}{改行}{地域陽性者数}」をCSV取得。  // #15
データ＝データの表行列交換。

// グラフ描画
データ[0]＝["日付", "全国",地域名]。
データを棒グラフ描画。

プログラム自体は，前述の(4)に，都道府県のデータを処理する部分を加えただけです。そのため(4)から変更されたところだけ説明します。

#12 … (4)と同じで，受信したデータは結果という変数（二次元配列）に格納されています。その中身は次のようになっています。

この配列の1行目には，都道府県名が入っています。北海道は2列目，青森は3列目，岩手は4列目…という順に並んでいます。そこで，取得したい都道府県のデータが入っている列の番号を，地域列という変数にセットしておきます。サンプルにある14列目とは，東京都を表しています。

#13 … (4)の#8と同じ。#12で選んだ列（都道府県）のデータを取り出しています。

#14 … 地域陽性者数という変数（二次元配列）の0列目＝都道府県名だけを取り出して，地域名という変数へ格納します。

#15 … (4)の#9と同じように，3つの配列をくっつけて，表行列変換という命令で縦並びの二次元配列を作っています。

最後は，データという変数（二次元配列）を利用して，棒グラフを描画しています。

Step3 (5)を改良して，都道府県を選べるようにする

サンプルプログラムはここ。

!非同期モード

API＝「./api/get_pcr_positive_daily2.php」。
APIからAJAX受信。
対象をCSV取得して結果へ代入。

// 都道府県名を取得                  #16
地域一覧＝結果[0]を配列複製。     // #17
地域一覧の0を配列削除。
地域一覧の0を配列削除。

// 画面の準備                        #18
地域ボックス＝地域一覧のセレクトボックス作成。
グラフボタン＝「グラフ描画」のボタン作成。
色チェック＝「色を変更」のチェックボックス作成。

グラフボタンをクリックした時には  // #19
    // 全国データを取得
    日付＝結果の0を表列取得。
    陽性者数＝結果の1を表列取得。

    // 地域データを取得
    地域列＝地域ボックスの「selectedIndex」をDOM属性取得。  // #20
    地域陽性者数＝結果の(地域列+2)を表列取得。              // #21
    地域名＝地域陽性者数[0]。

    // 表示用の二次元配列を作成
    データ＝「{日付}{改行}{陽性者数}{改行}{地域陽性者数}」をCSV取得。
    データ＝データの表行列交換。

    色＝色チェックの「checked」をDOM属性取得。              // #22
    もし，色＝オフならば
        // グラフ描画 方法１ 標準の配色
        データ[0]＝["日付", "全国",地域名]。
        データを棒グラフ描画。
    違えば
        // グラフ描画 方法２ 配色を変えたいとき                #23
        日付の0を配列削除。
        陽性者数の0を配列削除。
        地域陽性者数の0を配列削除。
        dataset = {
            labels: 日付,
            datasets: [{
              label: '全国',
              data: 陽性者数,
              backgroundColor: 'rgba(255,0,0,0.5)'
            },{
              label: 地域名,
              data: 地域陽性者数,
              backgroundColor: 'rgba(0,255,255,1)'
            }]}
        datasetの棒グラフ描画。
    ここまで。
ここまで。

#16 … 上の(5)の#12で説明したように，結果という二次元配列の0行目（結果[0]と指定します）には都道府県名が入っています。

Date, ALL, Hokkaido, Aomori, Iwate, ...

これを都道府県を選択するセレクトボックス(#17)で利用したいのですが，冒頭の2つは「Date」「ALL」となっているので，セレクトボックスには不要です。そこで，まず結果[0]を地域一覧という配列に複製します（単なる代入ではうまくいきません。詳細は本家の解説を参照してください）。そこで地域一覧の0を配列削除という命令を2回実行して，この2つを削除しています。

#18 … 都道府県を選択させるセレクトボックス，グラフを描画するボタン，色を変えるかどうかを選ぶチェックボックスを設置します。

#19 … ［グラフ描画］ボタンをクリックしたときの処理です。上の(5)と同じ処理をしています。

#20 … セレクトボックスで選択されている都道府県名が，ボックス内の配列の何番目なのかを 「selectedIndex」をDOM属性取得 という命令で取得しています。これは＃12で都道府県の列番号を手入力で変更していたのを，セレクトボックスで選べるようにしたということです。その後は#13，#14と同じように処理して地域陽性者数という変数（二次元配列）に，選んだ地域のデータを格納します。

#21 … 結果の(地域列+2)を表列取得と「+2」をしているのは，セレクトボックスで選ばれている都道府県の番号は0から始まっている（北海道は0，青森は1，…）のですが，結果という二次元配列では，(5)の#12で説明したように2列目から始まっている（北海道は2列目，青森は3列目，…）ので，その調整をしているからです。

#22 … このように書くことで，色という変数には，チェックボックスにチェックが入っていれば「オン」が，入っていなければ「オフ」が返されます。

#23 … 標準の「棒グラフ描画」命令ではグラフの色を指定できませんので，色を指定したいときはこのようにプログラムを書きます。詳細な説明は本家で。

プログラミングをやってみよう！

• １．プログラミングを始めよう！
• エラーが出てもくじけないで！
• ２．数当てゲームをつくってみよう
• 3．数当てゲームに反復や画像を加えてみよう
• ４．プログラミングでネットワークを利用しよう
• ５．情報セキュリティの技術を調べよう
• ７．プログラミングでマイコンを制御してみよう
• 新型コロナウィルスの新規陽性者数グラフを作る