福野泰介の一日一創

今年はオンライン開催となった政府によるこども向けイベント、夏休み恒例「こども霞が関見学デー」。 文科省のプログラムに、動画で疑似体験するIchigoJamとして参加しています。小さくてもスゴイ、コンピューターのパワーは、実機を触って試してもらうのが一番ですが、その片鱗を動画やエミュレーターでその片鱗に触れてみましょう。

「☆令和３年度　「こども霞が関見学デー」　8月18日・19日　土曜学習応援団プログラム☆ - 学校と地域でつくる学びの未来」
企業から提供されている就学前、小学生、中学生、高校生向けのプログラムが紹介されています。

「プログラミング教材「IchigoJam（イチゴジャム）」の使い方とデモンストレーション - YouTube」
動画と合わせて学ぶ、はじめてのプログラミング、ブラウザで、IchigoJam web を開き、一緒に動かしながらご覧ください。 大人の方もぜひどうぞ！

jigインターンも折り返しの3日目。夕方16時からの30分、気分転換としてお届けしたIchigoJam webを使ったプログラミング教育体験会。 ゲームづくり、学生にも楽しんでもらえました。（「⭐jigintern diary⭐」3日目）

BASICのいいところ
1. アルファベット小文字は知らなくてOK！（キーボードは基本大文字）
2. コマンドが短く、打つ文字数が少ない！（慣れてないと打つのが大変）
3. 覚えることが少ない！（BASICは対話ターミナルの祖！）

なんと、今年のインターン生のあろーから、任天堂SWITCHで動くBASIC、プチコン4のSmileBASIC版Geo3x3のプルリクが届きました！

BASICから派生したSmileBASICで実装された、Geo3x3の緯度経度のコード化アルゴリズム。

別ファイル呼び出しで関数を読み込んでいます。（プチコン3号とプチコン4でちょっと違う）

動作、完璧！対応82言語目としてマージしました！

せっかくなので、BASICの日として、MSXでお世話になったマイクロソフト製のVisualBASICとは別系譜のBASIC、Small Basic版Geo3x3の実装してみました。

「Microsoft Small Basic Ever Kids Can Code」
Small Basicにも、IchigoJam web 的な、オンライン開発環境があります。

「Small Basic」
Windowsであれば実行ファイルをコンパイルしてくれるソフトもダウンロードできます。ループ脱出に使ったGOTO用ラベルがオンライン版だと重複OKだったものが、ネイティブ版だとNGという違いがありましたが、両対応完了です。 (src on GitHub)

Small Basicは、元祖BASICとVisualBasicの間で、VisualBasic寄りな感じです。 変数はすべてグローバル、関数的なものはパラメータが付けられないサブルーチンのみなので、IchigoJam BASIC同様、小規模プログラム向け。 ただし、組み込み関数の名前はVisualBasic並かそれより長めで、打つ文字は長くなり勝ち。エディタ上で常時エラー検出していて、動かす前に間違いが分かるのは新設でいい感じ。

Let's begin program from basic!

福井県がオープンデータ化している河川の水位データの整理後、早速、@furandon_pigさんより、いい感じな改善案いただきました。(furandon-pig/csv-map.js.diff)

はん濫危険水位に対する河川水位の比率をグラフとして地図にマッピングしてみる。
csv-map.js 内で生成しているmarkerをL.marker()からL.polygon()にすれば良さそう🙂
(グラフの見せ方はもうちょっと工夫が必要そうな感じ😅) #河川水位https://t.co/N39ZtZ740w pic.twitter.com/tu4UQEqgx4

&mdash フランドン畜舎内 ヨークシャイヤ (@furandon_pig) August 14, 2021

アイコンではなく、その場で推移がグラフが見えると便利そう！
csv-mapタグのCSVMapクラスを拡張可能にリファクタリングし、直近5点のグラフ表示に対応してみました。
「福井県河川水位計マップ」
CSVMapのマーカー生成部をオーバーライドして、グラフ描画している例です(src on GitHub)。 また、見たい場所をURLで記憶、共有可能にする機能も追加。Geo3x3とレベルを使った位置保存、便利！

拡張タグの継承時、customElements.defineで登録しないと、クラス生成時に「TypeError: Illegal constructor」となるので注意！

