Pebble + JavaScriptでつくるスマートウォッチ

2014/11/16に開催された「JSBoard勉強会東京#1」で発表した際に使用したスライドです。

Transcript

1. Pebble + JavaScriptͰͭ͘Δ εϚʔτ΢ΥονΞϓϦ JSBoardษڧձ #1 / @kadoppe
2. @kadoppe Software Engineer
3. Question
4. Q1. 
 Pebble஌ͬͯΔਓʁ
5. Q2. 
 Pebble࣋ͬͯΔਓʁ
6. Q3. 
 PebbleΞϓϦ࡞ͬͯΔਓʁ
7. ࠓ೔ͷ໨త
 JavaScriptϓϩάϥϚʹ
 PebbleͷΞϓϦ։ൃʹڵຯΛ ࣋ͬͯ΋Β͏
8. ͓͜ͱΘΓ Pebble ≠ JSBoard
9. PebbleͬͯԿʁ • σδλϧ࣌ܭ Pebble Pebble Steel $99 $199 1FCCMF
   ࣸਅ 1FCCMF
   4UFBM
   ࣸਅ
10. PebbleͰԿ͕Ͱ͖Δͷʁ
11. 1. εϚϑΥͱͭͳ͕Δ 1FCCMF
    ެࣜΞϓϦ શͯͷ௨஌ ԻָϓϨΠϠૢ࡞౳ 1FCCMF
12. 2. ΞϓϦͰΧελϚΠζ͢Δ 1FCCMF
    ެࣜΞϓϦ Πϯετʔϧ ΞϓϦετΞ ʢ࠷େ8ͭ·Ͱʣ 1FCCMF
13. PebbleΞϓϦ͕ѻ͑Δ৘ใ
14. 1. ࣌ࠁ ࣌ܭͳͷͰ౰ͨΓલ
15. 
 1FCCMF 2. ֤छηϯαʔ৘ใ Ճ଎౓ηϯα ిࢠίϯύε GPS 1FCCMF
    ެࣜΞϓϦ ΞϓϦ
16. 
 1FCCMF 2. Web͔Βऔಘͨ͠৘ใ 1FCCMF
    ެࣜΞϓϦ ΞϓϦ ֤छ
    8FC
    "1* Bluetooth HTTP ը૾Ҿ༻ݩ: https://getpebble.com/checkout
17. ৭ʑ૊Έ߹ΘͤΔ͜ͱͰ
 Մೳੑ͸ແݶେ
18. PebbleΞϓϦͷछྨ
19. 1. Watchface • ࣌ܭϞʔυͷσβΠϯςʔϚ • ࣌ࠁ͚ͩͰͳ͘ɺ༷ʑͳ৘ใ͕දࣔՄೳ
20. 2. Watchapp • ࣌ܭϞʔυˠϝχϡʔ͔ΒىಈͰ͖ΔΞϓϦ • Pebbleຊମӈଆͷ̏ͭͷϘλϯૢ࡞Λ
 ΞϓϦ͔Βݕग़Ͱ͖Δ
21. PebbleΞϓϦͷͭ͘Γ͔ͨ
22. SDK • Pebble͕ఏڙ͢ΔSDKΛ࢖ͬͯΞϓϦΛ։ൃ • େ͖̎͘छྨͷ։ൃํ๏͕͋Δ
23. 1FCCMFެࣜΞϓϦ +BWB4DSJQU
    &OHJOF +BWB4DSJQU $ݴޠ 1. C & JavaScriptͰ։ൃ ɾUIදࣔ ɾηϯαʔ஋औಘ
 ɾεϚϑΥͱͷ௨৴ ɾWeb APIݺग़
 ɾGPS஋औಘ ɾPebbleͱͷ௨৴ ը૾Ҿ༻ݩ: https://getpebble.com/checkout 1FCCMF
24. ํ๏1ͷ໰୊఺ • Cݴޠͷ஌͕ࣝඞཁ • ௨৴ॲཧΛC & JavaScriptͰ࣮૷͢Δͷ͕खؒ
25. 1FCCMFެࣜΞϓϦ +BWB4DSJQU
    &OHJOF +BWB4DSJQU
    1FCCMFKTʣ 2. JavaScriptͷΈͰ։ൃ Ӆṭ 1FCCMF
