Spectacleについて

Kyoto.js 11で発表した資料です

Transcript

1. id:amagitakayosi SPECTACLE
2. id:amagitakayosi はてなブログチー ム Kyoto.js 主催
3. Spectacle
4. このスライドは の提供で お送りしています
5. Spectacle とは https://github.com/FormidableLabs/spectacle React でスライド作る君 好きなReact のコー ド突っ込める Redux, Radium, Webpack 見た目は reveal.js に似てる
6. こんな感じ
7. Markdown でかける を使う
8. だるい 1. ファイルに書きたい 2. 配列からスライド生成できない 3. 画像のスタイルを指定したい 4. markdown だとシンタックスハイライトない
9. 1. ファイルに書く c o n s t m d s = r e q u i r e ( ' r a w ! . / f o o . m d ' ) . s p l i t ( / \ n - - . * \ n / ) ; m d s . m a p ( m d = > < M a r k d o w n s o u r c e = { m d } / > ) ; Markdown ファイルを無理やりつっこむ して '--' で分割 スライドに 書かないでしょ…… 多分
10. 2. 配列からスライド生成できない 途中で固まって先へ進めなくなる なんで
11. にdebugger 仕 込む
12. どういうこと は、 Array の Array だった りする atten しないといけない で OK
13. PullReq だした 近日中に直るんじゃないかな
14. 3. 画像にスタイル指定したい Docset というアプリなら指定できる という記法 真似したい
15. Spectacle のコー ド読んでみる を使って描画してる このへん { m d a s t ( ) . u s e ( m d a s t R e a c t , m d a s t C o n f i g ) . p r o c e s s ( c o n t e n t ) }
16. props.mdastCon g e x p o r t c o n s t m d a s t C o n f i g D e f a u l t = { c o m m o n m a r k : t r u e , p a r a g r a p h B l o c k q u o t e s : f a l s e , m d a s t R e a c t C o m p o n e n t s : { / / ( 中略) i m g : I m a g e , / / ( 中略) } } ; は Spectacle の提供する コンポー ネント
17. mdastCon g をいじればよい 自前コンポー ネントを渡す とか書けるやつ
18. StyleableImage できた 気合っぽい g e t S t y l e ( ) { c o n s t c o d e s = t h i s . p r o p s . a l t . s p l i t ( / \ s * , \ s * / ) ; c o n s t s t y l e = { p o s i t i o n : ' r e l a t i v e ' , } ; c o d e s . f o r E a c h ( ( c o d e ) = > { i f ( c o d e . m a t c h ( / ^ [ 0 - 9 ] + % $ / ) ) { s t y l e . w i d t h = c o d e ; } i f ( c o d e . m a t c h ( / ^ ( l e f t | r i g h t ) $ / ) ) { s t y l e [ c o d e ] = 0 ; } i f ( c o d e = = = ' c e n t e r ' ) { s t y l e . m a r g i n = ' 0 a u t o ' ; } } ) ; }
19. 4. シンタックスハイライト なぜなのか
20. のコー ド見る m d a s t R e a c t C o m p o n e n t s : { a : L i n k , b l o c k q u o t e : C o m b i n e d B l o c k Q u o t e , c o d e : C o d e P a n e , . . . } を置き換えれば良さそう
21. できた 今日のスライドでは JavaScript しか書かないので…… c o n s t J S C o d e = c l a s s e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { c o n s t p r o p s = { . . . t h i s . p r o p s , l a n g : ' j s ' } ; r e t u r n ( < C o d e P a n e { . . . p r o p s } > { t h i s . p r o p s . c h i l d r e n } < / C o d e P a n e > ) ; } } ;
22. 俺々 スライド作成 環境完成！！！ 楽しい！！！