「水防災オープンデータ提供サービス事業 - 国土交通省水管理・国土保全局」
福井県以外にも対応するのに便利そうな、@imabarizineさんに教えてもらったオープンデータ！・・・と思いきや、1県あたり月額1500円の有償提供。

オープンデータとは、二次利用が可能な利用ルールで公開されたデータのこと。有償データ提供サービスのデータはオープンデータとは言えません。

水防災オープンデータのオープンデータ化、望みます！

ベースレジストリが熱い様子。日本全体のデジタルを活用した変革、盛り上がってきてます。 せっかくなら、誰にも頼らないID体系がいいですね。 よくあるIDは連番を振りますが、誰かが管理しないといけません。

地球上に位置情報を持つモノに割り当てるIDとして、緯度と経度と精度をひとまとめにするジオコーディング、Geo3x3が使えそう。 「福井県鯖江市新横江一丁目」など、ひとまず日本のまち全部に「TownID」というIDを定義して計算しました。

「TownID Japan (日本まちID) by Code for Fukui」

TownIDを取得する方法は都道府県、市区町村、まち名の3つを指定します。

import { TownID } from "https://code4fukui.github.io/TownID/TownID.js"; const townid = await TownID.find("福井県", "鯖江市", "新横江一丁目"); console.log(townid); // E9138732346

都道府県一覧、市区町村一覧、まち一覧の取得APIもあります。
日本に都道府県は47、この区分における市区町村は1,893、まち全部は190,016ありました。
諸説あるかもしれません。

緯度経度からGeo3x3で生成して、ユニークで最短のコードにするコードができたので、いろいろと応用する準備ができました。 ベースレジストリ、何か貢献できること探しましょう。
「ベース・レジストリの指定について | 政府CIOポータル」

沼津高専のjigインターンOB、ほっぴーからリクエストあって勉強会。 JavaScript(Deno)を使った使った掲示板づくりをハンズオン体験してもらいました。そう、webアプリは作れちゃうものなんです。

前提となるのは、ウィンドウ、エディタ、ファイル、ターミナル、ブラウザの基本操作に加えて、ある程度のタイピング速度。 シンプルに「慣れ」の問題ですが、タイピングの速度向上はせっかくなら楽しくいきましょう。

オススメはこちら「TypingGame」
福井高専のjigインターンOB、たけるくんによる作品を改造した英語学習にもなるタイピングゲームに、今回リクエストを受けて読み上げ対応しました。

いい発音を聞きながらタイピングすると一石二鳥。まだまだ2分が切れません。100問はちょっと長いという人へ、ハッシュ付きリンクで問題長さを調整できるようにしました。友達との対戦などにどうぞ！
「TypingGame 10問アタック」

せっかくなので読み上げを簡単にwebアプリに組み込むことができる say.js としてESモジュール化。シンプルに組み込んで使えますよ！

「say.js - test」
組み込み方は簡単、script type=moddule 内で、import して、say を読み出すだけ！

import { say } from "https://taisukef.github.io/say.js/say.js"; btn1.onclick = () => { say("こんにちは"); };

無人のデモ展示などにも便利ですね！
音声合成で語る「さばぷら地図語り」を作ってみるのも良いかも。

Geo3x3、Rakuに対応して、対応79言語になりました
「Geo3x3 in Raku」
Rakuとして名前がついたPerl6、Perl5と平行する様子。文法はほぼPerl5、forがloopになったりちょっと変わってました。

日本語字幕で学べるコンピューターサイエンス、ハーバード大学の講座 CS50.jp が公開！
「CS50 2020 - Lecture 0 - Scratch (日本語字幕付き) - YouTube」
プログラミングは問題解決手段。文字や画像、音声などをデジタル化することで社会とコンピューターをつなぎます。コンピューターの力を紹介していないのがちょっともったいない。

電話帳から自分の名前を探すことを例に、アルゴリズムの解説。運動会のプログラムと同様、ステップに番号を振るのは一般社会でも使いますね。

