日本が今頃DXとか言わないといけない理由は、日本人のインターネットとコンピューターに対する信頼性の低さかも。 克服のために、コンピューターのスゴさと怖さを理解しましょう。

福井大学リカレント教育事業、サイバーセキュリティ講座のいよいよ本題。 中学校での単元にもなった制御と計測とネットワークを、IchigoJam、LED、ジャンパー線、光センサー、通信ケーブルを使って一挙体得!


IchigoJamで学ぶ、インターネットとプロトコルsrc on GitHub
本日スライド、まとめて公開しました。


入力、制御、出力、電源と4つに整理できるコンピューター。ジャンパー線を1本使って、まずは自分自身を計測。 プログラムを動かして、ジャンパー線を抜いたり刺したりして挙動をチェック。


続いて、新兵器の3本一組にしたロングジャンパー線、通信ケーブルを使ってお隣のIchigoJamとの接続。INとLEDをクロスするのがポイントです。 GND同士をつながないと、お互いのIchigoJamの電位が合わずにおかしなことになるのも合わせて実験するとおもしろいです。


通信ケーブルを接続して自分のIchigoJamのボタンを押すと、相手の画面に伝わります。 遠く離れたブラジルと海底ケーブルでつながっていることをイメージして、0と1だけでコミュニケーションしてみましょう。

1. 生死確認
通信先の人が生きているか確認してみましょう。
→ 1を送って、1が返って来たら生きてそう

2. 元気かどうか確認
通信先の人が生きているか確認してみましょう。
→ 1を送って、1がたくさん返って来たら元気そう。長さで伝えるのもありですが、事前の取り決めが必要です。これがプロトコル

3. ひらがなを伝えよう
50音をどう伝えるといいでしょう?文字を数に変えて、数をどう0と1で表現するか、プロトコルを通信する人同士、話し合って決めてもらって、通信実験。 各チーム、個性豊かないろんなプロコトルが誕生しました。


実は、IchigoJamには文字を伝えるUARTプロコトルが使えます。

OK2

OK2コマンドで、エラー表示を一旦OFFにして、IN1をRXD、LEDをTXDに差し替え、相手にメッセージを送ってみましょう。

?"HI

相手の画面に表示される「HI」の文字。

?ASC("A")

ASCコマンドで取得できる8bitの文字コードを相手と事前に決めた時間間隔で読み取るのがUARTプロトコル。 なんとその間隔はIchigoJamでも8.68μ秒と、10万分の1秒以下! 最先端の5G携帯の場合は更に1万倍速く、最大秒間1億文字にも達しますが、原理は一緒。


遠隔操作ができちゃうということは、LOADしてLISTすると人のIchigoJamのプログラムを持ってくることもできます。 いわゆるダウンロードですが、個人的なファイルを勝手に取られるのは嫌ですよね。SAVEコマンドを送ると、勝手に消してしまうこともできますが、ダウンロードしたファイルが保存されないのは困ります。


コンピューターからしてみれば、やってと言われたことをやるだけです。良いか悪いかを決めるのは使う人間側の都合。利便性とリスクは、表裏一体と分かります。


インターネットは世界中のコンピューターをつなぐネットワーク。そのプロトコルはIPv4またはIPv6ですが、古いプロトコルのため残念な仕様。 理想のプロトコルも実は存在します。

とっても長い通信ケーブル、途中で誰かが盗み見たり、信号を変えたりするかもしれません。そこで登場するのが暗号化。 第二次大戦後誕生した、公開鍵暗号によって、事前に暗号表を共有することなく安全な通信ができるようになりました。

そのプログラムは、あなたのデータをどこまで操作できるでしょう?
その通信は、ちゃんとした暗号技術で暗号されていますか?
その通信相手は、なりすましている他の誰かではありませんか?

コンピューター1台1台がIPアドレスを持って、認証し合うのがゼロトラスト。
IT業界団体、福井県情報システム工業会で「ゼロトラスト研究会」やってます。