26. ํ๏2ͷ໰୊఺ • ిྗফඅྔ͕ߴ͍ & UIߋ৽ͷ஗Ԇ͕ൃੜ • εϚϑΥଆͷJavaScript EngineͰUIߋ৽ॲཧ Λ͓͜ͳ͏ͨΊʢະௐࠪʣ • β൛ͷͨΊಈ࡞͕ෆ҆ఆ • Ұ෦ηϯαʔ৘ใΛऔಘ͢ΔͨΊͷAPI͕ͳ͍
27. ΞϓϦΛͭͬͯ͘ΈΔ ʢϥΠϒίʔσΟϯάʣ
28. ඞཁͳ΋ͷ • Webϒϥ΢β • PebbleެࣜΞϓϦΠϯετʔϧࡁΈεϚϑΥ • Pebbleຊମ
29. ͋Εʁ։ൃ؀ڥ͸ʁ
30. CloudPebble ϓϩδΣΫτ࡞੒ˠίʔσΟϯάˠίϯύΠϧ Pebble΁ͷΞϓϦసૹˠϩά֬ೝ
31. Webϒϥ΢β͚ͩͰ։ൃՄೳ
32. ͭ͘Δ΋ͷ • Watchface • ࣌ࠁΛදࣔ • ݱࡏ஍ͷ͓ఱؾΛදࣔ • GPS • OpenWeatherMap API
33. ϥΠϒίʔσΟϯάελʔτ (άμͬͨΒ͢Έ·ͤΜʣ https://github.com/kadoppe/pebble-gps-weather-watch
34. ϥΠϒίʔσΟϯά͓͠·͍
35. PebbleͷUIίϯϙʔωϯτ
36. Window • ΋ͬͱ΋جຊతͳUIίϯϙʔωϯτ • ࠲ඪɾαΠζΛࢦఆͯ͠ࢠཁૉΛ഑ஔͰ͖Δ • ςΩετ • ը૾ • ۣܗɾԁ
37. Card • ߏ଄Խ͞Εͨ৘ใΛදࣔ͢ΔͨΊͷWindow • λΠτϧ • αϒλΠτϧ • ຊจ • όφʔը૾
38. Menu • Ϧετ৘ใΛදࣔ͢ΔͨΊͷWindow • ϘλϯʹΑΔεΫϩʔϧ΋Մೳ
39. ͦͷଞUIίϯϙʔωϯτ • ը૾σʔλʢ2஋ը૾ͷΈʣͷදࣔ • Windowʹ഑ஔͨ͠ཁૉͷΞχϝʔγϣϯ • ۣܗ/ԁ
40. ࣗ༝ʹ૊Έ߹Θͤͯૉఢͳ
 ΞϓϦΛͭͬͯ͘Έ͍ͯͩ͘͞
41. Pebbleͷ໰୊఺
42. ೔ຊޠ͕จࣈԽ͚͢Δ • γεςϜʹ೔ຊޠϑΥϯτ͕૊Έࠐ·Εͯ
 ͍ͳ͍͜ͱ͕ݪҼ
43. ରࡦ1. ΧελϜϑΝʔϜ΢ΣΞ • Pebble ೔ຊޠ ʢͻΒ͕ͳɺΧλΧφʣ
 ϑΝʔϜ΢ΣΞΛPebbleʹΠϯετʔϧ͢Δ
 http://www.texpress.co.jp/pebble_hiragana • ׽ࣈ΋දࣔ͞ΕΔʢ1200จࣈछʣ • ࣗݾ੹೚Ͱ
44. ରࡦ2. αʔυύʔςΟ௨஌ΞϓϦ • εϚϑΥͷ௨஌ʢ೔ຊޠʣΛPebbleʹදࣔ͢ΔͨΊͷΞϓ Ϧ͕ଘࡏ͢Δ • iOS: PebbleCCʢཁ୤ࠈʣ • Android: YaNC PRO Pebble Notifications
 https://play.google.com/store/apps/details? id=com.runnerway.pebblenotification • ೔ຊޠ͕දࣔ͞ΕΔͷ͸αʔυύʔςΟΞϓϦ಺ͷΈ

45. ͦΜͳPebbleͰ͕͢
 ·ͣ͸೔ຊޠʹґଘ͠ͳ͍
 ΞϓϦ͔Β։ൃͯ͠Έ·ͤΜ͔ʁ
46. ͓͠·͍
 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
47. ը૾ग़ల http://en.wikipedia.org/wiki/ IPhone_5#mediaviewer/File:IPhone_5.png https://getpebble.com/pebble