福野泰介の一日一創

文字情報基盤に縮退マップのデータを変換して追加し、より探しやすくなりました。

「漢字検索、異体字検索 - 福」たくさんの福！

縮退とは6万の漢字を表現できない環境向けに代替漢字へと変換すること。ユニコード前提な現代ではあいまい検索など、正規化に使うと良さそうです。

「文字情報基盤 MJ縮退デモ」
難解な漢字をいれると適度にやさしい漢字になります。

縮退マップの利用ガイドにおもしろいことが書いてあります。読みも意味も不明な漢字が400字もあるそうです。

「漢字検索、異体字検索 - 秀丸」
福井高専の先輩、斉藤秀夫さん開発の有名ソフトウェア「秀丸エディタ」はなんと漢字にもなっていた!?

ここで問題です、JavaScript でこの難解文字 "𤔜㙒𡙌𡗟".length を表示するとどうなるでしょう？

正解は、7！

見た目は4文字なのに不思議ですね。
ユニコードの仕様で異体字セレクタ(IVS)は2つのコードポイントで表現させるので、1つの文字を表現するために2つのJavaScript文字を使っています。

この仕様のせいでJavaScriptの文字列はややこしいことになっているので改善しましょう。 普通の文字列関数、charAtやcodePointAtでは中途半端なコードにしかならなかったり、indexOfの数がずれてしまったりするので、新たに Str.js を作りました。

import { Str } from "https://code4fukui.github.io/mojikiban/Str.js"; console.log(new Str("𤔜㙒𡙌𡗟").length); // 4

見た目と一致する文字は、書記素（グラフィーム）と言います。以前結合絵文字を扱うときに使った GraphemeSplitter を内部に使っています。

Code for Fukui によるオープンソースプロジェクト。社会OS開発、ぜひご一緒に！
「code4fukui/mojikiban src on GitHub」

先日発表された「ベースレジストリの指定について」で、即効性ありと区分されているデータに「文字情報基盤」がありました。 「漢字」は、日本での文字コミュニケーションの基本です。デジタルで表現できない文字があるとつらいですね。

いろいろな方の尽力により、日本で使われている漢字ほぼすべて、58,862コの漢字がユニコードで表せるようになっています！スゴイ！

「漢字検索、異体字検索」src on GitHub
こちらで「よみ」と「漢字」から検索できるようにしました。WebFontもありますが、30MBもあるので、58,862コGitHub Pagesに生成した画像データ(mj)を用意して使っています。

Code for Fukui によるオープンソースプロジェクト。低レイヤーから作る社会OS。ぜひご一緒に！
「code4fukui/mojikiban src on GitHub」

全国19万あったまち（＝町字）ですが、本当のところいくつあるか不明な様子。
「ベース・レジストリとしての住所・所在地マスターデータ整備について」

地方自治法に「町若しくは字」、住居表示に関する法律に「町又は字」と表現されているが、地方自治法にも住居表示に関する法律にもこれら町字の定義は存在しない。

日本DXはじめのいっぽ、住所をまずはちゃんと定義したいですね。全国ざくっと用意して、各自治体でオーサライズがされればできあがりです。マスターデータ案に記載されている英語表記が気になりました。外国の方向けにひとまずアルファベットでの表記は欲しいですね。 あとは、まちの「よみ」のデータを見つければ、ひとまず自動変換できそうです。

「固有名詞のかなローマ字変換」
「行政基本情報データ連携モデル 住所」に英語表記に関する記載があったので、それに代替準拠する「かなローマ字ライブラリ、Romaji.js」を作りました。 以前作成した Moji.mjs も使って、カタカナや半角にも対応したサンプルアプリも合わせて提供しています。

ヘボン式のローマ字は「観光立国実現に向けた多言語対応の改善・強化のためのガイドライン」にある表をCSV化した「ヘボン式ローマ字.csv」を作成して、使っています（make_json.js）。

低レイヤーからの地味な積み上げが大事な都市OSづくり！

