先日行われた1期第11回授業レポートです。
今日もだいたいProtoOut Studio授業準備できた。 #protoout pic.twitter.com/f6nXTqQAEi
— Tanaka Seigo (@1ft_seabass) September 28, 2019
今回は、
- Vue Nativeによるスマホアプリ制作
- JavaScriptで3DやVRが作れるA-Frame制作
- Oculus QuestによるA-Frame AR体験
- HoloLensによるMixed Reality体験
という盛りだくさん内容で行いました。
ProtoOutStudio11回目
— [email protected]社内SE (@tsunamayo_wa) September 28, 2019
#shiten#protoout pic.twitter.com/e18CmEPVrQ
そう。気持ちを高めています。(授業で成功させるために、めっちゃ検証している図)
こちらは、もともと以前の授業で、Vue.jsをインプットし、ElectronとVueでデスクトップアプリが作れるvue-cli-plugin-electron-builderの流れからつながっているものです。
まず、Vue Nativeです。基本的なインストールからExpoアプリで表示しました。さらに、文言を変更したものがすぐ更新されることを体験することで、スマホアプリ開発の流れを考えてみたりと、少しでも自分の範囲よりも一歩先の技術分野を触れることによって企画力を高めたりする世界観をお伝えしました。
その他にもスマホアプリのクロスプラットフォームアプリの今までの流れだったり、WEBの知見をうまく活かすことによってプロトタイプのスピード感にも合うかもしれないことも加えました。
続いて、A-FrameというJavaScriptでVR機器とも親和性の高い3D技術の話。もちろんUnityというツールの作りやすさも対案としては話しつつも、HTML DOM的なアプローチで3Dを組みことができたり、JavaScriptのインタラクションも加えやすいといったポテンシャルを実際にコードを書きながら手を動かしてインプットしました。
IoTは #obniz と JavaScriptで3DやVR作れる @aframevr A-Frameで連携するサンプル。今日のProtoOut Studioで教える予定。 #protoout pic.twitter.com/JMYApRJk4J
— Tanaka Seigo (@1ft_seabass) September 28, 2019
JavaScriptとも親和性が高いので、JavaScriptでIoTができるobnizともドッキングできます。
よしうまくうごいてる! #obniz のスイッチを左右に動かすと A-Frame の3Dにある黄色の円柱が連動します!IoTと3D連携!#protoout pic.twitter.com/puCK0xaXxE
— Tanaka Seigo (@1ft_seabass) September 28, 2019
こちらも、生徒のobnizを持ってきてもらって、実際にコードを動かして体験してもらいました。3DとIoT一見すると、遠い技術のように見えますが、やはり動くものを体験できると親近感が湧き発想が自由になっているようでした。
ほんと楽しいわちゃわちゃですね笑
ここからが真骨頂。A-Frameの360° Imageのサンプルを、実際に、私のOculus Questで表示させてVR的な360ビューで、生徒全員が実体験をしました。JavaScriptで技術として3DやVRでも地続きという感覚があると、発想がスムーズに広がっていくことになるのでProtoOut Studioでは、このあたりの感覚を大切にしています。
さらに、VRの次はMixed Realityということで、こちらもHoloLens1を生徒全員が体験しました。この部分は、HoloLens1開発についてディスカッションをしている生徒の持参してもらったHoloLens1とともに2台体制で臨めたので、とてもスムーズに体験できました。
今日のProtoOut Studio はVue Nativeハンズオンからはじまり、3D方面。JavaScriptで3DやれるA-frameをハンズオンして #OculusQuest を体験し、 #HoloLens 1 を体験しました!盛りだくさんだけどやりきれたー! #protoout pic.twitter.com/KPqQxArExd
— Tanaka Seigo (@1ft_seabass) September 28, 2019
ということで技術要素でみればかなり濃密なインプットになりましたが、楽しい発想ができる3DやVRやスマホアプリというフィールドでもJavaScriptがうまく絡んで触れることが出来るというコンセプトを大事にしつつ、なんとかお伝えすることが出来ました。