pebble + javascriptでつくるスマートウォッチアプリ

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本体右側の３つのボタン操作をアプリから検出できる

Pebbleアプリのつくりかた

SDK

• Pebbleが提供するSDKを使ってアプリを開発

• 大きく２種類の開発方法がある

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