デザイナーとエンジニアの距離をより近づけるLottie利用術

16:50 から #room2 で行った「デザイナーとエンジニアの距離をより近づける Lottie 利用術」の資料です。

Transcript

1. σβΠφʔͱΤϯδχΞͷ ڑ཭Λ͚ۙͮΔ Lottie ར༻ज़ DroidKaigi 2019 
 02/08 (Fri.) 
 Recruit Lifestyle. Yuji Koyano
2. ࣗݾ঺հ
3. @bandwagondagon ykoyano Yuji Koyano @bandwagondagon ykoyano w 3FDSVJU
   -JGFTUZMFʹͯ
 "OESPJEΤϯδχΞͱͯ͠
 "JSϝΠτͱ͍͏ΞϓϦΛ։ൃத
   w ࠷ۙ͸
   
   
   
   
   
   
   
   
   
   
   
   Ͱ༡ͿͷʹϋϚͬͯ·͢
4. Ξχϝʔγϣϯͷ։ൃίετ͸ߴ͍ w ࡉ෦ͷڞ༗΍ௐ੔͕೉͘͠
 σβΠφʔͱΤϯδχΞͷ
 ίϛχέʔγϣϯίετ͕ߴ͍
   w ෳࡶͳΞχϝʔγϣϯΛ
 ίʔυͰ࠶ݱ͢Δͷ͸೉͍͠
   w ϓϥοτϑΥʔϜຖʹ࣮૷͕ඞཁ
5. $PQZSJHIU
   D
   
   "JSCOC
6. Lottieͱ͸ʁ w "&Ͱ࡞੒͞ΕͨύεΞχϝʔγϣϯΛ
 ඳը͢ΔϥΠϒϥϦ
   w ֤ϓϥοτϑΥʔϜຖʹ࣮૷͕ଘࡏ
 "OESPJE
   J04
   XFC
   3FBDU
   /BUJWF
   FUD
7. w ΞχϝʔγϣϯΛ+40/ϑΝΠϧͰఆٛ
   w %ZOBNJD
   1SPQFSUZʹΑͬͯ
 ࣮ߦ࣌ʹΞχϝʔγϣϯΛมߋ͢Δ͜ͱ͕Մೳ
   w ྨࣅπʔϧͱൺֱͯ͠΋
 "&ͷΞχϝʔγϣϯػೳΛ
 ࠷΋ଟ͘αϙʔτ Lottieͷಛ௃
8. Lottieͷ୅දతͳ࠶ੜύλʔϯ
9. 1. ͦͷ··࠶ੜ͠ଓ͚Δ w ΦϯϘʔσΟϯάɾ΢ΥʔΫεϧʔͰ
 Α͘࢖ΘΕ͍ͯΔ
   w ϧʔϓ࠶ੜͰ࢖ΘΕΔ͜ͱ͕ଟ͍
   w എܠಁաҎ֎ͷ໘Ͱ͸
 ௨ৗͷಈըͰ΋୅ସՄೳ $PQZSJHIU
   D
   
   "JSCOC
