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

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

Yuji Koyano
February 08, 2019

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

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

Yuji Koyano

February 08, 2019
Tweet

More Decks by Yuji Koyano

Other Decks in Technology

Transcript

  1. σβΠφʔͱΤϯδχΞͷ
    ڑ཭Λ͚ۙͮΔ
    Lottie ར༻ज़
    DroidKaigi 2019 

    02/08 (Fri.)


    Recruit Lifestyle. Yuji Koyano

    View Slide

  2. ࣗݾ঺հ

    View Slide

  3. @bandwagondagon ykoyano
    Yuji Koyano
    @bandwagondagon ykoyano
    w 3FDSVJU-JGFTUZMFʹͯ

    "OESPJEΤϯδχΞͱͯ͠

    "JSϝΠτͱ͍͏ΞϓϦΛ։ൃத
    w ࠷ۙ͸Ͱ༡ͿͷʹϋϚͬͯ·͢

    View Slide

  4. Ξχϝʔγϣϯͷ։ൃίετ͸ߴ͍
    w ࡉ෦ͷڞ༗΍ௐ੔͕೉͘͠

    σβΠφʔͱΤϯδχΞͷ

    ίϛχέʔγϣϯίετ͕ߴ͍
    w ෳࡶͳΞχϝʔγϣϯΛ

    ίʔυͰ࠶ݱ͢Δͷ͸೉͍͠
    w ϓϥοτϑΥʔϜຖʹ࣮૷͕ඞཁ

    View Slide

  5. $PQZSJHIU D
    "JSCOC

    View Slide

  6. Lottieͱ͸ʁ
    w "&Ͱ࡞੒͞ΕͨύεΞχϝʔγϣϯΛ

    ඳը͢ΔϥΠϒϥϦ
    w ֤ϓϥοτϑΥʔϜຖʹ࣮૷͕ଘࡏ

    "OESPJE J04 XFC 3FBDU/BUJWF FUD

    View Slide

  7. w ΞχϝʔγϣϯΛ+40/ϑΝΠϧͰఆٛ
    w %ZOBNJD1SPQFSUZʹΑͬͯ

    ࣮ߦ࣌ʹΞχϝʔγϣϯΛมߋ͢Δ͜ͱ͕Մೳ
    w ྨࣅπʔϧͱൺֱͯ͠΋

    "&ͷΞχϝʔγϣϯػೳΛ

    ࠷΋ଟ͘αϙʔτ
    Lottieͷಛ௃

    View Slide

  8. Lottieͷ୅දతͳ࠶ੜύλʔϯ

    View Slide

  9. 1. ͦͷ··࠶ੜ͠ଓ͚Δ
    w ΦϯϘʔσΟϯάɾ΢ΥʔΫεϧʔͰ

    Α͘࢖ΘΕ͍ͯΔ
    w ϧʔϓ࠶ੜͰ࢖ΘΕΔ͜ͱ͕ଟ͍
    w എܠಁաҎ֎ͷ໘Ͱ͸

    ௨ৗͷಈըͰ΋୅ସՄೳ
    $PQZSJHIU D
    "JSCOC

    View Slide

  10. 2. τϦΨʔʹ൓Ԡͯ͠࠶ੜ
    w ελϯϓ΍ϥΠΫͳͲͷ

    ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠

    Α͘࢖ΘΕΔ
    w ϑϨʔϜ͔Β࠷ऴϑϨʔϜ·Ͱͷ

    ॱ࠶ੜͰදݱ͢Δ͜ͱ͕ଟ͍
    $BSPMJOB$BKB[FJSB

    -JLF"OJNBUJPO

    View Slide

  11. 3. ࢝఺ͱऴ఺͕ঢ়ଶΛදݱ
    w 0/0''ͷ஋ͷঢ়ଶભҠΛදݱ͢Δ

    ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠

    ࢖ΘΕΔ͜ͱ͕ଟ͍
    w ॱ࠶ੜɿ0''ˠ0/ͷભҠ

    ٯ࠶ੜɿ0/ˠ0''ͷભҠ
    %BSJT"MJ.VGUJ

    .FOVUP$MPTF.BUFSJBM*DPO

    View Slide

  12. 4. ෳ਺ͷ࠶ੜൣғΛ࣋ͭ
    w ఀࢭϙΠϯτΛෳ਺༻ҙͯ͠

    Ϣʔβʔͷಈ͖ʹରͯ͠

    ࠶ੜൣғΛมԽͤ͞Δ
    w ӈͷྫͰ͸ঢ়ଶؒͷભҠΛ

    ϞʔϑΟϯάͰදݱ
    $PQZSJHIU D
    "JSCOC

    View Slide

  13. w ΞχϝʔγϣϯΛͦͷ··

    ֤ϓϥοτϑΥʔϜ্Ͱ࠶ݱͰ͖ΔͨΊ

    σβΠφʔɾΤϯδχΞؒͷ

    ίϛχέʔγϣϯίετ͕Լ͕Δ
    w ඞཁͳ࣮૷͕γϯϓϧͰ

    ։ൃίετ͕௿͍
    LottieΛ࢖͏ϝϦοτ

    View Slide

  14. w ಈըͱൺֱͯ͠ϑΝΠϧαΠζ͕খ͍͞
    w ΠϯλϥΫςΟϒͳૢ࡞͕Մೳ
    LottieΛ࢖͏ϝϦοτ

    View Slide

  15. ͜ͷηογϣϯͷ໨త
    w -PUUJFΛ࢖ͬͨ͜ͱ͕ͳ͍ΤϯδχΞ͕

    σβΠφʔͱҰॹʹ-PUUJFΛ

    ಋೖ͢Δ͖͔͚ͬΛ࡞Δ
    w -PUUJFͷഎܠʹ͋Δٕज़Λཧղ͢Δ͜ͱͰ

    σβΠφʔɾΤϯδχΞؒͷ

    ϫʔΫϑϩʔΛ͞Βʹޮ཰ԽͰ͖Δ

    View Slide

  16. ͜ͷηογϣϯͷ໨త
    w -PUUJFΛऔΓר͘؀ڥ
    w -PUUJF͕ಈ͘࢓૊Έ
    w ϫʔΫϑϩʔ5JQTͷ঺հ
    w Ξχϝʔγϣϯͷ࡞Γํ
    w ΞϓϦͰͷ-PUUJFͷ࣮૷ํ๏
    w ΞϓϦͰͷ۩ମతͳ

    -PUUJFͷ࢖͍ॴ
    ࿩͢͜ͱ ࿩͞ͳ͍͜ͱ

    View Slide

  17. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT
    -PUUJF͕ಈ͘࢓૊Έ
    -PUUJFΛऔΓר͘؀ڥ

    View Slide

  18. ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ

    View Slide

  19. Bodymovin
    ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ

    View Slide

  20. ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ
    Bodymovin

    View Slide

  21. ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ
    Bodymovin

    View Slide

  22. w ύεΞχϝʔγϣϯ΍7'9ͷ࡞੒ɾฤू͕Մೳͳө૾੍࡞ιϑτ
    Adobe After Effects (AE)

    View Slide

  23. w &YUFOTJPOʹΑͬͯ"&ͷ֦ுػೳΛ࣮ݱ
    w 5IF"EPCF$PNNPO&YUFOTJCJMJUZ1MBUGPSN $&1

    ্ͰϢʔβʔ͕ࣗ༝ʹ&YUFOTJPOΛ։ൃՄೳ
    w &YUFOTJPOͷྫ

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

    ࢦఆͨ͠ԻָͷϦζϜΛղੳͯ͠ΩʔϑϨʔϜΛ௥Ճ
    ɹAdobe After Effects ͷಛ௃

    View Slide

  24. ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ
    Bodymovin

    View Slide

  25. w "&ͷύεΞχϝʔγϣϯΛ

    ಠࣗͷσʔλߏ଄ʹม׵ͯ͠

    +40/ϑΝΠϧʹॻ͖ग़͢

    "&ͷ&YUFOTJPO
    w )FSOBO5PSSJTJࢯ

    ʹΑͬͯ։ൃ͞Εͨ044
    Bodymovin

    View Slide

  26. ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ
    Bodymovin

    View Slide

  27. lottie-android
    w -PUUJF"OJNBUJPO7JFXΛ༻͍ͯ

    ϑΝΠϧΛಡΈࠐΈɾ࠶ੜ
    w ҎԼͷํ๏ͷ

    ಡΈࠐΈΛαϙʔτ

    +40/ϑΝΠϧ

    ;*1ϑΝΠϧ

    ωοτϫʔΫܦ༝
    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" />

    View Slide

  28. lottie-android
    public class LottieAnimationView extends AppCompatImageView {
    public void addValueCallback(
    KeyPath keyPath, T property, LottieValueCallback callback) {
    lottieDrawable.addValueCallback(keyPath, property, callback);
    }
    }

    View Slide

  29. lottie-android
    w αϯϓϧΞϓϦ͕ެ։த
    w -PUUJFͷϓϨϏϡʔ༻ΞϓϦ

    ͱͯ͠࢖͏͜ͱ͕Ͱ͖Δ

    View Slide

  30. Lottiefiles.com

    View Slide

  31. Bodymovin
    ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ

    View Slide

  32. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT
    -PUUJF͕ಈ͘࢓૊Έ
    -PUUJFΛऔΓר͘؀ڥ

    View Slide

  33. Bodymovin
    ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ

    View Slide

  34. Bodymovin
    ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ
    Bodymovin

    View Slide

  35. w "&ͷύεΞχϝʔγϣϯͷߏ੒ཁૉΛཧղ͢Δ
    Adobe After Effects (AE)

    View Slide

  36. w $PNQPTJUJPO

    1SF$PNQPTJUJPO

    -BZFS

    $POUFOU
    w ͜ΕΒͷཁૉͷϓϩύςΟΛ

    ࣌ؒ࣠Ͱ੍ޚͰ͖Δ

    FYϑϨʔϜ໨Ͱಁ໌౓Λʹ͢Δ

    ύεΞχϝʔγϣϯͷߏ੒ཁૉ

    View Slide

  37. w Ξχϝʔγϣϯ͸ͻͱͭͷ$PNQPTJUJPO͔Β࡞ΒΕΔ
    AE্ͷύεΞχϝʔγϣϯͷߏ଄
    NBJO

    $PNQPTJUJPO
    "&ϑϩʔνϟʔτ

    View Slide

  38. AE্ͷύεΞχϝʔγϣϯͷߏ଄
    w NBJO$PNQPTJUJPO͸1SF$PNQPTJUJPOͱ-BZFS͔Βߏ੒͞ΕΔ
    IFBSU

    -BZFS
    FYQMPTJPO

    1SF$PNQPTJUJPO

    View Slide

  39. AE্ͷύεΞχϝʔγϣϯͷߏ଄
    w IFBSU-BZFS͸̎ͭͷ$POUFOU͔Βߏ੒͞ΕΔ
    1BUI

    $POUFOU
    'JMM

    $POUFOU

    View Slide

  40. TIPU

    -BZFS
    TIPU

    -BZFS
    AE্ͷύεΞχϝʔγϣϯͷߏ଄
    w FYQMPTJPO1SF$PNQPTJUJPO͸̎ͭͷ-BZFS͔Βߏ੒͞ΕΔ

    View Slide

  41. Bodymovin
    ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ
    Bodymovin

    View Slide

  42. Bodymovin
    w "&ͷΞχϝʔγϣϯΛߏ੒͢Δ

    ֤ཁૉΛ+40/ʹॻ͖ग़͍ͯ͘͠

    w ཁૉͷΞΫηεʹ͸"&ͷ"1*Λར༻

    View Slide

  43. \
    Wlz
    GS ϑϨʔϜϨʔτ
    JQ ։࢝ϑϨʔϜ
    PQ ऴྃϑϨʔϜɹ
    X XJEUI
    I IFJHIU
    ONlNBJOz $PNQPTJUJPO໊
    ʜ
    ^
    ύεΞχϝʔγϣϯΛॻ͖ग़͢

    View Slide

  44. \
    ʜ
    lMBZFST
    ʜIFBSU-BZFSͷ৘ใ
    ʜ$PNQPTJUJPOͷ৘ใ
    >
    ʜ
    ^
    AE্ͷύεΞχϝʔγϣϯͷߏ଄
    ύεΞχϝʔγϣϯΛॻ͖ग़͢

    View Slide

  45. \
    ʜ
    lBTTFUT
    ʜ1SF$PNQPTJUJPOͷ৘ใ
    >
    ʜ
    ^
    AE্ͷύεΞχϝʔγϣϯͷߏ଄
    ύεΞχϝʔγϣϯΛॻ͖ग़͢

    View Slide

  46. Bodymovin
    ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ
    Bodymovin

    View Slide

  47. -PUUJF"OJNBUJPO7JFX
    1BSTFSΫϥε
    +40/

    ϑΝΠϧ

    View Slide

  48. -PUUJF"OJNBUJPO7JFX
    -PUUJF%SBXBCMF
    -PUUJF$PNQPTJUJPO
    1BSTFSΫϥε

    View Slide

  49. 1BSTFSΫϥε
    -PUUJF"OJNBUJPO7JFX
    -PUUJF%SBXBCMF
    -PUUJF$PNQPTJUJPO
    .PEFMΫϥε
    "OJNBUJPOΫϥε

    View Slide

  50. -PUUJF$PNQPTJUJPO1BSTFS

    -BZFS1BSTFS


    $POUFOU.PEFM1BSTFS


    "OJNBUBCMF5SBOTGPSN1BSTFS
    -BZFS


    $POUFOU.PEFM


    "OJNBUBCMF7BMVF
    1BSTFSΫϥε .PEFMΫϥε

    View Slide

  51. -BZFS

    $POUFOU.PEFM


    "OJNBUBCMF7BMVF
    $PNQPTJUJPO-BZFS
    4IBQF-BZFS
    4IBQF$POUFOU
    'JMM$POUFOU
    1BUI,FZGSBNF"OJNBUJPO

    $PMPS,FZGSBNF"OJNBUJPO
    .PEFMΫϥε "OJNBUJPOΫϥε

    View Slide

  52. -BZFS

    $POUFOU.PEFM


    "OJNBUBCMF7BMVF
    $PNQPTJUJPO-BZFS
    4IBQF-BZFS
    4IBQF$POUFOU
    'JMM$POUFOU
    1BUI,FZGSBNF"OJNBUJPO

    $PMPS,FZGSBNF"OJNBUJPO
    .PEFMΫϥε ,FZ1BUI&MFNFOU

    View Slide

  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Ϋϥεܦ༝Ͱ

    ࣮ߦ࣌ʹ஋Λ

    มԽͤ͞Δ͜ͱ͕Ͱ͖Δ

    View Slide

  54. CompositionLayer

    ↓

    Layer

    ↓

    ContentModel


    ShapeFill
    ↓

    AnimatableValue

    Content

    ↓

    FillContent
    ↓

    KeyframeAnimation
    .PEFMΫϥε "OJNBUJPOΫϥε
    @RestrictTo(LIBRARY)
    public interface KeyPathElement {
    void resolveKeyPath(KeyPath keyPath, int depth,
    List accumulator, KeyPath currentPartialKeyPath);
    void addValueCallback(T property,
    @Nullable LottieValueCallback callback);
    }
    public class LottieAnimationView extends AppCompatImageView {
    public void addValueCallback(
    KeyPath keyPath, T property, LottieValueCallback callback) {
    lottieDrawable.addValueCallback(keyPath, property, callback);
    }
    }

    View Slide

  55. CompositionLayer

    ↓

    Layer

    ↓

    ContentModel


    ShapeFill
    ↓

    AnimatableValue

    Content

    ↓

    FillContent
    ↓

    KeyframeAnimation
    .PEFMΫϥε "OJNBUJPOΫϥε
    @RestrictTo(LIBRARY)
    public interface KeyPathElement {
    void resolveKeyPath(KeyPath keyPath, int depth,
    List accumulator, KeyPath currentPartialKeyPath);
    void addValueCallback(T property,
    @Nullable LottieValueCallback callback);
    }
    public class LottieAnimationView extends AppCompatImageView {
    public void addValueCallback(
    KeyPath keyPath, T property, LottieValueCallback callback) {
    lottieDrawable.addValueCallback(keyPath, property, callback);
    }
    }

    View Slide

  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
    }

    View Slide

  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
    }

    View Slide

  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
    }

    View Slide

  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
    }

    View Slide

  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ߏ଄Λ೺ѲͰ͖Δͱ


    "&ͷͲͷཁૉʹ໰୊͕͋Δͷ͕

    ໌֬ʹͳΔͷͰσόοάͷޮ཰্͕͕Δ


    ࣮ߦ࣌ʹΞχϝʔγϣϯΛૢ࡞͠΍͘͢ͳΔ

    View Slide

  61. -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT
    -PUUJF͕ಈ͘࢓૊Έ
    -PUUJFΛऔΓר͘؀ڥ

    View Slide

  62. Bodymovin
    ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ

    View Slide

  63. Ξχϝʔγϣϯͷ

    मਖ਼
    ࠶ੜ͔ͯ͠Βमਖ਼ͷ

    ඞཁੑʹؾͮ͘
    ύεΛमਖ਼
    Bodymovin

    View Slide

  64. Ξχϝʔγϣϯͷ

    मਖ਼
    ࠶ੜ͔ͯ͠Βमਖ਼ͷ

    ඞཁੑʹؾͮ͘
    ύεΛमਖ਼
    Bodymovin
    ؔ࿈πʔϧ͕ଟ͍Ώ͑ʹ

    ख໭Γͷίετ΋ߴ͍ʂ

    View Slide

  65. Α͋͘ΔπϥΠ෦෼
    w ϓϥοτϑΥʔϜຖ͕αϙʔτ͢Δ"&ͷػೳͷࠩҟ
    w ϓϨϏϡʔ্ͷ࠶ੜͱ࣮ࡍͷΞϓϦ্Ͱ࠶ੜͰ

    Ξχϝʔγϣϯͷҹ৅ʹࠩҟ͕ੜ͡Δ
    w σβΠϯπʔϧؒͰͷύεσʔλͷಉظ
    w σβΠφʔɾΤϯδχΞؒͰϨΠϠʔߏ଄ͷڞ༗͕೉͍͠

    View Slide

  66. πʔϧؒͰͷύεσʔλͷಉظ
    w ɹ΍ͷεΫϦϓτ΍&YUFOTJPOΛ࢖ͬͯ

    ࣗಈԽͨ͠Γޮ཰Խ͢Δ
    w &YUFOTJPOʮ0WFSMPSEʯΛ࢖͏ͱ

    "*㲗"&ؒͷϑΝΠϧͷߦ͖དྷ͕؆୯ʹͳΔ

    View Slide

  67. αϙʔτ͢ΔAEͷػೳͷࠩҟ
    w MPUUJF3/ɾqVUUFSͳͲ͸಺෦Ͱґଘ͍ͯ͠Δ

    MPUUJFBOESPJEɾJ04͕࠷৽Ͱͳ͍ͷͰ஫ҙ
    w ػೳΛαϙʔτͯ͠ͳ͍ͷ͕

    #PEZNPWJOͳͷ͔MPUUJFͳͷ͔Ͱ໰୊Λ੾Γ෼͚Δ
    w +40/ϑΝΠϧڞ༗ͷ଎౓Λ্͛ͯ

    αϙʔτൣғ֎͔Ͳ͏͔ʹؾͮ͘λΠϛϯάΛૣΊΔ

    View Slide

  68. JSONϑΝΠϧڞ༗ͷ଎౓Λ্͛Δ
    w #PU͕23ίʔυɾϓϨϏϡʔΛࣗಈੜ੒
    w MPUUJFOPEFΛ࢖͑͹

    4FSWFSͰ΋-PUUJF͕࠶ੜՄೳ

    View Slide

  69. ϨΠϠʔߏ଄ͷڞ༗͕೉͍͠
    w $PNQPTJUJPO -BZFS $POUFOUʹ

    ࣝผ͠΍໊͍͢લΛ͚ͭΔ
    w "&ͷϑϩʔνϟʔτΛڞ༗͢Δ

    View Slide

  70. ϓϨϏϡʔ্ͱΞϓϦ্ͷࠩҟ
    w -PUUJFΛޮ཰తʹσόοά͢ΔͨΊͷ

    )ZQFSJPO"OESPJEϓϥάΠϯΛ࡞Γ·ͨ͠
    w ΞϓϦΛϏϧυ͠௚͢͜ͱͳ͘

    ϓϩύςΟΛมߋͨ͠Γ

    ࠶ੜ͢Δ+40/ϑΝΠϧΛมߋ͢Δ͜ͱ͕Ͱ͖·͢
    w IUUQTHJUIVCDPNZLPZBOPIZQFSJPOBUUSMPUUJF

    View Slide

  71. DEMO

    View Slide

  72. ·ͱΊ

    View Slide

  73. -PUUJFͷར༻ύλʔϯ
    -PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT
    -PUUJF͕ಈ͘࢓૊Έ
    -PUUJFΛऔΓר͘؀ڥ

    View Slide

  74. Bodymovin
    ΞχϝʔγϣϯΛ࡞Δ
    JSONʹॻ͖ग़͢
    JSONΛಡΈࠐΜͰ

    Ξχϝʔγϣϯඳը
    ύεΛ࡞Δ

    View Slide

  75. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide