Clojure ScriptのSPAフレームワークRe-frameと、WebVRのフレームワークA-Frameのお話

1. Re-frame and A-Frame
Clojure, ClojureScript, WebVR!
2016/08/08
WebVR入門者の会

2. 登壇者
{:company “Greative.GK”
:name “Kazuhiro Hara”
:twitter “@kara_d”}

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

4. おなじみ? A-Frame

5. MozVR : A-Frame
https://aframe.io/
I ❤ MEMarkup Engineering

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

7. Clojure と ClojureScript
Lispの方言 並行性
Code as Data
不変データ構造
関数型プログラミング
複数の実行環境
Java, JavaScript, .NET
http://clojure.org/

8. Clojure と ClojureScript
Lispの方言 並行性
Code as Data
不変データ構造
関数型プログラミング
複数の実行環境
Java, JavaScript, .NET
http://clojure.org/

9. Re-frameについて
● Clojure(Script)で作られたReactのラッピングライブラリReagent
● Reagentをベースに作られたSPAのためのフレームワークがRe-frame
● RACES
○ Reactive-Atom Component Event Subscription framework
■ 単一のストア、変更のイベントと、その購読をするコンポーネント

10. Re-frameについて
● Clojure(Script)で作られたReactのラッピングライブラリReagent
● Reagentをベースに作られたSPAのためのフレームワークがRe-frame
● RACES
○ Reactive-Atom Component Event Subscription framework
■ 単一のストア、変更のイベントと、その購読をするコンポーネント

11. ClojureとA-Frameの親和性

12. 果てしなくマークアップ親和性高し
;; 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}]]

13. Clojureの良さを活かした構成

14. ClojureでWebVRコンテンツを作る構成例
Clojure /
ClojureScript
Project
Java Server JavaSctipt
● Java Http Server
● Server Side Rendering
● Routing & Database
● React / Re-frame
● Clientside Routing
● A-Frame Markup
共通コード
Ajax

15. DEMO

16. 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/

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

18. スターターキットをGitHubで配布予定
近日公開
@kara_d をフォローして待とう!!

19. ありがとうございました

20. おまけ

21. WebVRのパーマリンクについて考えてみよう
● WebVRコンテンツも、技術的には任意の時点でパーマリンクをつくれる
● でもどうやってパーマリンクを取得したらいいんだろう?
● どうシェアする? シェアボタンとか?
● シェアされたものがいきなりVR表示になるのはいいのだろうか?
● OGPってどうしたらいいんだろう?
などなど...
詳しい方、懇親会などで教えてください