Pebbleハッカソン
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Pebbleハッカソン

  • 252 views
Uploaded on

Pebbleハッカソンで発表した資料です。 ...

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

More in: Environment
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
252
On Slideshare
234
From Embeds
18
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 18

https://twitter.com 18

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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