Vue.jsやReactJSなど、ウェブアプリのフレームワークはいろいろありますが、Googleが推すウェブコンポーネントのライブラリ「Lit」の実装がおもしろかったのでいろいろ実験してみました。

ES6の記法で追加された「テンプレートリテラル (テンプレート文字列) - JavaScript | MDN」を使った楽しい実装。 const tag = (strings, ...params) => { console.log(strings, params); }; console.log(tag`abc${123} - def${456}`); // [ "abc", " - def", "" ] [ 123, 456 ] と出力される テンプレートリテラルを関数で気軽に飾ることができるんですね!
Litでは、仮想DOMの代わりにこのテンプレートリテラルを使って差分描画の実装をしているようです。


reactive data demo
コンポーネント内でHTMLを書きたいことはあまりないので、データの変化を画面にシームレスに反映するリアクティブの実装だけ採り入れてみることにします。 最終的なコードはこちら。 import { Data } from "./Data.js"; import { BitCheckboxes } from "./bit-checkboxes.js"; import { ReactiveInput } from "./reactive-input.js"; import { sleep } from "https://js.sabae.cc/sleep.js"; onload = async () => { const d = new Data(); document.body.appendChild(new BitCheckboxes(d)); document.body.appendChild(new ReactiveInput(d)); for (let i = 0; i < 256; i++) { d.value = i; await sleep(100); } }; 肝は、変化を抽出する addListener メソッドを持つ、Dataクラスの実装。 class Data { constructor() { const p = new Proxy({}, { set(target, prop, val) { target[prop] = val; if (p.listeners) { p.listeners.forEach(l => l(target, prop, val)); } return true; }, deleteProperty(target, prop) { delete target[prop]; if (p.listeners) { p.listeners.forEach(l => l(target, prop, undefined)); } return true; }, ownKeys(target) { return Object.keys(target).filter(name => { name != "addListener" && name != "listeners" && name != "toString" }); }, }); p.addListener = (l) => { if (!p.listeners) { p.listeners = [l]; } else { p.listeners.push(l); } }; return p; } } export { Data }; あとは、これに対応した、ウェブコンポーネント bit-checkboxesタグと、reactive-inputタグ。
なかなか便利に使えそうです!

184言語のアルファベット2文字でコード化するISO639-1でしたが、486言語を3文字使ってコード化するISO639-2の方を使うとより広く対応できます。 ということで作った、ISO639.js

日本語はjpn、英語はeng、中国語はchiとなります。(ISO639-1では、ja、en、zh)


input-lang tag demo
外国語対応している言語を、日本でよく使われそうな言語はチェックボックス、その他は日本語の五十音順に並べた言語から好きな数だけ選択します。

選ぶと増え、非選択にすると減るセレクトボックスは、先日作ったinput-multi-selectを使用。拡張タグ作り、増えるほどに楽になります。

ISO639-2を紹介しているサイト「ISO 639言語コード - CyberLibrarian」に、日本語表記がない言語zblは、漢字に着想を得て開発された表意文字、ブリスシンボルでした。

Blissymbolics Communication International - Start


Blissymbolics Communication International - Bliss Workshop
人、地球、空、ペン、口、耳など、よく使いそうなものをシンプルなシンボルとして、その組み合わせで表現するようです。
Blissymbolics Communication International - How Bliss Works
コンピューターが当たり前の現代、更に一歩進められそうですね!
人同士のコミュニケーションにも使えるプログラミング言語を考えてみるのも楽しいかも。

そろそろUTF-8に統一されたと思いきや、突然の文字化け。

まだまだ出会うことがあるSJISのテキストファイル。古いファイルなど、変換する機会はありそうなので、csvbeauty(シーエスブイビューティー)を元に作ったtxtbeauty(テキストビューティー)。

txtbeauty
ライブラリが充実してくると、新たなツールづくりが捗ります!

サーバーへアップしていないローカルツールであることは、オープンソースを辿れば確認できます。 安心安全を簡単に確認できる仕組みがあるといいですね。

生産性アップ=時間創出

時間を、どんどん創りましょう!

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

国際規格、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("メ")); 言語クイズとか作るのもおもしろいですね!

文字に関してはややこしい日本でしたが日時に関しては、タイムゾーンが複数あるアメリカと比べてぐっとシンプルです。 日時ライブラリ day-es にも対応した、入力コンポーネント群を整備しました。他の入力コンポーネントシリーズと合わせて、必須項目を色付け可能です。

