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

「バーチャル鯖江プロジェクト 中心地、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」で書き初めをどうぞ！
「drawlivevr」をベースに作っています。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」おめでとう！


「boxcraft」(src on GitHub)
サイバー空間に入り込んでボックスをつなげて作るマイクラ風が、HTMLとJavaScriptでつくるwebアプリ、たった30行でできます！もう20行足した、アンドゥー、削除機能対応版も最新ライブラリに更新しました。


動画も撮ってみましたが、実際やってみないとこの感動は伝わらない！


Segway Drift + Oculus Quest 2 も楽しい！くれぐれも怪我には気をつけて！

高専生が世界を変える！

信州アプリコンテスト0出場チームで、自作ARディスプレイを展開進行中の長岡高専チームに会いに来ました！

やる気あふれる高専生と！長岡高専の先生、矢野さんによる熱さ伝わる手描きポップがナイス！


ワクワクする、ARグラス談義！新世代のメガネは見えないものを見せるモノ！
オープンデータ活用も手の一つ。


「Nagaoka Population VR」
長岡市オープンデータの年齢別男女別人口世帯数をDenoで加工し、人気のVR、Oculus Quest 2 で見ると楽しい、長岡市の年齢別人口のVRグラフに。プログラムはとってもシンプル＆オープンソース！(src on GitHub)

window.onload = async () => { makeText(-2.5, .3, -2.5, "age:0"); makeText(10 - 2.5, .3, -2.5, "age:100"); const url = "https://taisukef.github.io/nagaoka/csv/population.csv"; const csv = await CSV.fetch(url); const json = CSV.toJSON(csv); for (const d of json) { if (d.month != 11) continue; const ym = parseInt(d.year) - 2018; const age = parseInt(d.age); const pop = parseInt(d.male) + parseInt(d.female); const z = ym / 10 - 3; const x = age / 10 - 2.5; const y = pop / 5000; makeBox(x, y / 2, z, .05, y, .05); makeText(-2.8, .8, z, d.year); } };

長岡の小中学生も一緒に考える長岡の未来。 IchigoJamからも使えるテキストバージョンも作ってみました。

無線LAN拡張、MixJuiceを使うか、IchigoJam webで、I/OパネルからMixJuiceチェックして、下記プログラムで、2020年11月時点の長岡市の人口を知ることできますよ！

10 ?"Chcek the Nagaoka Population!" 20 INPUT "age?",A 30 ?"MJ GETS taisukef.github.io/nagaoka/txt/pop/";A;".txt" 40 INPUT N 50 ?"Population of ";A;" age is ";N

改行付きのテキストファイルをGitHub PagesでおいておくだけでOK！（15.txt - 15才長岡市人口の例）
参考「じぶんのウェブサイトをつくろう！ 13才以上なら誰でも無料で持てるホームページ＆HTMLとCSSはじめのいっぽ」


卒検でIchigoJamを使った教材を開発研究中という5年生のリケおんなさん、PCN長岡やっちゃう!?
「PCN プログラミング クラブ ネットワーク」

失敗するほど糧になる。
コロナで一気に縮まった世界、チャレンジしたもの勝ち！


新潟での若者応援イベントに向けて打ち合わせ！駅内のカフェ＆バー、TABIBARがいい感じ！
こどもから大人まで、要は地域のみんながコンピューターに強くなればいいんです。
鯖江市地域活性化プランコンテストや、Hana道場、ネパールのこどもたちへプログラミング活動など、楽しい活動、伝えたい！


新潟県民にはおなじみ、この場所、新潟駅直結PLAKA2内


長岡高専出身、渋谷さん創業のフラー株式会社、本社を地元新潟へ移転！ちょうどたまたまオープン日！おめでとう！

もうひとつめでたいニュース。福井高専の先輩で、jig.jpの前前社の共同創業者の大蔵さんが神山まるごと高専の校長候補に！ 地域に高専がある良さ、広めよう！
「ZOZO元CTOが2023年開校の｢新設高専｣の学校長に就任…Sansan創業者が発起人、異色の経緯で進む｢神山まるごと高専｣ | Business Insider Japan」

なんと、モノリス発見!?
「「2001年宇宙の旅」のモノリスに似た金属板、米ユタ州で発見 - BBCニュース」

