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