1. 電話帳を開く
2. 電話帳の真ん中を開く
3. ページを見る
4. もし(IF)目的の人が載っていたら
5. 　　電話する
6. でなければ(ELSE)、もし(IF)五十音順でもっと前なら
7. 　　前半分の中の真ん中を開く
8. 　　3へ戻る(GOTO 3)
9. でなければ(ELSE)、もし(IF)五十音順でもっと後ろなら
10.　　後半分の中の真ん中を開く
11.　　3へ戻る(GOTO 3)

探し方は上の方法だけではありません。次の方法とどう違うでしょう？

1. 電話帳を開く
2. 電話帳の最初のページを開く
3. ページを見る
4. もし(IF)目的の人が載っていたら
5. 　　電話する
6. でなければ(ELSE)
7. 　　次のページを開く
8. 　　3へ戻る(GOTO 3)

行番号を付けての解説、この流れでBASIC！？

と思ったら、最初に登場したプログラミング言語は「C言語」（ただし、return 0; が抜けているイマイチなコード）
よく使われるプログラミング言語だけでも数十はある中、はじめてプログラミングをする学生に対して、わざわざややこしいC言語を比較対象にするのはフェアではないですね。

いろいろなプログラミング言語で hello, world 比較。ScratchはたしかにC言語より複雑ですが、CS50の6週目にやる予定のPythonより複雑です。

アニメーションづくりを目指すならともかく、テキストコーディングにすぐ進むなら、BASICがいいでしょう。

1 LED1 2 WAIT 60 3 LED 0 4 WAIT 60 5 GOTO 1

IchigoJam BASICで作った、信号機のように繰り返し点滅するプログラム。社会に組み込まれたコンピューターを体感しましょう。

こちら、1兆台のコンピューターがネットワークでつながる、IoT/マルチコア時代に注目される関数型プログラミング言語のひとつ、Clojureとそのファミリーです。

ClojureはJavaと同じ環境で動くJava言語で書かれたプログラミング言語。Java言語を知っている人はClojureの改良作業に加われるでしょう。 そのClojureを使って、ブラウザなどJavaScriptで動かせるClojureScriptが生まれ、インスパイアされてネイティブ環境で動きC言語で実装されたJanet、PHPで実装されPHPで動くPhelが誕生しました。

この表には抜けがたくさんあります。C言語で実装したJavaScriptで動くもの、JavaScriptで実装したJavaScriptで動くもの、Java言語で実装したネイティブで動くものなどが欲しいところですがありません。 そう、なければ創ればいいのです。Clojureファミリーはすべてオープンソースなので、近いものを使って改良し、新たな名前を付ける。こうして、新しいプログラミング言語は誕生します。

Janetの影響で誕生したPhelでGeo3x3を実装してみました。文法はClojure、使える関数が違うので、少しの手直しをしてできあがり！(src on GitHub)

(ns geo3x3\geo3x3) (defn- encode_fn [code level i lat lng unit] (if (>= i level) code (encode_fn (str code (+ 1 (php/floor (/ lng unit)) (* (php/floor (/ lat unit)) 3))) level (+ i 1) (- lat (* (php/floor (/ lat unit)) unit)) (- lng (* (php/floor (/ lng unit)) unit)) (/ unit 3.0) ) ) ) (defn encode [lat lng level] (if (< level 1) nil (encode_fn (if (>= lng 0.0) "E" "W") level 1 (+ lat 90.0) (if (>= lng 0.0) lng (+ lng 180.0)) (/ 180.0 3.0) ) ) )

php/floor など、PHPの関数を使うのでPHPに慣れている人に便利そうですね！
78のプログラミング言語に対応したジオコードシステム「Geo3x3」

座学より、つくって学ぼう、プログラミング！

「プログラミング教材「IchigoJam（イチゴジャム）」の使い方とデモンストレーション（教師、大人向け） - YouTube」
英語字幕もいれよう！

TOMLづくりの過程で発見「Janet Programming Language」

「Janet Programming Language」
関数型プログラミングと命令型プログラミングの両方に対応していて、マルチプラットフォーム、C言語で簡単に組み込めるのが特徴！(src on GitHub)

LISPをよりシンプルにしたような文法で、ループなど普通のプログラミング言語としても書けるので難易度は低め。 こちらGeo3x3のエンコード geo3x3.janet です。

