FitbitのClock faceを作ってみた / Fitbit Conference 2018 Versa

20180605 Fitbit Developers and Users Conference 2018 versa で発表した内容です

Transcript

1. waniwatch toriwatch Fitbit
   Fitbit Clockface
   @mario_kada
   20180605 Fitbit Developers and Users Conference 2018 versa
   

   View Slide

2. Mari Okada
   CASH
   
   Pebble
   Pebble
   Fitbit Versa
   

   View Slide

3. ϓϩάϥϛϯάॳ৺ऀ͕Pebble Time WatchfaceΛ࡞ͬͯΈͨ
   https://qiita.com/mariokada/items/befdb1b4a02db4d71726
   

   View Slide

4. toriwatch for Fitbit
   
   https://gam. tbit.com/gallery/clock/143f8b5f-d7b3-4f2b-af3e-82c11e6aae75
   

   View Slide

5. Clockface
   

   View Slide

6. - tbit studio
   

   View Slide

7. DEMO
   

   View Slide

8. Figma
   Pixen
   

   View Slide

9. toriwatch
   Heart Rate
   tori
   

   View Slide

10. Heart Rate
    https://dev. tbit.com/build/reference/device-api/heart-rate/
    https://dev. tbit.com/build/reference/device-api/user-activity/
    

    View Slide

11. Fitbit 3
    LECO
    ex. LECo 1976_01234567890 :
    

    View Slide

12. View Slide

13. &
    ࢀߟɿ https://github.com/Fitbit/sdk-lcd-clock
    app/index.js
    

    View Slide

14. ࢀߟɿ https://github.com/Fitbit/sdk-lcd-clock
    Resources/index.gui
    &
    

    View Slide

15. View Slide

16. React JSX
    ✌
    settings/index.jsx
    

    View Slide

17. toriwatch
    Heart Rate
    tori
    

    View Slide

18. https://gam. tbit.com/ Gallery App Manager
    

    View Slide

19. -
    package.json
    Clockface
    ⚠
    

    View Slide

20. - DL
    Publish .fba
    

    View Slide

21. https://gam. tbit.com/ Gallery App Manager
    

    View Slide

22. 1 5
    .fba URL
    DL
    

    View Slide

23. Fitbit
    ex. Aria
    Calendar
    Pebble
    ☀
    

    View Slide

24. Fitbit Community
    Discord Developper Community
    

    View Slide

25. View Slide

26. UTDESIGN
    Fitbit
    Gumroad
    Clockface
    

    View Slide

27. ࠓճͷFitbit VersaͷൃചΛ͖͔͚ͬʹɺ
    ΋ͬͱ΋ͬͱ೔ຊͷ։ൃऀίϛϡχςΟ΋
    ׆ੑԽ͍͖͍ͯͨ͠ʂ
    ੋඇɺ੝Γ্͍͖͛ͯ·͠ΐ͏ʂ
    

    View Slide

28. toriwatch
    https://github.com/mario-kada/toriwatch-for- tbit
    

    View Slide

29. View Slide