緯度、経度、精度、3つの値を1つのコードで表現する、パブリックドメインなジオコーディング「Geo3x3」の76コ目の実装プログラミング言語として、THPL対応!

Geo3x3 README.md

THPLとは、The HTML Programming Language、プログラミング言語としてのHTML。先日、エンコードを実装しましたが、THPLの言語自体に機能を足してデコードも実装。正式対応とすることができました。

足した機能は1つだけ、文字列から指定した場所の文字コードを取得する string/charCodeAt という機能。当初、簡単だったので、他の演算子と同様 math タグ内のエレメントとしての実装してプルリクしましたが、HTML標準から外れるということで、ご提案いただいた q タグによる実装に切り替えました。
add math.charCodeAt by taisukef · Pull Request #2 · uhyo/the-html-programming-language

オープンソースソフトウェア(OSS)のプログラミング言語は、言語自体を改造できるだけでなく、言語開発自体に貢献できるのがステキですね。

THPLは、TypeScriptで書かれたシンプルなプログラミング言語なので、プログラミング言語づくりの参考にもいい感じです。npm run build のコンパイル時間も30ミリ秒ほどと高速です!(liveserverと組み合わせればブラウザ上でのテストも簡単!)

今回の改造手順
1. THPLをフォーク
2. 抽象構文木(AST)式(expression.ts)に、QExpression/qExpressionを追加。
3. 構文解析器(パーサー)parseExpression.tsに、Qタグとciteプロパティ対応を追加。
4. インタプリタrunExpression.tsQExpressionへの対応と string/charCodeAt 処理を追加。
5. としてtest-charCodeAt.htmlを追加(ブラウザで動きます)。
6. プルリク

THPLにマージされたわけではありませんが、フライングでGeo3x3のTHPL対応としました。
taisukef/Geo3x3: geo zone encoding, serialize latitude and longitude

自作言語をお持ちの方、Geo3x3実装チャレンジしてみてください!

HTMLは、コンピューター言語ですが、プログラミング言語ではありません。

という定説を覆す記事。
「HTMLはプログラミング言語か」問題に終止符を打つ - Qiita
見事にHTMLがプログラミング言語になっていました。


The HTML Programming Language (THPL) を使って、緯度経度の表現 Geo3x3 のエンコードをHTMLで実装してみました。

HTMLはその仕様を自由に提案することができ、いろんな提案によって今日のHTMLがあります。 なので、HTMLが一般的にプログラミング言語と呼ばれる日が来る可能性も十分にあるわけです。