input-date / input-time / input-datetime-local tag demo
下記はinput-dateタグを使う例です。それぞれ InputDate, InputTime, InputDateTimeLocal というクラスとしても使用可能です。 <script type="module" src="https://code4fukui.github.io/input-datetime/input-datetime.js"></script> <input-date id=inp required=required></input-date> <script type="module"> onload = () => { inp.onchange = () => { console.log(inp.value); }; }; </script> HTMLの入力ボックスinputのtype=datetimeの仕様がいつのまにか消えて、type=datetime-localになっていました。 タイムゾーンが含められていなかったことがその理由でしょう。

国際化対応するには、タイムゾーンも入力可能な、input-datetimeタグが必須です!(必要な方がいれば、ぜひ作ってプルリクください / src on GitHub

iPhone 13 Pro の面測距機能、LIDARを使ったアプリを使うと、その場の空間を手軽にスキャンして、VR表示可能なウェブアプリにできる!

Polycam」でスキャン、モデル化(広さに応じて数分待つ)、シェア機能からGLTFを選びMacにAirDropで転送。


glb-viewersrc on GitHub
A-Frameを使ってglbファイル(GLTF)を表示。ちょっと暗かったのでライトを少しいじって、できあがり! VRで見ると実寸表示できるのがいい! <!DOCTYPE html> <html> <head> <title>glb-viewer</title> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <!-- https://github.com/fernandojsg/aframe-teleport-controls --> <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script> </head> <body> <a-scene background="color: #333"> <a-assets timeout="10000"> <a-asset-item id="sabae" src="./20211015-jig8big.glb"></a-asset-item> </a-assets> <a-entity gltf-model="#sabae" position="0 2 0"></a-entity> <a-entity light="type: ambient; color: #FFF"></a-entity> <a-entity light="type: directional; color: #FFF; intensity: 1" position="-0 2 1"></a-entity> <!--<a-plane color="#888" height="300" width="300" rotation="-90 0 0"></a-plane>--> <a-entity id="cameraRig"> <a-entity id="head" camera position="0 1.7 0" wasd-controls look-controls></a-entity> <a-entity oculus-touch-controls="hand:left" teleport-controls="button:trigger; collisionEntities:.collidable; cameraRig:#cameraRig; teleportOrigin:#head;"></a-entity> <a-entity oculus-touch-controls="hand:right" teleport-controls="button:trigger; collisionEntities:.collidable; cameraRig:#cameraRig; teleportOrigin:#head;"></a-entity> </a-entity> </a-scene> </body> </html> 撮ったモデルのファイル名を変えるだけで使えます。


3Dモデルなので現実にはありえない視点からも見えて楽しいですね!

ドローンによるVR空撮「VRふくい」に建物ビュー、室内ビューを加えるのも楽しいかも!
Code for FUKUIで、LiDARモデル、大募集!

判断はその場限りにエピソードではなく、データに基づき行いましょう、EBPM(内閣府)
COVID-19 Japan 新型コロナウイルス対策ダッシュボード
運用583日目を迎えた、ダッシュボードもみるみる白さを増し、現在の現在患者数/対策病床数は10.2%。 一般社団法人 日本耳鼻咽喉科学会定義におけるローリスク地域となる都道府県も増えています。


まだ第6波の兆候は見られませんが、減少幅が下がって来ているので油断は禁物です。 救急搬送困難事案数が患者数に比べて下がりきっていない点も気になります。東京都が引き続き件数ベースで多いので、ご注意ください。

様々な判断するために、まだまだ足りないオープンデータ、素早い判断に必須なコンピューターを活用するには、きちんと整ったデータが必要です。


input-number tag demo
自然現象を元にデータ化するのがIoTですが、今回は人による入力を助けるウェブコンポーネントにやさしさ(アノテーション)を加えました。 数以外入らない入力ボックスですが、他の文字をいれようとした際にメッセージをすぐしたに表示する機能(annotateElement.js)を実装。

入力ボックスいろいろ、オープンソースなウェブコンポーネントとして作っています。
活用、派生、コメント、プルリク、大歓迎!
- input-number 数字
- input-alpha 記号英数
- input-telephone 電話番号
- input-float 浮動小数
- input-accountid アカウントID
- input-ja 日本語(JIS X 0213)
- input-kana カナ

上記HTML生成用メモ
["number", "alpha", "telephone", "float", "accountid", "ja", "kana"].map(d => `- <a href=https://github.com/code4fukui/input-${d}/>input-${d}</a><br>`).forEach(d => console.log(d));

日興証券のオープンイノベーション、高専インカレチャレンジを手掛けるNOILチームと、鯖江のHana道場や、Code for Japan 地域フィールドラボ(コーポレートフェローシップ)などをIT地方創生を一緒に手掛けるSAPチームとInspired.Labにてミーティング。

今年、石川県のPFUさん協力で北陸で始まった高専インカレチャレンジは、イオングループさん協力の第二回目で全国11高専に拡大、第三回はいっそ日本の枠を超えるのもあり! 英語が苦手の印象強い高専ですが、英語プレコン(全国高専プレゼンテーションコンテスト)もあって、この分野でスキルを磨く学生もいます。(福井高専生も第13回で優勝!福井高専ニュースで検索可能)


学科、学校、得意分野を超えてまとまる全国6万人の高専生パワー。引き出しましょう!

日本のIT化が遅れた理由に、日本語固有の問題があると見かけました。

米国:個性的な手書きが読めないので、タイプライター、デジタル化が早く進んだ
日本:みんなある程度きれいな文字を書くので、手書きで困らなかった

米国:漢字変換がいらないので、速記が簡単
日本:打つだけじゃなく、漢字にする必要がありリアルタイムでのデジタル化が困難

米国:使う文字種が少ないのでデジタル化が簡単
日本:アルファベット、カナ、かな、漢字、外字があり複雑

こうしたハンディーキャップも、いままでの努力とデジタル技術の進化によって、いよいよ解消しつつあります。 難関、外字(漢字表にない漢字)も6万字をユニコードに収録した文字情報基盤と異体字セレクタ仕様によって、解決。 (参考、6万漢字や結合絵文字を普通に扱う Str.js と文字情報基盤の縮退マップを使った正規化デモ


mojicnv - 文字変換ツール群HankakuKana.js / ZenkakuAlpha.js src on GitHub
歴史的経緯によって残ってしまっている半角カナや、全角記号英数。 こちらもJIS X 0213によって全角カナ、英数記号は半角と、概ね整理されたので、積極的に正規化して、無駄に悩む時間をなくせます。

日本の総IT化に向け準備万端!多様性を克服する強さを国際化に向けた武器にしましょう。

ウェブアプリで数字しか入力できないコンポーネントと言えば、input type=number ですが、英数も見かけ上入力できてしまったり(Safari)、桁数を制限しようとmaxlengthやmaxを指定しても完全に効くわけではありません(Chrome/Safari)。 正規表現で入力できる文字を制限できる仕様 pattern もありますが、どうも機能していない様子。

無いものは創ろう。input-numberタグを作りました。

input-number tag demo
上2つが今回作ったinput-numberタグによる入力ボックスです。0-9の数値以外入りません。2番目はmaxlengthで長さを5に制限したもの。入れようとしてもはねられます。ペーストしていれようとしても対策済み! 拡張タグは必ず閉じタグが必要なので、忘れずに!その下は比較用の標準コンポーネントです。

つくりかた
文字を正規化するインターフェース的なValidatorクラスを作り、数値に特化したNumberValidatorクラスを作って、テストします。

Validatorのインスタンスを取る入力コンポーネント、InputWithValidatorクラスHTMLElementを派生して作って、最後に更にそれを派生したInputNumberクラス作って、できあがり!

import { NumberValidator } from "./NumberValidator.js"; import { InputWithValidator } from "./InputWithValidator.js"; class InputNumber extends InputWithValidator { constructor() { super(new NumberValidator()); } } customElements.define("input-number", InputNumber); シンプルですね!

高専で習っただけでは分かりづらい「オブジェクト指向」。実用コードを読んで、触って、体得するのが一番です。

デジタルの日、まだまだ足りない現実のデータ化。
近くにある建物をどう分類するといいでしょう?

デジタル庁のベース・レジストリとして整備される予定の行政基本情報データ連携モデルのPOIコード(Point of Interest)をJavaScriptのライブラリ、ウェブコンポーネントとして整理しました。 (参考、BaseRegistry/行政基本情報データ連携モデル-POIコード.md at main · code4fukui/BaseRegistry

select-poicode tag demosrc on GitHub
POIコードをディレクトリから調べたり(select-tree tag 使用)、一覧から検索したりできます。 これで足りない時はどうするか?みんなバラバラなコードにならないように、定義とアピールが大事です。

JavaScriptから使用する場合もこのように、簡単! import { POICode } from "https://code4fukui.github.io/POICode/POICode.js"; console.log(await POICode.encode("高等専門学校")); console.log(await POICode.decode("1508")); console.log(await POICode.find("学校")); 身の回りから整理してみましょう!
Let's go with digital!

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