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

Spectacleについて

 Spectacleについて

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

fand/amagitakayosi

October 22, 2016
Tweet

More Decks by fand/amagitakayosi

Other Decks in Technology

Transcript

  1. id:amagitakayosi
    SPECTACLE

    View full-size slide

  2. id:amagitakayosi
    はてなブログチー

    Kyoto.js
    主催

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. こんな感じ

    View full-size slide

  6. Markdown
    でかける
    を使う

    View full-size slide

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

    View full-size slide

  8. 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 full-size slide

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

    View full-size slide

  10. にdebugger

    込む

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. のコー
    ド見る
    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 full-size slide

  20. できた
    今日のスライドでは
    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 full-size slide

  21. 俺々
    スライド作成
    環境完成!!!
    楽しい!!!

    View full-size slide