HTMLのinputタグでtypeをdateにすると、日付を選択できますが、複数選択には対応していません。そこで便利な拡張タグ input-dates です。

input-dates tag」(src on GitHub)
日本の祝日対応 day-esを使ったカレンダーから複数日を選択できます。タグのvalueでコンマ区切りで日付が得られたり、設定できたりします。HTMLElementによるウェブコンポーネントづくり、楽しいですよ! 月の変更でアニメーションするようにしたり、必要に応じてポップアップするようにしたり、UI/UXデザインを変更したり、いろいろ派生版づくりにもぜひチャレンジしてみてください。


行政基本情報データ連携モデル 日付及び時刻 on GitHub
日付の仕様は、日本政府のベースレジストリで参照されている仕様準拠(ISO8601/JIS X 0301互換)です。公開されているPDF/WordファイルをMarkdown化、Code for Fukui で進めてます。

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

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

縮退とは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ポータル

プログラミングにおける日付の扱いは地味ですが大事です。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 管理とすることで、更新忘れを防ぐ作戦です。 活用いただける方、育てたい方、プログラミングが好きな方、一緒に創りましょう!

クリス&福野による、北陸サイバーバレー宣言が福井新聞の論説に掲載。
北陸サイバーバレー宣言 鯖江を「新経済圏」拠点に | 社会,経済 | 論説 | 福井新聞ONLINE
熱い北陸、始まりました。

福井県庁DXチーム、鯖江市役所DXチームとミーティング at SCC(鯖江商工会議所)
民間と行政、オープンデータ、オープンソース、GitHubなど、気軽なテクノロジーを使ったスピーディーな展開をディスカッション。

経産省がGitHubにて公開提案待ちの契約書オープンデータへ、先日プルリクした Markdown.js による表示方法が、晴れてマージ(受け入れ)されました!日本にちょっと貢献!

シンプルなMarkdownで記述して、表示はCSSで整えましょう。URLを指定して、ボタンを押せばいいだけの画面を追加しました。


CSSの変更実験。まずは文字色を変えるコードはこう書きます。

body { color: red; }

意外と簡単で楽しいですよ! → CSSはじめのいっぽ


モデル契約書ver1.0 秘密保持契約書(新素材)
CSSで縦書き、意外といい感じ!もっと見やすくするにはアラビア数字を漢数字に変換などが必要そう。