下記が、Geo3x3_encode.thpl.html 全文。Math.floorがないので、除算と引き算を使った関数 floor を定義し、文字列演算がないので、数を10倍しながらエンコードしています。 デコード処理を実現するには、文字列系の関数をいくつかTHPLに足す必要がある気がします。(src on GitHub)

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>Geo3x3_encode in THPL</title> <script src="https://unpkg.com/the-html-programming-language@0.1.0/browser.min.js"></script> </head> <body> <section title="floor"> <footer> <abbr><math><minus/></math><br> <slot></slot><br> <abbr><math><rem/></math><br><slot></slot><br>1</abbr> </abbr> </footer> </section> <section title="encode_loop"> <dl> <dt>lat</dt><dd><slot name="0"></slot></dd> <dt>lng</dt><dd><slot name="1"></slot></dd> <dt>level</dt><dd><slot name="2"></slot></dd> <dt>unit</dt><dd><slot name="3"></slot></dd> <dt>res</dt><dd><slot name="4"></slot></dd> </dl> <dl> <dt>x</dt><dd><abbr title="floor"><abbr><math><divide/></math><br><var>lng</var><br><var>unit</var></abbr></abbr></dd> <dt>y</dt><dd><abbr title="floor"><abbr><math><divide/></math><br><var>lat</var><br><var>unit</var></abbr></abbr></dd> <dt>n</dt><dd><abbr><math><plus/></math><br><var>x</var><br><abbr><math><times/></math><br><var>y</var><br>3</abbr><br>1</abbr></dd> </dl> <footer> <meter><var>level</var></meter> <ruby> <meter>1</meter> <rt><var>res</var></rt> <rt> <abbr title="encode_loop"> <abbr><math><minus/></math><br> <var>lat</var><br> <abbr><math><times/></math><br><var>y</var><br><var>unit</var></abbr> </abbr><br> <abbr><math><minus/></math><br> <var>lng</var><br> <abbr><math><times/></math><br><var>x</var><br><var>unit</var></abbr> </abbr><br> <abbr><math><minus/></math><br> <var>level</var><br> <meter>1</meter> </abbr><br> <abbr><math><divide/></math><br> <var>unit</var><br> <meter>3</meter> </abbr><br> <abbr><math><plus/></math><br> <abbr><math><times/></math><br><var>res</var><br>10</abbr><br> <var>n</var> </abbr> </abbr> </rt> </ruby> </footer> </section> <section title="encode"> <dl> <dt>lat</dt><dd><slot name="0"></slot></dd> <dt>lng</dt><dd><slot name="1"></slot></dd> <dt>level</dt><dd><slot name="2"></slot></dd> </dl> <dl> <dt>flg</dt><dd><abbr><math><lt/></math><br><var>lng</var><br>0</abbr></dd> <dt>lat</dt><dd><abbr><math><plus/></math><br><var>lat</var><br>90</abbr></dd> <dt>lng</dt><dd><var>flg</var><ruby> <meter>1</meter><rt><abbr><math><plus/></math><br><var>lng</var><br>180</abbr></rt> <rt><var>lng</var></rt></ruby></dd> <dt>prefix</dt><dd><var>flg</var><ruby><meter>1</meter><rt>W</rt><rt>E</rt></ruby></dd> </dl> <footer> <var>prefix</var> <abbr title="encode_loop"><var>lat</var><br><var>lng</var><br><var>level</var><br>60<br>0</abbr> </footer> </section> <p><output><abbr title="encode">35.65858<br/>139.745433<br/>14</abbr><wbr></output></p> <p><output><abbr title="encode">35.65858<br/>-139.745433<br/>14</abbr><wbr></output></p> </body> </html>

ちなみに、JavaScriptでの実装はこちら。

const encode = (lat, lng, level) => { let res = "E"; if (lng < 0.0) { res = "W"; lng += 180.0; } lat += 90.0; let unit = 180.0; for (let i = 1; i < level; i++) { unit /= 3.0; const x = Math.floor(lng / unit); const y = Math.floor(lat / unit); res += x + y * 3 + 1; lng -= x * unit; lat -= y * unit; } return res; }; console.log(encode(35.65858, 139.745433, 14)); console.log(encode(35.65858, -139.745433, 14));

いろんなプログラミング言語を見たい方は、こちら75言語で実装した「Geo3x3」をご覧ください。 おなじみC言語から、Scratch、関数型言語の代表LISPなど、違いをいろいろと楽しめますよ。

鳴かぬなら、鳴くのを創ろう!

ハンコがQRコードだったらかっこいい?
なんとありました!シャチハタのmyQR(マイキューアール)は、98文字までのURLをハンコ字体付きのマークと合わせてハンコにしてくれます。


名刺の裏に押してみました。ペタペタ、いろんな紙に押せて楽しい。

QRコードのエラー訂正機能を使った中央マーク付きQRコード、いいですね!

makeqr
中央に白抜き文字を入れられるシンプルなQRコード生成ツールにしてみました。2012年製のqrmakerと違って、通信しないスタンドアローンなライブラリ「qrcode.js」をESモジュール化して使ったので、より高速、安心です! Twitterのアドレスを入れると自動的に @taisukef などがマークとして設定されます。お好きな色でどうぞ!

links
- myQR|シヤチハタ (on Amazon)
- qrcode.js

前回の雪かき事故を知らせるアプリの通知先はiPhoneアプリでしたが、AndroidやパソコンのChrome, Firefox, Edgeでは、W3Cでオープンに規格化が進む WebPushこと「Push API」が使用可能とのことで、実験してみました。 コマンドラインから、webから、結構手軽に通知が送れるのでなかなか楽しく、便利です!うまく使えば、気になる情報のチェックや、リマインドに大きく力を発揮してくれそうです。

