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

福井高専に5G基地局開局記念イベント、「5Gxデジタルツイン」をテーマにアイデアソン！

デジタルツインとは、サイバー空間に再現するリアル空間のこと。高速、低遅延、大容量の5Gがあれば、現実社会の動きをリアルタイムにサイバー空間での再現性が大幅にアップしそうです。

5G基地局設置記念イベント at 福井高専

KDDI 宇佐見さんによるご挨拶

鯖江市長もかけつけてくれました！

福井高専ロボコン部によるロボットデモ

みんなで考えれば、いろいろアイデア広がります（発想手法は、スライドを参照ください）

ワークショップイベントに便利なセグウェイドリフト、アイデア発表会！

誰でもカメラマン、発表とKDDIさんからのコメント、質疑応答の時間。
大好きなスポーツやライブ、でも視点が気に食わない、そんなとき多数のカメラと3Dモデル再構築による自由視点ライブを実現しよう！

俺らの為の客層判断、はじめて行くお店で浮いたらやだな、怖い感じだとやだなという不安を解消するアイデア。店内のカメラで客層を分析、公開することで、安心。ラーメン屋さんからいきましょう。

ミニチュアロボットと5Gによる観光アクティビティ、行きたくてもいきづらい観光。デジタルツインのデータを元に創るメニチュア観光地に、カメラ付きの小さなロボットをリアルで走らせて、自宅から体験しようというプラン。ロボットを通じたコミュニケーションや、ロボット自体を使ったアトラクションづくりなど、アイデア広がりますね。去年オープンした「スモールワールズ」とのタイアップや、Nゲージなどジオラマ好きな人とのコラボも良さそう。

VCR、朝起きるのがつらい、混む電車が嫌、そもそも通うのが面倒。そこで、学校を仮想化してしまうVCR。バーチャル高専、なんと、福井高専も賛同。でも、オンライン授業で困ったこととかあるよね？と思って聞くも、意外と何もなし。次世代の学校、リアルが必要なのは実験室くらいかも！

Public Eye、見えない交差点、不審者情報、交通状況などの知りたいを車載カメラをリアルタイムな監視カメラ的に使おうというアイデア。すでにGoogleストリートビューが許されている日本、たしかに一般の人の車からの映像が同様のプライバシー保護さえあれば良いとも言えますね！ドローンを使った空の目も有効。地上を走る無人ロボなど、いろんな目が活用できそうです。

会場投票で決定した優勝プランは、俺らの為の客層判断！おめでとう！

参加、ありがとう！
アイデアははじまり。創って社会に提供、いいところを伸ばし、うまくいかなかった部分を改善する。これを繰り返すことでどんどん価値が広がります！

「5Gxデジタルツインアイデアソン」（5アイデアの模造紙も on GitHub）
スライド資料と、5チームのアイデアをGitHub公開！高専WiCONの締め切り、5/10 18:00、いいネタ考えてみよう！

天気に恵まれた、さばぷら！（Hana道場前）

さばぷら、まるよさんでは陶器、越前焼販売会、恐竜くん、かわいい！

お、新設、Hana道場マット

Hana道場中では本の交換会

良いさばぷら日和

本日開催、さばぷら、Hana道場上空150mから

同じ地点、西山公園を撮影、うっすらつつじが咲き始めてます

「VRふくい」
日本の西会海岸、CyberValley、福井のデジタルツイン化をすすめるべく、ドローンによる360度写真をまとめました。きれいですね、福井。

バーチャル鯖江プロジェクトの一環、ドローン撮影テスト。許可いただきめがね会館を撮影。

「VR-megane-kaikan VRめがね会館」(src on GitHub)
PC、スマホ、VRでぐるぐる見渡せます。めがね会館前の上空。VR写真をボタンひとつで撮影できるのは便利！鯖江市上空を辿るバーチャルトリップアプリ化するのも楽しそう。

こういう写真を合成してくれます。元解像度のデータはGitHubで取得してみてください。

めがね会館を撮影（協力、福井県眼鏡協会（ふくいけんがんきょうきょうかい）、鯖江SDGs推進センター）

