Slide 1
Slide 1 text
id:amagitakayosi
SPECTACLE
Slide 2
Slide 2 text
id:amagitakayosi
はてなブログチー
ム
Kyoto.js
主催
Slide 3
Slide 3 text
Spectacle
Slide 4
Slide 4 text
このスライドは
の提供で
お送りしています
Slide 5
Slide 5 text
Spectacle
とは
https://github.com/FormidableLabs/spectacle
React
でスライド作る君
好きなReact
のコー
ド突っ込める
Redux, Radium, Webpack
見た目は reveal.js
に似てる
Slide 6
Slide 6 text
こんな感じ
Slide 7
Slide 7 text
Markdown
でかける
を使う
Slide 8
Slide 8 text
だるい
1.
ファイルに書きたい
2.
配列からスライド生成できない
3.
画像のスタイルを指定したい
4. markdown
だとシンタックスハイライトない
Slide 9
Slide 9 text
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
ファイルを無理やりつっこむ
して '--'
で分割
スライドに 書かないでしょ……
多分
Slide 10
Slide 10 text
2.
配列からスライド生成できない
途中で固まって先へ進めなくなる
なんで
Slide 11
Slide 11 text
にdebugger
仕
込む
Slide 12
Slide 12 text
どういうこと
は、 Array
の Array
だった
りする
atten
しないといけない
で OK
Slide 13
Slide 13 text
PullReq
だした
近日中に直るんじゃないかな
Slide 14
Slide 14 text
3.
画像にスタイル指定したい
Docset
というアプリなら指定できる
という記法
真似したい
Slide 15
Slide 15 text
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
)
}
Slide 16
Slide 16 text
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
の提供する
コンポー
ネント
Slide 17
Slide 17 text
mdastCon g
をいじればよい
自前コンポー
ネントを渡す
とか書けるやつ
Slide 18
Slide 18 text
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
'
;
}
}
)
;
}
Slide 19
Slide 19 text
4.
シンタックスハイライト
なぜなのか
Slide 20
Slide 20 text
のコー
ド見る
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
,
.
.
.
}
を置き換えれば良さそう
Slide 21
Slide 21 text
できた
今日のスライドでは
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
>
)
;
}
}
;
Slide 22
Slide 22 text
俺々
スライド作成
環境完成！！！
楽しい！！！