本ブログにもそのうち追加しようと思いますが、ひとまず、実験できるプログラム一式ができたので、公開します。

WebPushは、各ブラウザベンダーが運用している通知サーバーにデータを送って、そこから各ブラウザへと通信される仕様のようです。 Node.js 用のライブラリを使って、通知用の設定と、コマンドラインで送信するツール、Deno で作ったサンプル通知管理サービスと、クライアント動作するプログラム、すべてJavaScriptです。 便利ですね、JavaScript。(src on GitHub

<script type="module"> import { WebPush } from "./WebPush.js"; window.onload = () => { btnSubscribe.onclick = () => { WebPush.subscribe(); }; btnUnsubscribe.onclick = () => { WebPush.unsubscribe(); }; btnTest.onclick = async evt => { const data = { title: "webpush test", body: "本文本文...........", url: "https://fukuno.jig.jp/3093", // 拡張 開くアドレス timeout: 5000, // 拡張 通知を消すまでの長さ msec (デフォルト0:消さない) delay: 1000, // 拡張 表示するまでの時間 msec(デフォルト0) }; console.log(await WebPush.push(data)); }; }; </script>

クライアント側クラス WebPush の使い方は簡単。
1. 登録ボタンを押してもらって WebPush.subscribe()
2. 後は、ユーザーが許可してもらった後、pushすることでブラウザからも通知が可能です
3. 通知を止めるときは WebPush.unsubscribe()

サーバー側では、まず準備。data/mailaddress.txt にメールアドレスを記入したテキストファイルを置き、下記コマンドで、data/vapidKeys.json が生成されます。

$ node push.mjs

webサーバーをDenoで起動します

$ deno run -A webpushserver.js

https://localhost:3004/ にアクセスすると、上記画面が開きます。
登録すると、サーバーの data/subscription 内に通知用のデータがたまります(uuid + .json がファイル名)
この uuid 宛に通知がコマンドで送れます。(uuidを記載します)

$ node push.mjs xxxx-uuid-xxx 'push test'

これでOK!(文字列の代わりにJSONでアイコンなど細かな指定も可能です)
コマンドをラップして、Denoで使えるコンポーネントにもしました。

import { push } from "./push_cmd.js" await push("xxxx-uuid-xxx", "push test in Deno");

サーバーから各人へデータを送って見てもらいたいというシンプルなユースケースですが、現状webではなかなか大変なシステムになってしまいますね。 とはいえ、WebPush、今の所、各ブラウザベンダーによる運用で無料かつ無制限で使えるようなので、いろいろ遊んでみましょう!
src on GitHub

13才からのGitHubはじめのいっぽ、GitHub Pagesは便利ですが、反映までに時間がかかるのが玉に瑕。自分のパソコンでの開発環境を作ろうとすると遭遇するトラブルになりがち、そんなプログラミング初心者向けに良いサービスがありました、rep.it


Repl.it - covid19forecast」→ https://covid19forecast.taisukef.repl.co/
東京都のコロナ患者数予測グラフを表示するプログラム、サクッと公開できました!
コードを修正して即反映してくれるのがサクサク使えて便利です。 プロジェクト名とユーザー名でサブドメインがつくので、いろいろ作って公開するのが楽。


ソフトウェア1 (2020)
ステキなサービス「rep.it」は、東京大学のC言語のカリキュラムで使われています。対象は、東京大学工学部電子情報工学科・電気電子工学科の進学内定者とのことですが、プログラミング言語に興味がある小中学生、高校生、高専生にもおすすめです。IchigoJam BASICでプログラミングの基本と、データの単位、メモリの概念が分かっているとスムーズに理解できるでしょう。

話題のgoto、C言語の多重ループからの脱出手段としては有効なので、用法用量を守って使うといいです(JavaScriptなどではラベル付きループとbreakが使えます)。scanf、セキュリティホールの関係を調べると楽しいです。

昭和な一斉授業スタイルから、令和の個別最適化されたGIGAスクールスタイルへ。オープンな教材をいろんな教育機関、学生、民間組織がどんどん作ってシェアするほどに加速しますね!こどもも大人も、大いに可能性が広がります。(0からのプログラミングはじめ、IchigoJamからどうぞ!動画スライド


C言語で開発してみました、clangでコンパイルしてその場ですぐ動かせます。右側は仮想サーバーで動いていて、linuxのコンソールを体験できます。コマンドによるコンパイル他、lsでファイル一覧をみる、rmで削除、mvで名前変更など、気兼ねなく壊せるのでいいですね!


Denoもバージョン1.0.0と古いですが使えます。HTMLをfetchして表示するプログラムが動きました!


ブラウザ上での3Dグラフィックもこの通り!

いろいろつまみ食いして、気に入ったものがあったらローカル環境での構築、自分だけのサーバーを借りてのサービス公開などへステップアップするのがいいですね!

links
- Repl.it

誰かに見られていないか心配になりますか?E2EEであれば安心です。
「Zoom」でようやくエンドツーエンド暗号化が利用可能に ~来週より技術プレビュー
通信路を暗号化する、End-to-end encryption(E2EE)が賛否両論です。
日本を含む7カ国、エンドツーエンド暗号化コンテンツへの公的接続を可能にするよう要請する国際声明 - ITmedia NEWS
英、米、カナダ、オーストラリア、ニュージーランド、インド、日本によるE2EEにバックドアを用意せよと声明。バックドアがあるものは、そもそもE2EEと言えないのでは?

しかし、暗号化技術は性的搾取を受けた児童のように社会の脆弱性の高い人々を含む公共の安全に対し、重大な挑戦にもなると指摘。
エンドツーエンド暗号化及び公共の安全に関するインターナショナル・ステートメント|外務省より)


E2EEメッセージングヘルパー」(src on GitHub)
国をも動かす技術、E2EE。実際試してみるツールを、ECDH鍵共有実験を一歩進めて作りました。 かわいいデザインと、鍵管理の機能を追加するといい感じになるはず。

- ユースケース
公開鍵をプロフィールや自分のウェブサイトにおきます
相手の公開鍵をゲットしたら、秘密鍵を生成して、メッセージを暗号化
誰かに見られている通信路を使って送信
受け取ったメッセージを復号化すると読めます

家の無線LANのパスワードなど、メッセージで送ろうとした時の気持ち悪さ。これで解消!

links
- 見られても大丈夫な暗号鍵!? webアプリでECDH(楕円曲線ディフィー・ヘルマン)鍵共有実験
- GitHubで公開! 内閣官房 Trusted Web 推進協議会議事録、安心できるインターネットに向けてGoogleログイン実験

デジタルの信用と信頼を支える技術、小学生でもわかる暗号の基礎、ネックは誰にも知られてはいけない鍵の共有方法です。
プログラミングで学ぶ、安全安心なまちに必須の暗号化技術「さいきょうのあんごうワンタイムパッド」
ワンタイムパッド暗号の鍵の受け渡しに、いつ誰が見ているかわからないインターネットは使えません。直接会って手渡しするか、厳重に封をして書留で送るなど、別の経路が必要になって手間がかかります。

信用できない通信路だけで、信用できる通信をする方法はないものか?実はあるんです。その最新の技術がECDH(楕円曲線ディフィー・ヘルマン鍵共有)です。 楕円曲線上の離散対数問題が、現代の知識とコンピューターでは現実的な時間で解けないという、数学を利用した鍵共有方法です。

Web標準の Web Crypto API を使って、実際試してみました。

ECDH鍵共有実験 - Web Crypto API」(src on GitHub)
上記を2つブラウザで開きます。離れたところにいる誰か友達に開いてもらってもOKです。まず、お互い公開鍵を生成し、相手に公開鍵を送信し合い、受け取った、公開鍵をセットします。 自分で生成した鍵と受け取った公開鍵から、実際に暗号化、復号化に使う共通鍵が生成できます。

この共通鍵、ネットワークでやりとりせずに、2つ(2人)で全く同じであるところがおもしろいところです! 通信路の二人の公開鍵から共通鍵を計算することが事実上不可能であることが信用の担保となっています。(もし計算できたら世界的な大発見になるので、それはそれでぜひチャレンジしてください)

共通鍵が共有できたので、あとはこれを使って暗号化するだけです。今回は AES-GCM というアルゴリズムを使って、暗号化していますが、ワンタイムパッドとして使うのもありですね。

この技術のおかげで、インターネットで安心してショッピングしたり、メッセージを送り合ったりできているわけです。 本人確認、本人認証と組み合わせて、確定申告など、電子申請にも使用されています。

でも、安心は禁物。楕円曲線上の離散対数問題をシンプルに解く新アイデアや技術が登場しない保証はありません。 コンピューターは速くなりつづけ、増え続けるので、力づくで解読できてしまう日もきっと来ます。

新技術、楽しくウォッチしていきましょう!


みんなでつくるDX、DXGOV#3は、10/22木15:30-17:30 オンライン開催!

日本のミスターインターネット、村井純さんが座長を務める「Trusted Web推進協議会」の資料がGitHubで公開されました! 経産省に続き、スマートでエンジニアにも優しい進め方がうれしいですね。

Trusted Web 推進協議会の公開ドキュメント」 forked by Code for Sabae
Markdownや、RDFなど人にも機械判読しやすくなるよう資料を書き直すプロジェクト、はじめました。


こちら元資料のPDFと、Markdown化した議事次第見比べてみてください。

# [Trusted Web 推進協議会](https://www.kantei.go.jp/jp/singi/digitalmarket/trusted_web/index.html) (第1回) ## 日時 令和2年10月15日 10:00-12:00 ## 場所 通信システムを用いた遠隔開催 ## 議事次第 1. 開会 ...

Markdownとは、こんな感じでテキストファイルで書いていけるオープンで人にも機械にも優しいフォーマットです。

本題の Trusted Web ですが、Trust とは?
FacebookやTwitterなど大規模SNSに依存しない、安心して使えるIDによる本人確認ができる機能が付加された web をそう呼んでいるようです。

マイナンバーが OpenID に対応すればいいのでは?
ひとまず実験として、OpenID準拠と思われる、Googleログインを使ってみました。意外と簡単!

test - Google login
Integrating Google Sign-In into your web app」こちらに解説あるように、「Google APIの認証情報」から認証情報を作成、OAuth 2.0 クライアントIDを作成し、下記webアプリを作って、設置するドメインを設定すれば実験できます。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>test - Google login</title> <script src="https://apis.google.com/js/platform.js" async defer></script> <meta name="google-signin-client_id" content="1092456124559-vva51h0b575cquvo9p1nc4ue8i7a7gu4.apps.googleusercontent.com"> </head><body> <div class="g-signin2" data-onsuccess="onSignIn"></div> <a href="#" onclick="signOut();">Sign out</a> <hr> <style> .output { border: 1px solid gray; padding: 1em; margin: 1em; white-space: pre-wrap; word-break: break-all; } </style> profile <div id="divprofile" class=output></div> token <div id="divtoken" class=output></div> <button id=btnchk>check with token</button> https://oauth2.googleapis.com/tokeninfo?id_token= <div id="divres" class=output></div> <script> function onSignIn(googleUser) { const profile = googleUser.getBasicProfile(); console.log("profile", profile); divprofile.textContent = JSON.stringify(profile, null, 2); const token = googleUser.getAuthResponse().id_token; console.log("token", token); divtoken.textContent = token; } async function signOut() { const auth2 = gapi.auth2.getAuthInstance(); await auth2.signOut(); console.log("User signed out."); } btnchk.onclick = async () => { const token = divtoken.textContent; const url = "https://oauth2.googleapis.com/tokeninfo?id_token=" + token; const res = await (await fetch(url)).json(); divres.textContent = JSON.stringify(res, null, 2); }; </script> </body></html>

サインイン、基本情報表示、tokenから取得、サインアウトまでの基本実装ができました。(*script を type=module にすると、外部からの呼び出しができず失敗します)

メールアドレスはIDとしては使わないようにとのことなので、profileのOTや、検証した際のsubで21桁の数と本人確認を組み合わせれば電子申請に使用可能ではないでしょうか?

このIDをマイナンバーカードで電子署名して市役所に申請すれば、本人確認済みアカウントのできあがり!

今年はOPENDATAで博覧会!さばえものづくり博覧会のwebサイト、GitHubのオープンソースで作ってます。

code4sabae/sabae-monohaku.jp on GitHub
デザイナーさん作成の素材と、オープンデータを元にサイトづくり。キレイなサイトは作っていても気持ちがよいですね!

フォントを美しく
オープンなライセンスで使える、webフォント。いい感じのものをいくつかピックアップ。
- Open Sans Condensed
- Barlow Semi Condensed
- BenchNine
- Khand
- M PLUS Rounded 1c(日本語)

使いたいフォントは、「+ Select this style」リンクから、<link> をHTMLに、font-familyをCSSにそれぞれ設定すると使えます。

<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">

body { font-family: 'Open Sans Condensed', sans-serif; }

CSSに@importで書いても読み込んでくれないので注意!

スムーズなページ内リンク
ページ内のリンクは、a name と a href=# で設定します。標準ではパッと移動するページ内リンク、下記CSSを追記するだけで、スムーズにスクロールしてくれるようになります。

html { scroll-behavior: smooth; }

・・・と思いましたが、scroll-behavior(MDN)によると、iPhoneなどSafariが未対応。 JavaScriptかCSSかで補ってやる必要がありそうです。

ふわふわさせる
ロゴ右側でふわふわ動く「ご挨拶」リンク。CSSアニメーションを設定すると簡単です。下記のように fuwafuwaクラスをCSSに記述して・・・

.fuwafuwa { animation-name: fuwafuwa; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1.5s; } @keyframes fuwafuwa { 0% { transform: translate(0, 0vw); } 100% { transform: translate(0, 2vw) } }

タグの class に fuwafuwa を設定すれば、OK!

<img id="btn_greeting" class="fuwafuwa" src="img/topaisatsu.svg">

再利用可能なコンポーネント
どのページも共通に使いたい部分、例えばページフッターは独自タグにしてまとめましょう。 CSSテーブルでも使ったHTMLElement(Webコンポーネント)を使ってゼロフレームワークで再利用性の高いコーディングができます!

footer.js on GitHub
あとは、define で定義したタグを使うだけ、index.htmlとdetail.htmlに smono-footer タグがあります。

<smono-footer></smono-footer>


注意点は、ローカルファイルとしてのJavaScriptモジュール読み込みができないこと。live-serverなど、ローカルにwebサーバーを立ててお試しください。

Let's make own web!
じぶんのウェブサイトをつくろう! 13才以上なら誰でも無料で持てるホームページ&HTMLとCSSはじめのいっぽ

ウェブサイトは自己表現の基本、自分の作品や伝えたいこと、どんどん公開しましょう!

Microsoftグループによるサービス、GitHubを使えばアカウントが持てる13才以上であれば、誰でも無料で自分だけのウェブサイトを作って、公開できます。 広告など一切なしです。その作り方をシンプルに解説しました!

code4sabae/website: GitHub Pages で、じぶんのウェブサイトをつくろう!
世界的に有名なDenoなどだけでなく、経産省IMIコンポーネントツールや、東京都 新型コロナウイルス感染症対策サイトなど、日本政府による利用も増えてきました。 コメントするのにもアカウントが必要なので、持っておきたいですね。アカウント名が自分のウェブサイトの名前の一部になるので、ユニークで良い名前を付けましょう。

手順2でFork(フォーク)し、手順4でGitHub Pagesの設定をすれば、できあがり!(website)と同じページが公開されます。 あとは、index.html というテキストファイルの文字をいじるだけ。壊しても、何度でも作り直せます。(書いた内容は世界中からアクセス可能なことを忘れずに!)

<と>で囲まれたものはタグ。タグでウェブサイトはできています。 自分で試しながら作れる、HTML5時代のHTMLとCSSの超入門を作りました。 「HTMLはじめのいっぽ」「CSSはじめのいっぽ

基本がわかれば、後はやりたいことと合わせて検索すればOK、どんどん自分好みのサイトに改造していきましょう! お気に入りのサイト、ブラウザで右クリック「ソースを表示」でのぞいてみるのもいいですね。

わからないこと、間違っていることなどを見つけたら「Issues / website」まで、どうぞ気軽にお寄せください。

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