Pebble + JavaScriptでつくるスマートウォッチアプリ
-
Upload
kohei-kadowaki -
Category
Technology
-
view
2.749 -
download
2
description
Transcript of Pebble + JavaScriptでつくるスマートウォッチアプリ
![Page 1: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/1.jpg)
Pebble + JavaScriptでつくる スマートウォッチアプリ
JSBoard勉強会 #1 / @kadoppe
![Page 2: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/2.jpg)
@kadoppe Software Engineer
![Page 3: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/3.jpg)
Question
![Page 4: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/4.jpg)
Q1. Pebble知ってる人?
![Page 5: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/5.jpg)
Q2. Pebble持ってる人?
![Page 6: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/6.jpg)
Q3. Pebbleアプリ作ってる人?
![Page 7: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/7.jpg)
今日の目的JavaScriptプログラマにPebbleのアプリ開発に興味を持ってもらう
![Page 8: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/8.jpg)
おことわり Pebble ≠ JSBoard
![Page 9: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/9.jpg)
Pebbleって何?• デジタル時計
Pebble Pebble Steel
$99 $199
Pebble (写真)
Pebble Steal (写真)
![Page 10: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/10.jpg)
Pebbleで何ができるの?
![Page 11: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/11.jpg)
1. スマフォとつながる
Pebble 公式アプリ
全ての通知
音楽プレイヤ操作等Pebble
![Page 12: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/12.jpg)
2. アプリでカスタマイズする
Pebble 公式アプリ
インストールアプリストア
(最大8つまで)Pebble
![Page 13: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/13.jpg)
Pebbleアプリが扱える情報
![Page 14: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/14.jpg)
1. 時刻 時計なので当たり前
![Page 15: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/15.jpg)
Pebble
2. 各種センサー情報
加速度センサ電子コンパス
GPS
Pebble 公式アプリ
アプリ
![Page 16: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/16.jpg)
Pebble
2. Webから取得した情報
Pebble 公式アプリ
アプリ 各種 Web API
Bluetooth HTTP
画像引用元: https://getpebble.com/checkout
![Page 17: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/17.jpg)
色々組み合わせることで可能性は無限大
![Page 18: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/18.jpg)
Pebbleアプリの種類
![Page 19: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/19.jpg)
1. Watchface• 時計モードのデザインテーマ
• 時刻だけでなく、様々な情報が表示可能
![Page 20: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/20.jpg)
2. Watchapp• 時計モード→メニューから起動できるアプリ
• Pebble本体右側の3つのボタン操作をアプリから検出できる
![Page 21: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/21.jpg)
Pebbleアプリのつくりかた
![Page 22: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/22.jpg)
SDK
• Pebbleが提供するSDKを使ってアプリを開発
• 大きく2種類の開発方法がある
![Page 23: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/23.jpg)
Pebble公式アプリ
JavaScript Engine
JavaScript
C言語
1. C & JavaScriptで開発
・UI表示
・センサー値取得・スマフォとの通信
・Web API呼出
・GPS値取得
・Pebbleとの通信画像引用元: https://getpebble.com/checkout
Pebble
![Page 24: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/24.jpg)
方法1の問題点• C言語の知識が必要
• 通信処理をC & JavaScriptで実装するのが手間
![Page 25: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/25.jpg)
Pebble公式アプリ
JavaScript Engine
JavaScript (Pebble.js)
2. JavaScriptのみで開発
隠蔽
Pebble
![Page 26: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/26.jpg)
方法2の問題点• 電力消費量が高い & UI更新の遅延が発生
• スマフォ側のJavaScript EngineでUI更新処理をおこなうため(未調査)
• β版のため動作が不安定
• 一部センサー情報を取得するためのAPIがない
![Page 27: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/27.jpg)
アプリをつくってみる (ライブコーディング)
![Page 28: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/28.jpg)
必要なもの• Webブラウザ
• Pebble公式アプリインストール済みスマフォ
• Pebble本体
![Page 29: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/29.jpg)
あれ?開発環境は?
![Page 30: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/30.jpg)
CloudPebbleプロジェクト作成→コーディング→コンパイル
Pebbleへのアプリ転送→ログ確認
![Page 31: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/31.jpg)
Webブラウザだけで開発可能
![Page 32: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/32.jpg)
つくるもの• Watchface
• 時刻を表示
• 現在地のお天気を表示
• GPS
• OpenWeatherMap API
![Page 33: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/33.jpg)
ライブコーディングスタート (グダったらすみません)
https://github.com/kadoppe/pebble-gps-weather-watch
![Page 34: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/34.jpg)
ライブコーディングおしまい
![Page 35: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/35.jpg)
PebbleのUIコンポーネント
![Page 36: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/36.jpg)
Window
• もっとも基本的なUIコンポーネント
• 座標・サイズを指定して子要素を配置できる
• テキスト
• 画像
• 矩形・円
![Page 37: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/37.jpg)
Card
• 構造化された情報を表示するためのWindow
• タイトル
• サブタイトル
• 本文
• バナー画像
![Page 38: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/38.jpg)
Menu
• リスト情報を表示するためのWindow
• ボタンによるスクロールも可能
![Page 39: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/39.jpg)
その他UIコンポーネント• 画像データ(2値画像のみ)の表示
• Windowに配置した要素のアニメーション
• 矩形/円
![Page 40: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/40.jpg)
自由に組み合わせて素敵な アプリをつくってみてください
![Page 41: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/41.jpg)
Pebbleの問題点
![Page 42: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/42.jpg)
日本語が文字化けする• システムに日本語フォントが組み込まれていないことが原因
![Page 43: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/43.jpg)
対策1. カスタムファームウェア• Pebble 日本語 (ひらがな、カタカナ)
ファームウェアをPebbleにインストールするhttp://www.texpress.co.jp/pebble_hiragana
• 漢字も表示される(1200文字種)
• 自己責任で
![Page 44: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/44.jpg)
対策2. サードパーティ通知アプリ• スマフォの通知(日本語)をPebbleに表示するためのアプリが存在する
• iOS: PebbleCC(要脱獄)
• Android: YaNC PRO Pebble Notifications https://play.google.com/store/apps/details?id=com.runnerway.pebblenotification
• 日本語が表示されるのはサードパーティアプリ内のみ
![Page 45: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/45.jpg)
そんなPebbleですが
まずは日本語に依存しない アプリから開発してみませんか?
![Page 46: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/46.jpg)
おしまいご清聴ありがとうございました
![Page 47: Pebble + JavaScriptでつくるスマートウォッチアプリ](https://reader034.fdocuments.net/reader034/viewer/2022042518/5596f99c1a28ab80228b4700/html5/thumbnails/47.jpg)
画像出展
http://en.wikipedia.org/wiki/IPhone_5#mediaviewer/File:IPhone_5.png
https://getpebble.com/pebble