0から9、10種類の記号を使って数を表現するのが10進法。
0と1を使った2進法や、AからFを10から15を表すこととした16進法は有名ですね。

数は、いくつあるかという意味と、どう表現するかで分けられます。

日本語では「1」のことを「いち」と読み、「一」や「壱」と漢字で書けます。 英語では「one」、ベトナム語では「một」(参考、ゲームで楽しく覚える外国語の数字!ベトナム語編)と表現は様々ですが、全部「1」を意味します。

そう、表現は自由です!


動物コード デモsrc on GitHub
すべてのこどもたちにプログラミングを」と掲げるPCNが提唱する「動物コード」は、動物100種類を使った新しい数表現! 動物1つで0から99の100種類、動物2つで0から9999までの1万種類、動物3つで100万通りの数を表します。

JavaScriptのESモジュールなので、「Webプログラミング道場」でも使えます!
<script type="module"> import { DobutsuCode } from "https://pcn-club.github.io/DobutsuCode/DobutsuCode.js"; alert(DobutsuCode.encode(12345)); alert(DobutsuCode.decode("ウォンバット イノシシ")); </script>

または、CSVオープンデータを直接使うこともできます。

動物コード: <span id=code></span> <script type="module"> import { CSV } from "https://js.sabae.cc/CSV.js"; window.onload = async () => { const url = "https://pcn-club.github.io/DobutsuCode/dobutsucode.csv"; code.textContent = await CSV.fetch(url); }; </script> いろんなプログラミング言語でご活用ください!

CSVファイルで作成した動物一覧から、JavaScriptの動物コードライブラリを生成するJavaScriptのプログラム「cnv.js」と合わせて、GitHub上のオープンソース!

動物コード以外の動物を指定したらどうなる?マイナスの値は?
いろいろ想定して作るのがプログラミング「DobutsuCode.js」を覗いてみましょう!

ちゃんと動いているかな?を確認するのがテストコード「DobutsuCode.test.js
deno testコマンドで動きを確認します。
deno coverageを使って、全パターンテストしたかどうかも調べられます。(cover.sh)

プログラミングで遊ぶ、数と動物、動物コードでした。
応用編をお楽しみに!

オープンソース「東京避難ナビ」から備蓄推奨オープンデータができたので、アドベンチャーゲームフレームワーク「egadv」を使ったアプリを「Webプログラミング道場」で作ってみます。

Webプログラミング道場を開き、下記のコードを打ち込もう。コピペもできるけど、自分でアレンジしながら打ってみると作った実感が持てる手打ち推奨。
<script type="module"> import { bg, show } from "https://js.sabae.cc/egadv.js"; onload = async () => { await bg(); await show("おはよう、朝だ"); } </script>
動きました!

次にCSV形式の備蓄水商品オープンデータを使ってみます。 <script type="module"> import { bg, show } from "https://js.sabae.cc/egadv.js"; import { CSV } from "https://js.sabae.cc/CSV.js"; onload = async () => { const url = "https://code4fukui.github.io/tokyobichikunavi/csv/stockpile_list.csv"; const csv = await CSV.fetch(url); await bg(); await show(csv[0].join(",")); } </script> 3行足して、CSVの1行目、ヘッダーの項目を表示に、1行加えました。csv[0]をcsv[1]に変更すると最初のデータを表示できます。
stockpile_list.csv
このデータは、東京備蓄ナビから生成した、CSVオープンデータです。

