Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Re-frame and A-Frame
Clojure, ClojureScript, WebVR!
2016/08/08
WebVR入門者の会
登壇者
{:company “Greative.GK”
:name “Kazuhiro Hara”
:twitter “@kara_d”}
本日はA-FrameとRe-frameのお話
(Clojure/ClojureScript)(WebVR framework)
おなじみ? A-Frame
MozVR : A-Frame
https://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-At...
Re-frameについて
● Clojure(Script)で作られたReactのラッピングライブラリReagent
● Reagentをベースに作られたSPAのためのフレームワークがRe-frame
● RACES
○ Reactive-At...
ClojureとA-Frameの親和性
果てしなくマークアップ親和性高し
;; Clojureのデータ構造
[“dog” “cat” “fish”] ;; ベクター
{:name “太郎” :age 36} ;; ハッシュマップ
;; HTMLのマークアップ
[:div#app [:...
Clojureの良さを活かした構成
ClojureでWebVRコンテンツを作る構成例
Clojure /
ClojureScript
Project
Java Server JavaSctipt
● Java Http Server
● Server Side Rendering...
DEMO
DEMOについて
● パーマリンクを持つWebVRコンテンツ
● カーソル(視点)を合わせたときに状態が変化、
URLも変化
● サーバーサイドレンダリングにより、
URLを直接読み込まれたときも状態が反映されている
○ http://0.0....
パーマリンクはWebの強い武器
スターターキットをGitHubで配布予定
近日公開
@kara_d をフォローして待とう!!
ありがとうございました
おまけ
WebVRのパーマリンクについて考えてみよう
● WebVRコンテンツも、技術的には任意の時点でパーマリンクをつくれる
● でもどうやってパーマリンクを取得したらいいんだろう?
● どうシェアする? シェアボタンとか?
● シェアされたものがい...
Upcoming SlideShare
Loading in …5
×

of

Re-frame and A-Frame Slide 1 Re-frame and A-Frame Slide 2 Re-frame and A-Frame Slide 3 Re-frame and A-Frame Slide 4 Re-frame and A-Frame Slide 5 Re-frame and A-Frame Slide 6 Re-frame and A-Frame Slide 7 Re-frame and A-Frame Slide 8 Re-frame and A-Frame Slide 9 Re-frame and A-Frame Slide 10 Re-frame and A-Frame Slide 11 Re-frame and A-Frame Slide 12 Re-frame and A-Frame Slide 13 Re-frame and A-Frame Slide 14 Re-frame and A-Frame Slide 15 Re-frame and A-Frame Slide 16 Re-frame and A-Frame Slide 17 Re-frame and A-Frame Slide 18 Re-frame and A-Frame Slide 19 Re-frame and A-Frame Slide 20 Re-frame and A-Frame Slide 21
Upcoming SlideShare
ClojureScript interfaces to React
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Re-frame and A-Frame

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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ってどうしたらいいんだろう? などなど... 詳しい方、懇親会などで教えてください
  • KeisukeFukuda

    Aug. 12, 2016

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

Views

Total views

984

On Slideshare

0

From embeds

0

Number of embeds

60

Actions

Downloads

3

Shares

0

Comments

0

Likes

1

×