Re-frame and A-Frame

Re-frame and A-FrameClojure, ClojureScript, WebVR!

2016/08/08WebVR入門者の会

登壇者

{:company “Greative.GK” :name “Kazuhiro Hara” :twitter “@kara_d”}

本日はA-FrameとRe-frameのお話(Clojure/ClojureScript)(WebVR framework)

おなじみ? A-Frame

MozVR : A-Framehttps://aframe.io/

I ❤ MEMarkup Engineering

あまりおなじみでないClojureのこと

Clojure と ClojureScript

Lispの方言 並行性

Code as Data

不変データ構造

関数型プログラミング

複数の実行環境Java, JavaScript, .NET

http://clojure.org/

Clojure と ClojureScript

Lispの方言 並行性

Code as Data

不変データ構造

関数型プログラミング

複数の実行環境Java, JavaScript, .NET

http://clojure.org/

Re-frameについて

● Clojure(Script)で作られたReactのラッピングライブラリReagent● Reagentをベースに作られたSPAのためのフレームワークがRe-frame● RACES

○ Reactive-Atom Component Event Subscription framework■ 単一のストア、変更のイベントと、その購読をするコンポーネント

Re-frameについて

● Clojure(Script)で作られたReactのラッピングライブラリReagent● Reagentをベースに作られたSPAのためのフレームワークがRe-frame● RACES

○ Reactive-Atom Component Event Subscription framework■ 単一のストア、変更のイベントと、その購読をするコンポーネント

ClojureとA-Frameの親和性

果てしなくマークアップ親和性高し

;; Clojureのデータ構造

[“dog” “cat” “fish”] ;; ベクター

{:name “太郎” :age 36} ;; ハッシュマップ

;; HTMLのマークアップ

[:div#app [:img.entry {:src “/img/a.png” :alt “”}]

;; A-Frameのマークアップ

[:a-scene [:a-box {:width 1 :height 2}]]

Clojureの良さを活かした構成

ClojureでWebVRコンテンツを作る構成例

Clojure /ClojureScriptProject

Java Server JavaSctipt

● Java Http Server● Server Side Rendering● Routing & Database

● React / Re-frame● Clientside Routing● A-Frame Markup

共通コード

Ajax

DEMO

DEMOについて

● パーマリンクを持つWebVRコンテンツ

● カーソル(視点)を合わせたときに状態が変化、

URLも変化

● サーバーサイドレンダリングにより、

URLを直接読み込まれたときも状態が反映されている○ http://0.0.0.0:4001/red/○ http://0.0.0.0:4001/blue/○ http://0.0.0.0:4001/green/

パーマリンクはWebの強い武器

スターターキットをGitHubで配布予定

近日公開

@kara_d をフォローして待とう!!

ありがとうございました

おまけ

WebVRのパーマリンクについて考えてみよう

● WebVRコンテンツも、技術的には任意の時点でパーマリンクをつくれる

● でもどうやってパーマリンクを取得したらいいんだろう?● どうシェアする? シェアボタンとか?● シェアされたものがいきなりVR表示になるのはいいのだろうか?● OGPってどうしたらいいんだろう?

などなど...

詳しい方、懇親会などで教えてください