10. 2. τϦΨʔʹ൓Ԡͯ͠࠶ੜ w ελϯϓ΍ϥΠΫͳͲͷ
 ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠
 Α͘࢖ΘΕΔ
    w ϑϨʔϜ͔Β࠷ऴϑϨʔϜ·Ͱͷ
 ॱ࠶ੜͰදݱ͢Δ͜ͱ͕ଟ͍ $BSPMJOB
    $BKB[FJSB
 -JLF
    "OJNBUJPO
11. 3. ࢝఺ͱऴ఺͕ঢ়ଶΛදݱ w 0/
    
    0''
    ͷ஋ͷঢ়ଶભҠΛදݱ͢Δ
 ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠
 ࢖ΘΕΔ͜ͱ͕ଟ͍
    w ॱ࠶ੜɿ0''
    ˠ
    0/
    ͷભҠ
 ٯ࠶ੜɿ0/
    ˠ
    0''
    ͷભҠ %BSJT
    "MJ
    .VGUJ
 .FOV
    UP
    $MPTF.BUFSJBM
    *DPO
12. 4. ෳ਺ͷ࠶ੜൣғΛ࣋ͭ w ఀࢭϙΠϯτΛෳ਺༻ҙͯ͠
 Ϣʔβʔͷಈ͖ʹରͯ͠
 ࠶ੜൣғΛมԽͤ͞Δ
    w ӈͷྫͰ͸ঢ়ଶؒͷભҠΛ
 ϞʔϑΟϯάͰදݱ $PQZSJHIU
    D
    
    "JSCOC
13. w ΞχϝʔγϣϯΛͦͷ··
 ֤ϓϥοτϑΥʔϜ্Ͱ࠶ݱͰ͖ΔͨΊ
 σβΠφʔɾΤϯδχΞؒͷ
 ίϛχέʔγϣϯίετ͕Լ͕Δ
    w ඞཁͳ࣮૷͕γϯϓϧͰ
 ։ൃίετ͕௿͍ LottieΛ࢖͏ϝϦοτ
14. w ಈըͱൺֱͯ͠ϑΝΠϧαΠζ͕খ͍͞
    w ΠϯλϥΫςΟϒͳૢ࡞͕Մೳ LottieΛ࢖͏ϝϦοτ
15. ͜ͷηογϣϯͷ໨త w -PUUJFΛ࢖ͬͨ͜ͱ͕ͳ͍ΤϯδχΞ͕
 σβΠφʔͱҰॹʹ-PUUJFΛ
 ಋೖ͢Δ͖͔͚ͬΛ࡞Δ
    w -PUUJFͷഎܠʹ͋Δٕज़Λཧղ͢Δ͜ͱͰ
 σβΠφʔɾΤϯδχΞؒͷ
 ϫʔΫϑϩʔΛ͞Βʹޮ཰ԽͰ͖Δ
16. ͜ͷηογϣϯͷ໨త w -PUUJFΛऔΓר͘؀ڥ
    w -PUUJF͕ಈ͘࢓૊Έ
    w ϫʔΫϑϩʔ5JQTͷ঺հ w Ξχϝʔγϣϯͷ࡞Γํ
    w ΞϓϦͰͷ-PUUJFͷ࣮૷ํ๏
    w ΞϓϦͰͷ۩ମతͳ
 -PUUJFͷ࢖͍ॴ ࿩͢͜ͱ ࿩͞ͳ͍͜ͱ
17. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ
18. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ
19. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ
20. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
21. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
22. w ύεΞχϝʔγϣϯ΍7'9ͷ࡞੒ɾฤू͕Մೳͳө૾੍࡞ιϑτ Adobe After Effects (AE)
23. w &YUFOTJPOʹΑͬͯ"&ͷ֦ுػೳΛ࣮ݱ
    w 5IF
    "EPCF
    $PNNPO
    &YUFOTJCJMJUZ
    1MBUGPSN $&1
    
 ্ͰϢʔβʔ͕ࣗ༝ʹ&YUFOTJPOΛ։ൃՄೳ
    w &YUFOTJPOͷྫ

    
    ϝΠϯΧϥʔΛࢦఆ͢Δͱ૬ੑͷΑ͍৭Λࣗಈ഑৭

    
    ࢦఆͨ͠ԻָͷϦζϜΛղੳͯ͠ΩʔϑϨʔϜΛ௥Ճ
    ɹAdobe After Effects ͷಛ௃
24. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
25. w "&ͷύεΞχϝʔγϣϯΛ
 ಠࣗͷσʔλߏ଄ʹม׵ͯ͠
 +40/ϑΝΠϧʹॻ͖ग़͢
 "&ͷ&YUFOTJPO
    w )FSOBO
    5PSSJTJࢯ
 ʹΑͬͯ։ൃ͞Εͨ044 Bodymovin
26. ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
27. lottie-android w -PUUJF"OJNBUJPO7JFX
    Λ༻͍ͯ
 ϑΝΠϧΛಡΈࠐΈɾ࠶ੜ
    w ҎԼͷํ๏ͷ
 ಡΈࠐΈΛαϙʔτ
 
    +40/ϑΝΠϧ
 
    ;*1ϑΝΠϧ
 
    ωοτϫʔΫܦ༝ <com.airbnb.lottie.LottieAnimationView android:layout_width="match_parent" android:layout_height=“wrap_content” app:lottie_rawRes="@raw/hello_world" app:lottie_fileName="hello_world.json" app:lottie_autoPlay=“true" />