表形式のデータの保存にはCSVが便利です。誰でもプレビュー、テキストエディタ、表計算ソフト、Google Docsなど、様々なツールで開くことができます。

ただ、文字化けやヘッダーの無いデータ、無駄な空行があるデータなど、おかしなデータが多いため、好きになれないプログラマーも多いことでしょう。

そこで作りました、厳格なCSV、StrictCSV！

日本の19万のまち、TownIDのCSV all.csv をStrictCSV all.s.csv に変換すると45%ファイルサイズが削減できました。（9.3MB→5.0MB、gzip後で 1.6MB→1.3MB 14%削減）

- StrictCSV 書式
拡張子は .s.csv
文字コードはBOM付きUTF-8
改行コードはLF
ヘッダー行は必須
レコード0件を許容する
ダブルクォート、コンマ、改行を含める場合はダブルクォートで囲む（ダブルクォートは2つにする）
存在しないフィールドは前行以前に存在したフィールドが省略されたものとする

ついでに、データ項目が少ないときは前行以前に登場したコードが省略されたことにするルールをいれたことで、同じ都道府県名や市区町村名がずらっと続くデータをシンプルにできます。

「StrictCSV on GitHub / Code for Fukui」
まだ実装はESモジュール対応のJavaScriptのみ。お好きな言語でご実装、ご貢献ください！

import { StrictCSV } from "https://code4fukui.github.io/StrictCSV/js/StrictCSV.js"; const data = await StrictCSV.load("test.s.csv") || [{ name: "a", val: 1 }, { name: "b", val: 1 }]; const s = StrictCSV.stringify(data); console.log(s); const data2 = StrictCSV.parse(s); console.log(data2);

Denoやブラウザで動きます。

* 改行コードは現在MacOS/LinuxがLF、WindowsがCRLFです。古いMacOS9がCRだったことから、Windowsが間をとってCRLFにしたようですが、WindowsもLinux化が進む今、人類としての改行コードはLFでいいでしょう。
「由来がはっきりしないWindowsの“謎”仕様──Windowsの雑学（諸説あります）」

ベースレジストリが熱い様子。日本全体のデジタルを活用した変革、盛り上がってきてます。 せっかくなら、誰にも頼らない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ポータル」

国も活用するGit、特許庁によるGitHub活用、2017年にもありました。
「特許庁、GitHubで「知的財産デュー・デリジェンス」の標準手順書策定を検証 - ZDNet Japan」


「知的財産デューデリジェンス標準手順書」
GitHubでのオープン検証を経たデューデリジェンス（企業の経営課題を課題抽出すること）をブラウザで読みやすくまとめてみました。

Gitでバージョン管理をすると文章も変更履歴が一目瞭然。 見出しのレベルを揃えるなど、いろいろと手を入れた記録はコミットログから見ることができます。

DenoのフォーマッターがMarkdownにも対応しているので deno fmt し、markdownlintでチェック。 加えて、日本語用のMarkdownの正規化のために mdfmtjp を新たに作成して、文章をキレイに整えました。

mdfmtjp の機能は、シンプルに2つ
- 文字の正規化（半角句読点を全角化など）
- 数付きリストの正規化（数値のあと半角ドットに半角空白1つに）

日本語文章のDX目指して育てます。

「知的財産デューデリジェンス標準手順書 - GitHub」
GitHubでの受付期間は終わっていますが、フォークして活用は歓迎とのことで、Code for Fukui で文章構造を整理してみました。

日本語もプログラミング言語も似てますね！どんどんハックしていきましょう！

和歌山県、東京都、経産省、特許庁と活用進む、GitHub。 GitHubは、Linux開発時のバージョン管理のためにLinuxの開発者、リーナス・トーバルズ氏が開発したGit（ギット）を使ったホスティングサービスのひとつ。（現在のGitメンテナは、日本人エンジニア、濱野純氏！）

GitHubを使わず、自分でサーバーを立ててみたい！ってことで、作りました！

「deno-git-server」
GitとDenoをインストールして、次のコマンドですぐGitサーバーが起動します！

