総務省オープンデータ研修の地域メンターでの連絡会、鯖江でも、世界中どこからでもサクッと集まれるオンライン新習慣がありがたいです。 イベント表紙に使われていた、フリー素材で地域の特産を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版へコントリビュート

プログラミングの必修化、2020年から小学校、2021年から中学校、2022年から高校でスタート。 高校では「情報I」という必修と、選択の「情報II」にてプログラミングが登場します。 教員研修用教材が公開されたので貢献できるところを探してみました。


高等学校情報科「情報Ⅰ」「情報II」教員研修用教材
一番気になるのは「高等学校情報科「情報Ⅰ」教員研修用教材(本編)」の「第3章コンピュータとプログラミング」。 Python版を基本に、他のプログラミング言語版として、 JavaScript版VBA版ドリトル版 Swift版の5つのプログラミング言語を教員が選ぶスタイルになっている。

まず一番気になったのは、他言語版として用意されたものに、API・グラフ描画・ハードウェア制御の実習が省略されていること。

さらにこの数式モデルの計算結果をわかりやすく評価するため,グラフで表示することが可能なプログラミング 言語もある。
※ JavaScript では実行が難しいため,本書においては割愛する。
高等学校情報科「情報I」教員研修用教材 JavaScript版 (第3章のみ) P43
世界中にある多種多様なライブラリがあり、ブラウザのみで動作するJavaScript、グラフ表示も簡単です。オープンソースな実装と共に実習例を紹介する。

学習16で登場する福利計算。まずは下記は10年分の預金残高を表示するプログラム。model1.html というファイル名で、テキスト形式(utf-8)で保存し、ブラウザで開くだけで動く。

<script type="module"> let yokin = 100000; const riritsu = 0.05; for (let i = 0; i < 10; i++) { const risoku = yokin * riritsu; yokin += risoku; alert(`${i + 1} 年目 : ${yokin}`); } </script>


document.write や、type="module" ではない古いJavaScript(クラシックスクリプト)は2022年に教える内容としてはふさわしくないので要修正(*)。


学習16 預金複利計算のグラフ」(src on GitHub)

<body style="margin:0"> <canvas id="chart"></canvas> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; const riritsu = 0.05; const yokin = [100000]; const labels = []; for (let i = 0; i < 10; i++) { const risoku = Math.floor(yokin[i] * riritsu); yokin.push(yokin[i] + risoku); labels[i] = i + 1; } const config = { type: "line", data: { labels: labels, datasets: [{ data: yokin, borderColor: 'rgb(255, 99, 132)', fill: false, lineTension: 0 }] }, options: { title: { display: true, text: "FUKURI KEISAN" }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: "Year" } }], yAxes: [{ scaleLabel: { display: true, labelString: "Yokin[YEN]" }, ticks: { beginAtZero: true } }], }, legend: { display: false } } }; new Chart.Chart(chart, config); </script>

グラフ化するライブラリとして、東京都の新型コロナウイルス対策サイトでも使われた「Chart.js」のモジュールスクリプト版「Chart.mjs」を使用。 こちらも graph1.html として保存して、ブラウザで開くだけで動作する。


5%10年では複利の効きが分かりづらいので、50年に変更した図がこちら。for文、繰り返しの回数をいろいろ変更してみるとおもしろい。

続いて、サイコロの確率のグラフ化。

学習16 サイコロの出目確率のグラフ」(src on GitHub)
type: "bar" で棒グラフにできます。 試行回数がたかだか100回だと期待値から大きく外れることがわかります。ブラウザを何度かリロードしてみましょう。

<body style="margin:0"> <canvas id="chart"></canvas> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; const deme = [0, 0, 0, 0, 0, 0] // 出目の数を数える配列 for (let i = 0; i < 100; i++) { const saikoro = Math.floor(Math.random() * 6 + 1); deme[saikoro - 1]++; } const left = [1, 2, 3, 4, 5, 6] // グラフの左方向の値指定用 const config = { type: "bar", data: { labels: left, datasets: [{ data: deme, backgroundColor: 'rgb(255, 99, 132)' }] }, options: { title: { display: true, text: "SAIKORO SIMULATION" }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: "ME" } }], yAxes: [{ scaleLabel: { display: true, labelString: "KAISUU" }, ticks: { beginAtZero: true } }], }, legend: { display: false } } }; new Chart.Chart(chart, config); </script>

グラフの細かい設定は、Chart.jsのドキュメントを案内するといいでしょう。 まずは色を変えてみるとか、簡単なところ試行錯誤するのが楽しく学習するポイントです。


こちらもfor文内の繰り返し回数を増やすと確率のばらつきが収まっていく様子がわかります。 600回、6000回、60000回と増やしていくと分かりやすいです。


学習16 モンテカルロで円周率」(src on GitHub)
乱数を使った円周率の求め方、モンテカルロ法。点の数を増やすほどに精度が高くなることがわかります。グラフのtypeは、bubbleを使用。

<body style="margin:0"> <canvas id="chart" width="100" height="100"></canvas> 円周率: <span id="pi"></span> <script type="module"> import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs"; const red = []; const blue = []; const totalcount = 2000; // ランダムに打つ点の総数 let incount = 0; // 円に入った点の数 for (let i = 0; i < totalcount; i++) { const x = Math.random(); // 0-1 の範囲の値 const y = Math.random(); // 0-1 の範囲の値 if (x ** 2 + y ** 2 < 1.0) { // 単位円の中に入ったら incount++; // 入ったらカウンターに1を加える red.push({ x, y }); // 赤色でプロット準備 } else { blue.push({ x, y }); // 青色でプロット準備 } } pi.textContent = incount * 4.0 / totalcount; // 求まった円周率 const config = { type: 'bubble', data: { datasets: [ { data: red, backgroundColor: 'rgb(255, 99, 132)' }, { data: blue, backgroundColor: 'rgb(132, 99, 255)' } ] }, options: { animation: { duration: 0 }, title: { display: true, text: "Monte Carlo method" }, legend: { display: false } } }; new Chart.Chart(chart, config); </script>

JavaScriptを使ってもプログラミング実習できることを示しました。API編、ハードウェア編も別途書いて、GitHubへ追記しようと思います。
高等学校情報科「情報I」教育研修用教材プログラム集

もし、上記内容が難しく感じたとしたら、コンピューターやパソコンに関する基礎的な学習、タイピングや操作に対するある程度の慣れが必要です。

要修正、補足
* document.writeは、alert、console.log、DOM操作に置き換える。(w3.org document.write: Warning! This method has very idiosyncratic behavior.Document.write() - Web API | MDN
* 変数スコープが分かりやすく動作する strict mode を基本にする。(* Strict モード - JavaScript | MDNJavaScript モジュール - JavaScript | MDN

神山まるごと高専の技術教育統括ディレクター候補として、情報技術やプログラミングに関する教材のオープンデータ化を推進中です。 こんな教材がほしい、ここが分かりづらかった、一緒に教材を作りたいなど、協力したいという情報系高専生、ぜひご一報を!(夏のインターンプログラムも受付中 2020-07-10まで

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