Kyashで使っているTutorial Library / Tutorial Library in Kyash

Potatotips #52

Transcript

1. KyashͰ࢖͍ͬͯΔ
   Tutorial Library
   Potatotips #52
   @konifar
   

   View Slide

2. ViewΛϋΠϥΠτͯ͠
   ʮ͜ͷϘλϯ͸͜͏࢖͏ΜͩΑʯ
   Έ͍ͨʹઆ໌͢ΔΞϨͷ࿩Ͱ͢
   

   View Slide

3. 1 2 3
   

   View Slide

4. Similar libraries
   • https://github.com/TakuSemba/Spotlight
   • https://github.com/itzikBraun/TutorialView
   • https://github.com/sjwall/
   MaterialTapTargetPrompt
   • https://github.com/Popalay/Tutors
   

   View Slide

5. ͳͥࣗ෼Ͱ࡞Δ͜ͱʹ͔ͨ͠
   1. ϋΠϥΠτ෦෼͕˘͔̋ͷ΋ͷ͔͠ͳ͍
   • ؙ֯ʹ΋ରԠ͔ͨͬͨ͠
   2. ϋΠϥΠτ෦෼ͷΞχϝʔγϣϯ͔͠ରԠ͍ͯ͠ͳ͍
   • ຊ౰ʹॏཁͳͷ͸ςΩετͳͷͰςΩετΛಈ͔͍ͨ͠
   3. ςΩετ෦෼ͷϨΠΞ΢τΛΧελϚΠζ͠ʹ͍͘
   • ਧ͖ग़͠ͳͲϨΠΞ΢τΛࣗ༝ʹηοτ͍ͨ͠
   

   View Slide

6. https://github.com/Kyash/
   android-target-instructions
   

   View Slide

7. How it works
   • ϋΠϥΠτ͍ͨ͠෦෼Λ”Target”ͱ͍͏୯ҐͰଊ͑ͯTargetΠϯελϯεΛ࡞Δɻ
   SimpleTargetͱ͍͏Ϋϥε͕༻ҙ͞Ε͍ͯΔ͕ɺࣗ෼ͰΧελϜͰ࡞Δ͜ͱ΋Ͱ͖Δɻ
   • ࡞ͬͨTargetΛTargetInstructionsʹηοτͯ͠start()ϝιουΛݺͿͱදࣔ͞ΕΔɻ
   

   View Slide

8. 1. ϋΠϥΠτ෦෼ͷܗ
   Square Circle
   

   View Slide

9. 1. ϋΠϥΠτ෦෼ͷܗ
   • highlightRadiusͷ஋Ληοτ͢Δɻ
   • Կ΋ηοτ͠ͳ͚Ε͹squareɺେ͖͍஋Ληοτ͢Ε͹circleʹͳΔ
   

   View Slide

10. 2. ςΩετ෦෼ͷΞχϝʔγϣϯ
    Overshoot LinearOutSlowIn
    

    View Slide

11. 2. ςΩετ෦෼ͷΞχϝʔγϣϯ
    • interpolator΍durationΛηοτͰ͖Δɻ
    • ࠓ͸scaleΞχϝʔγϣϯͷΈ͕ͩɺfade΋͋ͬͯ΋͍͍͔΋ɻ
    

    View Slide

12. 3. ςΩετ෦෼ͷϨΠΞ΢τ
    Default Custom
    

    View Slide

13. 3. ςΩετ෦෼ͷϨΠΞ΢τ
    ҎԼͷidΛ࣋ͬͨϨΠΞ΢τΛ࡞Δ
    • @id/top_caret
    • @id/message
    • @id/title
    • @id/description
    • @id/bottom_caret
    

    View Slide

14. 3. ςΩετ෦෼ͷϨΠΞ΢τ
    • setMessageLayoutResId() Ͱ࡞ͬͨϨΠΞ΢τΛηοτ͢Δ͚ͩɻ
    • ϨΠΞ΢τΛؙ͝ͱ੾Γସ͑ΒΕΔͷͰɺςΩετ΍എܠͷ৭ɺܗɺਧ͖ग़
    ͠ͷ༗ແͳͲࣗ༝ʹΧελϚΠζͰ͖Δɻ
    

    View Slide

15. ·ͱΊ
    

    View Slide

16. Tutorial Library͸
    ͨ͘͞Μ͋Δ͚Ͳ
    ͲΕ΋ΘΓͱบ͕͋Δ
    

    View Slide

17. KyashͷLibrary͸
    1. ؙ֯ରԠͷϋΠϥΠτ
    2. ςΩετΞχϝʔγϣϯ
    3. ϨΠΞ΢τͷࣗ༝౓
    ͕ڧΈ
    

    View Slide

18. ΋͠ཁ݅ʹ߹͑͹
    ࢖ͬͯΈͯͶ
    ߹Θͳ͚Ε͹ίʔυݟͯ
    ਅࣅ͢Δͱ͍͍͔΋
    

    View Slide

19. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    https://github.com/Kyash/
    android-target-instructions
    

    View Slide