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

信用できない通信路だけで、信用できる通信をする方法はないものか?実はあるんです。その最新の技術が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をマイナンバーカードで電子署名して市役所に申請すれば、本人確認済みアカウントのできあがり!

日本記者クラブのゼミにて講演。オープンデータ活用に向けた課題のひとつ、一次情報の信用。
2017年で日経新聞一面でも掲載された、SSL非対応問題。未だ、5府県が未対応。 ブラウザで見ると「保護されていません」「安全ではありません」などと表示される状態です。

暗号化されないため、ネットの経路上で改竄リスクがある http は不推奨です。

このSSLでも使用される、公開鍵暗号、ひとまずは実装と思って作った「HANKORSA暗号バージョンは古い知識でした(DXGOV#2にて、クリスによる指摘、ありがとう!)。 RSAより短い鍵の長さで、安全性が高い方式「エドワーズ曲線デジタル署名アルゴリズム(Ed25519)(公式サイト)」を使ったものに更新しました。
HANKO」(Ed25519バージョン src on GitHub)
鍵などのバイナリデータのテキスト化に、pemではなく16進法表現のhexに変更、1行でコピーペーストしやすく使い勝手も向上しました。

この作成した鍵、一生使えるわけではありません。コンピューターの速度の向上や、数の増加、解き方の発見など、時間が経つほどに解読リスクは高まるため、十分に強い鍵に定期的に変更する必要があることを理解しておきましょう。

デジタル化を一気に進めたい危機的日本。自分を保証してくれる技術への信用と信頼が大切ですが、それはひとりひとりのデジタルリテラシー他なりません。 小中高でプログラミングと情報が必修化される中、大人が足を引っ張るような事態は避けたいですね。


富山県、北海道、大阪府、奈良県、栃木県のwebサイト、早期の対応が望ましいです。


講演は、マリカーのサーキットとしても羨ましがられる、SCCからお送りしました。

サーキットになってたSCC

福野 泰介さんの投稿 2020年10月16日金曜日

行政DXを前進させるのは、MTGではなく創ること。dxgov#2を開催しました!

どんな地域からでも、どんな立場の人でも気軽に参加できるのがオンラインのいいところ!


#DXGOV 鯖江市でDX実行しよう!
話しつつ、Google Docsで各自リアルタアイムで書き、整理しながら、まずはアイデアソン。 情報共有、合意形成、納得行く判断、投票、そもそも町内会やマンションの自治会などで実績を積むことが大事。 理想だけ先行してもだめなことは、うちの町内でFacebookグループで回覧板を代替しようとした時に感じたことでした。

続いて、コードを書いたり、デザインしたり、データを整理したりと創る時間。


鯖江市の申請
鯖江市の条例から申請を検索。 デジタル手続きの第一歩は、印鑑証明みたいなものをつくること。ひとまず、印鑑証明を参考にすべく、項目を洗い出しました。


鯖江市でDX実験するための認証された端末登録申請のプロトタイプを追加
TypeScript化してくれたコードに、CSVデータを元にフォームを生成するコードを追加。いろんな申請書がCSVオープンデータさえあれば、自動生成されるシステムへと発展予定です。

次回、DXGOV#3は、10/22木15:30-17:30!

マスク、ソーシャルディスタンス、うがい手洗い、体調不良で無理をしない。風邪やインフルエンザにも罹りにくくなっているはず。 確認できるオープンデータを探すと、福岡市と北九州市に「感染症報告数」「インフルエンザ報告数」あり。 福岡市の2015年からの報告数をグラフ化。

福岡市のインフルエンザ発生数オープンデータ
週次に更新されるオープンデータによって自動的に更新されていくグラフアプリを作りました。


福岡市のインフルエンザ発生数オープンデータ
凡例の年度をクリックすることで表示、非表示を切り替え可能(Chart.jsの機能)。現時点、昨年度と比較してもかなり少ないことが分かる。 例年ピークを迎えるのは1月あたり、推移に注目したい。

人類のリスクはコロナだけにあらず。データを元に正しい対処をしていきたい。 都道府県別のインフルエンザ報告数、入院数、死亡者数がオープンデータ化されれば、COVID-19 JAPAN 新型コロナウイルス対策ダッシュボードに機能として追加したい。

福井県のインフルエンザの患者数推移、画像のグラフでの提供を発見。オープンデータ化をお願いしてみよう。
福井県におけるインフルエンザの年別・週別発生状況 福井県感染症情報

電子署名法によりハンコ同等の効力となった電子署名。いまいちピンと来ない人向けに、気軽に試せるHANKOサイトを作りました。

HANKOを作る、押す、確認する」(src on GitHub)
HANKOを作って、HANKOを押して、HANKOを確認するの三部作。

HANKOの実体は、公開するHANKO_ID(公開鍵)と誰にも見せてはいけない秘密のHANKO_SEC(秘密鍵)の2つのデータです。
メッセージにHANKOを押すには、HANKO_SECを使って、電子署名データを生成。
電子署名データと誰に見せてもOKな公開されているHANKO_IDを元に、その署名がその本人によるものだと確認できます。
これが、電子署名の肝、公開鍵暗号
高校の情報Iでみんなが習う予定なので、日本人誰もが知っているべきですね。


dxgov#2」(src on GitHub)
ミーティングよりコーディング!認証付きIPアドレス、EverIP開発者クリスとともに、新しい行政サービスづくりオープンに進めます。
次回開催、10/15(木)13:00〜。プログラミングは知らなくてもOK。手続きのデジタル化に向けたデータ整理や、理想のユーザーインターフェイスづくり、広報など、やることはたくさん!

一日一創ブログ、3000記事目!

正確には、0から始まっていたり、欠番があったり、2012年のは連番に含まなかったりしますが、キリ良い節目なID。 3000コのアプリ、一見途方も無く感じますが、毎日8年ちょっとやっていると理論上到達します。

記念日なので、年齢を使った自分だけの時を感じる、時計アプリ。年齢を聞かれた時、通常小数点以下を切り捨てて回答しますが、連続量として回答すれば、誕生日の近さも伝わって便利かも?

analog-age 自分時計
日付を設定すると、ブラウザ内に保存され、開くと誕生日の近さが分かる円グラフと共に、アナログ量としての年齢を知ることができます。 現在 41.92696321才、小数点以下8桁表示するとリアルタイムに成長を感じられることがわかりました。

const age = getAge(); txt.textContent = `${age.toFixed(8)}才`;

円グラフは、Chart.jsをESモジュール対応した、Chart.mjsを使ってサクッと描画。

let chart = null; const show = () => { const age = getAge(); if (chart) { chart.destroy(); } const dage = age - Math.floor(age); const data = [dage, 1 - dage]; const backgroundColor = ["#222", "#eee"]; const config = { type: "pie", data: { datasets: [{ data, backgroundColor }] }, }; chart = new Chart.Chart(canvas, config); };

一度設定した誕生日をブラウザ内に手軽に保存する localStorage、サーバーには送っていないことをソースで確認しましょう。

date.onchange = () => { const s = date.value; localStorage.setItem("analogage-age", s); show(); }; const sdate = localStorage.getItem("analogage-age"); if (sdate) { date.value = sdate; }

links
- 一日一創2012 timeカテゴリー

ハンコ廃止に、デジタル庁、日本もようやく変革の気運、高まってきました。
「まちづくりを自分ごとにする」スマートシティ講演で再認識した大事なこと。
鯖江市役所との接点はどうあるとステキか?理想のインターフェイス、創りましょう!

ハンコに変わる電子署名。
これが手軽にできる技術の相談、コネクトフリー久利寿氏と京都にて。

早速、その場でプロトタイピング。一度本人確認が完了していれば、スマホで水道を開閉手続きができちゃうはず。

ちょうど話題になった「婚姻届」のデジタル化。一人の手続きだけではできないので、どのようなフローがうれしいのか、楽しく悩めそうですね。 (二人からそれぞれ相手の公開鍵を付けて送信し、市役所で両方揃えば婚姻成立でOK!?)

IPv6で本人認証できたとしたら、手続き作成はとってもシンプル!(for Node.js / JavaScript)

import fs from "fs"; import http from "http"; import { USERS } from "./users.mjs"; const server = http.createServer(); server.listen(8060, "::", function () { console.log("listener"); }); server.on("request", function (req, res) { if (req.url.indexOf(".png") >= 0) { fs.readFile("./" + req.url, (err, data) => { if (err) { res.writeHead(404); res.end(JSON.stringify(err)); return; } res.writeHead(200, { "Content-Type": "image/png" }); res.end(data); }); return; } const addr = req.connection.remoteAddress; const user = USERS[addr]; console.log(addr, user); if (user) { res.writeHead(200, { "Content-Type": "text/html" }); res.write(`<meta charset="utf-8">`); res.write(`ようこそ${user.name}さん!`); res.write(`<h2>鯖江市民メニュー</h2>`); res.write(`<button>結婚する</button>`); res.write(`<button>水道を止める</button>`); res.end(); } else { res.writeHead(200, { "Content-Type": "text/html" }); res.write(`<meta charset="utf-8">`); res.write(`<h1>鯖江市民認証サービス</h1>`); res.write(`<img src=q.png height=100><br>`); res.write(`姓名:<input type=text><br>`); res.write(`住所:<input type=text><br>`); res.write( `<img src="https://chart.apis.google.com/chart?chs=140x140&cht=qr&chl=${addr}"><br>`, ); res.write(`EverIP: <code>${addr}</code><br>`); res.write(`本EverIPとあなたを鯖江市民として登録するサービスへ申し込みます<br>`); res.write(`<div>署名:_______________________(印)</div>`); res.write(`<button onclick="window.print()">印刷する</button>`); res.end(); } });

理想の窓口、いろいろつくっていきましょう!
src on GitHub / Code for Sabae

links
- 婚姻・離婚届の押印廃止検討 手続きオンライン化推進  :日本経済新聞

鯖江市の新市長となる佐々木さんに、2年ぶりに来鯖した、DX推進の専門家で地域情報化アドバイザー仲間でもある森本さんと一緒にお会いしました!

国でも地方公共団体でも、本格化するデジタル化(DX=デジタルトランスフォーメーション)。 鯖江のシビックテック団体、Code for Sabaeのテーマを実証から実用へ転換し、民間でできることはどんどん進めていくことにします。

NT鯖江のふりかえり、よかったことと改善点から、やること(TODO)を決めました。 早速、来年に向けたNT鯖江2021の出展募集サイトを立ち上げ、来場者向けのサイト「さばえまっぷ」プロジェクトをスタートしました。


さばえまっぷ
さばえものづくり博覧会オープンデータと鯖江市役所の公共施設オープンデータ(odp)をマッシュアップ! 県外から鯖江に来てもらえる人に、使いやすい情報とは?Code for Sabaeとして、みんなで育てていきたいと思います。ご要望、アイデアなど、ぜひGitHubの Issues へ書き込みください。

はじまりました、ものづくりイベント、NT鯖江2020!
(10/3-4、11:00-17:00 at 鯖江商工会議所1F SCC)。


ユニークな展示がじっくり楽しめる2日間、鯖江市長選挙と合わせてどうぞ!
以下、ブースの写真レポートです!


チューンドお人形さん!


IchigoJamの同人誌!


なぜか子供が惹かれてしまうパズル!IchigoJamコマンド版とか作りたい


高電圧と静電気で駆動する自作コンデンサヘッドホン!


水引き+LED!


高専プロコン競技部門を勝手に開催する、囲みますリアル大会、初開催!


大人気だった、抵抗の形のはんだごて陶芸品!


アマビエさまになれるハコ!


自動演奏ピアニカ!


自作の曲がるディスプレイ!


漆塗りのピニカとFPV化されたラジコン!


鯖江だし、光るメガネ!


外側は当時のままで中身はリニューアルするというステキ改造ゲーム機!


ほっぺをふにふにできるVRデバイス、自作!


懇親会のCOMP料理!

44.1kHzで、440Hzの矩形波を鳴らそうとしても、サンプル数は100.23と割り切れないため、どうしてもずれます。実際鳴るのは100サンプル周期の441Hz。 正弦波であれば補間が聞くのでちゃんと440Hzで鳴ります。

波形量子化聴き比べアプリ / waveform sound test

高い周波数になるほど顕著、1838Hzを鳴らそうとすると1917.391Hzと4.32%もずれます。四捨五入しても2%以上ずれてしまうのが現実です。

そこでハイレゾ音源の出番、384kHzを使うと、0.44%まで誤差を縮めることができます。

それでも起きる誤差、解決方法は、ハードウェアから作ってしまうか、生楽器をサーボなどで鳴らすこと。ものづくりへの追求はつきません。


Oculus Quest DK2購入のきっかけ、@GOROmanさん、着鯖!


次回、会場として活用も検討する。SCC地下へ。


実験!

#NT鯖江 Twitter検索でもどうぞ!


NT鯖江2020」2020/10/3-4土日開催 @SCC

links
- NT鯖江2020 2日目レポート - NT鯖江

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