Tweet
Tweet

Slide 1

Slide 1 text

Pebble + JavaScriptͰͭ͘Δ εϚʔτ΢ΥονΞϓϦ JSBoardษڧձ #1 / @kadoppe

Slide 2

Slide 2 text

@kadoppe Software Engineer

Slide 3

Slide 3 text

Question

Slide 4

Slide 4 text

Q1. 
 Pebble஌ͬͯΔਓʁ

Slide 5

Slide 5 text

Q2. 
 Pebble࣋ͬͯΔਓʁ

Slide 6

Slide 6 text

Q3. 
 PebbleΞϓϦ࡞ͬͯΔਓʁ

Slide 7

Slide 7 text

ࠓ೔ͷ໨త
 JavaScriptϓϩάϥϚʹ
 PebbleͷΞϓϦ։ൃʹڵຯΛ ࣋ͬͯ΋Β͏

Slide 8

Slide 8 text

͓͜ͱΘΓ Pebble ≠ JSBoard

Slide 9

Slide 9 text

PebbleͬͯԿʁ • σδλϧ࣌ܭ Pebble Pebble Steel $99 $199 1FCCMF ࣸਅ 1FCCMF 4UFBM ࣸਅ

Slide 10

Slide 10 text

PebbleͰԿ͕Ͱ͖Δͷʁ

Slide 11

Slide 11 text

1. εϚϑΥͱͭͳ͕Δ 1FCCMF ެࣜΞϓϦ શͯͷ௨஌ ԻָϓϨΠϠૢ࡞౳ 1FCCMF

Slide 12

Slide 12 text

2. ΞϓϦͰΧελϚΠζ͢Δ 1FCCMF ެࣜΞϓϦ Πϯετʔϧ ΞϓϦετΞ ʢ࠷େ8ͭ·Ͱʣ 1FCCMF

Slide 13

Slide 13 text

PebbleΞϓϦ͕ѻ͑Δ৘ใ

Slide 14

Slide 14 text

1. ࣌ࠁ ࣌ܭͳͷͰ౰ͨΓલ

Slide 15

Slide 15 text


 1FCCMF 2. ֤छηϯαʔ৘ใ Ճ଎౓ηϯα ిࢠίϯύε GPS 1FCCMF ެࣜΞϓϦ ΞϓϦ

Slide 16

Slide 16 text


 1FCCMF 2. Web͔Βऔಘͨ͠৘ใ 1FCCMF ެࣜΞϓϦ ΞϓϦ ֤छ 8FC"1* Bluetooth HTTP ը૾Ҿ༻ݩ: https://getpebble.com/checkout

Slide 17

Slide 17 text

৭ʑ૊Έ߹ΘͤΔ͜ͱͰ
 Մೳੑ͸ແݶେ

Slide 18

Slide 18 text

PebbleΞϓϦͷछྨ

Slide 19

Slide 19 text

1. Watchface • ࣌ܭϞʔυͷσβΠϯςʔϚ • ࣌ࠁ͚ͩͰͳ͘ɺ༷ʑͳ৘ใ͕දࣔՄೳ

Slide 20

Slide 20 text

2. Watchapp • ࣌ܭϞʔυˠϝχϡʔ͔ΒىಈͰ͖ΔΞϓϦ • Pebbleຊମӈଆͷ̏ͭͷϘλϯૢ࡞Λ
 ΞϓϦ͔Βݕग़Ͱ͖Δ

Slide 21

Slide 21 text

PebbleΞϓϦͷͭ͘Γ͔ͨ

Slide 22

Slide 22 text

SDK • Pebble͕ఏڙ͢ΔSDKΛ࢖ͬͯΞϓϦΛ։ൃ • େ͖̎͘छྨͷ։ൃํ๏͕͋Δ

Slide 23

Slide 23 text

1FCCMFެࣜΞϓϦ +BWB4DSJQU &OHJOF +BWB4DSJQU $ݴޠ 1. C & JavaScriptͰ։ൃ ɾUIදࣔ ɾηϯαʔ஋औಘ
 ɾεϚϑΥͱͷ௨৴ ɾWeb APIݺग़
 ɾGPS஋औಘ ɾPebbleͱͷ௨৴ ը૾Ҿ༻ݩ: https://getpebble.com/checkout 1FCCMF

Slide 24

Slide 24 text

ํ๏1ͷ໰୊఺ • Cݴޠͷ஌͕ࣝඞཁ • ௨৴ॲཧΛC & JavaScriptͰ࣮૷͢Δͷ͕खؒ

Slide 25

Slide 25 text

1FCCMFެࣜΞϓϦ +BWB4DSJQU &OHJOF +BWB4DSJQU 1FCCMFKTʣ 2. JavaScriptͷΈͰ։ൃ Ӆṭ 1FCCMF

Slide 26

Slide 26 text