高さ3.6m、写真から推定した幅は60cm、どんな大きさVRで再現してみました。
「Utahlith」
ユタ州のモノリスなので、ユタリス(Utah+Lith)と勝手に名付けて、VRアプリ化。アプリといいながらVRフレームワーク、A-Frameを使ってHTMLを書いただけです。

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Utahlith VR</title> <meta property="og:title" content="Utahlith VR"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:image" content="https://fukuno.jig.jp/app/webvr/utahlith/ss.png"> <meta name="twitter:image" content="https://fukuno.jig.jp/app/webvr/utahlith/ss.png"> <script src="https://aframe.io/releases/1.0.4/aframe.js"></script> <script src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.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 id="scene"> <a-entity light="type:directional; castShadow:true;" position="1 1 1"></a-entity> <a-entity id="environment" environment="preset:egypt" shadow="cast: true; receive: true;"></a-entity> <a-box color="#eee" shadow="cast:true; receive:true;" position="0 1.8 -2" depth="0.6" height="3.6" width="0.6"></a-box> <a-sphere id="moon" visible="true" color="#fff" radius="10" position="100 100 -70"></a-sphere> <a-entity id="cameraRig"> <a-entity id="head" camera position="0 1 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>

Oclus Questのコントローラー、左右のトリガーでテレポートにも対応（aframe-teleport-controls on GitHub）。いろんな角度から不思議物体をご覧ください。JavaScriptでプログラムを書いて、不思議なシカケを実装するのも楽しそうですね！順を追って試してみたい方、ハンズオン資料「Oculus Quest 1

NT鯖江2020、おつかれさまでした！

2日目最後に記念撮影、またどこかのNTでお会いしましょう！


2日目のNT鯖江の会場、SCC。


ネギを降っている初音ミクさんがおでむかえ！鯖江、西山公園道の駅で売ってるレッサーパンダさんもかわいい。


ファミリーベーシックのキーボードをUSB化するキットを通じて、Oculus Questで動くIchigoJam VR上でBASICでプログラミングしている GOROman さん。 Oculus Questの頭の動きをIchigoJamのアナログ入力として使えるようにしたら、体感ゲームがすぐできる！とナイスアイデアいただきました。


レトロなゲーム機や、コントローラーを使ったステキな工作群！


WS2812BテープLEDと無限合わせ鏡、素のままなのに美しい！


独自の電源を使った制御信号ブロードキャストシステム！


手作りアクセサリー、電子工作でなくても歓迎です！


入れ子の多面体が美しい！VRで作ってみるのも楽しそう。


かごにのったぬいぐるみがかわいいM5STICK制御のラジコン。会場を勝手に走り回るラジコン部門、いいかも！


ダンボールで作ったえんぴつ立てが手軽でかわいくていい！


この日、初公開！IchigoJamの新ケース、メガネの技術でできた「IchigoSand」


GOROmanさんもお買い上げ。EIGHT SENSEの作者の人、福井高専の先輩です！


早速使ってました！ピッタリサイズと手触りがいいんです。


下ろせば即その場がゲームセンターになるゲーセンリュック by GOROmanさん！ランドセルだと言い張って学校に行っちゃう！？


ゲーセンリュックを担ぎ、ゲームの音楽を背負って歩くっていいですね。後ろの人はゲームもできる。


モバイルプロジェクターがあれば、壁にも床にも天井にも、いろいろ投影できて、簡易MR気分。


Hana道場にあるOculus Quest、GOROmanさんにサインしてもらいました！


Hana道場ブースに集まるものづくり好き中学生たち！


IoT化したかわくだりゲームで、師匠にチャレンジ！


センサーでドローンも自動離陸！


高専プロコン競技部門を勝手に開催する会「囲みます」スマホを使った人対人、人対AIに対応して、もりあがってました。 3on3など、チーム対抗戦にしてみるのもおもしろう！


パーソナルモビリティーに乗りながら、VRをかぶり、キーボードでIchigoJam VR BASICプログラミング！ガバンがあれば移動しながらでもいけそう。


感圧接触センサーで触った位置に合わせて動く、DMX512制御の照明と水引LEDと越前和紙コーティングしたWS2812BマトリクスLEDを1台のIchigoJam実機で実現。 稼働照明の動きをIchigoJam VR上でBASICでプログラミングして、バーチャル空間もリアル空間共に連動させると派手な展示ができて良さそう。見ている風景のディスプレイに表示は必須ですね！

36 N=ANA(2)/4:M=(N>180)*120:POKE#800,7,0,N,0,M,0,0,30,0,RND(5)*60,RND(5)*60,RND(5)*60,0,0,0:U=USR(#700,#800)

質問多かった感圧センサーとDMX512をつなぐ部分は、こんな感じとシンプルです！（DMX512制御用マシン語の解説と使い方）


USB接続できるファミリーベーシックと、相性よしの越前和紙＋WS2812Bマトリクス。


本人映像、撮影 by GOROmanさん


プログラミング好きの原典的雑誌、MSX-FANの総集編を見ている、中学生。引き継ごう、次世代へ！


NT鯖江2021もSCC(Sabae Creative Community)にて開催予定！お楽しみに！なにかつくってぜひ出展もどうぞ！
翌朝、GOROmanさん、IchigoJamのはんだづけスタート！


LEDがどっかいったトラブルに見舞われるも、無事エルチカBASICプログラミング完成！

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

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