ネットワークは、0と1を伝えることができれば無線でもOK。音とマイク、光と光センサー、電波など、無線通信に使えそうな技術もいろいろあります。 ソフトバンクの4G回線を使った、sakura.ioを使ってIoT実験。IOT.OUT / IOT.IN() コマンドを使って、即IoTデバイスができました。


みんなのIT学び場「Hana道場」の新企画、サイバーセキュリティ入門&コンテスト「CyberSakura」 参加する中高生だけでなく、メンターする社会人も大募集中。すべての人にサイバーセキュリティ知識を! (サイバーセキュリティプログラムのサポートをしてきました!: Hana道場


午後は、福井県庁主催、福井新聞企画の大学生向けイベント。


第二部の企業DXをテーマとしたパネルディスカッションに登壇。いいところですよ、福井。


ネットであらゆるものが学べる現代、やる?やらない?すべては自分次第。


1月に1回、オフラインでお互いの学びを交換するイベント「サイフラ / CyberFriday」やってます。 今月の最終金曜日は、10/29(金)、18:30-21:30、時間内出入り自由。サイバーセキュリティに興味がでた人も、ぜひどうぞ。

分かるほど楽しいコンピューター、創ろうDX先進地。

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

Code for FUKUI x 仁愛大学 安彦先生、大学生向けのプログラミングの授業をIchigoJam + JavaScriptで実施、初日はIchigoJamを使ったプログラミング入門。 いつものエルチカとゲームづくりによるアルゴリズム学習。全員達成、楽しんでもらえた様子です。次回はJavaScriptを使った本格シビックテックへのはじめのいっぽ。 地域のIT、地域の学生の力、重要です!

コンピューター室。スライドを手元に見ながらの体験型学習。


机の上には、準備と片付けが簡単お手軽、IchigoDyhook(+ 小型IchigoJamのIchigoDake)


充電電池で運用。


はじめてのプログラミング with IchigoJam (IchigoDake + IchigoDyhook)pdf/keynote/pptx版あり
資料を iPhone 13 Pro 発売に合わせてアップデート。PCNこどもプロコンも2022が始まります! 福井近隣の方、毎月最終金曜日のサイバーフライデー(サイフラ)や、NT鯖江2021へどうぞ!


Code for FUKUI Tシャツで、ゲーム大会優勝者にヒーローインタビュー。


プログラミングのつくりをかくにん。


つないでつくる、プログラミング!
かわくだりゲームはアプリの一番おいしいところを作りました。
いろいろ改造して、ひとりひとりのオリジナルゲームができました。


「かわのぼりゲーム」
かわくだりゲームに近いですが、タイトルとゲームオーバー画面が付いた豪華版!

1 CLS:LC 10,10:?"カワノボリゲーム" 2 IF INKEY()=0 GOTO 2 10 CLS:X=15 20 LC X,20:?"🐱" 30 LC RND(32),0:?"*" 31 SCROLL DOWN 35 WAIT 3 36 X=X-BTN(28)+BTN(29) 37 X=X&31 39 IF SCR(X,20) GOTO 100 40 GOTO 20 100 LC 12,10:?"GAME OVER" 110 WAIT180:RUN

かわくだりゲームとの違いをチェックしてみましょう!
一番下の行(Y座標=23)にプリント(PRINT/?)することで自動的スクロールアップすること利用していますが、スクロールダウンは専用のSCROOLLコマンドを使います。

10 CLS:X=15 20 LC X,5:?"🐱" 30 LC RND(32),23:?"*" 35 WAIT 3 36 X=X-BTN(28)+BTN(29) 37 X=X&31 39 IF SCR(X,5) GOTO 100 40 GOTO 20

IchigoJam BASICの辞書にあたる、リファレンスや、コマンド一覧、読みやすい方でどうぞ。
- IchigoJam BASIC 1.4 コマンド一覧
- IchigoJam BASIC リファレンス ver 1.4


最後にカムロボを使ったデモ。前進後退の繰り返しのヒミツ、もう分かりますね!
興味ある方、小中学生によるプログラミングとロボットの戦い、越前がにロボコンへぜひどうぞ。


Let's code!

links
- 仁愛大学
- 安彦 智史 准教授 | 教員情報|大学紹介|仁愛大学 - PCN武生
- Code for FUKUI

来年4月、10人の新人を迎える予定の、jig.jp鯖江開発センター&本店。
テーマはシビックテック。3-4人ずつ分かれてオンラインチーム開発。内定式で成果発表会!

Aチームは、福井県のオープンデータを使って自動生成する、ご当地クイズ!
観光・グルメのオープンデータが、熱い!


Bチームは、鯖江への引っ越しを支援する、鯖江ハウジング。あるスポットの周囲にある物件とスーパー、飲食店をまとめて調べられます。喫茶店、ゲームセンター、クリーニング、サイクリングロードなど、オススメスポットも追記したいですね!


Cチームは、住んでいる県や気になる県のコロナ感染状況だけをピンポイントに毎日教えてくれる LINE bot、COVID-19 Reminder。厚生労働省の新型コロナウイルス関係オープンデータを使用。 リスクが高くなってきたときだけに通知がくると、慣れてしまって見逃すことが減って更にうれしいかも。


input-week tag demo
近所の飲食店、何曜日が営業しているかも大事なデータ。
簡単に入力できる曜日入力コンポーネント input-week タグを作りました。

シビックテックでも、より豊かな社会の実現へ!
Let's do civic tech!

便利と危険は隣り合わせ。サイバー社会を楽しく活用するため、サイバーセキュリティを身に着けた、デジタル人材が必要です。

デジタル技術を一言でいえば、すべてを0か1かで表現する技術。

なぜ、デジタル技術はスゴイのか?どう活用することができるのか?
IchigoJamを「国立大学福井大学リカレント教育事業:私の職業再構築プログラム」の教材として使っています。

国立大学福井大学リカレント教育事業:私の職業再構築プログラム


コンピューターのスゴイこと。抜群の計算力と、抜群の記憶力。すべてを0か1の1bitの集合で記憶し、伝える時も0か1。 究極に単純化した情報を超高速で処理、送受信するのがコンピューターとネットワーク活用のポイントです。


デジタル技術のはじめのいっぽ、コンピューターを自分で制御可能なカタチ、パソコンに組み立てましょう。 1時間ほどのはんだづけ体験。ひとつひとつの部品に意味があります。これは何だろう?いろんなハテナが学習の種!


学びの基本は、自学。学び方の方向性と、コツを伝えたら「あとは自分でやってみよう!」の時間。この手法はこどもも大人も共通です。


はんだづけが終わったらドキドキの動作確認。動いたらうれしいのは大人も一緒。

小学4年生を想定した、逐次実行とくりかえしを使ったエルイーディーを点滅プログラムと、ロボット化。 家中の家電の中身が透けて見えてくるはず。座学ではなく、自分での体験が近道です。


かわくだりゲームを1命令ずつ解説しながら、コンピューターとの付き合い方のコツを体験してもらいました。(ゲーム大会は大人でも楽しい)


自学を想定した自由制作時間、サンプルを打ち込み、リファレンスを見ながら、壊して、戻してを繰り返していくうちにどんどん話せるようになるのは、外国語も一緒です。 無限に付き合ってくれる最高の話し相手、IchigoJam、かわいがってあげてください!

10 A=RND(100) 20 INPUT B 30 IF A=B ?"BINGO!":END 40 IF A>B ?"TOO SMALL" 50 IF A<B ?"TOO BIG" 60 GOTO 20

有名なゲーム、ハイアンドロー。レッツ解読!
使うのはこちらだけ、プログラミング言語 IchigoJam BASICの辞書。
IchigoJam BASIC リファレンス「IchigoJam BASIC リファレンス ver 1.4

サイバーセキュリティに興味がある中高生向け、イベントも開催中!
CyberSakura / サイバーサクラ

文字に関してはややこしい日本でしたが日時に関しては、タイムゾーンが複数あるアメリカと比べてぐっとシンプルです。 日時ライブラリ 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モデル、大募集!

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