ํ๏2ͷ໰୊఺ • ిྗফඅྔ͕ߴ͍ & UIߋ৽ͷ஗Ԇ͕ൃੜ • εϚϑΥଆͷJavaScript EngineͰUIߋ৽ॲཧ Λ͓͜ͳ͏ͨΊʢະௐࠪʣ • β൛ͷͨΊಈ࡞͕ෆ҆ఆ • Ұ෦ηϯαʔ৘ใΛऔಘ͢ΔͨΊͷAPI͕ͳ͍

Slide 27

Slide 27 text

ΞϓϦΛͭͬͯ͘ΈΔ ʢϥΠϒίʔσΟϯάʣ

Slide 28

Slide 28 text

ඞཁͳ΋ͷ • Webϒϥ΢β • PebbleެࣜΞϓϦΠϯετʔϧࡁΈεϚϑΥ • Pebbleຊମ

Slide 29

Slide 29 text

͋Εʁ։ൃ؀ڥ͸ʁ

Slide 30

Slide 30 text

CloudPebble ϓϩδΣΫτ࡞੒ˠίʔσΟϯάˠίϯύΠϧ Pebble΁ͷΞϓϦసૹˠϩά֬ೝ

Slide 31

Slide 31 text

Webϒϥ΢β͚ͩͰ։ൃՄೳ

Slide 32

Slide 32 text

ͭ͘Δ΋ͷ • Watchface • ࣌ࠁΛදࣔ • ݱࡏ஍ͷ͓ఱؾΛදࣔ • GPS • OpenWeatherMap API

Slide 33

Slide 33 text

ϥΠϒίʔσΟϯάελʔτ (άμͬͨΒ͢Έ·ͤΜʣ https://github.com/kadoppe/pebble-gps-weather-watch

Slide 34

Slide 34 text

ϥΠϒίʔσΟϯά͓͠·͍

Slide 35

Slide 35 text

PebbleͷUIίϯϙʔωϯτ

Slide 36

Slide 36 text

Window • ΋ͬͱ΋جຊతͳUIίϯϙʔωϯτ • ࠲ඪɾαΠζΛࢦఆͯ͠ࢠཁૉΛ഑ஔͰ͖Δ • ςΩετ • ը૾ • ۣܗɾԁ

Slide 37

Slide 37 text

Card • ߏ଄Խ͞Εͨ৘ใΛදࣔ͢ΔͨΊͷWindow • λΠτϧ • αϒλΠτϧ • ຊจ • όφʔը૾

Slide 38

Slide 38 text

Menu • Ϧετ৘ใΛදࣔ͢ΔͨΊͷWindow • ϘλϯʹΑΔεΫϩʔϧ΋Մೳ

Slide 39

Slide 39 text

ͦͷଞUIίϯϙʔωϯτ • ը૾σʔλʢ2஋ը૾ͷΈʣͷදࣔ • Windowʹ഑ஔͨ͠ཁૉͷΞχϝʔγϣϯ • ۣܗ/ԁ

Slide 40

Slide 40 text

ࣗ༝ʹ૊Έ߹Θͤͯૉఢͳ
 ΞϓϦΛͭͬͯ͘Έ͍ͯͩ͘͞

Slide 41

Slide 41 text

Pebbleͷ໰୊఺

Slide 42

Slide 42 text

೔ຊޠ͕จࣈԽ͚͢Δ • γεςϜʹ೔ຊޠϑΥϯτ͕૊Έࠐ·Εͯ
 ͍ͳ͍͜ͱ͕ݪҼ

Slide 43

Slide 43 text

ରࡦ1. ΧελϜϑΝʔϜ΢ΣΞ • Pebble ೔ຊޠ ʢͻΒ͕ͳɺΧλΧφʣ
 ϑΝʔϜ΢ΣΞΛPebbleʹΠϯετʔϧ͢Δ
 http://www.texpress.co.jp/pebble_hiragana • ׽ࣈ΋දࣔ͞ΕΔʢ1200จࣈछʣ • ࣗݾ੹೚Ͱ

Slide 44

Slide 44 text

ରࡦ2. αʔυύʔςΟ௨஌ΞϓϦ • εϚϑΥͷ௨஌ʢ೔ຊޠʣΛPebbleʹදࣔ͢ΔͨΊͷΞϓ Ϧ͕ଘࡏ͢Δ • iOS: PebbleCCʢཁ୤ࠈʣ • Android: YaNC PRO Pebble Notifications
 https://play.google.com/store/apps/details? id=com.runnerway.pebblenotification • ೔ຊޠ͕දࣔ͞ΕΔͷ͸αʔυύʔςΟΞϓϦ಺ͷΈ


Slide 45

Slide 45 text

ͦΜͳPebbleͰ͕͢
 ·ͣ͸೔ຊޠʹґଘ͠ͳ͍
 ΞϓϦ͔Β։ൃͯ͠Έ·ͤΜ͔ʁ

Slide 46

Slide 46 text

͓͠·͍
 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 47

Slide 47 text

ը૾ग़ల http://en.wikipedia.org/wiki/ IPhone_5#mediaviewer/File:IPhone_5.png https://getpebble.com/pebble