めがね会館近くのjig.jp新社屋予定場所にて、上限上空150mまでの旅。ジャンプ力100倍を体験するVRアプリづくりも楽しそう。

150m上空から真下を撮影。

150m上空からの広角撮影。

めがね会館、この視点での撮影は初！？

めがね会館とリニューアルした文化センター。

上記動画、静止画、アプリもすべて、CC BY Code for Fukui のオープンデータ。いろいろご活用ください！楽しく使えるアイデアもぜひお寄せください！

JavaScriptとHTMLだけでつくるVRアプリ、上記アプリもただ画像を指定するだけ簡単。興味ある方、VRはじめのいっぽをどうぞ！

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <html> <head> <meta charset="utf-8"> <title>VR-megane-kaikan VRめがね会館</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky src="https://code4fukui.github.io/vr-megane-kaikan/Photo_6553700_DJI_100_pano_42713392_0_20214782526_photo_pano.JPG" rotation="0 -90 0"></a-sky> </a-scene> </body> </html>

上記ファイルを手元で live-server などwebサーバーを使えば動きます。rotationをいじってみるとおもしろいですよ！

links
- HTMLで創るVR、A-Frameはじめのいっぽ

学生向けプログラミングの教材として使ったWebVR(WebXR)、大好きな刀を思う存分鑑賞したいと作った作品 (src on GitHub)。

こちらをforkして、Oculus Quest2で刀をバーチャルに持って鑑賞できるようにしました。

