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
910
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.9k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
1k
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
2k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
7.2k
プレイドのエンジニアからみた「正しいものを正しくつくる」
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
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
220
なごミュ@SPAJAM2025 第二回予選
1901drama
0
120
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
18
52k
ECS モニタリング手法大整理
yendoooo
1
110
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
35
16k
OpenAPIから画面生成に挑戦した話
koinunopochi
0
110
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
180
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
110
Goでマークダウンの独自記法を実装する
lag129
0
160
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
240
LLMエージェント時代に適応した開発フロー
hiragram
1
320
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Site-Speed That Sticks
csswizardry
10
780
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
How to Ace a Technical Interview
jacobian
279
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Producing Creativity
orderedlist
PRO
347
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
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