(defn- encode_fn [code level i lat lng unit] (if (>= i level) code (encode_fn (string code (+ 1 (math/floor (/ lng unit)) (* (math/floor (/ lat unit)) 3))) level (+ i 1) (- lat (* (math/floor (/ lat unit)) unit)) (- lng (* (math/floor (/ lng unit)) unit)) (/ unit 3.0) ) ) ) (defn encode [lat lng level] (if (< level 1) "" (encode_fn (if (>= lng 0.0) "E" "W") level 1 (+ lat 90.0) (if (>= lng 0.0) lng (+ lng 180.0)) (/ 180.0 3.0) ) ) )

普通のプログラミング言語で 1+1 と書くところを (+ 1 1) と書くのが関数型の特徴。geo3x3.lispを元にJanatのドキュメントを見つつ、IchigoJamのように対話型で試す環境（REPL）を使って試しながら実装。 ちょうど、作ってみたいと思っていたシンプルな関数型言語、結構理想に近いかも？

組み込みが簡単そうなので、やってみました。
「Releases · janet-lang/janet」から、Macなのでosx版をダウンロードして展開。 C言語で今回作った geo3x3.janet を読み込んで動かしてみます。(src on GitHub)

#include <janet.h> #include <stdio.h> int loadTextFile(const char* fn, char* buf, int bufsize); int main(int argc, const char *argv[]) { janet_init(); JanetTable *env = janet_core_env(NULL); char buf[10 * 1024]; if (!loadTextFile("geo3x3.janet", buf, 10 * 1024)) { janet_dostring(env, buf, "geo3x3", NULL); } janet_dostring(env, "(print (encode 35.65858 139.745433 14))", "main", NULL); janet_deinit(); return 0; }

あとは、C言語のヘッダーとソース、1ファイルずつ使ってコンパイルするだけ（arch -x86_64 zsh、arch -arm64 zsh などで切り替えてもok!）

gcc -I janet-v1.15.5-osx/include janet-v1.15.5-osx/src/janet.c main.c ./a.out E9139659937288

動きました！生成されるバイナリサイズは750KBほどとそこそこコンパクト。共有ライブラリを動的リンクすることもできます。(sh on GitHub)

オープンライセンスでオープンソースな緯度経度の1文字列表現「Geo3x3」の対応言語が77になりました！ みなさんの気になる言語はありますか？なければ、ぜひ実装ご協力ください！

緯度経度やGeo3x3の用に、地球上の場所を表す方法「ジオコードシステム」はいろいろあります。地理院地図でも参照可能な「場所情報コード/uPlace」を調べて実装、緯度経度地図に組み込みました。

「緯度経度地図」
マップを動かすとリアルタイムに緯度経度、Geo3x3、uPlaceが変わります。uPlaceは約3m単位で論理場所情報コードで表示しています。Geo3x3はこの地図での細かさに合わせてlevel20としています。

uPlace 場所情報コードは2種類あります。
1. シリアル付き場所情報コード、細かい緯度経度と所有者をデータベースに登録申請できます
2. 論理場所情報コード、申請不要で緯度経度と高さ情報で生成できます（精度約3m）

ブラウザとDenoで使えるESモジュールとして実装したので、下記のように簡単にエンコード、デコード可能です。(src on GitHub)

import { uPlace } from "https://taisukef.github.io/uPlace/uPlace.js"; const code = "00001B000000000309DF3925687B1D00"; const pos = uPlace.decode(code); console.log(pos); const code2 = uPlace.encode(35.942729, 136.198835, 8); // めがね会館8F console.log(code2);

3m精度で建物の階数指定できるので郵便や配達などにも便利そうです。

uPlaceは128bit/16byte/16進法32文字の ucode system の一種。 場所情報コードの仕様書を元に実装し、deno test でテストできるテストコード uPlace.test.js も書いたので割とちゃんと動きます。 （参考、テスト駆動開発(TDD)で安心、JavaScriptプログラミング！Denoでwebアプリ開発編）

下記、uPlace.js内デコードする部分のJavaScriptのコードです。JavaScriptでのビット演算は32bitまでなので、緯度経度部分を分割するひと手間かけてます。

