Pebbleハッカソンで発表した資料です。 開発入門向けというよりも、Pebbleってなんやねんというところから話を始めます。

1. Pebbleハッカソン
@Bob_Mk2

2. 流れ
1. Pebbleとは？
2. Pebbleと親機
3. 開発方法に関して
4. HelloWorld
5. まとめ

3. Pebbleとは？

4. Pebble
 腕時計型デバイス
 長持ち
 充電しなくても1週間くらい持つ
 始まりはKickstarter
 最近特定クラスタで熱い
 開発環境が整ってる
皆さん、もう買いましたよね？

5. 時計盤(Watchface)の切り替えが楽しい
 いろいろな人が作ってるので妙に種類が豊富
YWeather
PalmOS
DIGIBORG V3 Rosewright D
Flappy Bird 2

6. どんなWatchfaceがあるの？
 多いのは時計+α(天気や温度)が分かるもの
Real Weather SmartStatus+
 凝った見た目のもの（怒られそうなもの）
Number Scanner Supre Mario Land DOOM

7. アプリ(WatchApp)もあります
 便利系
 ゲーム
Evernote eBay Misfit
PebblePong 2 Solitaire PebbleBan

8. Pebble内のFaceとAppの位置づけ
Watchface
Face
1
…
Face
8
メニュー
Watchapp
Alarms
Settings
Watchapp A
…
Watchapp n
App 1
App n

9. Pebbleと親機

10. 親機？
 Pebble単体だと本当にただの時計です
 親機と繋がることで色々できることが増えます
 親機＝iPhoneやAndroid
 WindowsPhoneは無理ぽ
 Pebble ⇔ 親機間はBluetooth接続

11. 親機がいると何ができるの？(1/3)
 FaceやAppのインストールや設定
 親機上の公式アプリを使うことで可能

12. 親機がいると何ができるの？(2/3)
 各FaceやApp の設定
 ※設定画面はWebViewで開かれる
 → ウェブ上のどこかに設定画面の配置が必要

13. 親機がいると何ができるの？(3/3)
 ネットワーク接続
 天気や気温は何らかのAPIを叩いている
 その結果をPebbleに流し込んでいる
 取得した画像を加工してPebbleで表示も可能
 位置情報取得
 親機側の位置情報が有効になってる必要有り
 現在位置の天気はだいたいこれを使っているはず

14. つまり親機が頑張る
 色々できる(ように見える)のは親機の頑張り
 ネットワーク繋がるのは親機のみ
 Pebble単体で取れる情報は現在時刻ぐらい
 定期的に親機に情報要求するのが基本的
 30分毎に天気の更新をする、など
 AppMessageという仕組みでやりとり
情報ください！
ほい

15. 開発方法に関して

16. そもそも何が作れるの？
 Watchface
 時計盤
 シェイクのみ検知可
 Watchapp
 ゲームや便利アプリとか
 ボタン入力が取れます
 作り方はほとんど同じ
 開発途中で切り替えるのも比較的簡単
シェイク
入力取れる

17. 基本的な開発スタイル
PC 親機(Android / OS X) 子機(Pebble)
3. これ入れて
2. ビルドす
る
1. 鯖立て
る
4. これ入れて
ケーブル無しで開発できるのが
GOOD

18. 開発方法
1. Pebble SDK
 Pebble側はC、親機側はJavascript で書く
 公式「あ、Windows の人はVM 入れてね＾＾」
2. CloudPebble
 ブラウザ上で全て完結するので楽
 難しいことしないのであればこれだけでイナフ
3. Pebble.js (beta)
 全部Javascript だけで書ける
 まだ触れてないので何とも

19. CloudPebble
 クラウド上で開発が可能
 開発環境をローカルに整える必要無し
 やったぜ
 基本的なことは全てできる
 ローカルでやると手間な箇所も吸収してくれる
 開発環境もプロジェクト毎に3種類から選べる
 Pebble SDK
 Pebble.js
 Simply.js

20. 見た目

21. そこそこカスタマイズ可能
 テーマ
 入力補完方法
 As-you-type, Ctrl+Space
 キーバインド
 Standard, vim-like, emacs-like
 インデント形式
 spaces, tabs
 タブ幅

