Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Pebble + JavaScriptでつくるスマートウォッチ
Search
kadoppe
November 24, 2014
Technology
0
230
Pebble + JavaScriptでつくるスマートウォッチ
2014/11/16に開催された「JSBoard勉強会東京#1」で発表した際に使用したスライドです。
kadoppe
November 24, 2014
Tweet
Share
More Decks by kadoppe
See All by kadoppe
一年間スタートアップのCTOをやってきて学んだこと
kadoppe
1
920
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.9k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
1k
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
2k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
7.4k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
2.2k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.4k
Firefox OSでSVGをつかってみた
kadoppe
0
140
まだ間に合うHTML5 - Yeomanで追いつけ!高速Webアプリ開発
kadoppe
0
170
Other Decks in Technology
See All in Technology
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
150
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
160
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
250
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
180
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
130
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
4 Signs Your Business is Dying
shpigford
185
22k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Being A Developer After 40
akosma
91
590k
Docker and Python
trallard
46
3.6k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
GitHub's CSS Performance
jonrohan
1032
470k
Transcript
Pebble + JavaScriptͰͭ͘Δ εϚʔτΥονΞϓϦ JSBoardษڧձ #1 / @kadoppe
@kadoppe Software Engineer
Question
Q1. PebbleͬͯΔਓʁ
Q2. Pebble࣋ͬͯΔਓʁ
Q3. PebbleΞϓϦ࡞ͬͯΔਓʁ
ࠓͷత JavaScriptϓϩάϥϚʹ PebbleͷΞϓϦ։ൃʹڵຯΛ ࣋ͬͯΒ͏
͓͜ͱΘΓ Pebble ≠ JSBoard
PebbleͬͯԿʁ • σδλϧ࣌ܭ Pebble Pebble Steel $99 $199 1FCCMF ࣸਅ
1FCCMF 4UFBM ࣸਅ
PebbleͰԿ͕Ͱ͖Δͷʁ
1. εϚϑΥͱͭͳ͕Δ 1FCCMF ެࣜΞϓϦ શͯͷ௨ ԻָϓϨΠϠૢ࡞ 1FCCMF
2. ΞϓϦͰΧελϚΠζ͢Δ 1FCCMF ެࣜΞϓϦ Πϯετʔϧ ΞϓϦετΞ ʢ࠷େ8ͭ·Ͱʣ 1FCCMF
PebbleΞϓϦ͕ѻ͑Δใ
1. ࣌ࠁ ࣌ܭͳͷͰͨΓલ
1FCCMF 2. ֤छηϯαʔใ Ճηϯα ిࢠίϯύε GPS 1FCCMF ެࣜΞϓϦ ΞϓϦ
1FCCMF 2. Web͔Βऔಘͨ͠ใ 1FCCMF ެࣜΞϓϦ ΞϓϦ ֤छ 8FC"1* Bluetooth
HTTP ը૾Ҿ༻ݩ: https://getpebble.com/checkout
৭ʑΈ߹ΘͤΔ͜ͱͰ Մೳੑແݶେ
PebbleΞϓϦͷछྨ
1. Watchface • ࣌ܭϞʔυͷσβΠϯςʔϚ • ࣌ࠁ͚ͩͰͳ͘ɺ༷ʑͳใ͕දࣔՄೳ
2. Watchapp • ࣌ܭϞʔυˠϝχϡʔ͔ΒىಈͰ͖ΔΞϓϦ • Pebbleຊମӈଆͷ̏ͭͷϘλϯૢ࡞Λ ΞϓϦ͔Βݕग़Ͱ͖Δ
PebbleΞϓϦͷͭ͘Γ͔ͨ
SDK • Pebble͕ఏڙ͢ΔSDKΛͬͯΞϓϦΛ։ൃ • େ͖̎͘छྨͷ։ൃํ๏͕͋Δ
1FCCMFެࣜΞϓϦ +BWB4DSJQU &OHJOF +BWB4DSJQU $ݴޠ 1. C & JavaScriptͰ։ൃ ɾUIදࣔ
ɾηϯαʔऔಘ ɾεϚϑΥͱͷ௨৴ ɾWeb APIݺग़ ɾGPSऔಘ ɾPebbleͱͷ௨৴ ը૾Ҿ༻ݩ: https://getpebble.com/checkout 1FCCMF
ํ๏1ͷ • Cݴޠͷ͕ࣝඞཁ • ௨৴ॲཧΛC & JavaScriptͰ࣮͢Δͷ͕खؒ
1FCCMFެࣜΞϓϦ +BWB4DSJQU &OHJOF +BWB4DSJQU 1FCCMFKTʣ 2. JavaScriptͷΈͰ։ൃ Ӆṭ 1FCCMF
ํ๏2ͷ • ిྗফඅྔ͕ߴ͍ & UIߋ৽ͷԆ͕ൃੜ • εϚϑΥଆͷJavaScript EngineͰUIߋ৽ॲཧ Λ͓͜ͳ͏ͨΊʢະௐࠪʣ •
β൛ͷͨΊಈ࡞͕ෆ҆ఆ • Ұ෦ηϯαʔใΛऔಘ͢ΔͨΊͷAPI͕ͳ͍
ΞϓϦΛͭͬͯ͘ΈΔ ʢϥΠϒίʔσΟϯάʣ
ඞཁͳͷ • Webϒϥβ • PebbleެࣜΞϓϦΠϯετʔϧࡁΈεϚϑΥ • Pebbleຊମ
͋Εʁ։ൃڥʁ
CloudPebble ϓϩδΣΫτ࡞ˠίʔσΟϯάˠίϯύΠϧ PebbleͷΞϓϦసૹˠϩά֬ೝ
Webϒϥβ͚ͩͰ։ൃՄೳ
ͭ͘Δͷ • Watchface • ࣌ࠁΛදࣔ • ݱࡏͷ͓ఱؾΛදࣔ • GPS •
OpenWeatherMap API
ϥΠϒίʔσΟϯάελʔτ (άμͬͨΒ͢Έ·ͤΜʣ https://github.com/kadoppe/pebble-gps-weather-watch
ϥΠϒίʔσΟϯά͓͠·͍
PebbleͷUIίϯϙʔωϯτ
Window • ͬͱجຊతͳUIίϯϙʔωϯτ • ࠲ඪɾαΠζΛࢦఆͯ͠ࢠཁૉΛஔͰ͖Δ • ςΩετ • ը૾ •
ۣܗɾԁ
Card • ߏԽ͞ΕͨใΛදࣔ͢ΔͨΊͷWindow • λΠτϧ • αϒλΠτϧ • ຊจ •
όφʔը૾
Menu • ϦετใΛදࣔ͢ΔͨΊͷWindow • ϘλϯʹΑΔεΫϩʔϧՄೳ
ͦͷଞUIίϯϙʔωϯτ • ը૾σʔλʢ2ը૾ͷΈʣͷදࣔ • Windowʹஔͨ͠ཁૉͷΞχϝʔγϣϯ • ۣܗ/ԁ
ࣗ༝ʹΈ߹Θͤͯૉఢͳ ΞϓϦΛͭͬͯ͘Έ͍ͯͩ͘͞
Pebbleͷ
ຊޠ͕จࣈԽ͚͢Δ • γεςϜʹຊޠϑΥϯτ͕Έࠐ·Εͯ ͍ͳ͍͜ͱ͕ݪҼ
ରࡦ1. ΧελϜϑΝʔϜΣΞ • Pebble ຊޠ ʢͻΒ͕ͳɺΧλΧφʣ ϑΝʔϜΣΞΛPebbleʹΠϯετʔϧ͢Δ http://www.texpress.co.jp/pebble_hiragana • ࣈදࣔ͞ΕΔʢ1200จࣈछʣ
• ࣗݾͰ
ରࡦ2. αʔυύʔςΟ௨ΞϓϦ • εϚϑΥͷ௨ʢຊޠʣΛPebbleʹදࣔ͢ΔͨΊͷΞϓ Ϧ͕ଘࡏ͢Δ • iOS: PebbleCCʢཁࠈʣ • Android:
YaNC PRO Pebble Notifications https://play.google.com/store/apps/details? id=com.runnerway.pebblenotification • ຊޠ͕දࣔ͞ΕΔͷαʔυύʔςΟΞϓϦͷΈ
ͦΜͳPebbleͰ͕͢ ·ͣຊޠʹґଘ͠ͳ͍ ΞϓϦ͔Β։ൃͯ͠Έ·ͤΜ͔ʁ
͓͠·͍ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
ը૾ग़ల http://en.wikipedia.org/wiki/ IPhone_5#mediaviewer/File:IPhone_5.png https://getpebble.com/pebble