Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UIT#4 ページ遷移Animation & Skeleton screen をWebViewアプリに実装した体験談

752fa941799b330b82c0ce71ae28901e?s=47 shoyo.kyo
September 13, 2018

UIT#4 ページ遷移Animation & Skeleton screen をWebViewアプリに実装した体験談

UIT#4 web in App ネイティブアプリケーションのように振る舞うウェブの登壇資料です。
https://uit.connpass.com/event/98729/

実プロジェクトでページ遷移AnimationとSkeleton screen を実装した体験談を掲載。参考数値もでているので、事例として今後の参考になると思います。

Vue.jsを使って作成したWebViewアプリ。

752fa941799b330b82c0ce71ae28901e?s=128

shoyo.kyo

September 13, 2018
Tweet

Transcript

  1. & A UIT#4 Web in App    

    
  2.  J A E Shoyo kyo @shoyo_kyo

  3.       -*/& 'SPOU&OE&OHJOFFS

  4.      -*/& 'SPOU&OE&OHJOFFS ωΠςΟϒΞϓϦέʔγϣϯͷ Α͏ʹৼΔ෣͏8&# 

    
  5. S 5 A R W F V 5 5

  6.  -*/&ϙΠϯτ

  7. -*/&ϙΠϯτ 1SPKFDUͷಛ௃ 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

  12.  

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

  28. co C sl cn G k6 th6 i G G

    co S U P r Cco Ge
  29.     

  30. -*/&.JMFBHF E B

  31. A

  32. I A

  33. 3L KP#DE  NC52 #1? '.%,*(& NC:>=IB#? O 5J9 "

    $NC<MHA GNC76  0F;B4#8 @ !Q +-()/Q
  34. :T RX#KL  VJ<9 #8F )4%0.+& VJAEDPI#F W <Q@ "

    $VJCUOH NVJ>=  7MBI;#? G !Z /1+-6Z -%,5'25 SY*135(
  35. & O I aa S A a & ( )

  36. A @ B

  37. @

  38. B A @ B

  39.    ! "   #  

    # -*/& 'SPOU&OE&OHJOFFS 8FC7JFX
  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