Slide 1
Slide 1 text
Image copyright: Hyperbole and a Half
LINE Fukuoka
Joël Billaud
2016-07-20
Slide 2
Slide 2 text
2015 11 LINE Fukuoka
Creators Market
Slide 3
Slide 3 text
JavaScript?
Slide 4
Slide 4 text
Perl
JavaScript (ES6)
bless +{
description => $description,
methods => \@methods,
};
bless +{
description => $description,
methods => \@methods,
};
{
description,
methods,
};
Slide 5
Slide 5 text
Perl?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Green
Red
Pink
Slide 8
Slide 8 text
HTML CSS
Slide 9
Slide 9 text
HTML CSS
JavaScript
40 PSDs
2 2
2
Slide 10
Slide 10 text
➜
Slide 11
Slide 11 text
PSD
HTML Canvas
Slide 12
Slide 12 text
40 PSDs
2 5
Slide 13
Slide 13 text
⅓
⅓
➜
Slide 14
Slide 14 text
PSD
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
PSD DSL
Slide 17
Slide 17 text
PSD
npm install psd #
> const PSD = require('psd')
> const psd = PSD.fromFile(filepath)
> const layer = psd.tree().children()[0] // PSD
> layer.name //
'Friends @a.top.title'
>[layer.width, layer.height] //
[629, 1140]
> layer.toPng() //
Stream {
...
}
Slide 18
Slide 18 text
"AndroidFriends": {
"ja": {
"width": 720,
"height": 1232,
"layers": [
{
"color": "a.friends.bg"
"rect": {
"left": 0,
"top": 0,
"width": 720,
"height": 1232
}
},
{
"color": "a.top.button"
"src": {
Slide 19
Slide 19 text
HTML Canvas
Slide 20
Slide 20 text
Reactive UI
Slide 21
Slide 21 text
Green
Red
Pink
Slide 22
Slide 22 text
function renderPreviewScreen(ctx, preview) {
// Promise
const renderers = preview.layers.map(layer => {
if (layer.element) {
return loadElementLayer(...);
} else if (layer.rect) {
return loadRectLayer(...);
} else {
return loadSpriteLayer(...);
}
});
// ...
function loadSpriteLayer(layer, spriteUrl, colors) {
return loadImage(spriteUrl).then(sprite => {
return function render(ctx) {
ctx.drawImage(sprite, src, dst);
};
});
}
Slide 23
Slide 23 text
//
Promise.all(renderers).then(...);
//
renderers.each(render => render.then(...));
//
renderers[0].then(render => render(ctx))
.then(() => renderers[1]).then(render => render(ctx))
.then(() => renderers[2]).then(render => render(ctx))
...
.then(() => renderers[n]).then(render => render(ctx))
// reduce
renderers.reduce((previous, current) => {
return previous
.then(() => current)
.then(render => render(ctx))
});
Slide 24
Slide 24 text
function renderPreviewScreen(ctx, preview) {
return preview.layers.map(layer => {
if (layer.element) {
return loadElementLayer(...);
} else if (layer.rect) {
return loadRectLayer(...);
} else {
return loadSpriteLayer(...);
}
})
.reduce((previous, current) =>
previous.then(() => current)
.then(render => render(ctx))
);
}
Slide 25
Slide 25 text
npm
Promise
Node
npm install beer vodka whiskey #
Slide 26
Slide 26 text
LINE