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


qrdotssrc 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

アナログとデジタルをつなぐ日本発の技術「QRコード」、ガラケーに搭載され日本で一斉風靡、当初のスマホ(特にiPhone)には搭載されず暗黒期を経て、iPhoneの標準採用と共に今度は世界中で使われるようになりました。

以前作ったQRコードのライブラリを使って、やってみたかったQRコードへのドット絵埋め込みを開発、jig.jp ロゴをいい感じに埋め込めました。

qrdots - jig.jp
クリックやタップでドットを反転することができます。いじりすぎるとQRコードとして読み込めなくなる様子をお楽しみください。

qrdots」(src on GitHub)
汎用的なツールとしても使えます。QRコード化したい文字を書いて、いじりましょう。右クリック画像保存などでご活用ください。 誤り訂正は4段階。 ソースを辿ったり、オフラインにすると分かりますが、QRコード生成は完全にクライアントで生成しており、どこにも送信していません。


さりげなく紛れ込ませたパターン


右下パターン(バランスがいまいち)


ロゴを埋め込まない最小パターン


大きめなQRコードで読みやすくしたパターン

この機種で読み取れなかった!という方いたら、ご報告いただけるとうれしいです。

クリス&福野による、北陸サイバーバレー宣言が福井新聞の論説に掲載。
北陸サイバーバレー宣言 鯖江を「新経済圏」拠点に | 社会,経済 | 論説 | 福井新聞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