福野泰介の一日一創

今年はOPENDATAで博覧会！さばえものづくり博覧会のwebサイト、GitHubのオープンソースで作ってます。

「code4sabae/sabae-monohaku.jp on GitHub」
デザイナーさん作成の素材と、オープンデータを元にサイトづくり。キレイなサイトは作っていても気持ちがよいですね！

フォントを美しく
オープンなライセンスで使える、webフォント。いい感じのものをいくつかピックアップ。
- Open Sans Condensed
- Barlow Semi Condensed
- BenchNine
- Khand
- M PLUS Rounded 1c(日本語)

使いたいフォントは、「+ Select this style」リンクから、<link> をHTMLに、font-familyをCSSにそれぞれ設定すると使えます。

<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">

body { font-family: 'Open Sans Condensed', sans-serif; }

CSSに@importで書いても読み込んでくれないので注意！

スムーズなページ内リンク
ページ内のリンクは、a name と a href=# で設定します。標準ではパッと移動するページ内リンク、下記CSSを追記するだけで、スムーズにスクロールしてくれるようになります。

html { scroll-behavior: smooth; }

・・・と思いましたが、scroll-behavior(MDN)によると、iPhoneなどSafariが未対応。 JavaScriptかCSSかで補ってやる必要がありそうです。

ふわふわさせる
ロゴ右側でふわふわ動く「ご挨拶」リンク。CSSアニメーションを設定すると簡単です。下記のように fuwafuwaクラスをCSSに記述して・・・

.fuwafuwa { animation-name: fuwafuwa; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1.5s; } @keyframes fuwafuwa { 0% { transform: translate(0, 0vw); } 100% { transform: translate(0, 2vw) } }

タグの class に fuwafuwa を設定すれば、OK！

<img id="btn_greeting" class="fuwafuwa" src="img/topaisatsu.svg">

再利用可能なコンポーネント
どのページも共通に使いたい部分、例えばページフッターは独自タグにしてまとめましょう。 CSSテーブルでも使ったHTMLElement(Webコンポーネント)を使ってゼロフレームワークで再利用性の高いコーディングができます！

「footer.js on GitHub」
あとは、define で定義したタグを使うだけ、index.htmlとdetail.htmlに smono-footer タグがあります。

<smono-footer></smono-footer>

注意点は、ローカルファイルとしてのJavaScriptモジュール読み込みができないこと。live-serverなど、ローカルにwebサーバーを立ててお試しください。

Let's make own web!
「じぶんのウェブサイトをつくろう！ 13才以上なら誰でも無料で持てるホームページ＆HTMLとCSSはじめのいっぽ」

福井高専未来戦略アドバイザー、「創造」を軸にものづくり人材を育成する高専。日本で唯一「アントレプレナーサポートセンター」を持つ、福井高専の新しい取り組み、創業を目指すビジネスプランコンテスト。 その一環、今日は福井高専にてアイデアソン！1年生から4年生まで、集まってくれた、やる気あふれる高専生！

課題、アイデア、データを使ってアプリづくりを繰り返そう。良いアプリができて、横展開できれば、それがイノベーション。

チーム毎に発表！聞く方は、投資家のつもりになって聞こう。

身近な課題からのアプリデザインまでやった後、発想を切り替えるヒントとして、世界中の課題が詰まったSDGsを紹介。 15分、新たな視点で、課題、アイデアを出してみて、新たな発見を感じてもらう体験。

今日をKPT（ケプト）で、ふりかえり。
「最強の振り返りメソッド「KPT法」で、失敗を反省するどころか、長所も希望も見つかった話 - STUDY HACKER｜これからの学びを考える、勉強法のハッキングメディア」

視野が広がったところで、福井高専がある鯖江市。今年は鯖江の未来を占う重要な市長選挙。

「鯖江市長選2020 / Twitter」
鯖江市長選2020、候補者Twitter、リストを作ってみました。それぞれ候補者のつぶやき、見てみましょう！

「鯖江市長選挙 立候補予定者 公開討論会」
主催は、ＯＣサミット実行委員会と有志の会。鯖江市の女性の投票率が低いことを問題視した女性による企画とのこと！

早速データで見てみましょう！

Code for Sabae で相談し、オープンデータ化してもらった「投票所ごとの投票者数、投票率オープンデータ」を、高校の情報I教材の延長として実装、公開。

「鯖江市 女性投票率」ほか

「鯖江市 女性投票率 - 男性投票率」

「鯖江市 合計有権者数」

 みんなでつくろう、世界一持続可能なまち！

再びほぼ全国に広がった新型コロナ感染者、新時代を切り開くため、創造活動の重要性は増すばかり。

2019年に初共催した、出展者みんなでつくる手作りイベント、NT鯖江。こちらは会場を鯖江商工会議所の広い会場（1F SCCと4F 大ホール）に移し、密を避けてのリアル展示イベントとしての開催決定！

「NT鯖江2020 - PukiWiki」
出展者募集開始しました。盆栽、掛け軸、手芸、電子工作、ソフトウェア、お絵かき、彫刻などなど、つくったものぜひご展示ください！（無料です）

オープンデータなものづくりアイドル、Hanaちゃん by Azulily_V、PRなどに活用ください！

さばえものづくり博覧会、2020年は中止ですが、替わりにオープンデータ化と発信サイトをオープンソースで製作し、情報発信力を高め、次年度に備えることになりました。

GitHubにて製作中、コントリビューター大募集！

2019年度の出展者を中心に、鯖江商工会議所メンバーへのオープンデータ化促進、福井県での施設ダッシュボードや、鯖江市長候補比較でも使用している「PUSHかんたんオープンデータ」を活用。

それぞれのデータは、それぞれの会社さんがいつでも自由に編集できます。

より使いやすく、より伝わりやすい情報発信の形を、オープンデータとオープンソースで探っていきます！

改善するにはデータ化を！数値化できなければ、客観的な改善を確認できません。
また、素早く広く活用するためにはオープンデータ。Excelでも作れてプログラムからも扱いやすいCSVオープンデータがオススメです。（参考、高校情報I、CSVオープンデータのススメ、なぜ 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年創業のポリ袋製造業|清水化学工業）

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

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版へコントリビュート

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 さん）