deno run -A --unstable https://taisukef.github.io/deno-git-server/GitServer.js

デフォルトの設定では localhost:7005 で起動するので、gitコマンドを使って、push（Gitサーバーへの送り込み）しましょう。

git push http://localhost:7005/test main

（testリポジトリのmainブランチをプッシュする例）

リポジトリの作成からの手順はこんな感じです

git init touch a.txt git add . git commit -m test git remote add origin http://localhost:7005/test git push --set-upstream origin master

GitHubデスクトップなどGUIツールを使ってもOKです。

当初は、Node.jsで動くGitサーバー「node-git-server」をES移植しようと、through-es、stream-es、stream-spec-es、macgyver-esと、いろいろESモジュール化しましたが、結局どれも使っていません。ただオープンソースにしておけば、何かのときか、誰かの何かに役立つでしょう。

Git.jsにあるように、優秀なgitコマンドに丸投げするだけのシンプルな作りになってます。ユーザー認証やセキュリティはないので、適宜改造してご活用ください。

プログラミングにおける日付の扱いは地味ですが大事です。JavaScriptには日付を表すDateクラスがありますが、古いJavaの仕様を引きずっていたり、月が0から始まっていたり、文字列からのパースが多言語化の関係でよくわかんないことになっていて微妙です。

毎回リファレンスを見ながらコードを書くのも面倒なので、スッキリシンプルな日付ライブラリ day-es を作りました。

import { Day } from "https://code4fukui.github.io/day-es/Day.js"; const day = new Day(2021, 6, 5); // 2021/6/5 console.log(day); // Day { year: 2021, month: 6, day: 5 } console.log(day.dayAfter(2)); // Day { year: 2021, month: 6, day: 7 }

ESモジュール対応JavaScriptなので、ブラウザ上や、Denoを使ったサーバーサイドでサクッと使えます。 Dayクラスのインスタンスは西暦1年から9999年までの有効な日付でのみ生成でき、Object.freeze を使ってイミュータブル（不変）にしているので、安全です。 2日後の日付や、月末月初、日付の差などを関数で取得できます。 信頼性は、テストコードでご判断ください。

応用例「カウントダウン」
日付の差計算を使ったカウントダウン拡張タグを作りました。下記のHTMLで任意の日付までのカウントダウンができます。

<script type="module" src="./day-countdown.js"></script> 第5回 越前がにロボコンまで、あと<day-countdown target="2021-11-07"></day-countdown>日！

応用例「カレンダー」
その日の曜日と、その月の最終日が分かれば作れるカレンダー。国民の祝日にも対応したくなったので・・・

内閣府の「国民の祝日」についてにあるCSVデータをブラウザから取得しようとすると、CORS設定がされていないため弾かれてしまいます。 元データではなく、別にデータを置く必要があり効率が悪いです。GitHubで"holiday japan"で検索すると120もヒットします。 無意味な定期的な運用が増えないようにしたいところです。

ブラウザから直接取得できるようにするには、webサーバーの該当ファイルのレスポンスヘッダーに下記を追加すればOKです。

Access-Control-Allow-Origin: *

アクセスを促したいオープンデータにはぜひ付けましょう。（GitHub Pagesは全部付きます）

応用例「国民の祝日リスト」
現在2022年末までの祝日が公開されていました。祝日判定コードも下記のように簡単です。

import { isHoliday } from "https://code4fukui.github.io/dey-es/Holiday.js"; console.log(isHoliday(new Day("2021-07-22"))); // true

国民の祝日オープンデータは、よく使い、関連が深い日付ライブラリ「day-es」とセットにしたリポジトリとして、オープンな開発活動シビックテックの福井版、Code for Fukui 管理とすることで、更新忘れを防ぐ作戦です。 活用いただける方、育てたい方、プログラミングが好きな方、一緒に創りましょう！

古のテクノロジー、アニメーションGIFでブラウザ画面のキャプチャーを作りましたが、その役目は1日で終えてしまったかもしれません。