const decode = (code) => { if (!code || typeof code != "string" || code.length != 32) { throw new Error("not a ucode (hex encoded 32byte str)"); } const version = parseInt(code.substring(0, 1), 16); const tldcode = parseInt(code.substring(1, 1 + 4), 16); const classcode = parseInt(code.substring(1 + 4, 1 + 4 + 1), 16); const dc = parseInt(code.substring(1 + 4 + 1, 1 + 4 + 1 + 10), 16); const ic1 = parseInt(code.substring(1 + 4 + 1 + 10, 1 + 4 + 1 + 10 + 8), 16); const ic2 = parseInt(code.substring(1 + 4 + 1 + 10 + 8), 16); //console.log(version, tldcode, classcode, dc, ic1.toString(16), ic2.toString(16)); // .toString(16), ic) if (version != 0 || tldcode != 1 || classcode != 11 || dc != 3) { throw new Error("not a uPlace"); } const type = ic1 >>> (62 - 32); if (type != 0) { throw new Error("only supported type is 0"); } const south = (ic1 >> (61 - 32)) & 1; const latsec = (ic1 >> (1 + 23 + 8 + 1 + 6 - 32)) & 0x3fffff; // 22bit const west = (ic1 >> (23 + 8 + 1 + 6 - 32)) & 1; const lngsec = (((ic1 & 0x3f) << 17) | ((ic2 >>> (8 + 1 + 6)))) & 0x7fffff; // 23bit const levelx = (ic2 >> (1 + 6)) & 0xff; const level = levelx >= 0xfe ? levelx : levelx - 50; const levelmid = (ic2 >> 6) & 1; const serial = ic2 & 0x3f; const lat = latsec / (10 * 60 * 60) * (south ? -1 : 1); const lng = lngsec / (10 * 60 * 60) * (west ? -1 : 1); if (lat < -90 || lat > 90 || lng < -180 || lng > 180) { throw new Error("out of the earth"); } // console.log(type, south, latsec, lat, west, lngsec, lng, level, levelmid, serial); return { lat, lng, level, levelmid, serial }; };

32文字の固定長で長いプリフィックスがあるので、他のコードと間違いにくいところが結構いい感じです。 大まかに示したり、より高い精度で示すことはできないので、そんな場合はGeo3x3が便利です。 位置情報、DXしましょう！

2021/5/12、UNVT（国連ベクトルタイル）ワークショップ日本語版開催！
「UNVTワークショップ日本語版　公開録画 | 512」

古くは歩いて測量して回って作った地図。衛星によって大きく飛躍しましたが遠い存在になってしまった地図作り。手軽なドローンによって、また我々の手に戻ってきました。

「武生中央公園 だるまちゃん広場 - VRふくい」
いい時代ですね！

「VRふくい」
地理院地図の航空写真で見てみると、昔は球場だったことが分かります。Googleマップで見てみると建築中。地図は生き物、どんどんアップデートが必要です。 地元の地図は地元で創りましょう！

それにしても気持ちよく動いてくれますね！その秘密はGPU。CPUの高速化だけでは追いつかない大容量データの処理に活躍しているのはゲーム技術で培われた並列計算ハードウェアの発展によって、3Dを計算するための多量な計算を瞬時にやってくれます。

その速さを体験すべく、有名なマンデルブロの演算で見てみましょう。

「mandelbrot-js by CPU」
「HTML5（JavaScript）で描くマンデルブロ集合」を元に高精細なCanvasで描画してみました。計算、がんばってる感ありますね。これがCPUのみの力で動かすマンデルブロ集合。

「mandelbrot-js by GPU」
「Rendering the Mandelbrot Set With WebGL」こちらをベースに高精細化。クリックすると拡大、右クリックで縮小します。速い！

links
- オープンソースプロジェクト「Adopt Geodata」へ開発参画で国連貢献!? CSVと3D地図で語るVRふくい

Facebookで面白い地図アプリを発見「筑波研究学園都市内の公園」。 国土地理院の藤村さんによる「Adopt Geodata プロジェクト」の一環とのこと。 滑らかに動く3D地図を背景に、その場所の情報がすっと入ってくる。

「筑波研究学園都市内の公園」

こんなステキなことが簡単にできるとは！ 気軽に共同開発できるプラットフォーム、GitHubを使った新たなオープンソースソフトウェア(OSS)プロジェクトだったので早速開発に参画。 HTML内のテキストデータを編集するだけで誰でも簡単にステキな地図で語れるようにすることに貢献。

@_hfu_ アップを始めました pic.twitter.com/RqY7EottAH

&mdash Hal Seki (@hal_sk) April 29, 2021

TSVなどの外部ファイルに対応しては？というアイデアを元にひとまずCSV/YMLに対応、プルリク（プログラムの改善提案）をしたところサクッと承認され、貢献完了。 多くの人ががっつり使うオープンソースプロジェクトの場合、仕様の検討も、テストも入念にしたいところですが、このような若くて気軽なプロジェクトもありますよ。

藤村英範さんは、かんたん地図ライブラリ egmapjs でもお世話になっている国土地理院の中の人であり、国連の人！

「ベクトルタイルを通じた国連貢献へのお誘い」
日本がイニシアチブを取って進む新しい地図プロジェクト、もっと貢献できることがあるかもしれません。
「「国連ベクトルタイルツールキット」で各国の地図配信を支援、国土地理院 藤村英範氏によるトークセッション開催（「mapbox/OpenStreetMap meetup」第4回レポート） │ GeoNews」

ベクトル地図といえば、福井高専在学中のバイトの中心だった地図づくり。CDに入ったベクトルデータを変換してJavaアプレットで動く地図プロジェクト「Atlantis（コードネーム Mappilla）」を思い出す。

「VRふくい」
最近お気に入りの空飛ぶ一眼を使った360度写真オープンデータ。リスト表示を改め、地図語りバージョンをトップページとしました。 建物のローポリゴン3Dがオシャレですね！お手軽個人空撮オープンデータと地理院のベクトルタイル地図との合成すれば、テクスチャーマッピングも可能かも!?

CSVファイルでまとめて、HTMLを書くだけ！（csvファイル外部読み込みはローカルのファイルでは動きません。liveserverなどwebサーバーを起動するか、サーバーに転送して動かしましょう）

高専生の頃関わった1997年から24年。再び地図がおもしろい！現役高専生の参戦も大歓迎！

日本のステキを写真で集める「FIND/47」のデータは用途制限なく自由に使える、CC BYのオープンデータ。

「FIND/47｜みんなで集め、広めていくフォトアーカイブ。」
現在1,299枚の47都道府県の高品質画像が最大1900万画素で使用可能。どの写真も美しい！

サイト自体もCC BY、一覧を取得する images.json と、サイトのHTMLを使って、CSVオープンデータとして整理するプログラムをJavaScript(Deno)で作って、GitHub公開。 ついでに、フルHD品質画像をダウンロードして、GitHub Pagesでホスティング。一括ダウンロードしてあれこれ活用する元ができました。(src on GitHub)

「find47images.csv」
画像URL、FIND/47での詳細リンク、タイトル、使用カメラやレンズ、焦点距離などの情報に加え、全データ位置情報付き！Geo3x3にエンコードして整理しました。

「日本の風景オープンデータ」
作ったCSVオープンデータを使ったサンプルアプリ、シャッフルして0.5秒ずつ並べていくだけのアプリです。JavaScriptのプログラムはこんな感じ。（src on GitHub）

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; import { sleep } from "https://js.sabae.cc/sleep.js"; import { shuffle } from "https://js.sabae.cc/shuffle.js"; window.onload = async () => { const url = "https://code4fukui.github.io/find47/find47images.csv"; const data = CSV.toJSON(await CSV.fetch(url)); console.log(data); shuffle(data); for (const d of data) { const imga = document.createElement("a"); imga.href = d.url; const img = new Image(); img.src = "https://code4fukui.github.io/find47/photo/" + d.id + ".jpg"; imga.appendChild(img); images.appendChild(imga); const a = document.createElement("a"); a.href = d.url; a.textContent = d.title + " © " + d.author; credits.appendChild(a); await sleep(500); } };

プログラムでHTMLの要素を生成しています。

これだけ美しい素材、日本中まるっと揃っているとうれしいですね！

うちの地元のあの風景がない！？
FIND/47では、投稿も受け付けています。自慢の写真、オープンデータにしましょう！

「SABAE signboard」
福井県の空からの360度写真オープンデータ「VRふくい」に「鯖江大看板」追加！
こちらも日本中、世界中に拡大できると楽しそう。