「katana for VR (src on GitHub」
PCやスマホで見ても、刀が落ちてるだけに見えますが・・・

Oculus Questで見るとコントローラーが刀に代わって、じっくりいろんな角度から鑑賞できます。

二刀流で振り回すことも！

裏表、ふたつのモデルがくっついていたので、フリーでオープンソースな3Dツール「Blender」で分離編集。glbとしてexport。
世界に誇る、日本の工芸文化「刀」3Dオープンデータとして公開してくれると、鑑賞だけでなく，ゲームでも使われたり、いろいろ広がりありそうです。

技術で夢、叶えよう！

VRではじめるJavaScriptプログラミング入門、学生向けjigオンラインインターンもどうぞ！

バーチャル鯖江プロジェクト、リアルな鯖江のまちをサイバー空間上にも作ることができたら、おもしろいし、きっと便利。

「バーチャル鯖江プロジェクト中心地、10倍巨人モード」
鯖江商店街3Dデータを、WebVRで見られるようにgltfに変換し、サンプルアプリを作りました。

鯖江市の一部、鯖江商店街3Dデータがある。 CC BYのオープンデータとしてダウンロードできるskpファイルは、SketchUpを使って開け、objファイルとしてエクスポートできる。全部だと重かったので、選択範囲を限定していくつかパターンを用意。単位は「ヤード」にすると実寸になります。後は obj2gltf で、gltfに変換すればできあがり！
「code4sabae/sabae-pj3d: 鯖江商店街3Dオープンデータ gltf / obj / skp on GitHub」

「バーチャル鯖江プロジェクト中心地、10倍巨人モード」
いろんな角度で見て楽しめます。Questではテレポートでの移動に対応。

「バーチャル鯖江プロジェクト実寸モード」
PCではカーソルキー、Oculus スマホでもVRモードでぐるぐる見渡せますが、VRでの体験が最高です！

Oculus Quest で、10倍巨人となって鯖江市商店街を歩いてみた様子。

HTMLだけで作成した本アプリは、オープンソース。いろいろご活用ください！
（src on GitHub）

自動計算が尊かった昔と違い、便利なツールがある現代では、合計や平均を計算するプログラムをがんばって勉強したところで、表計算の方が便利じゃん？で終わってしまいます。

せっかくプログラミングするなら、すぐにプログラミングならではの凄さが味わえることを味わいましょう。IchigoJamならLED、PCならVR!?

「HTMLで創るVR、A-Frameはじめのいっぽ」で、コンピューター言語「HTML」に入門できた人向けの次のステップ、JavaScriptを使ったプログラミング入門です。

ループ

for (let i = 0; i < 10; i++) { // box 設置! }

マウスで視点を動かしたり、カーソルで前後左右に動けます。スマホはぐるぐる回して見渡せて、Oculus QusetなどVRではこのサイバー空間を歩けます。

二重ループ

for (let j = 0; j < 10; j++) { for (let i = 0; i < 10; i++) { // box 設置! } }

二重ループで二次元的に設置できます。数や大きさをいじって遊んでみましょう。多すぎると重くなります。

三重ループ

for (let k = 0; k < 10; k++) { for (let j = 0; j < 10; j++) { for (let i = 0; i < 10; i++) { // box 設置! } } }

三重ループで三次元！

英数テキストを表示法（日本語は別途、シカケが必要です）

視点がある座標（カメラ座標）をテキスト表示するJavaScriptプログラム。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <script type="module"> AFRAME.registerComponent("main", { init: function() { }, tick: function () { const p = camera.object3D.position; cameraheight.setAttribute("value", p.x.toFixed(1) + ", " + p.y.toFixed(1) + ", " + p.z.toFixed(1)); } }); </script> </head> <body> <a-scene background="color: white" main> <a-box position="0 1 -2" width="1" height="1" depth="1" color="green"></a-box> <a-text id="cameraheight" position="1.5 1 -2" width="5" color="black" rotation="0 0 0" align="center" value="0"></a-text> <a-camera id="camera"></a-camera> </a-scene> </body> </html>

A-Frameの使い方は、AFRAME.registerComponentを使います。tickが連続して呼ばれるので、そちらでカメラの座標をテキストのvalueにセットしています。

前後左右に動いたり、頭を上下に動かすと、値が変わることを確認できます。
VRスクワットを実現する準備ができました！

作ったVRを自分のスマホで見られる環境を、Node.js、live-servert、ngrokを使って整えましょう！

自分のスマホでチェックする手順まとめ（スマホとPCが同じネットワーク上にいること）
1. node.js をいれる
2. コマンドプロンプト（macではターミナル）を開く
3. live-server いれる

npm i live-server -g

*macでは先頭に "sudo " を付けて、sudo npm i live-server -g とする)
4. cd コマンドで、HTMLがあるフォルダ（FinderやExplorerからドロップすると楽）
5. 編集をチェックして自動リロード機能があるウェブサーバー live-server を起動する

live-server

* ファイル名を index.html にしておくとすぐ開き楽です
6. エディタでファイルを編集するとブラウザが自動的に更新してくれることを確認、楽！
7. ターミナルももう一つ起動
8. 外部から中のネットワークに中継してくれる ngrok いれる

npm i ngrok -g

*macではsudoつける
9. ngrokを起動

ngrok http 8080

10. https:// で始まり .io で終わるURLをコピーする
11. QRコードメーカーでQRコード化し、スマモで読み取ってアクセスする
12. スマホで加速度センサー使用を許可するとグリグリ見渡せる（VRボタンでVR表示もいける）

自分で作ったサイバー空間、スマホでグリグリ見られると楽しいですね！

一般公開したくなったら、GitHubが便利です！

GitHubを使って公開する方法
1. GitHubアカウントをつくる（メールアドレスが必要です）
2. https://github.com/ の Repositories [New] を押す

3. webvr-test とか名前をつけて作成
4. uploading existing files を押す
5. 作成したファイル達をドロップし、[Commit changes] を押す（フォルダの中身をアップする）

6. リポジトリの Settings （横に広げないと隠れてる）を押す
7. スクロールして下の方、GitHub Pages の Source を Branch: main に変更し、[Save] を押す
8. 再度スクロールして下の方、GitHub Pages に公開アドレスが表示されているのをクリック（Your site is ready to be published at https://[accountname].github.io/[repository name]/.)
9. 表示される！公開完了！（更新に1分ほど待つ必要があったりする）
10. 再度アップロードするときは、GitHub.com の Code のページ、[Add file] → [Upload files] で更新可能
11. 何度もアップする時、複数人で開発する時などは、GitHub Desktop をインストールするといいよ！

プログラミングの楽しさに触れたら、いろいろ作っていきましょう！
作れそうな作りたいものからがオススメです。
「JSはじめのいっぽ」も参考に！

1/2といえば書き初め。昔は嫌いだった書道ですが、筆を洗わなくてもいいし、うまく半紙を何枚も無駄に使わなくていいVRで、書き初め再発明。

「丑」
干支の牛は丑。書きなれないどころか、自分の名前と住所以外の字を書くのが久しぶり。ボタン一つでアンドゥーでき、VRならどんな姿勢でどこにでも書き放題なので、練習もらくらく。なかなかいい事が書けた感。

3D空間に書いた文字なので、いろんな角度から見えます。トリガーの押さえ具合に合わせて黒色球体の大きさを変えています。

Oculus Questをお持ちの方「shodovr(src)」で書き初めをどうぞ！
「drawlivevr(src)」をベースに作っています。A-Frameの最新版、ver 1.1.0 へと書き換え済み。
AFRAME.registerComponent と type=module の相性が悪いみたいで、"use strict" を使っています。

あけましておめでとうございます。未来感ある2021年、ステキな年になる予感。
フィジカルとサイバー、両空間の活用がSDGs達成の要。

「HAPPY2021」src on GitHub
牛です。
PC、スマホでもアニメーション。マウスやタッチで視点変更できます。

オススメは、Oculus Quset 2。歩き回れて、16色のPanCakeパレット(by ナチュラルスタイル)でボクセルアートを体験できます。 Aボタンで色を変更し、トリガーでボックス配置、グリップで1つ戻せて、Bボタンで全消去。

VR年賀状づくりのために保存機能をつくりました。サーバーを立てて遊べるオープンソース。左コントローラーのXボタンで保存、Yボタンで読み込みます。

import { Server } from "https://code4sabae.github.io/js/Server.js"; class MyServer extends Server { api(path, req) { if (req && req["data"]) { Deno.writeTextFileSync("data/test.json", JSON.stringify(req.data)); Deno.writeTextFileSync("data/" + new Date().getTime() + ".json", JSON.stringify(req.data)); return { res: "ok" }; } const json = JSON.parse(Deno.readTextFileSync("data/test.json")); return json; } } new MyServer(8882);

今年もいろいろ創りましょう！

2020.1.1 14:00-15:00 cybervalley.jp on the air!

テクノロジーを学ぶなら、実際つくってみるのが一番！
パソコンを持っている高専生、大学生にオススメは、VRアプリづくり。HTMLを書くだけで、自分だけのサイバー空間をかんたん自由に創ることができますよ。

前提知識
- エディタが使える
- ファイルと拡張子を知っている
- ブラウザでファイルを開ける
- ChromeやSafariを使っている

では早速、HTMLを書いてみましょう。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> </head> <body> <a-scene id="scene"> <a-box position="0 -.5 0" width="80" height="1" depth="100" color="green"></a-box> <a-box position="-4 1 -5" width="4" height="4" depth="4" color="white" src="https://fkpc.github.io/kanirobovr/assets/kanirobo/kanirobo.outline_mini.png"></a-box> <a-sphere position="0 1 -3" radius="1" color="red"></a-sphere> </a-scene> </body> </html>

こちらコピペでもOKです。test.html として保存し、ブラウザで開いてみましょう！

A-Frameは、webVRをかんたんにつくることができるライブラリ、a-ではじまるタグを使って、サイバー空間を創ることができます。a-sceneタグ内に、箱を表現するa-boxや、球を表現するa-spheneなど記述していきます。（詳細は、A-Frameを参照ください）

HTMLでは、<ではじまり>で終わるものをタグと呼び、囲み内の先頭のキーワードがタグ名と呼びます。スラッシュ"/"で始まるタグを閉じタグとして階層構造を表現します。HTMLの最新メジャーバージョンであるHTML5を表す <!DOCTYPE html> と、htmlタグから始めましょう。（HTML/CSSはじめのいっぽ）

2025年、大阪万博が決まりました。大阪万博といえば太陽の塔。なんと大きさは70mとのこと。そのスケール感を見てみたくなったので、コーン(a-cone)を使って、それっぽいものをつくってみました。

「太陽の塔のスケール確認（Oculus Quest使用時のテレポート対応版)」
PCで見る場合、マウスで見渡せ、カーソルキーで移動。
スマホで見る場合、VRモードにするとスマホVRゴーグルでぐるぐる見渡せます
Oculus Questで見る場合、VRモードにすると歩き回れます（テレポートにも対応）

アニメーションするだけならHTMLだけでOK！animationプロパティをいろいろつけてみましょう！

京都芸術大学、クロステックデザインコースの学生による作品を一部紹介！

ステキなカラーリングのVR森！

たくさん並んだ鳥居！京都っぽい！

五輪！意図せずできたかすれ具合もまたオシャレ

島、浮き沈みするアニメーションつき

謎空間に浮かぶダンベル、サイケなVR筋トレアプリができそう！

画像を用意して、テクスチャーとして表面に貼り付けたりするとリアル感増したりしますよ！
JavaScriptでかんたんに操作する例、テレポート追加例付き。ぜひ遊んでみてください！
「A-Frame examples」

links
- つくる場とみせる場、もくもく会で作ってNTで展示！実寸テニスコートで遊ぶVRゲーム at SCC (Sabae Creative Community)
- NT鯖江で初出展「IchigoJam VR」BASICプログラミングで月を出現させるバーチャル体験

こどもも大人も一緒に楽しい「こどもロボコン」

「越前がにロボコン」は、福井県情報システム工業会の30周年記念イベントとして2017年スタートし、総務省地域ICTクラブ事業で加速、世界大会を目指して、こどもプログラミング実業団による拡大と、横展開を画策中。

システムはオープンソース、ルールや素材もオープンデータなので、ライセンスフリーでどなたでもどの地域でも手軽に始められます。

「Kanirobo Course VR」(src on GitHub)
オープンデータとして公開されているコースの画像。適度な大きさに縮小して、画像をテクスチャーとして a-plane に設定。コースできました！高さは長机と合わせて0.7m。

「Kanirobo Course VR」(src on GitHub)
激レアメタル、レアメタルも仮配置。越前がにロボコンのコースの作り方を見て寸法を入れればすぐにVRで再現できてお手軽！配置するだけなら、JavaScriptも使いません、HTMLだけでできて楽しいですよ！

魚津市長へ提案、カニロボコン in 富山、即「やりましょう！」いただきました！

「魚津市「紅ズワイガニ」参戦！福井・石川・富山、日本の西海岸で繰り広げられるプログラミングeSports「かにロボコン」、いよいよ世界大会開催へ！ – about yrm」
市長もプログラミング！日本の西海岸、Cyber Valley！

「地域で生まれるプロダクト、オトナとコドモの秘密基地「IchigoBase」福井にオープン！ – about yrm」
福井駅前、祝、IchigoBaseオープン！福井銀行本店含め、福井市にも楽しいものづくりスポット広がっています。

「PCN福井新製品発表会」
2020.12.27、今年最後のイベント。松田さんによる講演「全部IchigoJam BASIC! プログラミングでSTEAMな学びBOOK」、「ミニこどもプログラミングサミット 2020」も開催。鯖江商工会議所1Fのステキ会場、SCCへどうぞ！

「高専が地域を変える！」をキャッチコピーに、2018年度からスタートした高専生向けの新しいコンテスト、高専ワイヤレスIoTコンテスト、通商WiCON。今年から委員を担当しています。

コロナによって延期されていた懇親会を、オンライン開催として学生と委員と事務局メンバーが、Zoomで集まって懇親会。ブレイクアウトルームを使って、いろいろと意見交換。WiCON OB会を創ろうというアイデア、ナイスです！やりましょう！みんなが気軽に参加するプラットフォームがないのがつらいところですが、ひとまず「Facebookグループ - 高専WiCON OB会」を作りました。OBのみなさんへの協力は惜しみません！

中締め後のオンラインビンゴ大会。1位の商品は「Oculus Quest 2」おめでとう！