22. CloudPebbleで他にできること
 Githubとの連携
 プロジェクト開始時にGithub上からインポート可
 後からGithub上に上げたくなっても大丈夫
 ログの確認
 ビルド時のログ
 アプリ実行時のログ

23. つよい

24. もうCloudPebbleだけでいいじゃん
 はい
 必要になったときに環境を整えれば良い
1. 外部ライブラリをばりばり使う場合
 CloudPebble上だとコピペ必須（辛い）
2. なんか調子悪い時
 親機に流し込む際に延々と「準備中」で進まなくなる
 何が起きてるのかCloudPebble上からだと確認しづらい
 最初はクラウド、後からローカルも可
 必要なものはクラウド上からzipで落とせる
とっかかりやすい！（大切）

25. HelloWorld

26. 流れ
1. 事前準備
2. CloudPebbleにログイン
3. プロジェクトをつくる
4. ビルドして実行
5. 終わり

27. 本当にこれだけ？
 はい
 テンプレートに「HelloWorld」がありました

28. 1. 事前準備(1/2)
 Pebbleアカウント
 ここでの説明は割愛
 親機のPebbleアプリが最新版か確認
 Settings > Version から確認可能
 iOS の場合は2.5
 Android の場合は2.1.0-beta9
 Playストアのものだとダメな場合がある
 ひどい…
 最新版はCloudPebble にリンクが貼られてるので
 とりあえず後まわしでOK

29. 2. 事前準備(2/2)
 親機がPCと同じ箇所にWiFi接続しているか確認
 PCと親機が同一LAN内にいる必要があるため
 Pebbleアプリを開発用に設定変更
 Setting > Developer Options
 Enable Developer Connection にチェックを付ける
 メニュー上にDEVELOPER が増えているので
 その項目を選択して、Enable にチェックを付ける

30. 2. CloudPebble にログイン
 CloudPebbleを開く
 https://cloudpebble.net/ide/
 右上のSIGN IN からログイン
 Pebbleアカウントでログイン可能

31. 3. プロジェクトをつくる
 CREATEボタンを押す
 よしなに項目を埋める
 Project Name
 Project Type
 Template
HelloWorld
Pebble C SDK
HelloWorld
▼
▼
よしなに
デフォルト
要変更
 CREATEボタンを押してプロジェクト作成

32. 4. ビルドして実行
 hello_world.c を選択
 画面右側に▶ボタンが出るのでそれを選択

33. しばらく待つと

34. Pebble上にに表示されるはず
やったぜ

35. うまくいかなかった場合(Androidの人)
 親機内のPebbleアプリが古い
 左側のメニュー内にあるCOMPILATION を選択
 最新版へのリンクが貼られてるので選択
 apkファイルを落とす→ Androidにインストール
 QRコード作ってAndroidで読み込むのがオススメ
 ※Android 4.3 以上だけ

36. Android最新版へのリンク(2014/11/17時点)
 V2.1.0-Beta9
 https://www.dropbox.com/s/hjz0eoremh9m2g
u/pebble-release-2.1.0-beta9-
515.apk?dl=0

37. CloudPebbleの設定
 テーマだけは変更をオススメ
 デフォルトは警告行を範囲選択した時視認できない
CloudPebble
Blackboard(TextMate)

38. まとめ

39. Pebble
 開発環境が整っているので捗る
 CloudPebbleなら導入コストはほぼ0
 PebbleはあくまでView
 重たいことや複雑なことは親機にやらせよう
 持っていない人はPebble買いましょう
 今なら$99 です
 送料無料
 スチール版だと$199

40. ハッカソン開始！！
 導入にオススメ
 Pebble 公式のチュートリアル(part1～part3)
 天気APIを叩いて表示するところまでやります
 http://developer.getpebble.com/getting-started/watchface-tutorial/
part1/
 有志の方のチュートリアル
 上のチュートリアルよりも少し発展
 part3を終えると公式からオススメされる
 http://ninedof.wordpress.com/pebble-sdk-tutorial/
 SDK 2.0 Tutorial