Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Pebbleハッカソン

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 40 Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Pebbleハッカソン (20)

Publicité

Plus récents (17)

Pebbleハッカソン

  1. 1. Pebbleハッカソン @Bob_Mk2
  2. 2. 流れ 1. Pebbleとは? 2. Pebbleと親機 3. 開発方法に関して 4. HelloWorld 5. まとめ
  3. 3. Pebbleとは?
  4. 4. Pebble  腕時計型デバイス  長持ち  充電しなくても1週間くらい持つ  始まりはKickstarter  最近特定クラスタで熱い  開発環境が整ってる 皆さん、もう買いましたよね?
  5. 5. 時計盤(Watchface)の切り替えが楽しい  いろいろな人が作ってるので妙に種類が豊富 YWeather PalmOS DIGIBORG V3 Rosewright D Flappy Bird 2
  6. 6. どんなWatchfaceがあるの?  多いのは時計+α(天気や温度)が分かるもの Real Weather SmartStatus+  凝った見た目のもの(怒られそうなもの) Number Scanner Supre Mario Land DOOM
  7. 7. アプリ(WatchApp)もあります  便利系  ゲーム Evernote eBay Misfit PebblePong 2 Solitaire PebbleBan
  8. 8. Pebble内のFaceとAppの位置づけ Watchface Face 1 … Face 8 メニュー Watchapp Alarms Settings Watchapp A … Watchapp n App 1 App n
  9. 9. Pebbleと親機
  10. 10. 親機?  Pebble単体だと本当にただの時計です  親機と繋がることで色々できることが増えます  親機=iPhoneやAndroid  WindowsPhoneは無理ぽ  Pebble ⇔ 親機間はBluetooth接続
  11. 11. 親機がいると何ができるの?(1/3)  FaceやAppのインストールや設定  親機上の公式アプリを使うことで可能
  12. 12. 親機がいると何ができるの?(2/3)  各FaceやApp の設定  ※設定画面はWebViewで開かれる  → ウェブ上のどこかに設定画面の配置が必要
  13. 13. 親機がいると何ができるの?(3/3)  ネットワーク接続  天気や気温は何らかのAPIを叩いている  その結果をPebbleに流し込んでいる  取得した画像を加工してPebbleで表示も可能  位置情報取得  親機側の位置情報が有効になってる必要有り  現在位置の天気はだいたいこれを使っているはず
  14. 14. つまり親機が頑張る  色々できる(ように見える)のは親機の頑張り  ネットワーク繋がるのは親機のみ  Pebble単体で取れる情報は現在時刻ぐらい  定期的に親機に情報要求するのが基本的  30分毎に天気の更新をする、など  AppMessageという仕組みでやりとり 情報ください! ほい
  15. 15. 開発方法に関して
  16. 16. そもそも何が作れるの?  Watchface  時計盤  シェイクのみ検知可  Watchapp  ゲームや便利アプリとか  ボタン入力が取れます  作り方はほとんど同じ  開発途中で切り替えるのも比較的簡単 シェイク 入力取れる
  17. 17. 基本的な開発スタイル PC 親機(Android / OS X) 子機(Pebble) 3. これ入れて 2. ビルドす る 1. 鯖立て る 4. これ入れて ケーブル無しで開発できるのが GOOD
  18. 18. 開発方法 1. Pebble SDK  Pebble側はC、親機側はJavascript で書く  公式「あ、Windows の人はVM 入れてね^^」 2. CloudPebble  ブラウザ上で全て完結するので楽  難しいことしないのであればこれだけでイナフ 3. Pebble.js (beta)  全部Javascript だけで書ける  まだ触れてないので何とも
  19. 19. CloudPebble  クラウド上で開発が可能  開発環境をローカルに整える必要無し  やったぜ  基本的なことは全てできる  ローカルでやると手間な箇所も吸収してくれる  開発環境もプロジェクト毎に3種類から選べる  Pebble SDK  Pebble.js  Simply.js
  20. 20. 見た目
  21. 21. そこそこカスタマイズ可能  テーマ  入力補完方法  As-you-type, Ctrl+Space  キーバインド  Standard, vim-like, emacs-like  インデント形式  spaces, tabs  タブ幅
  22. 22. CloudPebbleで他にできること  Githubとの連携  プロジェクト開始時にGithub上からインポート可  後からGithub上に上げたくなっても大丈夫  ログの確認  ビルド時のログ  アプリ実行時のログ
  23. 23. つよい
  24. 24. もうCloudPebbleだけでいいじゃん  はい  必要になったときに環境を整えれば良い 1. 外部ライブラリをばりばり使う場合  CloudPebble上だとコピペ必須(辛い) 2. なんか調子悪い時  親機に流し込む際に延々と「準備中」で進まなくなる  何が起きてるのかCloudPebble上からだと確認しづらい  最初はクラウド、後からローカルも可  必要なものはクラウド上からzipで落とせる とっかかりやすい!(大切)
  25. 25. HelloWorld
  26. 26. 流れ 1. 事前準備 2. CloudPebbleにログイン 3. プロジェクトをつくる 4. ビルドして実行 5. 終わり
  27. 27. 本当にこれだけ?  はい  テンプレートに「HelloWorld」がありました
  28. 28. 1. 事前準備(1/2)  Pebbleアカウント  ここでの説明は割愛  親機のPebbleアプリが最新版か確認  Settings > Version から確認可能  iOS の場合は2.5  Android の場合は2.1.0-beta9  Playストアのものだとダメな場合がある  ひどい…  最新版はCloudPebble にリンクが貼られてるので  とりあえず後まわしでOK
  29. 29. 2. 事前準備(2/2)  親機がPCと同じ箇所にWiFi接続しているか確認  PCと親機が同一LAN内にいる必要があるため  Pebbleアプリを開発用に設定変更  Setting > Developer Options  Enable Developer Connection にチェックを付ける  メニュー上にDEVELOPER が増えているので  その項目を選択して、Enable にチェックを付ける
  30. 30. 2. CloudPebble にログイン  CloudPebbleを開く  https://cloudpebble.net/ide/  右上のSIGN IN からログイン  Pebbleアカウントでログイン可能
  31. 31. 3. プロジェクトをつくる  CREATEボタンを押す  よしなに項目を埋める  Project Name  Project Type  Template HelloWorld Pebble C SDK HelloWorld ▼ ▼ よしなに デフォルト 要変更  CREATEボタンを押してプロジェクト作成
  32. 32. 4. ビルドして実行  hello_world.c を選択  画面右側に▶ボタンが出るのでそれを選択
  33. 33. しばらく待つと
  34. 34. Pebble上にに表示されるはず やったぜ
  35. 35. うまくいかなかった場合(Androidの人)  親機内のPebbleアプリが古い  左側のメニュー内にあるCOMPILATION を選択  最新版へのリンクが貼られてるので選択  apkファイルを落とす→ Androidにインストール  QRコード作ってAndroidで読み込むのがオススメ  ※Android 4.3 以上だけ
  36. 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. 37. CloudPebbleの設定  テーマだけは変更をオススメ  デフォルトは警告行を範囲選択した時視認できない CloudPebble Blackboard(TextMate)
  38. 38. まとめ
  39. 39. Pebble  開発環境が整っているので捗る  CloudPebbleなら導入コストはほぼ0  PebbleはあくまでView  重たいことや複雑なことは親機にやらせよう  持っていない人はPebble買いましょう  今なら$99 です  送料無料  スチール版だと$199
  40. 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

×