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

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
Pebble
(写真)
Pebble
Steal
(写真)
$99 $199

10. Pebbleで何ができるの？

11. 1. スマフォとつながる
Pebble
公式アプリ
全ての通知
音楽プレイヤ操作等
Pebble

12. 2. アプリでカスタマイズする
Pebble
公式アプリ
インストール
アプリストア
（最大8つまで）
Pebble

13. Pebbleアプリが扱える情報

14. 1. 時刻
時計なので当たり前

15. 2. 各種センサー情報
Pebble
Pebble
公式アプリ
アプリ
加速度センサ
電子コンパスGPS

16. 2. Webから取得した情報
Pebble
Pebble
公式アプリ
アプリ各種
Web API
Bluetooth HTTP
画像引用元: https://getpebble.com/checkout

17. 色々組み合わせることで
可能性は無限大

18. Pebbleアプリの種類

19. 1. Watchface
• 時計モードのデザインテーマ
• 時刻だけでなく、様々な情報が表示可能

20. 2. Watchapp
• 時計モード→メニューから起動できるアプリ
• Pebble本体右側の３つのボタン操作を
アプリから検出できる

21. Pebbleアプリのつくりかた

22. SDK
• Pebbleが提供するSDKを使ってアプリを開発
• 大きく２種類の開発方法がある

23. 1. C & JavaScriptで開発
Pebble公式アプリ
JavaScript
Engine
JavaScript
C言語
・UI表示
・センサー値取得
・スマフォとの通信
・Web API呼出
・GPS値取得
・Pebbleとの通信
画像引用元: https://getpebble.com/checkout
Pebble

24. 方法1の問題点
• C言語の知識が必要
• 通信処理をC & JavaScriptで実装するのが手間

25. 2. JavaScriptのみで開発
Pebble公式アプリ
JavaScript
Engine
JavaScript (Pebble.js）
隠蔽
Pebble

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