福野泰介の一日一創

Code for KOSEN チーム開発で進む高専プロコン競技部門予定だった「囲みマス」のシステムづくり、APIサーバーの第一弾が動き出し、AIプログラムづくりに取り組む準備ができました！

Deno TypeScript APIサーバー、JavaScriptで作ったKakomimasuコアを使っています。

GitHubのKakomimasuリポジトリをcloneまたはダウンロードして、APIサーバーの使い方記載の手順で動かすと、PC上でAPIサーバーが起動し、テストのAIプレイヤー2人の試合をブラウザで見ることができます。

JavaScriptで、AIを作ってみましょう。(src on GitHub

import { Action, sleep, match, getGameInfo, setAction, diffTime } from "./client_util.js"; const [ playerid, roomid] = await match(`高専太郎`, "ポンコツ"); let gameInfo; do { gameInfo = await getGameInfo(roomid); await sleep(100); } while (gameInfo.startedAtUnixTime === null); console.log(gameInfo); console.log( "ゲーム開始時間：", new Date(gameInfo.startedAtUnixTime / 1000).toLocaleString("ja-JP"), ); await sleep((diffTime(gameInfo.startedAtUnixTime) + 1) * 1000); // ターン1 setAction( roomid, playerid, [new Action(0, "PUT", 1, 1), new Action(1, "PUT", 3, 3)], ); await sleep((diffTime(gameInfo.nextTurnUnixTime) + 3 + 1) * 1000);

APIサーバーへのアクセス用の関数群(client_util.js)をimportして、プレイヤー登録し、ゲーム開始を待って、ターン毎にアクションを送ります。

getGameInfo で、フィールドの状態、自分や相手の状態、点数を把握できます。 まずはシンプルに高得点から順に押さえるだけのAIから作ってみることから始めてみましょう！

TypeScript版もあるので、お好きな言語でどうぞ！（client_test1.ts on GitHub）

週1でオンラインで集まってます。
次回は、7/16(木)20:00-22:00内、ご興味ある方、ぜひどうぞ！
「Code for KOSEN Slack」

links
- 中止になった高専プロコン競技部門はオンラインで遊ぼう！ 競技システムのDeno/Node.js用コアモジュールのオープンソース公開

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

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

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

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

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

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

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

進めていくべき・協力できると思う取組を確認したところ「スーパーのレジ袋有料化」が50%以上と最も高く

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）

学習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++; // 入ったらカウンターに１を加える 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 | MDN、JavaScript モジュール - JavaScript | MDN）

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

機械学習(AI)で活用されるGPU（ジーピーユー）とは、小さなタスクを多数のプロセッサで並行してこなすコンピューター。 C言語に似たプログラミング言語、GLSLを使って、ブラウザ上でも遊べます。

「cloud」（GLSLを使ったアニメーションを背景にプログラムを確認できます）
ほぼサンプルのままですが、色を変え、縦横比を合わせて、ゆっくり拡大縮小させてみました。1ピクセル毎の処理 main が並列して走ることが特徴です。 普通のプログラムだと繰り返しが多くなるほどに遅くなりますが、並列実行はそれがありません。ちょっと変わったお絵かき方法が楽しめます。

参考になったのが、こちら「The Book of Shaders」、原著は英語ですが、日本語で前半が翻訳されています。 動き、自分でいじれるサンプルが豊富に含まれているので、気軽に楽しめます。（前提知識、何かプログラミング言語の経験とベクトルの知識）

きっかけは、csv-tableで始めたWebComponents。Twitterのハッシュタグで検索して発見した、shader-doodleタグ。 シェーディング言語をHTML内のscriptタグで埋め込むだけで使えて便利！

目指せ、技術のわらしべ長者！

CSVや、地理院地図で便利さと手軽さが分かったWebComponent。 タブ区切り版へのご要望(by @imabari_ehimeさん)があったので、作ってみました。

<script type="module" src="https://code4sabae.github.io/csv-table/tsv-table.mjs"></script> <tsv-table>項目 CSV TSV 区切り カンマと改行 タブと改行 拡張子 .csv .tsv (?) 利用 多い 少ない 表計算ソフト連携 ファイル操作必要 コピペでOK </tsv-table>

と、HTMLに記述すると、下記のようにテーブルができます。CSSで自由に飾れます。 項目 CSV TSV 区切り カンマと改行 タブと改行 拡張子 .csv .tsv (?) 利用 多い 少ない 表計算ソフト連携 ファイル操作必要 コピペでOK

以下、作り方の解説です。
（前提知識、IchigoJamなどのプログラミングの基本 + HTML/CSS/JSはじめのいっぽ）

まずタブ区切り版とは、CSVがコンマ(C)区切り(S)値(V)だったのに対して、タブ(T)区切り(S)値(V)な点が異なります。

項目 CSV TSV 区切り カンマと改行 タブと改行 拡張子 .csv .tsv (?) 利用 多い 少ない 表計算ソフト連携 ファイル操作必要 コピペでOK

tsvファイルとしての流通はほとんどありませんが、Excelからテキストへのコピーや、テキストからExcelへのコピー時に使用されていて、見た目にも分かりやすいのが利点です。

早速、実装してみましょう！まずは空の tsv-table タグを作ります。

<body> <script type="module"> class TSVTable extends HTMLElement { constructor () { super(); this.textContent = "tsv-table!!"; } } customElements.define("tsv-table", TSVTable); </script> <tsv-table> id name 1 なまえ 2 名前 3 ナマエ </tsv-table> </body>

this.textContent はタグ内の文字列です。ブラウザで表示すると、中身は無視されて「tsv-table!!」と表示され、自作のタグが動いたことがわかります。 あとは、タグ内のデータをテーブルに変換するだけです。

const v = this.textContent.trim().split("\n").map(a => a.split("\t")); console.log(v);

前後の空白を無視する trim、改行で区切る split、配列から新しい配列を作る map を使って、TSVを2次元配列に変換します。 console.log で表示すると Chrome の DevTools などで確認できます。

mapを使わず、下記のように for で繰り返しするのと意味は同じです。

const s = this.textContent.trim().split("\n"); const v = []; for (let i = 0; i < s.length; i++) { v[i] = s[i].split("\t"); } console.log(v);

二次元配列を HTML の table にしましょう！

this.innerHTML = ["<table>", v.map(a => `<tr>${a.map(b => `<td>${b}</td>`).join("")}</tr>`).join(""), "</table>"].join("");

mapとjoinを使うとコンパクトに実装できます。
配列の連結する join を使って、tdで囲んだtrをtableで囲んでできあがり！

<style> table { border-collapse: collapse; } td, th { border: 1px solid #333; padding: .1em .5em; font-size: 90%; } </style>

CSSで好きなように装飾して使いましょう！（HTMLElement内で設定してもOK！）

表計算ソフト、データの中に改行があったりタブがあったらどうなるでしょう？（国際機関IANAが定めるTSV規格では項目、値内のタブや改行は禁止されています。）

試してみたところ、CSVと同様、ダブルクォートで囲まれたり、ダブルクォートは2つ重ねるエンコードがされるようで、ExcelもGoogleスプレッドシートも同じでした。 この形式に対応するには上記の単純な変換に替えて、decodeTSVという字句解析して配列を返す関数を実装します。（src on GitHub）

スクリプト部分を tsv-tabel.mjs という名前にすれば、scriptタグで読み込んでいろいろなHTMLファイルで使い回せて便利です。 フレームワークの基本ですね！

Let's enjoy your web programming!

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>

ブラウザの標準仕様、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オンライン