UIT#4 web in App ネイティブアプリケーションのように振る舞うウェブの登壇資料です。 https://uit.connpass.com/event/98729/ 実プロジェクトでページ遷移AnimationとSkeleton screen を実装した体験談を掲載。参考数値もでているので、事例として今後の参考になると思います。 [追記] スライドの文字が欠損してしまったので下記に移動。 https://speakerdeck.com/shoyokyo/uit-number-4-peziqian-yi-animation-and-skeleton-screen-wowebviewapurinishi-zhuang-sitati-yan-tan

1. & A
UIT#4 Web in App

2. J
A E
Shoyo kyo
@shoyo_kyo

3. LINE
Front End Engineer

4. LINE
Front End Engineer
ネイティブアプリケーションの
ように振る舞うWEB

5. S
5
A
R W
F V 5
5

6. LINE ポイント

7. LINE ポイント Projectの特徴
5 P
JO
D
5
I A

8. JP
A H L
SRM

9. + A
+

10. c c
a
% 1 0
P A
% 1 0
A
V S
A

11. >
= V
U P
X

13. A
1 J
P S
1
5 9

14. S l - 6 3 6
0 58
4 55
2 S V Vk m
1 (
e S V Vk m
) ) % .
%
c
S DV
P A i a U

15. . 1

16. - )1 .-
(2
.21 AC
.21 ) . .- -1

17. ie .(
1 1 P
( ()-
c
1 R
P
R
g A
a

18. c 2
-. . - P
) . 1 a d
( 2 . A D S
. . C 2 .

19. Psl 1 1
. .1 rn
) -2 ao g Vt
( i k A
CD d e
p
c CDS m

20. 1
h T n P h
t r NI
i
m R U e P
1 w
d
pyA L
lP aOo P 1 hv
. . 1 A

21. a w .
44
m
- T 44 cp S
1 S 44 W
12 1 1 1 Pf 1 T
44 t inI NS
S . e
. TxS 44 t dlP
s 44sT B ro AB TP m 1 O

22. .

23. ) 2 . ( )).
A
<div class=“ExPlaceholder” /> <div class=“” />
<div class=“ExPlaceholder
ExPlaceholderAnimate” />
UI
C
.
2 .

24. 2 2
. . 2
:
2. . 2
G 2. . 2
2 2 C D :
2 2 A S

25. ) - 2 : 0 22
S A
, 2 2. % .1 2
.0 : 1 2. % .1 2 :
: : 222222 (2 (2 ( )2 # 2;2.
.0 : 1% 2 ( ( )2

26. :-
.2 1 2 2 L
- db
dbe
: A 2 2
Uca - 1 .
2 1 .2 P 2 2
GL
GS

28. co C
sl cn G k6
th6 i G
G
co S U P r
Cco Ge

30. LINE Mileage
E B

31. A

32. I
A

35. & O I aa
S A
a
&
( )

36. A
@ B

37. @

38. B
A @ B

39. LINE Front End Engineer
WebView

40. 9 :
/6645 888 4-076-53 .32 4356 /621
/6645 888 4-076-53 .32 4356 /621
/6645 888 4-076-53 .32 4356 /621
/6645 888 4-076-53 .32 4356 /621
/6645 888 4-076-53 .32 4356 /621