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
Pebble (写真)
Pebble Steal (写真)
Pebbleで何ができるの?
1. スマフォとつながる
Pebble 公式アプリ
全ての通知
音楽プレイヤ操作等Pebble
2. アプリでカスタマイズする
Pebble 公式アプリ
インストールアプリストア
(最大8つまで)Pebble
Pebbleアプリが扱える情報
1. 時刻 時計なので当たり前
Pebble
2. 各種センサー情報
加速度センサ電子コンパス
GPS
Pebble 公式アプリ
アプリ
Pebble
2. Webから取得した情報
Pebble 公式アプリ
アプリ 各種 Web API
Bluetooth HTTP
画像引用元: https://getpebble.com/checkout
色々組み合わせることで可能性は無限大
Pebbleアプリの種類
1. Watchface• 時計モードのデザインテーマ
• 時刻だけでなく、様々な情報が表示可能
2. Watchapp• 時計モード→メニューから起動できるアプリ
• Pebble本体右側の3つのボタン操作をアプリから検出できる
Pebbleアプリのつくりかた
SDK
• Pebbleが提供するSDKを使ってアプリを開発
• 大きく2種類の開発方法がある
Pebble公式アプリ
JavaScript Engine
JavaScript
C言語
1. C & JavaScriptで開発
・UI表示
・センサー値取得・スマフォとの通信
・Web API呼出
・GPS値取得
・Pebbleとの通信画像引用元: https://getpebble.com/checkout
Pebble
方法1の問題点• C言語の知識が必要
• 通信処理をC & JavaScriptで実装するのが手間
Pebble公式アプリ
JavaScript Engine
JavaScript (Pebble.js)
2. JavaScriptのみで開発
隠蔽
Pebble
方法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
Top Related