TwitterではアニメーションGIFは動画に変換されているということなので、最初からMP4動画を生成するように変更。変換用のコードはちょっと大きいですが、動作は軽くていい感じです。

「QRコードにドット絵らくがき - qrdots」をキャプチャーしたMP4動画、わずか72KB！
アニメーションGIFには、フレームの部分書き換え機能があるので、差分を取ってエンコードすることで軽くできますし、非可逆圧縮なので色数が少ないアプリのデモではよりキレイですが、ほとんどの状況においてMP4でOKでしょう。 GIFでは色数も256色に限られてしまいますが、MP4であればその問題もありません。

ブラウザ上でのMP4エンコードには、h264-mp4-encoder をforkしてESモジュールブランチを足した h264-mp4-encoder.es を作って使っています。 Deno でも Node.js でも ブラウザでも簡単に addFrame して、finalize するだけで手軽にエンコードできるので、ぜひいろいろとご活用ください。(src on GitHub)

import { HME } from "https://taisukef.github.io/h264-mp4-encoder.es/h264-mp4-encoder.es.js"; const encoder = await HME.createH264MP4Encoder(); // Must be a multiple of 2. encoder.width = 100; encoder.height = 100; encoder.initialize(); // Add a single gray frame, the alpha is ignored. encoder.addFrameRgba(new Uint8Array(encoder.width * encoder.height * 4).fill(128)) // For canvas: // encoder.addFrameRgba(ctx.getImageData(0, 0, encoder.width * encoder.height).data); encoder.finalize(); const uint8Array = encoder.FS.readFile(encoder.outputFilename); console.log(uint8Array); encoder.delete();

capture5sec.js として、独立したGitHubに独立したリポジトリを作成。現在、GIFとMP4に対応しています。 シンプルでピュアなJavaScriptなので、気軽に改造チャレンジしてください。

5秒にこだわらず、スタートストップできるようにしたり、マウスカーソルを追加したりと、つくるほどに創りたいものが増えてしまうのが困ります。

意外と楽しかったので、QRコードにドット絵を埋め込むアプリ「qrdots」を少しデザインして、高速にQRコードが生成する様子を見てもらいたいけど、動画は重い。 そんなときに便利な古テクノロジー、アニメーションGIF！（続編、令和な技術 MP4版）

「qrdots」src on GitHub
QRコードを生成して、ドット絵を描き始めるまでの5秒間。"F3"キーを押すとどなたでも実験できます。

プログラムは簡単、下記のコードをJavaScript(type=module)に埋め込むだけ。

import { capture5sec } from "https://taisukef.github.io/html2canvas/es/capture5sec.js"; onkeydown = (e) => { if (e.key == "F3") { capture5sec(100); } };

100msec毎に5秒間分撮ってアニメーションGIF「screenshot.gif」がダウンロードされます。動きがゆっくりでいいものは250msecなどに変えるとファイルサイズを節約できます。 差分を取ったり、変化のないところは省略したり、まだまだ工夫の余地はあります。(capture5sec.js src on GitHub)

作成記録
- qrcode-generator - QRコード生成で、数値とアルファベット大文字の場合短くなるように改造
- gifencoder - forkしてESモジュール化
- html2canvas - forkしてESモジュール化、html2imageやcaputer5secを追加

アニメーションGIF生成もとってもシンプル。ブラウザでもDenoでもOK!

import { GIF } from "https://taisukef.github.io/gifencoder/GIF.js"; // prepare imagedata (RGBA) const [w, h] = [320, 240]; const frames = []; frames.push(imagedata1); frames.push(imagedata2); frames.push(imagedata3); const gifbin = GIF.encode(frames, 500, 0); console.log(gifbin);

ESモジュールとGitHubでどんどんつながる、楽しいオープンソース活用の輪！
「JSはじめのいっぽ / JavaScriptはじめのいっぽ」

links
- 令和版、動きがあるアプリをライトな動画で見せよう！ ブラウザを5秒キャプチャーしてMP4動画を生成する capture5sec.js