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

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

kadoppe
November 24, 2014

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

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

kadoppe

November 24, 2014
Tweet

More Decks by kadoppe

Other Decks in Technology

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