Slide 1
Slide 1 text
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
Nobuhiro Takahashi @ 2019.7.19
Slide 2
Slide 2 text
2
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 3
Slide 3 text
3
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 4
Slide 4 text
4
Frontend de KANPAI! #7 Going on A
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 5
Slide 5 text
5
. 2 oRb iD M .
Frontend de KANPAI! #7 Going on s
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
TW g P jcnRldDP
3 oRb iD M 3
3 N 3 VS RdPf e E O
IP S R a AP
Slide 6
Slide 6 text
6
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 7
Slide 7 text
7
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 8
Slide 8 text
8
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 9
Slide 9 text
9
2019.7.19
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
Slide 10
Slide 10 text
10
A
r
2 0 1
a cP M
v C I T
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
S P p H M
L P Mi a ti JC
Slide 11
Slide 11 text
11
!
Frontend de KANPAI! #7 Going on A
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 12
Slide 12 text
12
1
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 13
Slide 13 text
13
I L
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 14
Slide 14 text
14
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 15
Slide 15 text
15
/5 ,
O
/5 7
/5 , ,5 , C
/5 , , ,
/5 , ? E :
Frontend de KANPAI! #7 Going on V
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 16
Slide 16 text
16
/
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
- # -
Slide 17
Slide 17 text
17
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 18
Slide 18 text
18
2
0 0 0
Frontend de KANPAI! #7 Going on C
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
6
Slide 19
Slide 19 text
19
ຊ࣮ظ!
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 20
Slide 20 text
20
2
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 21
Slide 21 text
21
. /
M S
- :
/ D C
D
Frontend de KANPAI! #7 Going on a
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 22
Slide 22 text
22
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 23
Slide 23 text
23
-
@media (prefers-color-scheme: dark) {
}
@media (prefers-color-scheme: light) {
}
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 24
Slide 24 text
24
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 25
Slide 25 text
25
I M
a U
M D
MD
Frontend de KANPAI! #7 Going on a
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 26
Slide 26 text
26
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
࣫ࠇ쏬썗쏓썢썺썪썛썛쎟쎄 !
Slide 27
Slide 27 text
27
3
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 28
Slide 28 text
28
e
i d
i c -
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 29
Slide 29 text
29
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 30
Slide 30 text
30
- -
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
@media (inverted-colors: inverted) {
/*
*/
}
@media (inverted-colors: none) {
}
Slide 31
Slide 31 text
31
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 32
Slide 32 text
32
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 33
Slide 33 text
33
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
ݟ쎛썰썬ॏࢹ쏃쎮쏍쏋!
Slide 34
Slide 34 text
34
4
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 35
Slide 35 text
35
C
C / I
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 36
Slide 36 text
36
-
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
body { scroll-snap-type: y mandatory; }
section {
height: 100vh;
scroll-snap-align: start;
}
Slide 37
Slide 37 text
37
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 38
Slide 38 text
38
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
-1쎅େ
썪쎣썾썾썤썸쎚썝ʜʁ!
Slide 39
Slide 39 text
39
5
Frontend de KANPAI! #7 Going on ()
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 40
Slide 40 text
40
A ( A A
A )
) . )
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 41
Slide 41 text
41
) (
Frontend de KANPAI! #7 Going on A
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
const hoge = [1, [2, [3]]]
console.log(hoge.flat()) // => [ 1, 2, [ 3 ] ]
console.log(hoge.flat(Infinity)) // => [ 1, 2, 3 ]
( . )
Slide 42
Slide 42 text
42
(( )
.
Frontend de KANPAI! #7 Going on A
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
const waiwai = (x) => [x, x]
console.log([2, 3, 4].map(waiwai)) // => [ [ 2, 2 ], [ 3, 3 ], [ 4, 4 ] ]
console.log([2, 3, 4].map(waiwai).flat()) // => [ 2, 2, 3, 3, 4, 4 ] (low speed)
console.log([2, 3, 4].flatMap(waiwai)) // => [ 2, 2, 3, 3, 4, 4 ] (high speed)
Slide 43
Slide 43 text
43
Frontend de KANPAI! #7 Going on ()
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
ߏૢ࡞쎂େ׆༂!
Slide 44
Slide 44 text
44
6
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 45
Slide 45 text
45
8
1
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 46
Slide 46 text
46
,
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
ˬ
˫
Slide 47
Slide 47 text
47
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
ˬ
const lfConjunction = new Intl.ListFormat('en', {
type: 'conjunction'
})
console.log(lfConjunction.format([
'A', 'B', 'C'
]))
Slide 48
Slide 48 text
48
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
˫
const lfConjunction = new Intl.ListFormat('en', {
type: 'disjunction'
})
console.log(lfConjunction.format([
'A', 'B', 'C'
]))
Slide 49
Slide 49 text
49
- ,
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
.
0 5
0
Slide 50
Slide 50 text
50
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
const number = 5000000000000000
const fotmatterJP = new Intl.NumberFormat('ja-JP')
console.log(fotmatterJP.format(number))
const fotmatterFR = new Intl.NumberFormat('fr')
console.log(fotmatterFR.format(number))
const formatterDE = new Intl.NumberFormat('de')
console.log(formatterDE.format(number))
Slide 51
Slide 51 text
51
-
- -
:: /
: . : :
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 52
Slide 52 text
52
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
ม쎁 JO쎂쎁썺썽쎁썛썢ཁҙ!
Slide 53
Slide 53 text
53
7
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 54
Slide 54 text
54
: / /
: / S P JI T
/ : / / ar
H P I g e h lHCL
/ S P I on L cpci m L A
Frontend de KANPAI! #7 Going on st
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 55
Slide 55 text
55
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
import * as ts from 'typescript';
const printer: ts.Printer = ts.createPrinter();
const sourceFile: ts.SourceFile =
ts.createSourceFile(
'test.ts',
'const x: number = 42',
ts.ScriptTarget.ES2015, true, ts.ScriptKind.TS
);
console.log(printer.printFile(sourceFile));
Slide 56
Slide 56 text
56
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
SourceFileObject {
pos: 0,
end: 23,
flags: 0,
modifierFlagsCache: 0,
transformFlags: 0,
parent: undefined,
kind: 285,
text: 'const x: number = 42',
bindDiagnostics: [],
bindSuggestionDiagnostics: undefined,
languageVersion: 2,
fileName: 'test.ts',
languageVariant: 0,
isDeclarationFile: false,
scriptKind: 3,
pragmas: Map {},
checkJsDirective: undefined,
referencedFiles: [],
typeReferenceDirectives: [],
libReferenceDirectives: [],
amdDependencies: [],
hasNoDefaultLib: false,
statements: [
NodeObject {
pos: 0,
end: 23,
flags: 0,
modifierFlagsCache: 536870912,
transformFlags: 0,
parent: undefined,
kind: 220,
decorators: undefined,
modifiers: undefined,
declarationList: [NodeObject]
},
pos: 0,
end: 23
],
endOfFileToken: TokenObject {
pos: 23,
end: 23,
flags: 0,
modifierFlagsCache: 0,
transformFlags: 0,
parent: undefined,
kind: 1
},
externalModuleIndicator: undefined,
nodeCount: 8,
identifierCount: 1,
identifiers: Map { 'x' => 'x' },
parseDiagnostics: []
}
$ ts-node main.ts
Slide 57
Slide 57 text
57
.A 2 (
N LMT a
Frontend de KANPAI! #7 Going on e
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
/ / . .
/ - .-
) A .A .A 2 #
@ .A 2 CI D
Vc MP S @ b
Slide 58
Slide 58 text
58
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Ըܙ쎂त썢쎡썶썛!
Slide 59
Slide 59 text
59
-
8
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
-
Slide 60
Slide 60 text
60
1/ , ,
1 3, , 1 ,
E M
/ / EM
M
Frontend de KANPAI! #7 Going on O
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 61
Slide 61 text
61
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
window.addEventListener("pointerdown", detectInputType, false);
function detectInputType(event) {
switch(event.pointerType) {
case event.POINTER_TYPE_MOUSE: console.log("mouse detected! "); break;
case event.POINTER_TYPE_PEN: console.log("pen (stylus) detected!"); break;
case event.POINTER_TYPE_TOUCH: console.log("touch detected!"); break;
case event.POINTER_TYPE_UNAVAILABLE: console.log("unknown detected!");
}
}
Slide 62
Slide 62 text
62
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 63
Slide 63 text
63
(
( M: )
( M: / D
U P ) / D
OO: TA O M: S
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 64
Slide 64 text
64
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
࡞쎡썶썛쎙쎅썣૿썟썶!
Slide 65
Slide 65 text
65
9
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 66
Slide 66 text
66
+/ 1 6/
C N S
(16 / .6 2. 62
) N W a
SC bA A
Frontend de KANPAI! #7 Going on d
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 67
Slide 67 text
67
navigator.share(options)
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 68
Slide 68 text
68
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 69
Slide 69 text
69
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 70
Slide 70 text
70
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
ʮ쏁쎱쎬ʯ쎩ද썰쎬쎮쎽쏽쎙
ඪ४Խ썬쎣쎁썛썢쎁ʜ!
Slide 71
Slide 71 text
71
10
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 72
Slide 72 text
72
SP
hn OW T cvEI GK I
pob i teD FOR
g i i
J / / + hlar
O SP A
Frontend de KANPAI! #7 Going on w
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 73
Slide 73 text
73
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 74
Slide 74 text
74
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
AppleID.auth.init({
clientId: 'com.hogehoge.client', // developer site
scope: 'name email',
redirectURI: 'http://localhost:4000/callback'
})
AppleID.auth.signIn()
Slide 75
Slide 75 text
75
S
)I F M S 2
( ( )I A
D 2 S
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
)I / S
Slide 76
Slide 76 text
76
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 77
Slide 77 text
77
/
Frontend de KANPAI! #7 Going on T
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
J N S
A MO
Slide 78
Slide 78 text
78
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
쏅쎷쏯쏴쏐쎭쎂סഋ !
Slide 79
Slide 79 text
16 I 0 6 1 69 A
C E 8 E8
A 9 8 E
E8 EA6C IC
( - 6I 6
79
S P L -20 !
Frontend de KANPAI! #7 Going on T
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
) 0A
43 . C -20
2 A A
5 7 3 6
3 A A -CC
Slide 80
Slide 80 text
80
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 81
Slide 81 text
81
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 82
Slide 82 text
82
I
A A A A
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 83
Slide 83 text
83
I P
A
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 84
Slide 84 text
84
A
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 85
Slide 85 text
85
A
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 86
Slide 86 text
86
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 87
Slide 87 text
87
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
Slide 88
Slide 88 text
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
Nobuhiro Takahashi @ 2019.7.19
Slide 89
Slide 89 text
89
4 /-95 1 /:8
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
3 C A ( ?
4 1 19 3::371 /:8 5: /410 71 1 19 / 0//. 221 . /
C 3 3
4 01 17: 1 - 71 /:8 501: 7- 0/
IOM D G JN )
4 01 17: 1 8: 577- : 3 6- 0:/ 1.
4 : 3
Slide 90
Slide 90 text
90
N
! A P F
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
2019.7.19
F P
I K O
Slide 91
Slide 91 text
Frontend de KANPAI! #7 Going on
Design Engineering Group, Design Strategies Dept, Design Unit
Nobuhiro Takahashi @ 2019.7.19