body { background-color: #f3f3f3; font-family: serif; writing-mode: vertical-rl; }

背景色を16進法のRGBで指定、フォントを明朝体、モードを縦書きに!
Markdown.js 編集画面

コードフォー活動は、プログラミングできる人だけではありません。文章が書ける人、デザインができる人も大歓迎です。 特許庁の契約書から、ノベルゲームまで、幅広く活躍する構造化テキストファイル、Markdown(マークダウン)。 使う人にどこまでも優しくなれるのがテクノロジーです。

CyberValley、福井でコードフォー活動したい方、Code for Fukui でお待ちしています。
まずはちょっと覗いてみたい方は、サイバーフライデーへどうぞ!(次回、6/25金)

links
- 「研究開発型スタートアップと事業会社のオープンイノベーション促進のためのモデル契約書ver1.0」の改訂に向けた、GitHub(ギットハブ)を用いた意見募集
- Code for Japan
- Code for Fukui

簡単なノベルゲームならノーコードでOK。
構造化テキストファイル、マークダウン(Markdown)を使って、オリジナルなノベルゲームを作ってみましょう。

紫式部の国府での一日 - egadv.js
越前市役所の方が作成してくれた紫式部ものがたり。こんな感じで動きます。

# で始まるタイトル、## を使ってページタイトルを付けて、[選択肢](ページタイトル) の表記で遷移先を書くだけです。

# 紫式部の国府での一日(式部公園散策) ## 式部公園入口 私は紫式部です。 昨年、越前国の国府があるこのたけふにやってきました。 お父様が国司として赴任した時に一緒に参りました。 今、屋敷のある庭を散策しています。 [次へ](#公園内) ## 公園内 ![下向の旅の映像](https://find47.jp/ja/i/AFWNQ/image_file?type=thumb) 思い起こせば、京の都から5日間もかけた旅はとても辛いものでした。 琵琶湖を渡る船旅は景色がよく、海のような湖を眺めているだけで、京を離れる寂しさは和らぎました。 けれど、舟を降りてからは、山道が続き、峠を越えるときは、輿が揺れ、生きた心地がしませんでした。 やっとこのお屋敷に着いた時は、ほっとしてお父様と無事を喜んだものです。 あの旅から半年余り、今、季節は夏の初め、私の大好きな藤の花も盛りが過ぎ、若葉がまぶしい季節です。 [池](#池の場面) [花壇](#四季の花壇)

背景写真は ![写真タイトル][写真URL] で設定できます。


紫式部の国府での一日.md
Markdownの標準的な書き方なので、拡張子は .md、GitHub上でそのまま試してみることもできます。

GitHub上でノベルゲーム用のマークダウンファイル(.md)を作成したら、GitHub Pagesで公開設定してください(リポジトリのSetting、Pagesで、mainを選択)。

http://[GitHubアカウント名].github.io/[リポジトリ名]/[Markdownファイル名.md]

でアクセスできることを確認したら、次のように egadv.js で読み込まるリンクを作成すれば、オリジナルノベルゲームの作成完了です!

https://code4fukui.github.io/egadv/?url=http://[GitHubアカウント名].github.io/[リポジトリ名]/[Markdownファイル名.md]

例えば、こちら、越前市役所の方、もう1作品。越前市黄金伝説のMarkdownのURLは、
https://code4fukui.github.io/novel-fukui/越前市黄金伝説.md
です。(文字化けしますが、アクセスできていれば大丈夫)
https://code4fukui.github.io/egadv/?url=https://code4fukui.github.io/novel-fukui/越前市黄金伝説.md
というように、つなげれて作成すればできあがり!


越前市黄金伝説
ステキな背景写真、準備中。オープンデータがあれば捗りますね!
日本のステキな風景を使うなら、FIND/47検索アプリが便利です。


クレジット
ページ内リンクが有効なので、途中でブックマークしておくことや、名シーンをシェアすることもできます。


ノベルふくい by Code for Fukui
福井にまつわるノベルゲーム、プルリク(追加提案)歓迎です!

ノベルゲームエンジンも、Code for Fukui のシンプルなJavaScriptのオープンソース。
code4fukui/egadv
今回の主な開発は、urlをパラメータで受け取り egadv.js を使うフロントエンド index.html のみ。 フラグに対応したり、ルビに対応したり、あれこれ改造するのも楽しそうですね。
こちらも開発協力、歓迎です!

経産省のDX、モデル契約書のGitHub公開とMarkdown化で、気になっていた、条文が改行されていないので読みづらい問題。 Markdownに別途CSSを適応する解決策を作りました。


モデル契約書ver1.0 秘密保持契約書(新素材)
このように、現状のMarkdownでは、改行されないものが・・・


モデル契約書ver1.0 秘密保持契約書(新素材)
CSSを変更することで読みやすく!

body { background-color: #f3f3f3 font-family: serif; }


実装は、こちら Markdown.js は、Markedをforkして、ESモジュール化し、GitHubのページ内リンク仕様に合わせて手を入れ、整理したものです。

URLパラメーターに指定するだけで表示できます。CSSを指定すれば好きなように飾れます。 mark-down タグで、HTML内に埋め込んだり、JavaScriptで変換したHTMLを扱うこともOK!

上記課題、経産省GitHubのこちらのIssueで議論中です。
条項・条文をcode blockで括る際に自動改行されないことへの対応策 · Issue #33 · meti-oi-startups/METI-JPO-Model-Contract


福井の先生が集まる、JavaScript勉強会!

夜は、福井市東京事務所企画の動画番組「ふくいファンちゃんねる」に出演、DXはできる化。 こどもでも、大人でも、できることはたくさんありますよ!

テキストファイルから始められる、お気軽DX!
デジタル技術を楽しく使って、社会をより良くアップグレードしましょう!

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