Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Spectacleについて

 Spectacleについて

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

14084b6462b19a8512ce5208a76f8925?s=128

fand/amagitakayosi

October 22, 2016
Tweet

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. 俺々 スライド作成 環境完成!!! 楽しい!!!