Successfully reported this slideshow.
Your SlideShare is downloading. ×

Re-frame and A-Frame

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 21 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Re-frame and A-Frame (20)

Advertisement

More from Kazuhiro Hara (20)

Recently uploaded (20)

Advertisement

Re-frame and A-Frame

  1. 1. Re-frame and A-Frame Clojure, ClojureScript, WebVR! 2016/08/08 WebVR入門者の会
  2. 2. 登壇者 {:company “Greative.GK” :name “Kazuhiro Hara” :twitter “@kara_d”}
  3. 3. 本日はA-FrameとRe-frameのお話 (Clojure/ClojureScript)(WebVR framework)
  4. 4. おなじみ? A-Frame
  5. 5. MozVR : A-Frame https://aframe.io/ I ❤ MEMarkup Engineering
  6. 6. あまりおなじみでないClojureのこと
  7. 7. Clojure と ClojureScript Lispの方言 並行性 Code as Data 不変データ構造 関数型プログラミング 複数の実行環境 Java, JavaScript, .NET http://clojure.org/
  8. 8. Clojure と ClojureScript Lispの方言 並行性 Code as Data 不変データ構造 関数型プログラミング 複数の実行環境 Java, JavaScript, .NET http://clojure.org/
  9. 9. Re-frameについて ● Clojure(Script)で作られたReactのラッピングライブラリReagent ● Reagentをベースに作られたSPAのためのフレームワークがRe-frame ● RACES ○ Reactive-Atom Component Event Subscription framework ■ 単一のストア、変更のイベントと、その購読をするコンポーネント
  10. 10. Re-frameについて ● Clojure(Script)で作られたReactのラッピングライブラリReagent ● Reagentをベースに作られたSPAのためのフレームワークがRe-frame ● RACES ○ Reactive-Atom Component Event Subscription framework ■ 単一のストア、変更のイベントと、その購読をするコンポーネント
  11. 11. ClojureとA-Frameの親和性
  12. 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. 13. Clojureの良さを活かした構成
  14. 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. 15. DEMO
  16. 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. 17. パーマリンクはWebの強い武器
  18. 18. スターターキットをGitHubで配布予定 近日公開 @kara_d をフォローして待とう!!
  19. 19. ありがとうございました
  20. 20. おまけ
  21. 21. WebVRのパーマリンクについて考えてみよう ● WebVRコンテンツも、技術的には任意の時点でパーマリンクをつくれる ● でもどうやってパーマリンクを取得したらいいんだろう? ● どうシェアする? シェアボタンとか? ● シェアされたものがいきなりVR表示になるのはいいのだろうか? ● OGPってどうしたらいいんだろう? などなど... 詳しい方、懇親会などで教えてください

×