改善するにはデータ化を!数値化できなければ、客観的な改善を確認できません。
また、素早く広く活用するためにはオープンデータ。Excelでも作れてプログラムからも扱いやすいCSVオープンデータがオススメです。(参考、高校情報ICSVオープンデータのススメなぜ PDF ではいけないのか

Code for Japan、総務省のマイナンバーカードの普及率PDFをCSV化し公開!
マイナンバーカード普及状況ダッシュボード
カラム地図での表示版、作ってみました。

マイナンバーカード普及状況 with カラム地図
2020年7月1日現在のトップは宮崎県で、24.3%!


マイナンバーカード普及状況 with カラム地図」宮崎県
宮崎県をタップすると、県内の普及状況比較ができます。都城市がダントツ37.9%!


マイナンバーカード普及状況 with カラム地図」福井県
福井県は勝山市がトップ!(表示している中での最小最高をとって色付けしています)
地域によるバラツキの理由を探るのもおもしろそうですね。毎月1日にだいたい更新されるようです。 このアプリは、データ一覧を取得し最新データを表示するように作ってあるので、来月頭にまたぜひチェックしてみてください。


鯖江市地域活性化プランコンテスト | 市長をやりませんか?
13回目となる「市長をやりませんか?」鯖江市地域活性化プランコンテストでは参加学生大募集中! 今年は初のオンライン開催。全国、全世界どこからでも鯖江のプラコンに気軽にチャレンジ可能。

自分のまちと、鯖江、何が違って、何が同じなのか、データとデータだけでは見えないこと、両方活かして未来を創るコンテスト。 高専生の参加も大歓迎!

links
- [BOD供養寺]マイナンバーカード交付率をグラフ表示するサイトを作った - Qiita
- マイナンバーカード総合サイト
- 厚生労働省の方へ、CSVオープンデータ化で効率化しましょう! 新型コロナウイルス国内事例における都道府県別の患者報告数表示アプリ

鯖江市の未来を選ぶ市長選まであと2ヶ月ちょっと。鯖江市の現状を知るシリーズ、まずは基本の人口編。 データシティ鯖江人口オープンデータをJavaScriptのライブラリ Chart.js を使って、グラフ化しました。

選挙権ある18才以上の世代別で見てみると、40代がちょっと多めですが、割と万遍ない分布でした。


ただ、年齢別に細かく見てみると、かなり凹凸があります。鯖江市で一番多いのは年齢は72才! 次に多いのは、僅差で47才。来年には、逆転しそうです。更新年毎に重ねてみると傾向が見えます。 (90才に異常値となっているのは、過去のデータでは90才以上がまとまっていたから)


男女比は70才までほぼ1:1で一定です。70才を超えると女性比率が上昇しているのは、女性の方が長生きだから。


2010年を1として、年齢別の変遷を追ってみました。今年2020年31才の人(2010年に21才の人)が鯖江市で最も増加しています。


不思議な動きをしているので、2020年現在18才〜40才のみにしてみたグラフです。2014年から2015年にかけて当時20代後半の人が急に増加しています。 大規模な宅地造成などがあったのでしょう。地区別人口を追うとより見えてきそうです。

CSVオープンデータを使ったグラフ化、高校の情報Iの応用教材として追加しています。これからの必修、大人も押さえておきたいですね。
鯖江市世代別人口割合(18才以上) 2020年、他」(src on GitHub)

links
- 今年10月、65年ぶり三つ巴の鯖江市長選! オープンデータで作ろう候補者比較サイト
- 2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート

総務省オープンデータ研修の地域メンターでの連絡会、鯖江でも、世界中どこからでもサクッと集まれるオンライン新習慣がありがたいです。 イベント表紙に使われていた、フリー素材で地域の特産をPRしている宮崎県小林市のお肉画像 oniku-images


肉サイコロ_焼き_3|お肉のフリー素材サイト oniku images|宮崎県小林市
かわいいお肉画像、発見!サイコロステーキでつくったサイコロの目、6画像。 高校プログラミング情報Iのサイコロ確率シミュレーションに関連した補助教材として、サイコロを作ってみました。

フリー素材(オープンデータと違って利用制限があるので、利用規約を要確認)、ダウンロードして、シンプルに開いた瞬間、1〜6、いずれかランダムに目が出るプログラムから作ってみましょう。

<img id="img"> <script type="module"> const n = Math.floor(Math.random() * 6 + 1); img.src = `img/onikuimages-dice-${n}.jpg`; </script>

グラフのアプリで使ったcanvasタグの代わりに、画像タグ(img)を用意します。 0以上1未満の乱数を返す関数 Math.random を6倍して、1以上7未満の数にしたものを小数点以下を切り捨てる関数 Math.floor で、1〜6のランダムな値を作って、定数(const) n に入れる。 この n を使って、画像のファイル名とすれば、できあがり!

このプログラムを dice.html として保存し、img フォルダに、onikuimages-dice-1.jpg など6ファイル用意しておけばパソコン上で動きます。 リロードする度に目が変わります。

画像をクリックしたらもう一度振るsetTimeoutを使ってアニメーションするなど改造もどうぞ!

このくらいのシンプルなプログラムを作って活用するために必要なスキルを書き出してみます。

プログラミングに関するスキル
- 変数、関数の使用、条件分岐、繰り返し、関数の作成

パソコン利用に関するスキル
- マウス操作、キーボード操作、アプリ起動、アプリ切り替え、ファイル種別のリスク有無判定、ファイルダウンロード、テキストファイル作成、ファイル管理(ディレクトリ、削除、移動、コピー)

プログラミングより、パソコンのハードルの方が地味に高そうです。 スマホ普及により、高校生によってはほとんどパソコンを使ったことないという例も多くなるでしょう。

ブラウザ上で完結する環境は広がっていますが、補助輪付き自転車と同様、パソコンを最大限に活かすことはできません。 ただ無理にやっても、地味で大変な思いをしたのに、できることはたったこれだけか・・・とプログラミング嫌い以前に、パソコン嫌いが増える要因にもなりかねません。

今回のお肉サイコロを作ろう教材だけで、ぐっとくる生徒は少ないはずです。「JavaScript 50行で作るで作るVRマイクラ風」並のインパクトをどうコンパクト実現するかが悩ましいところです。 パソコンがなくても、また、プログラミングしなくてもできることは拡大し続けるので、それを常に上回る教材を提供し続ける必要があります。(実際、高校の情報II機械学習の項目は、SonyのAI開発ツール「Neural Network Console」の紹介になってしまっています)

パソコン自体をシンプルにした、IchigoJamというアプローチ。スマホより簡単なパソコンで、スマホでは難しいリアルの制御、LEDの点灯を自分で自在に操れるようになるまでが45分。 ネットワークが不要なので、OSのセキュリティアップデートは不要、教材は陳腐化することがありません(しません)。 F1ドライバーも、カートレースから。F1カーは毎年のように最新技術が投入されますが、カートの構造はほぼ変わりません。

どんどんおもしろくなるコンピューター、はじめのいっぽは大事です。

EBPM(イービーピーエム)、聞いたことありますか?
証拠に基づく政策立案(Evidence-based Policy Making)の略で、2018年の総務省資料がヒットするなど比較的新しい言葉のようです。(何に基づいていたのだろう?)

レジ袋が有料化。ゴミの削減は大事な問題ですが、なぜレジ袋だったのでしょう?

ポリ袋は実はエコなんです。
脱プラ、脱ポリ、紙袋へ切り替えをご検討のお客様へ|1958年創業のポリ袋製造業|清水化学工業
検証してみましょう。証拠として挙げられているデータ「ポリ袋は漂着ごみの重量で0.4%にすぎない」の出典をたどります。


環境省「中央環境審議会循環型社会部会プラスチック資源循環戦略小委員会(第3回) 議事次第・配付資料」の参考資料1「プラスチックを取り巻く国内外の状況<第3回資料集>


P78にありました。2016年、環境省による全国10地点で調査された漂流ごみの調査結果。


補助教材、漂流ごみの分類」(src on GitHub)
PDFからのCSV化は手作業で手間がかかります。テキストデータをテキストエディタにコピーして、タブ区切り化して、Excelに貼り付け、整形、確認、CSVデータとして保存します。 あとは、Chart.jsを使って、円グラフにして完成!

ポリ袋は、ごみ全体からの重量比で0.4%分しかありません。飲料用ペットボトルで7.3%、その他プラボトル類で5.3%あるので、この対策を先に考えた方が良さそうです。 そもそもなぜ捨てるのか・・・。減らないようであれば、ペットボトル税、プラボトル税をかけて、それを財源に対策するのも手なのかも。 また、大きな割合を占める、漁業由来のごみは大きく削減する鍵。

なぜ割合としては小さい「ポリ袋」が選ばれたのか?

根拠としての記述は見つけてられていませんが、P65に下記の記載がありました。

進めていくべき・協力できると思う取組を確認したところ「スーパーのレジ袋有料化」が50%以上と最も高く
確かに福井のスーパーではマイバッグがずいぶん定着してますが、コンビニを含む、あらゆるお店のレジ袋で協力できるかと言えば別かもしれません。 また、上記、ごみ削減に向けた、効果あるという証拠が弱いと知っていたら回答も違ったかもしれません。(* 福井県敦賀市 マイバッグ持参率88%|環境ニュース[国内]|EICネット


P51にプラスチックくずの輸出量の記載があります。日本はプラごみを輸出し、他国に処理を押し付けていることを知ったのはごく最近です。 「財務省貿易統計 Trade Statistics of Japan」からCSVデータをダウンロードし解析することができます(最新データは2020年5月分)。

レジ袋有料化によって、どのような変化がでるか?
未来に向けたKPI、適切に設定し、チェックし、見直し、改善するために知恵を絞って、行動していきましょう!

遂に、厚労省がCSVオープンデータ公開スタート!
オープンデータ|厚生労働省
検査数、患者数、退院数、死亡者数などが、CSVオープンデータとして公開されました。(都道府県別や、病床数はまだの様子)
高校プログラミング「情報I」の範囲で補助教材として使えるように、シンプルにまずは活用例をつくってみました。


補助教材、CSVオープンデータをダウンロードしグラフ化、2軸」(src on GitHub)
早速 Chart.js を使ってグラフ化!2軸にして、検査数と発生数を比較できるようにしました。


補助教材、PCR 検査陽性者数(日別)」(src on GitHub)
まずはシンプルに日別の陽性者数のみ表示からいじり始めるといいです。

<body style="margin:0;text-align:center;"> <canvas id="chart"></canvas> データ出典:<a href=https://www.mhlw.go.jp/stf/covid-19/open-data.html>オープンデータ|厚生労働省</a>(新型コロナウイルス感染症について)<br> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; import util from "https://taisukef.github.io/util/util.mjs"; const main = async () => { // const url = "https://www.stopcovid19.jp/data/mhlw_go_jp/opendata/covid19.csv"; const url = "https://www.stopcovid19.jp/data/mhlw_go_jp/opendata/pcr_positive_daily.csv"; const json = await util.fetchCSVtoJSON(url); console.log(json); const date = []; const data1 = []; for (const d of json) { date.push(d["日付"]); data1.push(d["PCR 検査陽性者数"]); } const config = { type: "line", data: { labels: date, datasets: [ { data: data1, borderColor: 'rgb(255, 99, 132)', fill: false, lineTension: 0 }, ] }, options: { title: { display: true, text: "COVID-19 日本のPCR検査陽性者数" }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: "日付" } }], yAxes: [{ scaleLabel: { display: true, labelString: "PCR 検査陽性者数" }, ticks: { beginAtZero: true } }], }, legend: { display: false } } }; new Chart.Chart(chart, config); }; main(); </script>


厚労省ページからダイレクトに取得はできないので、GitHub pagesに自動的に上げる形にしています。


BOM付きUTF-8エンコードCSVなのでExcelでもOK!


オープンデータ|厚生労働省」活用しましょう!


新型コロナウイルス関係 CSVオープンデータ|厚生労働省
日付付きのさまざまなデータをひとまとめにしたCSVオープンデータを作成するプログラムも作ってみました。(src on GitHub)

links
- 厚生労働省の方へ、CSVオープンデータ化で効率化しましょう! 新型コロナウイルス国内事例における都道府県別の患者報告数表示アプリ
- 2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート

HTMLだけ知っていればOK! 自分だけの地図付きサイトを作るための map-gsi タグを作りました。

簡単埋め込み地図 map-gsi タグの使い方
使い方は簡単、下記をHTMLに埋め込むだけ!

<script type="module" src="https://code4sabae.github.io/leaflet-mjs/map-gsi.mjs"></script> <map-gsi> <map-gsi-icon ll="35.944535,136.186228" name="Hana道場"></map-gsi-icon> <map-gsi-icon ll="35.943560,136.188917" name="鯖江駅"></map-gsi-icon> <map-gsi-icon ll="35.942795,136.198881" name="めがね会館" src="icon-meganekaikan.png" size=48></map-gsi-icon> <map-gsi-icon ll="35.949658,136.258142" name="JAPAN CRAFT HOUSE"></map-gsi-icon> </map-gsi>

map-gsi タグの中に、アイコンを表す map-gsi-icon タグを置きたいだけ置きます。llは緯度経度、nameに名前を指定します。srcに正方形のアイコン画像ファイル名を指定するとアイコン表示。sizeでアイコンの大きさを変えられます。 map-gsi タグの width と height で、地図の大きさも変更可能。(width="50vw" height="300px" など)

ブラウザの標準仕様、WebComponents (HTMLElement) を使って、オープンソースな地図コンポーネントLeafletを組み込んでいるだけなので、Angularや、Vue.jsなど、他のフレームワークとの相性も良いはずです。

ついでに、そのページのQRコードを表示する、qr-codeタグも作ってみました。

<script type='module' src="https://code4sabae.github.io/leaflet-mjs/qr-code.mjs"></script> <qr-code></qr-code>

その場で人にシェアするときや、PCで見ていてスマホでも見たいときに便利です。

qr-codeタグのプログラムは、下記のようなJavaScript。オリジナルタグづくり、簡単ですね! 何か新しいフレームワークを学習するときも、基本を知っていればどう作ってあるか想像でき、習得も速く、詰まりにくいです。 十分に便利なので、私は当面ゼロフレームワーク派。

class QRCode extends HTMLElement { constructor () { super(); const img = new Image(); img.src = "https://chart.apis.google.com/chart?chs=140x140&cht=qr&chl=" + encodeURIComponent(document.location); this.append(img); } } customElements.define('qr-code', QRCode);

世界とつながる楽しいwebプログラミングの世界へどうぞ!
HTMLはじめのいっぽJSはじめのいっぽ

ウェブサイトをつくることば「HTML」は、「<」と「>」で囲む「タグ」を組み合わせて作ります。 プログラミングすれば、実は自分で好きなオリジナルタグを創ることもできるんです!(ただし、ハイフン付きタグのみ)

環境省のWBGTオープンデータでも登場した、シンプルで扱いやすいフォーマットCSVをHTMLに埋め込むための「csv-table」タグを作りました。(src on GitHub)

csv-table HTMLElement ES module

使い方は簡単。まずはExcelで表形式のデータを用意します。

CSV(utf-8)で名前を付けて保存します。

<script type="module" src="https://code4sabae.github.io/csv-table/csv-table.mjs"></script> <csv-table id=csv2895> アーキテクチャー,ADD,SAL 左シフト,MUL 下位64bit,MUL 上位64bit,DIV Core 65nm (2006),1,1,6,7,-90 拡張 Core,1,1,6,7,- Nehalem (2008),1,1,3,10,70-80 Westmere (2008),1,1,3,10,70-80 SandyBridge (2011),1,1,3,4,80-90 Ivy Bridge (2012),1,1,3,4,80-95 Haswell (2013),1,1,3,4,80-95 Broadwel (2014),1,1,3,4,80-95 Skylake (2015),1,1,4,5,80-95 </csv-table>

テキストファイルとして開き、csv-tableタグで囲んで、csv-table ESモジュールを読み込むscriptタグと共に埋め込むだけ!(csv-tableが複数ある場合、scriptタグは1つでOK)

アーキテクチャー,ADD,SAL 左シフト,MUL 下位64bit,MUL 上位64bit,DIV Core 65nm (2006),1,1,6,7,-90 拡張 Core,1,1,6,7,- Nehalem (2008),1,1,3,10,70-80 Westmere (2008),1,1,3,10,70-80 SandyBridge (2011),1,1,3,4,80-90 Ivy Bridge (2012),1,1,3,4,80-95 Haswell (2013),1,1,3,4,80-95 Broadwel (2014),1,1,3,4,80-95 Skylake (2015),1,1,4,5,80-95

このように、表ができます! 中身はシンプルなtableタグになっているので、スタイルシートで好きなように飾ってお使いください。

HTML/CSS/JavaScriptを基礎から学ぶには、こちら!
HTMLはじめのいっぽ

※ サンプルで使用した表は「Intel® 64 and IA-32 Architectures Optimization Reference Manual」から、足し算、ビットシフト、掛け算、割り算の速度目安のアーキテクチャー毎の速度比較表です。 以前、探ったx64マシン語アーキテクチャー比較に、間違いがあったので、訂正しました。(ご指摘ありがとうございます! @57tggx さん)

COVID-19 Japanのデータを使ってもらっている「防災INSIGHT」開発者の仁志さんより情報いただき、「暑さ指数(WBGT)予測値等 電子情報提供サービス」を使った、暑さ予測ランキングアプリを作成しました。

暑さ予測ランキング - 環境省WBGTオープンデータ」(src on GitHub)
日本各地840箇所の温度と湿度を加味した暑さ指数予測をランキング表示。沖縄、鹿児島が暑いですが、ちょくちょく本州も上位にいます。


環境省熱中症予防情報サイト グラフ-今日 福井(福井)
環境省では場所ごとに見られるサイトがあります。外に出る予定と合わせてチェックできたり、危険な時にアラートしてくれると便利そうです。


単位は「℃」の暑さ指数(WBGT = 湿球黒球温度)、70位くらいまでいくと、ほぼ安全な21℃未満が表れます。


環境省によるAPI「環境省熱中症予防情報サイト 暑さ指数 電子情報提供サービス」があるので、こちらをwebアプリから手軽に使えるようにCSV/JSONオープンデータに変換しました。 地味に手間がかかったのは、PDFでのみ紹介されていた、エリアデータもCSV/JSON化。やはり、すべてCSVオープンデータがうれしいです。

links
- テレビ局もうれしいCSVオープンデータ、法令CSVを使ったオープンソース「法令探しアプリ」 福井テレビ「タイムリーふくい」出演
- ダッシュボードとCSVオープンデータで推進しよう! 日本の法律8475コのCSV - 東京オープンデータデイ2020オンライン

「DX で日本を立て直す。~ 事例に学び、ともに創ろう ~」をテーマに開催される「SAP NOW Japan 2020」のセッションの収録。 行政と民間が共に創ると書いて、官民共創。 最近よく聞く、DX(デジタルトランスフォーメーション)こと、IT活用への転換をテーマに、事例紹介とディスカッション。

モデレーターでSAPジャパンの横山さん、内閣官房内閣参事官の奥田直彦さん、LINEのAIカンパニーCEOで、政府CIO補佐官の砂金信一郎さんと!


コロナ禍、行政によるオープンデータ、オープンソースが民間企業やシビックテック(市民個人によるIT技術を使った貢献)との相性の良さを広く伝えることができました。 (セッションで使った資料より)


官民共創によるデジタルトランスフォーメーション - SAP NOW Japan 2020」7/21公開予定!
あっという間の45分、またひとつ新たにやりたいこと、見つけてしまいました。 今年はDX開催となった「SAP NOW Japan 2020」世界中どこからでも視聴可能です!

追加事例、DXによって薄れた国境。シリコンバレーを中心に進んでいるオープンソースプロジェクト、咳の音でAI診断を目指す、オープンソースで進む対コロナ国際プロジェクト「Virufy」。

wip, trying to add link to submit button
咳の音を収集するwebアプリで、お手伝い。


フォーム送信後のダイアログに協力を募るリンクの追加ができました。

Virufyでは、ウェブや、モバイルアプリの開発で貢献したい人、募集中!
Get involved and become a part of Virufy team | Join Us | Virufy
世界中の課題、自分の関心事で、自分の得意を伸ばし、協力しあって、立ち向かいましょう!
世界のどこかにいる同志を見つけ、共に進めるもよし、自分で立ち上げ募るもよし。 使える道具はたくさんある上、なければそれ創ること自体も大いに有益なプロジェクト。

高校2年生が、厚生労働省のオープンソースな接触管理アプリ「Cocoa」に貢献!
JKが接触確認アプリ「Cocoa」の開発に貢献した話。〜1日でXamarinを学びアプリ改善〜 - Qiita

高専生で自信をつけたい人へのオススメ企画。
高専jigインターン2020募集

何歳でも遅くない、鯖江、Hana道場での大人プログラミング講座もどうぞ!
Hana道場 - イベント

創る人になりましょう!

シリコンバレー生まれの友達、あみる。 福井県永平寺町のエボリューション大使、福井県代表として世界会議「One Young World 2018」にも参加。 現在は一時シリコンバレーに戻り、スタンフォード大学でAIを専攻する学生をしながら、Virufyの社長として活動中。

Verify your COVID-19 risk with a smartphone | Home | Virufy
Virufyは、咳の音声をスマホで録音し、新型コロナウイルス感染症の早期発見を目指すプロジェクト。 感染の有無と基礎データと共に集めた、咳データを機械学習(AI)。判定アルゴリズムの完成、医療リソースの節約、早期封じ込めがゴール。


社長のあみる他、Virufyのボードメンバー。アドバイザーとして福野も参加。

テストで収集した咳の音声を含むデータは、オープンデータとして公開。幅広くボランティア参加者を募集している。
Open-source COVID-19 cough dataset from Virufy | Open Data | Virufy
Get involved and become a part of Virufy team | Join Us | Virufy


webアプリとして咳データの収集を進めたいとのことで、前回のプロジェクトをVirufy向けに移植。 ユーザーが入力したフォームデータと、音声データをサーバーで受け取り、CSV化するシンプルなサーバープログラムを、Deno/JavaScriptで実装。(src on GitHub)


add the server program by taisukef · Pull Request #21 · virufy/virufy.github.io
オープンソースで進む開発、Forkして、追加分をプルリク。マージされ、プロジェクトへ貢献できた。


国際チームVirufyで進む、新型コロナウイルスとの戦い。少し落ち着いた日本、何か行動するにはいい機会。(Virufy

ひとまず基本的なことから始めたい。そんな人におすすめはこちら。
HTML/CSS/JSはじめのいっぽ

人類の知恵の結晶「web」フル活用していきましょう!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS