#vr / 福野泰介の一日一創 / Create every day by Taisuke Fukuno

暑い夏でも涼しく開発できるSCCにて、Code for Sabae もくもく会。

もくもく作ったもので遊んでもらっている様子。上を常に見ることになる、非日常VRゲーム。

「ballfall VR」(src on GitHub)
実寸大のテニスコート（シングルサイズ奥行き23.77m x 幅8.23m）で、なぜか跳ね回る無数の巨大ボールから避け続けるゲームを作りました。実際のテニスコートで安全に遊ぶのがオススメです。

カメラ＝自分の顔が当たると暗転してゲームオーバー。リトライは、コントローラーのトリガー（またはマウスクリック）。

ライブラリにA-Frameを使ったシンプルなJavaScriptで作った、webアプリ。遠く離れた場所同士でも楽しくスポーツできるかも？

発表の時間！

かつて開発にも参加したことある「Astah」のプラグイン！

Googleによるスマホアプリ開発環境、Flutterを使ったアプリ開発にチャレンジ。

今年の高専プロコン競技部門予定だった「囲みます」のAIづくり。

CSVから2Dアニメーション生成ツールを使ってみた。

FlutterでMVCモデルよりもいい感じのモデルを探ってみた。

Flutterで、カメラを使ってみた。（複数のカメラを同時に使おうとすると落ちる）

UnityとかHSPによるゲームをつくってみた。

もくもく会とは、もくもくそれぞれ思い思いの何かを作ろうと集まり、最初に宣言、質問や、雑談、おやつを交えつつ、それぞれ何か作って、最後に成果発表する気軽なイベントです。自宅ではなんとなく気が散ってしまう人でも、きっと大丈夫！

今回はFlutterに偏ってましたが、ノンテーマなので、何を持ち込んでもOKです！もくもくお絵かきする、モデリングする、書道するとかでも問題なし！

「NT鯖江2020 - PukiWiki」なにか(N)つくって(T)、発表しよう！
次回開催と、年一の成果発表の場「NT鯖江2020」をお楽しみに！

おやつタイムに西鯖江駅向かいの「めだか」まで散歩。

鯖江名物「やまうに」を使ったやまうにたこやき！

200種類あるという豊富なメニュー！

熊丼！

猪肉うどん、薬味として、やまうに付き！

気になるお店、鯖江に初のボルダリング上、新スポーツスポット「SKI PRO SHOP J1 with Bolder-Works」(map)

中は広々！3日に1コースは増えますよ、とのこと。期間限定、入会金無料！

links
- webをFAX風にするChrome拡張「faxinizer」Code for Sabae もくもく会 at SCC

ハッピー、インターナショナル・オープンデータ・デイ！

今年は基本オンライン開催だったので、ちょうど同じくオンライン開催された Code for Japan ハッカソンにも参加できました。

「VR-Patients COVID-19 Tokyo」 src on GitHub
COVID-19 TokyoのVRビジュアライズ版。日別、陽性患者数を等身大のフィギアで表して、リアリティーを感じてもらうWebVRアプリ。PCでもカーソルキーで歩けますが、OculusQuestを使うと、リアルに歩き回れます。

ちょっとオフライン、鯖江の新拠点、SCCにて、新メニュー、スープオムライス！

実際に使ってみてもらいました。一体験は百見に如かず。

「VS COVID-19 Code for Sabae ver.」 src on GitHub
対COVID-19キャラクター誕生！(by Shimoken)

「鯖江おすすめレシピ」 Code for Sabaeメンバー成果物
地産地消、地元の美味しいものを食べて強い体を作っておきましょう！

「鯖江近松の里散策ルート」 Code for Sabaeメンバー成果物
適度な運動による、体力づくりも大事！

ハッカソンとは、誰でも楽しめるものづくりイベント！自由に使えるSCC、気軽に集まって、ガンガンアプリづくり、データづくりを楽しもう！

作ったものはオープンデータなどで、公開すると、誰かがその続きをやってくれます！その連鎖こそ、オープンソース、オープンデータのおもしろさ。

18時、オンラインで成果発表＆記念撮影！東京都副知事、宮坂さんもゲスト参加！
「ビジネス特集 “爆速”の男副知事に転身 | NHKニュース」
東京都による新型コロナウイルス対策サイトも、宮坂さん x 関さん(Code for Japan)で、異例のスピード開発＆展開！GitHub公開1週間で3千スター、68人の貢献者！

本日の40人が参加した、オンラインハッカソンでも、保守性改善、アクセシビリティ改善、多言語化、他地域化などが同時並行的に一気に進んだ原動力は、共感得るテーマ x 価値あるオープンデータ x オープンソースの力！

未来は自分たちの手で創るもの。行動しましょう！
「貢献の仕方 - 東京都新型コロナウイルス感染症対策サイト」
「Code for Sabae Facebookグループ」

1800年代、フランスで撮られたステレオ写真、4枚加工してVR美術館風に表示させるアプリで鑑賞してみました。

「VR-streophoto」
Oculus Questだと、歩いて近づいたり、しゃがんだり、ジャンプしたり、回り込んだりと自由に鑑賞できて楽しい。スマホVRでも立体写真としての鑑賞OKです！

A-FRAME上のステレオ写真の表示には、@binzumeさんのこちら記事のプログラムを使わせていただきました！
「A-Frameでステレオ画像をテクスチャとして使う - Qiita」

データは、CC0のオープンデータとして公開されている、パリの美術館画像コレクションにステレオ写真が1400点!? (tweet by @wakufactory)
おもしろそうな写真をダウンロードして、中のjpgデータから左右写真を切り出し、比を計算するratiocalcで、アスペクト比を合わせて、A-FRAMEのa-planeタグで置くだけ！

「フランス美術館の立体写真」

立体スキャンしたデータを並べて、VR美術館づくりも楽しそうです！

美しいDNAの二重螺旋、赤いワイヤーフレームバージョンを作成。
夢の赤い3D世界、HTMLとJavaScriptをちょっと使うだけで、思う存分、創り放題！

「DNA - 二重螺旋VR 赤いワイヤーフレーム版」
作り方は簡単、A-FRAMEの wireframe 属性を true にするだけ！(src on GitHub)

そう、この世界！

ルイージマンション3で唐突に登場、バーチャルブー！まさかのバーチャルボーイ！

博士からの入電、モバイルに進化したVBをかければ

赤い世界！

バーチャルボーイ、Windows95前夜の1995年7月に発売（自宅のVB）

変なゲーム好きだった現役高専生の頃、大興奮して遊んだあの頃を思い出します。バーチャルボーイ、多くのソフトを、店頭の「ご自由にお取りください」で保護！ NINTENDO LABO VR KITでもバーチャルボーイ登場。同世代の活躍、うれしいです。

映った！（名作、レッドアラーム by T&E SOFT）
でも、振動板が壊れてしまっているらしく、右目のみ

あの頃の夢、Oculus Quest を使って、作ってみましょう！
ハンドトラッキングが安定し、対応ソフトが増えれば出るか、廉価版!?
29,800円など、攻めた価格で登場すれば、今年早期の1000万台普及も夢じゃない。

各地域のICT化の推進剤、地域型の小学生向けロボコン「第1回加能ガニロボットコンテスト」が金沢市の名所、近江町市場上で開催！

自分で作ったカニロボを持って、笑顔！さっちゃん（かなざわさちこさん）も！

出場前の緊張感から、決勝戦、表彰式、ヒーローインタビューまでを5分の動画でまとめました。

「加能ガニロボットコンテスト2019 ダイジェスト」
THETAで撮影、決勝戦もぜひご覧ください！（360度見渡せる、ノーカット版 / OculusQuest推奨）

福井で開催された第3回、越前がにロボコンの準優勝者で、テオヤンセン型カニロボ開発者も見学に！
「キッズエンジニア同士の戦いが熱い！小学生対象第3回越前がにロボコン、優勝ロボットの勇姿とその秘密をインタビュー」

第１回、加能ガニロボットコンテスト、開会！

車検終わって青いタグが付いたカニロボ達

いよいよ予選スタート！副審と得点は、石川高専の1年生、2年生が担当！

レゴでもIchigoJamでも何でも、ロボットの種別は問わない、無差別級！

予選でのスコアとタイムで上位8チームが本選出場！

右コースか左コースはじゃんけんで決めるスタイル。プログラミングして調整できるピットもあります。

トーナメント式、1発勝負で決まっていきます。

金のボールもゲットして帰還するカニロボ！（歩行型だとボーナスがでますが、車輪型でも出場OK！）

ずらっと並んだ個性的なカニロボ達

金沢美大の学生デザインの加能ガニロボコンオリジナルトロフィー！

デザイン賞はどのカニロボの手に！？

3位の2チームに近江市場直送、生の香箱ガニ3杯！（ズワイガニのメス）

2位のチームには香箱ガニ5杯！

優勝チームには、大きなオスの加能ガニ（ズワイガニ）も！

デザイン賞にもズワイガニが贈られました！

選手みんなで笑顔で記念写真

テレビ局によるヒーローインタビュー！
家にもコースを作って、何度も調整したとのこと。歩行型にチャレンジしたいと意欲満点！

第一回加能ガニロボットコンテスト、やりました！

かわいかった、かに風船！

午後のイベント、第5回こどもプログラミングサミットへ続く！

links
- 「加能ガニ」のロボで児童競う　市が初のコンテスト - 石川県のニュース | 北國新聞社
- 加能ガニ　ロボも「うまい」　プログラミング課題　次々得点:石川:中日新聞(CHUNICHI Web)
- 加能ガニロボットコンテスト
- こどもプログラミングの聖地「金沢」、激闘の「かにロボコン」と白熱の「サミット」で2020年に弾み！ – about yrm

プログラミングを学ぶコツと、創りたいものがあれば、アウトプットまでは一直線。行動あるのみ。
どんな田舎でも、ネットさえあれば、世界中の最新情報と一緒に取り組む仲間と出会えます。

人類最大の文明の利器、プログラミングをこどもたちに届ける活動、PCN（プログラミングクラブネットワーク）。
一関高専でも名乗りを上げてくれました！

地域の課題 x こどもの発想 x 高専生の実装力、最強タッグでSDGs17ステージにチャレンジしよう！

一関高専校長、吉田さんと！

一関高専地域創造フォーラムデジタルトランスフォーメーションの事例 by KDDI 経営戦略副本部長松野茂樹氏！
地方創生を目指して、先日連携を発表した、KDDIさんとの縁で、初一関！
「高専生にもオープンなまち鯖江、福井高専 x KDDI x エル・コミュニティ x jig.jp 包括協定！」

VUCAの時代、社会を見て、技術を身に着け、失敗を恐れず、自分の信念によって、行動あるのみ！
ランダム性がなく、確実に予測可能な世の中ではないことに感謝したい。

パテコンサミット in 一関、発明家の育成・望ましい人材像 by 国士舘大学飯田昭夫氏
パテコンとは、パテントコンテスト、発明コンテストのこと、一関高専も受賞！

有志向け開催、特別講義「はじめてのIoTプログラミング with IchigoJam x sakura.io」
jig.jpやjigインターンで採用しているアジャイルなチーム開発手法、スクラムに関しては
→ 「チーム開発手法、スクラム」

予測可能な未来ゲーム！・・・おもしろくないですね

敵出現パターンで使ったランダム(RND)を、TICK()を使って予測可能にする改造法はこちら。

30 LC RND(32),23:?"*" ↓ 30 LC TICK()%32,23:?"*"

思いついたことをサクッと形にする力、プログラミングで身に付く便利で楽しいスキルです。

予備知識なしで、キーボードタイピング、プログラミング、ゲームづくり、IoT体験ができる IchigoSoda セットを使用。
IoT以外は、IchigoJamだけで簡単。コア以外一体型のIchigoDyhookでもっと簡単に！
本日のスライドデータはこちら「はじめてのIoTプログラミング」(src on GitHub)
オープンデータなので、自由に改変して、利用できます！後輩、仲間、大人、こどもたちにどうぞ！

一関高専開発単体でプログラミングできるロボットを見せてもらいました！PICマイコン使用
高専から、小学校へのプログラミングの出前授業、いいですね！
興味もった子供向けに、小学生向けのロボコン県大会、越前がにロボコン的なもの、一関高専で開催とかいかがでしょう？

「drawline2 for OculusQuest」（動画）
予測不可能な社会に立ち向かう有効な手のひとつ、VRによるシミュレーション。（JSたった30行でマイクラ風とか）
コントローラーの代わりに、両手の動きを使った操作にもベータ対応した、OculusQuestの体験会ももりあがりました。
まだWebVRモード中の操作には対応していないので、ブラウザ上のHTML5Canvasを使ってお絵かきアプリを作成。
手で描けるのは楽しい！（ontouchstart使ったら両手対応もいけるかな？？）

一関・平泉といえば、もち食文化！とのこと。300種類のもち料理から季節に合わせてピックアップされたもち膳。
真ん中の大根おろしは、前菜兼お口直しとして使う、もちなしで今回いただいた8種+α。
全300種類のレシピ、画像付きオープンデータがもしあれば、もちトレーディングカードゲームや神経衰弱など、いろいろ楽しくプログラミングできそう。（「オープンデータ - 一関市」には避難所、高専など、緯度経度付きの様々なデータあり！）
「一関・平泉のもち食文化 | 世嬉の一酒造（せきのいち）」

ユニーク！竹でいただく地酒。

一関高専の先生との懇談会、ステキな蔵レストラン「世嬉の一酒造（せきのいち）」にて。

links
- リアルをプログラミングで遊ぼう！一関市のオープンデータを一挙取得するJavaScriptのプログラム例

さばえものづくり博覧会のふりかえりMTG。来場者アンケートで印象に残ったブースナンバーワンに、NT鯖江！
気軽なものづくりの楽しさ、伝わったようで何よりです！

早速、来年の第2回の開催も決定、NT鯖江2020！

ひとまず開催日だけですが、どどんと公開しました。
来年は、鯖江や福井、地元の新規出展者が増えるような仕掛け、考えます！

今年心機一転した「さばえものづくり博覧会」では、IoTカウンターも活躍！
どんどん新しいことチャレンジしようと、中の人がまずワクワクすること、大事。

「VR-TokyoTrains」
首都圏の電車のVRビジュアライゼーションに、遅れ情報反映。遅れが発生している電車は赤く表示モード追加！
第3回東京公共交通オープンデータチャレンジ、締切日。どんな作品が集まったか、楽しみですね！

遅れ情報が出ていない時間帯にチェックしたので、ひとまずランダムに2割の電車を遅らせてみた様子。

const res = [] for (const train of trains) { const st = await getStation(train["odpt:operator"], train["odpt:fromStation"]) const delay = st['odpt:delay'] || 0 //const delay = Math.random() < .2 ? 1 : 0 const pos = [ st["geo:lat"], st["geo:long"], delay ] res.push(pos) } return res

リアルなデータを使って、いざという時をシミュレーションするのもおもしろい。

AR/VRなど、xRな未来もワクワクしますね！
来年10月に向けて、いろいろ企みましょう、創りましょう！

links
- NT鯖江2020 - PukiWiki
- NT鯖江2019 - PukiWiki
- 福井で初開催！なにかつくろう、NT鯖江2019！ダイジェスト動画と交互連打で目指せ世界記録ゲーム！

福井県立武生高校（たけふ、TKF）のSSHにて化学の実験をIchigoJamを使って定量的に行う公開授業！
SSHとは、次世代人材育成事業の一環で、スーパーサイエンスハイスクールのこと。
異分野融合、化学だけ、コンピューターサイエンスだけ、など、単独のスペシャリストではなく複合的に使いこなすことが大事！

化学 x プログラミング with IchigoJam！
Na₂S₂O₃ + HCl → 2NaCl + H₂O + SO₂ + S

前日の50分授業いて、コンピューターとプログラミングの基礎をエルチカからかわくだりゲームによるアルゴリズムの基本までをざっと紹介。（復習スライド、はじめてのパソコンづくりとプログラミング）

WAITでタイミングを調整、GOTOで繰り返し、前日のLEDつけたり消したりのプログラムの応用です。

いよいよ、化学xプログラミング、今回は反応時間から反応速度を算出する実験。

今日使う機材はこちら（ミニモニターまたはPCとUSBキャプチャーをIchigoJamのディスプレイに）

メインディッシュ、チオ硫酸ナトリウム水溶液と濁度センサー(SEN0189)、IchigoJamのメモリーに記録することもできますが、まずはシンプルに手書き！
濁度センサーは、D/Aでデジタルとアナログを切り替えスイッチを、A（アナログ）にするのを忘れずに。

IchigoJam x 化学実験、動画でふりかえり。
Na₂S₂O₃ + HCl → 2NaCl + H₂O + SO₂ + S

Na₂S₂O₃ : チオ硫酸ナトリウム
HCl : 塩酸
NaCL : 塩化ナトリウム（塩）
H₂O : 水
SO₂ : 二酸化硫黄
S : 硫黄（硫黄コロイド粒子、白濁の元、臭いの元）

塩酸で反応して、白濁していく様子を濁度センサーとIchigoJamで観測。プログラミングをいじって、計測しやすくするのがポイント。

塩酸を加えると、どんどん濁っていく溶液。濃度や温度の関係をセンサーとコンピューターをプログラミングつなげて計測すれば、定量的に計算できますね！次の時間で、Excelを使ってグラフ化！

後片付け、協力してやりましょう！（絵がかわいい！）

中学校ぶりに、見た化学、改めて見るとおもしろい！楽しそう！
棚を見ると、まるでパズルな分子構造、自然界、スゴイ。

「H₂O - molecularVR」(src on GitHub)
気になった分子模型、はじめのいっぽ、水分子をVR化！

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>water - molecularvr</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head><body> <a-scene id="scene"> <a-sky color="#000000"></a-sky>  <a-sphere position="0 1.5 -2" radius=".8" color="#EF2D5E"> <a-sphere position="0.7904223683023976 -0.6125622251553133 0" radius=".7" color="white"></a-sphere> <a-sphere position="-0.7904223683023976 -0.6125622251553133 0" radius=".7" color="white"></a-sphere> </a-sphere> </a-scene> </body></html>

とってもシンプル、分子構造好きな人、ぜひチャレンジしてみてください！
追加分子のプルリク（GitHubへの追加編集依頼）お待ちしてます！
Oculus Questで、分子構造と戯れるのも楽しいかも？

化学の先生は、福井高専物質工学科出身、なまずの後輩、谷口渓先生！
プログラミングと化学の融合授業、大成功！

links
- SSH | 学校案内 | 福井県立武生高等学校
- 化学の実験とプログラミング、濁度センサーで反応速度をグラフ化してみよう

iPhone11の計算力は1兆回/秒。コンピューターを味方にして、ほしいもの創ろう！

VR新作「mirrors - drawlinevr」(src on GitHub)
同時に5つ写像される仮想的な鏡がある3D空間内でするお絵かき。説明するとややこしいけど、実際試せば誰でも一瞬でアーティスト。HTML/JavaScriptによるプログラムは100行足らず。マンダラアート風？

加藤学園暁秀初等学校の5年生全員に紹介した、楽しく奥深い、プログラミングの世界。

「かわくだりゲーム」たった4行で上がる歓喜！

10 CLS:X=15 20 LC X,5:?"O" 30 LC RND(32),23:?"*" 40 GOTO20

3行加えて、できあがり！

35 WAIT3 36 X=X-BTN(28)+BTN(29) 39 IF SCR(X,5) END

詳細は、こちらスライドを参照ください（改変自由なオープンデータ、IchigoJam webで復習もどうぞ）

「はじめてのパソコンづくりとプログラミング(keynote/pdf)」USキーボード版

すべてのアプリやゲームの基本ブロック、セットアップ（準備）とループ（くりかえし）を体感。

鯖江流プログラミング学習スタイル、2人一組
「総合2コマから始める鯖江の小学校プログラミング！総合的な学習の時間、IT遊具、クラブ活動、地域ICTクラブ、高度IT人材へのベストプラクティス」

サインを求められた！

中も個性的！Radishが活躍しやすそうな広場！

学校内にはたくさんのロボ！

加藤学園、素敵な校舎でした！

1.4とWS.LEDを使った、キラキラを伝授！
R,G,B、好きな色に50コまとめて光らせる！(for 1.4)

LET[0],20,10,0:WS.LED 1,50

PCN沼津 at 沼津高専、中原さん x VR。VRと教育も熱い！

沼津高専生も楽しい！

「たのしい電子管楽器のつくりかた - ないならつくる」
沼津高専出身の先輩が創ったものとして紹介してくれた、電子楽器！
IchigoJam x MIDI も楽器づくりとプログラミングは相性良し！

「Ichigojam内蔵テレビの製作 - ないならつくる」も熱い！

沼津高専NIT2.0メンバーに、プログラミングの楽しさと楽しさの伝え方を伝授！

50行マイクラ風をもっとシンプルに、たった30行でポコポコと白い箱を置くだけプログラムを紹介！
(boxcraft simplest - src on GitHub)

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>boxcraft simplest for Oculus Quest</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script>'use strict' AFRAME.registerComponent('input-listen', { init: function() { this.el.addEventListener('triggerdown', function(evt) { const p = this.object3D.getWorldPosition() const size = 0.1 const p2 = { x: Math.floor(p.x / size) * size + size / 2, y: Math.floor(p.y / size) * size + size / 2, z: Math.floor(p.z / size) * size + size / 2 } const box = document.createElement('a-box') box.setAttribute('position', p2) box.setAttribute('width', size) box.setAttribute('height', size) box.setAttribute('depth', size) box.setAttribute('color', '#FFF') scene.appendChild(box) }) } }) </script></head><body> <a-scene id='scene'> <a-sky color="#222"></a-sky> <a-entity oculus-touch-controls='hand: right' input-listen></a-entity> </a-scene> </body></html>

グルメ編

念願の初さわやか！