28. lottie-android public class LottieAnimationView extends AppCompatImageView { public <T> void addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
29. lottie-android w αϯϓϧΞϓϦ͕ެ։த
    w -PUUJFͷϓϨϏϡʔ༻ΞϓϦ
 ͱͯ͠࢖͏͜ͱ͕Ͱ͖Δ
30. Lottiefiles.com
31. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ
32. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ
33. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ
34. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
35. w "&ͷύεΞχϝʔγϣϯͷߏ੒ཁૉΛཧղ͢Δ Adobe After Effects (AE)
36. w $PNQPTJUJPO
 1SF$PNQPTJUJPO
 -BZFS
 $POUFOU
    w ͜ΕΒͷཁૉͷϓϩύςΟΛ
 ࣌ؒ࣠Ͱ੍ޚͰ͖Δ
 FY
    ϑϨʔϜ໨Ͱಁ໌౓Λʹ͢Δ ύεΞχϝʔγϣϯͷߏ੒ཁૉ
37. w Ξχϝʔγϣϯ͸ͻͱͭͷ$PNQPTJUJPO͔Β࡞ΒΕΔ AE্ͷύεΞχϝʔγϣϯͷߏ଄ NBJO
 $PNQPTJUJPO "&
    ϑϩʔνϟʔτ
38. AE্ͷύεΞχϝʔγϣϯͷߏ଄ w NBJO
    $PNQPTJUJPO͸1SF$PNQPTJUJPOͱ-BZFS͔Βߏ੒͞ΕΔ IFBSU
 -BZFS FYQMPTJPO
 1SF$PNQPTJUJPO
39. AE্ͷύεΞχϝʔγϣϯͷߏ଄ w IFBSU
    -BZFS͸̎ͭͷ$POUFOU͔Βߏ੒͞ΕΔ 1BUI
 $POUFOU 'JMM
 $POUFOU
40. TIPU
 -BZFS TIPU
 -BZFS AE্ͷύεΞχϝʔγϣϯͷߏ଄ w FYQMPTJPO
    1SF$PNQPTJUJPO͸̎ͭͷ-BZFS͔Βߏ੒͞ΕΔ
41. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
42. Bodymovin w "&ͷΞχϝʔγϣϯΛߏ੒͢Δ
 ֤ཁૉΛ+40/ʹॻ͖ग़͍ͯ͘͠
 w ཁૉͷΞΫηεʹ͸"&ͷ"1*Λར༻
43. \
    
    
    W
    lz
    
    
    GS
    
    
    
    
    
    
    
    
    
    
    
    
    ϑϨʔϜϨʔτ
    
    
    JQ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ։࢝ϑϨʔϜ
    
    
    PQ
    
    
    
    
    
    
    
    
    
    ऴྃϑϨʔϜɹ
    
    
    X
    
    
    
    
    
    
    
    
    
    
    XJEUI
    
    
    I
    
    
    
    
    
    
    
    
    
    
    IFJHIU
    
    
    ON
    lNBJOz
    
    
    $PNQPTJUJPO໊
    
    
    
    ʜ
    ^ ύεΞχϝʔγϣϯΛॻ͖ग़͢
44. \
    
    ʜ
    
    
    
    lMBZFST
    <
    
    
    
    
    ʜ
    
    IFBSU
    -BZFS
    ͷ৘ใ
    
    
    
    ʜ
    
    $PNQPTJUJPO
    ͷ৘ใ
    
    >
    
    
    ʜ
    
    
    
    ^ AE্ͷύεΞχϝʔγϣϯͷߏ଄ ύεΞχϝʔγϣϯΛॻ͖ग़͢
45. \
    
    ʜ
    
    
    
    lBTTFUT
    <
    
    
    
    ʜ
    
    1SF$PNQPTJUJPO
    ͷ৘ใ
    
    >
    
    
    ʜ
    
    
    
    ^ AE্ͷύεΞχϝʔγϣϯͷߏ଄ ύεΞχϝʔγϣϯΛॻ͖ग़͢
46. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ Bodymovin
47. -PUUJF"OJNBUJPO7JFX 1BSTFSΫϥε +40/
 ϑΝΠϧ
48. -PUUJF"OJNBUJPO7JFX -PUUJF%SBXBCMF -PUUJF$PNQPTJUJPO 1BSTFSΫϥε
49. 1BSTFSΫϥε -PUUJF"OJNBUJPO7JFX -PUUJF%SBXBCMF -PUUJF$PNQPTJUJPO .PEFMΫϥε "OJNBUJPOΫϥε
50. -PUUJF$PNQPTJUJPO1BSTFS
    
 -BZFS1BSTFS
 
 $POUFOU.PEFM1BSTFS
 
 "OJNBUBCMF5SBOTGPSN1BSTFS
    -BZFS
 
 $POUFOU.PEFM
 
 "OJNBUBCMF7BMVF
    1BSTFSΫϥε .PEFMΫϥε
51. -BZFS
    
 $POUFOU.PEFM
 
 "OJNBUBCMF7BMVF
    $PNQPTJUJPO-BZFS
    4IBQF-BZFS
    4IBQF$POUFOU
    'JMM$POUFOU
    1BUI,FZGSBNF"OJNBUJPO
 $PMPS,FZGSBNF"OJNBUJPO
    .PEFMΫϥε "OJNBUJPOΫϥε
52. -BZFS
    
 $POUFOU.PEFM
 
 "OJNBUBCMF7BMVF
    $PNQPTJUJPO-BZFS
    4IBQF-BZFS
    4IBQF$POUFOU
    'JMM$POUFOU
    1BUI,FZGSBNF"OJNBUJPO
 $PMPS,FZGSBNF"OJNBUJPO
    .PEFMΫϥε ,FZ1BUI&MFNFOU
53. -BZFS
    
 $POUFOU.PEFM
 
 "OJNBUBCMF7BMVF
    $PNQPTJUJPO-BZFS
    4IBQF-BZFS
    4IBQF$POUFOU
    'JMM$POUFOU
    1BUI,FZGSBNF"OJNBUJPO
 $PMPS,FZGSBNF"OJNBUJPO
    .PEFMΫϥε ,FZ1BUI&MFNFOU ,FZ1BUI&MFNFOU͸
 ,FZ1BUIΫϥεܦ༝Ͱ
 ࣮ߦ࣌ʹ஋Λ
 มԽͤ͞Δ͜ͱ͕Ͱ͖Δ
54. CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 
 Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε @RestrictTo(LIBRARY) public interface KeyPathElement { void resolveKeyPath(KeyPath keyPath, int depth, List<KeyPath> accumulator, KeyPath currentPartialKeyPath); <T> void addValueCallback(T property, @Nullable LottieValueCallback<T> callback); } public class LottieAnimationView extends AppCompatImageView { public <T> void addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
55. CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 
 Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε @RestrictTo(LIBRARY) public interface KeyPathElement { void resolveKeyPath(KeyPath keyPath, int depth, List<KeyPath> accumulator, KeyPath currentPartialKeyPath); <T> void addValueCallback(T property, @Nullable LottieValueCallback<T> callback); } public class LottieAnimationView extends AppCompatImageView { public <T> void addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
56. CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 
 Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
57. CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 
 Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
58. CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 
 Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
59. CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 
 Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
60. CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 
 Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress } "&ͷ,FZ1BUIߏ଄Λ೺ѲͰ͖Δͱ
 
 "&ͷͲͷཁૉʹ໰୊͕͋Δͷ͕
 ໌֬ʹͳΔͷͰσόοάͷޮ཰্͕͕Δ
 
 ࣮ߦ࣌ʹΞχϝʔγϣϯΛૢ࡞͠΍͘͢ͳΔ
61. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ
62. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ
63. Ξχϝʔγϣϯͷ
 मਖ਼ ࠶ੜ͔ͯ͠Βमਖ਼ͷ
 ඞཁੑʹؾͮ͘ ύεΛमਖ਼ Bodymovin
64. Ξχϝʔγϣϯͷ
 मਖ਼ ࠶ੜ͔ͯ͠Βमਖ਼ͷ
 ඞཁੑʹؾͮ͘ ύεΛमਖ਼ Bodymovin ؔ࿈πʔϧ͕ଟ͍Ώ͑ʹ
 ख໭Γͷίετ΋ߴ͍ʂ
65. Α͋͘ΔπϥΠ෦෼ w ϓϥοτϑΥʔϜຖ͕αϙʔτ͢Δ"&ͷػೳͷࠩҟ w ϓϨϏϡʔ্ͷ࠶ੜͱ࣮ࡍͷΞϓϦ্Ͱ࠶ੜͰ
 Ξχϝʔγϣϯͷҹ৅ʹࠩҟ͕ੜ͡Δ w σβΠϯπʔϧؒͰͷύεσʔλͷಉظ w σβΠφʔɾΤϯδχΞؒͰϨΠϠʔߏ଄ͷڞ༗͕೉͍͠
66. πʔϧؒͰͷύεσʔλͷಉظ w ɹ
    
    ΍
    
    
    
    
    
    ͷεΫϦϓτ΍&YUFOTJPOΛ࢖ͬͯ
 ࣗಈԽͨ͠Γޮ཰Խ͢Δ
    w &YUFOTJPO
    ʮ0WFSMPSE
    ʯΛ࢖͏ͱ
 "*
    
    㲗
    "&
    ؒͷϑΝΠϧͷߦ͖དྷ͕؆୯ʹͳΔ
67. αϙʔτ͢ΔAEͷػೳͷࠩҟ w MPUUJF3/ɾqVUUFSͳͲ͸಺෦Ͱґଘ͍ͯ͠Δ
 MPUUJFBOESPJEɾJ04͕࠷৽Ͱͳ͍ͷͰ஫ҙ
    w ػೳΛαϙʔτͯ͠ͳ͍ͷ͕
 #PEZNPWJOͳͷ͔MPUUJFͳͷ͔Ͱ໰୊Λ੾Γ෼͚Δ
    w +40/ϑΝΠϧڞ༗ͷ଎౓Λ্͛ͯ
 αϙʔτൣғ֎͔Ͳ͏͔ʹؾͮ͘λΠϛϯάΛૣΊΔ
68. JSONϑΝΠϧڞ༗ͷ଎౓Λ্͛Δ w #PU͕23ίʔυɾϓϨϏϡʔΛࣗಈੜ੒
    w MPUUJFOPEFΛ࢖͑͹
 4FSWFSͰ΋-PUUJF͕࠶ੜՄೳ
69. ϨΠϠʔߏ଄ͷڞ༗͕೉͍͠ w $PNQPTJUJPO
    -BZFS
    $POUFOUʹ
 ࣝผ͠΍໊͍͢લΛ͚ͭΔ
    w "&ͷϑϩʔνϟʔτΛڞ༗͢Δ
70. ϓϨϏϡʔ্ͱΞϓϦ্ͷࠩҟ w -PUUJFΛޮ཰తʹσόοά͢ΔͨΊͷ
 )ZQFSJPO"OESPJEϓϥάΠϯΛ࡞Γ·ͨ͠
    w ΞϓϦΛϏϧυ͠௚͢͜ͱͳ͘
 ϓϩύςΟΛมߋͨ͠Γ
 ࠶ੜ͢Δ+40/ϑΝΠϧΛมߋ͢Δ͜ͱ͕Ͱ͖·͢
    w IUUQTHJUIVCDPNZLPZBOPIZQFSJPOBUUSMPUUJF
71. DEMO
72. ·ͱΊ
73. -PUUJFͷར༻ύλʔϯ -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT -PUUJF͕ಈ͘࢓૊Έ -PUUJFΛऔΓר͘؀ڥ
74. Bodymovin ΞχϝʔγϣϯΛ࡞Δ JSONʹॻ͖ग़͢ JSONΛಡΈࠐΜͰ
 Ξχϝʔγϣϯඳը ύεΛ࡞Δ
75. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