2次元配列になっている表形式のCSVデータを項目名でアクセスできるJSON配列に変換すると使いやすくなります。 ひとまず順番に持っているか確認してみましょう。 <script type="module"> import { bg, show } from "https://js.sabae.cc/egadv.js"; import { CSV } from "https://js.sabae.cc/CSV.js"; onload = async () => { const url = "https://code4fukui.github.io/tokyobichikunavi/csv/stockpile_list.csv"; const csv = await CSV.fetch(url); // await show(csv[0].join(",")); const data = CSV.toJSON(csv); await bg(); for (const d of data) { await show(d.item_ja + "は、もった?"); } } </script> 「//」スラッシュ2つ連続はその行をコメント(=プログラムとして無効)にします。IchigoJam BASICでいう、「'」や「REM」です。

いきなり、いい感じですね。項目名表示で見た、item_en を使うと英語表記もできますよ。

詳しい情報もあるので、持ってないと答えた場合に詳細(description_ja)を表示しましょう。 <script type="module"> import { bg, show } from "https://js.sabae.cc/egadv.js"; import { CSV } from "https://js.sabae.cc/CSV.js"; onload = async () => { const url = "https://code4fukui.github.io/tokyobichikunavi/csv/stockpile_list.csv"; const csv = await CSV.fetch(url); // await show(csv[0].join(",")); const data = CSV.toJSON(csv); await bg(); for (const d of data) { const ans = await show(d.item_ja + "は、もった?", ["はい", "いいえ"]); if (ans == "いいえ") { await bg(d.image); await show(d.description_ja); } await show("備えあれば患いなし"); } } </script> ノベル風フレームワークの show は、選択肢を配列で渡すと、選択した文字列を返してくれます。 「いいえ」だった場合に、説明表示と、画像表示と、全部終わった時の決め台詞。

備えよ災害 - ノベル風 備蓄ナビ
ノベル風備蓄ナビの基本ができました!

保存して手元で動きますし、GitHub Pagesを使えば、世界中の人に使ってもらえます!
男性、女性、こども、高齢者向けに必要量データを使って、より便利に改造してみましょう。

プログラミングを楽しもう、今週末は、サイバーフライデー&NT鯖江

オープンソースの良いところは、オープンデータも兼ねるところ。

東京備蓄ナビの要は、対象者に合わせた備蓄推奨品データ。
東京備蓄ナビ」のソース内を品目で全文検索(grep)すると、 stockpile.config.js というJavaScriptのプログラム内にJSONデータになっているものが見つかりました。

こちらを下記のような変換プログラムを書いて、Denoで動かしCSVデータにします。 import { CSV } from "https://js.sabae.cc/CSV.js"; import { fix0 } from "https://js.sabae.cc/fix0.js"; import { stockpileList, petStockpileList } from "../stockpile.config.js"; console.log(stockpileList); const conv = (list, imgpath, imgoffset = 0, pet = "") => { return list.map(s => { return { id: s.id, item_ja: s.item.ja, unit_ja: s.unit?.ja, category_ja: s.category.ja, image: imgpath + "/img-" + fix0(s.id - imgoffset, 2) + ".png", description_ja: s.description.ja, item_en: s.item.en, unit_en: s.unit?.en, category_en: s.category.en, description_en: s.description.en, infantsMale: s.required?.infantsMale, infantsFemale: s.required?.infantsFemale, child1Male: s.required?.child1Male, child1Female: s.required?.child1Female, child2Male: s.required?.child2Male, child2Female: s.required?.child2Female, adultMale: s.required?.adultMale, adultFemale: s.required?.adultFemale, agedMale: s.required?.agedMale, agedFemale: s.required?.agedFemale, pet: pet, url_yahoo: s.url?.yahoo || "", url_rakuten: s.url?.rakuten || "", url_amazon: s.url?.amazon || "", } }); }; const base = "https://code4fukui.github.io/tokyobichikunavi/"; const data = conv(stockpileList, base + "src/assets/images/tool/result/stockpile"); const data2 = data.concat(conv(petStockpileList, base + "src/assets/images/tool/result/stockpile/pet", data.length, 1)); await Deno.writeTextFile("stockpile_list.csv", CSV.stringify(data2)); ペット用のデータも統合するのに一工夫。

画像つきの備蓄オープンデータのCSVオープンデータができました!

東京備蓄ナビ 備蓄推奨品オープンデータ

早速、手軽な派生プロダクト、ブラウザ上からサクッと全文検索アプリ!

備蓄推奨品検索オープンソース on GitHub

活用しましょう、オープンソース&オープンデータ!

links
- 備蓄推奨品オープンデータを使ってアドベンチャーゲーム風「備蓄ナビ」

福井県越前市国高地区の方と進める、スマホで見える地域安全マップ「キッズセーフ」プロジェクト。 要望あった「レイヤー毎に切り替えたい」に対応。


越前市 国高地区 地域安全マップ
危険箇所2020・2021、ドローン写真、こども100当番の家、不審者アイコンのオン・オフ、通学路表示のオン・オフができます。 レイヤーを追加するのも簡単なので、いろいろとカスタマイズして、ぜひご自身の地区まわりでもご活用ください!


危険箇所2020と危険箇所2021を見比べて、地域の安全がどう変わったかチェックできます。気になる箇所はドローン写真でチェック!

ドローンによるVR写真オープンデータプロジェクト「VRふくい」へのプルリクもお待ちしてます!

すっぴんのコンピューターを触る魅力、IchigoJam。必要最小限の機材で味わってもらいたい。

じゃじゃーんと登場予定の「GIGA IchigoDake(ギガ イチゴダケ)」
開発&販売元のナチュラルスタイルからサンプルをもらったので、早速おためし&紹介プレゼン資料作成!


GIGA IchigoDake と Chromebook の組み合わせ!


ナチュラルスタイル開発の「CutleryApps Web」を開いて、差し込む。


シリアル通信に対応しているブラウザChrome。USBシリアルで「USB Serial (ttyUSB0)」を選んで接続ボタンを押すだけで準備は完了。


LED1、即点灯!


MacにもUSB A-C変換を通じてすぐにつながりました!(Windowsにはドライバのインストールが事前に必要とのこと)


エルチカループをSAVEしたら、一度引き抜き、ボタンを推しながら差し込むと、自動的に動きだす! なるほど、コンピューターってこうやって活用されているんだ!という体験、実現できます。 電池だけのDakeCapを使うとより効果的。 カムロボやドローンなど、ロボットとの組み合わせもオススメ!


100円あらため、RISC-VになってちょっとリッチになっているGIGA IchigoDakeのCPUは300円。速さは?


入出力を使わない、ゲームづくりによるアルゴリズム入門は、IchigoJam web 上で行います。
残念ながらファンクションキーがないChromebook用に、IchigoJam web のキーを案内。
中高生には、ここから、JavaScript編、オープンデータ活用編へとステップアップ。


はじめてのプログラミング with IchigoJam (GIGA IchigoDake + Chromebook)」(pptx, >key)
オープンデータなので、自由に編集して、ご活用いただけます!
IchigoJamフォント1.4とGRAPHこども丸ゴシックをインストールしてご利用ください。


やってきました、福井県立科学技術高校。


講師の高校生、堂々とした話しぶりがスゴイ!1ヶ月前からリハを重ねての本番とのこと。


オープンデータにしている資料、高校生の手によりよりわかりやすくアップグレードされてました!


チャレンジ、プログラミング!


手厚い高校生のサポートも小学生達にはうれしいでしょう。


エルチカロボット、動くかな?


お、ゲームっぽいのが作れた!?


1時間ずつ日を分けて2回実施される今回のプログラミング講座、次回のロボット講座に向けてちょっとだけ動かすサービス精神!


福井県立科学技術高校のみなさん、ステキな講座、ありがとう!


いよいよ、本番迎える越前がにロボコンの準備デイ。


立派な会場、設営、完了!


午後は試走会。最終調整が熱い!


決勝戦の舞台、今年は、どんなドラマが繰り広げられるのか?


福井高専メディア研究会による実況付きYouTube中継もあります!
第5回越前がにロボコン - YouTube


越前がにロボコン
いよいよ週末解禁、越前がに!週末のお買い物も合わせて、ぜひ福井市のショッピングセンターベル、3Fあじさいホールへ! 観戦は登録不要で無料&入退出も自由にどうぞ。できたて、GIGA IchigoDake + Chromebook を見たい方もぜひ。

商工会議所など、地域の中小企業を支援する組織がよく参照しているサイト「J-Net21[中小企業ビジネス支援サイト]」の国による支援策をオープンデータ化して、サンプルアプリと共に提供開始。 毎日、自動更新が走って、最新に保たれるはずです。


中小企業向け支援オープンデータ
こちらがサンプルアプリ。本文のテキストデータを含めて、フィルタで絞り込めます。


J-Net21[中小企業ビジネス支援サイト]」の「支援記事一覧」をJavaScript on Denoのプログラム scrapeSupportList.js を作って、スクレイピング(HTMLからデータ抽出)。


j-net21_support-list.csv
CSVファイルとしてGitHubで公開しています。

あとは、このCSVファイルを使ったウェブアプリを作ったり、いろいろ活用するだけ。
サンプルアプリは下記のようなシンプルなJavaScriptプログラムを含む1つのHTMLだけ。(src on GitHub)
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <header> <h1>中小企業向け支援策オープンデータ</h1> <input id=filter placeholder=フィルタ><br> </header> <main id="container"></main> <footer> DATA: <a href=https://j-net21.smrj.go.jp/index.html>J-Net21[中小企業ビジネス支援サイト]</a> → <a href=https://github.com/code4fukui/JNet21>CSV on GitHub by Code for FUKUI</a><br> </footer> <script type="module"> import { CSV } from "https://js.sabae.cc/CSV.js"; import { create } from "https://js.sabae.cc/stdcomp.js"; onload = async () => { const url = "https://code4fukui.github.io/JNet21/j-net21_support-list.csv"; const data = CSV.toJSON(await CSV.fetch(url)); data.reverse(); const show = () => { container.innerHTML = ""; const key = filter.value; data.forEach(d => { if (JSON.stringify(d).indexOf(key) == -1) { return; } create("div", container).innerHTML = ` <h2><a href=${d.url}>${d.title}</a></h2> <div>${d.date} - ${d.subtitle} - ${d.category}</div> <div>${d.tags?.split(",").map(tag => `<span class=tag>${tag}</span>`).join("")}</div> <div class=body>${d.body}</div>`; }); }; filter.onchange = show; show(); }; </script> <style> #container > div { border: 5px solid green; padding: 1em; margin: 1em; } h2 { margin: 0; } .body { font-size: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag { display: inline-block; margin: .3em .3em .3em 0; padding: .2em 1em; border: 1px solid black; } </style> いろいろオープンデータ、増やしましょう!

全国の地方自治体のウェブサイト、定期的に変わってしまうのが悩ましい。

日本の自治体「Webの安全」対策率
今年1月の74%から10%アップ!


都道府県AOSSLダッシュボード (カラム地図7x7)
都道府県サイトはすべてAOSSL化しました!各自治体内でAOSSL化していないところ、都道府県名をクリックすると分かります。


日本の自治体ドメインセンサス
ドメイン別まとめアプリも自動更新されます。1916の地方自治体リスト。ご活用ください!
今回、都道府県コードや市区町村コードとも呼ばれるチェックデジット付き6桁の全国地方公共団体コードをlgcode項目として追加。

全国地方公共団体コードは、5桁や2桁、また数値ではなく、6桁コードで使いましょう(Wikipedia記載は誤り)。5桁だとチェックデジット省略と0埋めとの区別がつかず衝突するコードが12コありました。["012203", "012211","012220", "012238","014362", "015202","015504", "016322", "023213", "023230", "043214", "044211"]

変化を調べる、Node用のdiffを、Deno用に移植し、key/value型のJSON同士で比較できる JSONUtil.diff を作って、過去データと比較するコードも書きました。 const diff = JSONUtil.diff(d1, d2); 追加削除を抽出してくれて便利です。文字列同士のみなら、jsdiff-esのdiffCharsをどうぞ。


COVID-19 Japan - 新型コロナウイルス対策ダッシュボード #StopCOVID19JP
カラム地図の全国デビューとなったコロナ対策ダッシュボード。現在患者数/対策病床数が、4.5%まで低下。このまま第6波が来ず、収束してくれると良いですね。

毎月最終金曜日はテクノロジーを楽しむサイバーフライデー。鯖江商工会議所にてDX活用セミナー、早速受講いただいた方が見に来てくれました。 コンピューター活用のハードルを物理的と心理的、両面で下げていきましょう。

誰もが驚く商工会議所、鯖江商工会議所1F「SCC / Sabae Creative Community」からハイブリッド講演。 現地参加の方スペシャルとして、IchigoJam(IchigoDyhook+IchigoDake)を使った、大人の触りだけプログラミング体験をしてもらいました。


1行のコードを書いて、LEDが光らせるだけでビビッと来るものがあるんです。
コンピューター、ヤバイ。これこそDX、はじめのいっぽ。


高橋工芸の社長で、ミュージシャンの高橋さん!


Facebook社がMeta社になった今日、その鍵のひとつ、VRゴーグルを初体験いただきました。ぜひ一度体験しておきたい一品です。


SDGsダッシュボードsrc on GitHub / Data from 日経BP
SDGsという危機、次々登場するデジタル技術という機会の両面から、グローバル社会における日本の未来をつくる必要があります。 日経BP社による調査によると、福井県、SDGsの施策認知率日本一とのこと! 福井県や市町の具体的な活動、よく見聞きしますよね!ただ、人任せでは決して達成できないDX、ひとりひとりの参画が必要です。


DX活用セミナー 地域でつくるデジタル社会
本日のスライドもオープンデータ!ただ、論より体験。ぜひご自身の手でご体験ください。やって見たい方は、Hana道場へどうぞ!


新作!エイトセンスバーガー by EIGHT SENSE


ハロウィンテーマ、スイーツたち!


ひさびさの再会、ウェルモ社長、鹿野さん初来鯖!


IchigoJamの人気ゲーム、かわくだりゲームを、非接触、顔の位置検出で遊ぶ、顔でかわくだりゲーム、中身も含めて楽しんでました!


電子工作系ハードウェア好き!


未来見ましょう、創りましょう!


来月11/26-27のサイバーフライデーは、NT鯖江と同時開催!

オープンデータ伝道師として伝えたい、つながるステキさと、つながる力を増やすコツ。
内閣官房IT室からデジタル庁へと管轄が変わって初のオープンデータ伝道師会が開催された日。

Hana道場駐車場に、見慣れない車が停まってました。


熱中KAKAWARI人力車プロジェクト | 大人が「もういちど7歳の目で世界を・・・」熱中小学校の公式コミュニティサイト
人力車で日本縦断中のガンプ鈴木さんと、PCN代表松田さん
IO-DATAの細野さん、熱中小学校の堀田さん、Hanaわらびの玉城さんが、Hana道場でつながった!


ネットで世界中の誰とでも即つながる現代ですが、全員と会って話す時間はありません。


暗いトンネルでの人力車の安全のために、光るネクタイの中身をプレゼント。いろいろ光らせちゃってください!光るメッセージボードを作って、後続車や沿道の人へ何か伝えるのもいいかも。


オープンデータ伝道師会では、もっとオープンデータを広めるにはどうするかディスカッション。 大事なのはやってみせること。まずは政府オープンデータの質を高めて、お手本を示すのが一番!

政府のお手本、オープンデータ伝道師としての行動で示しましょう。 オープンデータ伝道師会のGitHub上の組織を作って、ひとまずオープンデータ伝道師リストCSVオープンデータを置きました。 デジタル庁の人や、オープンデータ推進する多数の組織との協働管理も可能なプラットフォーム、GitHub、ちょうどいいかも。


GitHub、東京都でも活用されてます。オープンソースガイドラインもGitHubで公表!


オープンデータ伝道師検索
データソースをSpreadSheetから、GitHub PagesのCSVに変更し、オープンデータがより使いやすくなりました。 語彙を明確にすべく、CSVの一部の項目をURLにした5つ星CSVオープンデータです。


鯖江に来たらプログラミング!
こどもパソコンIchigoJamで3分プログラミング入門。なんだか何でも創れるような気がしてきます。これがDXの源泉。


鯖江に来たらメガネ堅パン!もぜひ。


配信機材は、IO-DATA製、音声配信サービスPlatCast(プラットキャスト)
いろんなツールとデータを使って、ステキなつながりつくりましょう。

プログラミング言語もたくさんありますが、人間が使う言葉、自然言語も同じく多種多様です。

国際規格、ISOとして2文字アルファベットで定義されている184の自然言語一覧をCSVオープンデータとJavaScriptのライブラリLangCode.jsとしてまとめました。

LangCode.js (ISO639-1.csv)
データ元は「ISO639-1 - Wikipedia」です。 言語コードと日本語の正式な対応「JIS X 0412-1 / 言語名コード-第1部:2文字コード」に機を見て更新したいところです。 JISのいろいろ、ベースレジストリとして再整備に期待です。

使い方は簡単です。ブラウザかDenoで下記のようなプログラムで使えます。 import { LangCode } from "https://code4fukui.github.io/LangCode/LangCode.js"; console.log(await LangCode.encode("日本語")); console.log(await LangCode.decode("ja")); console.log(await LangCode.find("メ")); 言語クイズとか作るのもおもしろいですね!

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