Spectacleについて

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

Transcript

1. id:amagitakayosi
   SPECTACLE
   

   View Slide

2. id:amagitakayosi
   はてなブログチー
   ム
   Kyoto.js
   主催
   

   View Slide

3. Spectacle
   

   View Slide

4. このスライドは
   の提供で
   お送りしています
   

   View Slide

5. Spectacle
   とは
   https://github.com/FormidableLabs/spectacle
   React
   でスライド作る君
   好きなReact
   のコー
   ド突っ込める
   Redux, Radium, Webpack
   見た目は reveal.js
   に似てる
   

   View Slide

6. こんな感じ
   

   View Slide

7. Markdown
   でかける
   を使う
   

   View Slide

8. だるい
   1.
   ファイルに書きたい
   2.
   配列からスライド生成できない
   3.
   画像のスタイルを指定したい
   4. markdown
   だとシンタックスハイライトない
   

   View Slide

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
   ファイルを無理やりつっこむ
   して '--'
   で分割
   スライドに 書かないでしょ……
   多分
   

   View Slide

10. 2.
    配列からスライド生成できない
    途中で固まって先へ進めなくなる
    なんで
    

    View Slide

11. にdebugger
    仕
    込む
    

    View Slide

12. どういうこと
    は、 Array
    の Array
    だった
    りする
    atten
    しないといけない
    で OK
    

    View Slide

13. PullReq
    だした
    近日中に直るんじゃないかな
    

    View Slide

14. 3.
    画像にスタイル指定したい
    Docset
    というアプリなら指定できる
    という記法
    真似したい
    

    View Slide

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
    )
    }
    

    View Slide

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
    の提供する
    コンポー
    ネント
    

    View Slide

17. mdastCon g
    をいじればよい
    自前コンポー
    ネントを渡す
    とか書けるやつ
    

    View Slide

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
    '
    ;
    }
    }
    )
    ;
    }
    

    View Slide

19. 4.
    シンタックスハイライト
    なぜなのか
    

    View Slide

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
    ,
    .
    .
    .
    }
    を置き換えれば良さそう
    

    View Slide

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
    >
    )
    ;
    }
    }
    ;
    

    View Slide

22. 俺々
    スライド作成
    環境完成！！！
    楽しい！！！
    

    View Slide