自前でDX化しまくるバス会社、宇野バス訪問と、VRで学ぶJavaScript入門

2022-11-10

2018年オープンデータ表彰でjig.jp賞を受賞いただいた、岡山県の宇野バス（宇野自動車株式会社）へ初訪問。バスに関係する様々なサービスやデバイスとその源泉を体感しました。

空からの3D映像で案内するバス路線。タッチパネル化された大型モニターを使った、触れるバス案内！こどもたちの連打にも負けないとのこと！

GTFSによるバス運行情報に連動する、レイアウト自由自在のバス看板システム「その看板」で稼働してます。

宇野バス内で活躍しているIchigoJam発見！下についているのは密状況を伝える密レバー。このデバイスからデータが定期的に送られ、世界標準のバス用リアルタイムオープンデータの形式GTFSとなってGoogleマップ他、いろいろなサービスへと伝わります。

MixSodaで始まる、IchigoJam meets IoT 第二章、今後の活躍が楽しみです！

バス内サイネージももちろん自作。流れている3DCGまで自作！

開発室にゲーム筐体！ここからIchigoJam、伝説の1KBゲーム「Ichigo Pac」「IchigoVaders」が生まれたんですね！ゲーム開発に使うさまざまなテクニックは、業務システムやシビックテックでも大活躍。

目の前にディスプレイが浮かび上がる「Nreal Air」を常備して新幹線でも快適開発とのこと！
「スマートグラス「Nreal Air」「NrealLight」を徹底比較！できることや選び方を解説｜KDDI　トビラ」

野外で電脳メガネ体験、Meta Quest Pro。またまた夢、広がりました。VRを使ったアプリづくり、意外と敷居が低いんです。0からはじめるJavaScriptの入門にもぴったりかも？

ということで作りました「VRで学ぶJavaScript入門」
「ステップ1 四角を出そう」

VRの基本はブラウザ画面（document.body)に、シーンを追加し、シーンに四角などのオブジェクトを追加します。 <script type="module"> import { cr, rgb } from "https://js.sabae.cc/aframe.js"; const scene = cr("a-scene", document.body); const box = cr("a-box", scene); box.setAttribute("position", { x: 0, y: 1, z: -2 }); box.setAttribute("color", rgb(255, 100, 100)); </script> A-Frameの最新版と便利関数をまとめた、aframe.jsをインポートして、位置と色を指定した四角をシーンに追加しています。大きさ(scale)を指定しないと幅高さ奥行きがそれぞれ1mの四角になります。

「ステップ2 四角を並べよう」

コンピューターの得意技、超高速繰り返し！for（フォー）を使って10回繰り返し、変数iを使って2m置きに配置してみました。x、y、z、色を表すrgbなどに変数を使ってみましょう。中括弧で囲む時は、その中身をインデントしておくと読みやすい！ <script type="module"> import { cr, rgb } from "https://js.sabae.cc/aframe.js"; const scene = cr("a-scene", document.body); for (let i = 0; i < 10; i++) { const box = cr("a-box", scene); box.setAttribute("position", { x: i * 2, y: 1, z: -2 }); box.setAttribute("color", rgb(255, 100, 100)); } </script>

「ステップ3 一部の四角を大きくしよう」

コンピューターに判断させる、if（イフ）を使って繰り返しの変数が3の倍数のときだけ大きくしてみました。条件をいろいろ変更して遊んでみましょう。 <script type="module"> import { cr, rgb } from "https://js.sabae.cc/aframe.js"; const scene = cr("a-scene", document.body); for (let i = 0; i < 10; i++) { const box = cr("a-box", scene); box.setAttribute("position", { x: i * 2, y: 1, z: -2 }); box.setAttribute("color", rgb(255, 20 * i, 100)); if (i % 3 == 0) { box.setAttribute("scale", { x: 2, y: 2, z: 2 }); } } </script>

「3Dモデルを表示しよう」

岡山駅前の桃太郎像の3Dモデルオープンデータを使って、銅像を載せてみました。冒頭のimport文で新たにasset関数を追加するのを忘れずに！ <script type="module"> import { cr, rgb, asset } from "https://js.sabae.cc/aframe.js"; const scene = cr("a-scene", document.body); const box = cr("a-box", scene); box.setAttribute("position", { x: 0, y: 1, z: -2 }); box.setAttribute("color", rgb(255, 100, 100)); const aid = asset("https://code4fukui.github.io/vr-assets/statue/momotaro.glb"); const obj = cr("a-entity", scene); obj.setAttribute("gltf-model", aid); obj.setAttribute("position", { x: 0, y: 1.5, z: -2 }); </script> PCで3Dで動くだけでなく、QuestでみるとVR、Meta Quest Proで見るとARにもできちゃいます！