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
200
Pebble + JavaScriptでつくるスマートウォッチ
2014/11/16に開催された「JSBoard勉強会東京#1」で発表した際に使用したスライドです。
kadoppe
November 24, 2014
Tweet
Share
More Decks by kadoppe
See All by kadoppe
一年間スタートアップのCTOをやってきて学んだこと
kadoppe
1
720
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.7k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
950
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
1.8k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
5.7k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
2k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.3k
Firefox OSでSVGをつかってみた
kadoppe
0
100
まだ間に合うHTML5 - Yeomanで追いつけ!高速Webアプリ開発
kadoppe
0
140
Other Decks in Technology
See All in Technology
JEP 480: Structured Concurrency
aya_ebata
0
130
OSTという文化を組織に根付かせてみた
sansantech
PRO
2
390
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
240
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
230
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
180
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
460
Discovering AI Models
picardparis
4
3.9k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
Road to Single Activity
yurihondo
2
240
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
36
7k
Optimizing for Happiness
mojombo
375
69k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Docker and Python
trallard
39
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Thoughts on Productivity
jonyablonski
66
4.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Infographics Made Easy
chrislema
239
18k
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