官邸や厚労省で公開されているデータから、各県の日々の推移情報を抜き出し、Chart.jsでグラフを描いてみました。 LefLetにより県別に色分けできた一環で、元情報の確認やグラフによる視覚化を試みた次第です。出来た画面について
コロナワクチンや感染に関する最近の推移情報を、公開情報から県別に抽出し、表やグラフで表示しています。 県の指定で表示を変えられるほか、グラフに関しては、初期表示（※１）から、PCR検査数の目盛を変えて表示したり（※２）といった、切り替えができます。 （※１）ワクチン接種数だけが右軸のメモリで、他は全て左軸の目盛で表示 （※２）PCR検査数だけを、右の目盛に合わせた表示に変更 両者の違いは、右軸のラベルの表示にＰＣＲ検査数が含まれるか否かで判別できます。
操作説明
（１）県の選択： 初期表示は、北海道ですが、「変更できます」の右わきをクリックし、表示された中から選択して、
「再表示」ボタンをクリックすると、選択した県の情報を表示できます。
（２）PCR検査数の表示目盛の変更： 表示とグラフの間にある
「PCRを軸移動して再描画」ボタンをクリックするたびに、PCR検査数を左軸の目盛に合わせるか、右軸の目盛に合わせるかを切り替えられます。 どちらで描画されているかは、右軸のラベルにPCR検査数が含まれるか否かで判別できます。 PCR検査数とその他の数字の差が大きくて、PCR検査以外の変化量が分からないよう場合、多少は、見かけが変わるかもしれません。
実際の画面
県の選択変更 表示している各県の情報について
コロナに関する各県の状況
元情報は、官邸や厚労省のWebサイトで公開されたものです。情報量が多く把握しきれていないだけで、このよう情報は、どこかに掲載されているかもしれません。 ここではITに関して、グラフ化とか、WebGISとかの手習いの意味合いで自前のページを作ってみました。情報源について
掲載元は以下の通りです。 （１）ワクチン接種実績関する情報：官邸のホームページ 「新型コロナワクチンについて」のページで、都道府県別の実績として公開されている、医療関係者等、高齢者等別データを元にしています。 （２）県毎の感染情報など：厚労省のホームページ 厚労省の「報道発表資料」のなかの月別ページで、各日付ごとの「新型コロナウイルス感染症の現在の状況と厚生労働省の対応について」の中にある「別紙１」にまとめられた情報です。情報名称の対応
（１）ワクチン接種に関して ・棒グラフで表示したのは、医療関係者、高齢者の接種数の合計値です。また、日付はその時点で公開された最新情報に応じた日付としています。 （２）感染情報 ・表やグラフの表記と厚労省の表記の対応は、以下の通りです。数字の意味合いは、厚労省側の情報で確認ください。| (厚労省の表記) | (当方ページでの表記) |
| PCR検査実施人数 | PCR検査数（またはPCR) |
| 陽性者数 | 陽性者数 |
| 入院治療などを要する者 | 要治療者数 |
| 重症者数 | 重症者数 |
| 通院又は療養解除となった者の数 | 回復者数 |
| 死亡者数 | 死者数 |
利用したITツールの組み合わせについて
表示は、Wordpressのページ上ですが、LaravelのVewを埋め込んでいます。元データをLaravelでDB処理しているためです。Laravelのview上で、chart.jsを使ってグラフを書いています。 初めての試みで、すんなりいかなかったことや、ポイントと思われることなどを書いておきます。 （１）chart.jsバージョンによる違い
CDNJSサイトで、利用するchart.jsのバージョンを選択できますが、参考にするコードが、このchart.jsのバージョンとあってないと、うまく表示されないようです。 例えば、横棒グラフ指定する、「
type:horizontalBar」はバージョン３ではダメらしく、「・・・not registered controller」といったエラーになってしまいますが、バージョン2.9.4では、このようなエラーは発生しませんでした。結局、横向きのグラフにはしませんでしたが、とりあえず2.9.4を利用しました。 （２）LarvelのViewでchartを表示するには LaravelのViewで、<script></script>の間に、グラフ表示のjavascriptの処理を書いても、何も表示されず、悩みました。 理屈はよくわかってませんが、ともかく、以下の中に処理を書くことで表示されるようになりました。
window.onload = function() {
////グラフ表示処理
} chartで描く県別のデータを抽出して渡すために、LaravelによるDB化処理を利用しました。LaravelのContorollerからViewに配列としてデータを渡せば、View側のJavascriptでは、
@jsonディレクティブというもので、javascript側で利用できる配列に変換できます。このへんの情報は、ググれば容易にみつかるでしょう。javascriptで利用出来るようになった配列をそのままchartのdataとして設定できました。
（４）wordpressでのLaravel Viewの埋め込み Laravel側のViewをifameでWordPressのページに埋め込みました。urlにはgetパラメータとして県コードを設定します。WordPressには、
function.phpにおいて、扱うパラメータを宣言し、そのパラメータに応じた結果を返すしくみがあります。この場合、返す結果は、iframeタグで、Laravel側のViewを呼び出すURLを含んでいます。 function.phpには、以下を追加し、wordPressのページには、ショートコード(今回の場合は[show_graph]）を記載しました。あとは、このページにアクセスする際にURLの最後に「/?code=xxx」を付けて呼び出すことで、県に応じたコンテンツを表示できるようになりました。
function ext_query_vars( $vars ) {
$vars[]='code';
return $vars;
}
add_filter('query_vars', 'ext_query_vars');
//
function show_graph(){
$code=get_query_var( 'code','');
$html ="<iframe width='800' height='1500' id='myFrame' src='xxxxxxx/".$code."' ></iframe>";}
return $html;
}
add_shortcode('show_graph','show_graph');まとめ
県境で色分けといったことに続き、県とリンクした関連情報を表示するページを作成してみました。色分けした画像を背景として県を選択できるGISに関するページや、県境を動的に色分けすることに関するページから、遷移することができるページです。
そのほか、このページ上で県をして表示内容を変えることもできます。
お試しいただければ幸いです。
コメント