Upload
kazuhiro-hara
View
325
Download
1
Embed Size (px)
Citation preview
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ってどうしたらいいんだろう?
などなど...
詳しい方、懇親会などで教えてください