Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
第0回 関西Pebbleアプリ勉強会
2015/10/31
1
@dvorak__
自己紹介
2
• ガジェットとかウェアラブルデバイスが好きなヒト
Dvorakはしもと
Twitter : @dvorak__
Agenda
3
1 CloudPebbleについて
2 天気・気温表示アプリつくる
3 改造してデジタルWatchFaceつくる
4 適当
1. CloudPebbleについて
4
簡単!超便利!凄い!
おしまい
5
1. CloudPebbleについて
6
1 GitHub連携できる
2 エミュレータついてる
3 ブラウザだから何処からでもできる
4 実機デバッグもできる
CloudPebbleにログイン
まずはSETTINGS
7
お好みの設定で…
と言いたい所ですが
THEMEはデフォルトの
CloudPebble以外をオススメ
理由は,エラー時に行に色が
付くのですが,
選択してる文字と同色で
非常に見づらいから
8
前画面に戻って IMPORT
出力したZIPファイルか
GITHUBのアドレスを指定して
ソース一式をインポートできます
9
CREATE 押下で
ダイアログが開きます
PROJECT TYPE で
Pebble.js (beta) を選択して
PROJECT NAME を入力
(WEATHE_JS_APP)
CREATE
10
CloudPebble Menu
11
‣ SETTINGS:設定
‣ TIMELINE:TIMELINE用のテストデータ(特にTIMELINEを使った
アプリでない限りここは意識しなくていい)
‣ COMPILATION:デバッグ,実行環境設...
SETTINGS
12
‣ (一部省略)
‣ APP KIND:アプリの種類
‣ MENU IMAGE:画像は
‣ RESOURCESに入れる必要がある
‣ USERS LOCATION:GPS使うあぷりの場合オンチェック
‣ CONFIGUR...
COMPILATION
13
‣ まずはRUN BUILD
COMPILATION
14
少し待つと
何か賑やかになった
COMPILATION
15
• EMULATORで実行するか実
機で実行するかの切り替え
• ビルド対象のバージョン
• 最後にビルドした結果
✦ RUN BUILDで実行
✦ GET PBWでファイル出力
• ログ
app.js
16
最初から何やらコードが書い
てある
いきなり実行してみよう!
app.js
17
最初から何やらコードが書い
てある
いきなり実行してみよう!
…バグでエラーになる!
app.js
18
BUILDは通るけど,現状
(2015/10/30)ここで実行
するとChalk対象にエミュレー
タで実行される.
そして,現在CloudPebbleで
Pebble.jsがChalkに対応して
いない!
クソかよw
【余談】Pebbleのバージョン
19
APLITE(アプライト)
初代Pebble
Pebble Steel
* Pebble Timeが出た今,ク
ラシックPebbleなんて言う言
い方もされる
【余談】Pebbleのバージョン
20
BASALT(玄武岩)
Pebble Time
Pebble Time Steel
* PT,PTSと略される
【余談】Pebbleのバージョン
21
CHALK(チョーク)
Pebble Time Round
* PTRと略される
AndroidのABCD…がお菓子の名前付けるみたいに,
Pebbleは(小石って意味なので)石の種類の名前になる
次はD...
COMPILATIONから実行
22
1. EMULATORタブ押下
2. RUN BUILD(さっき実行
してたら,しなくてもい
い)
3. ちょっと待って
SUCCEEDEDを確認後,
BASALT押下
COMPILATIONから実行
23
1. EMULATORタブ押下
2. RUN BUILD(さっき実行
してたら,しなくてもい
い)
3. ちょっと待って
SUCCEEDEDを確認後,
BASALT押下
成功した!
VIEW LOGS押下
EMULATOR
24
• エミュレータ
• 各物理ボタンで色々機能
EMULATOR
25
各ボタンの名前は覚えておこう!
←Back押下でアプリが終了する
UP
SELECT
DOWN
BACK
EMULATOR
26
• ギアアイコン押下で
• 各種,環境設定ができる
• 調子悪い時はSHUT DOWN
• EMULATORで実機とほとんど同じ事ができる
EMULATOR
27
• ボタンを押すと右側にログが出る
EMULATOR
28
1. ギアアイコン押下で
2. SHUT DOWNでエミュレータを終了
COMPILATIONから実機で実行
29
1. COMPILATION押下
2. PHONEタブ押下
3. スマフォのPebble Time
アプリ(DEVELOPER→
Enable Developer
ConnectionsがONになっ
...
( ・́ー・`)どや
30
COMPILATIONから実機で実行
31
• 実機でボタン操作してもちゃ
んとブラウザのログにリア
ルタイムに表示される
• SCREENSHOTで現在実機
で表示してる画面イメージ
がブラウザからDLできる
(この画像はAppStoreに
...
2. 天気アプリをつくる
32
天気アプリをつくる
33
http://developer.getpebble.com/guides/js-apps/js-ajax/
このページのやつをやる
天気情報を取得するにはユーザー登録
が必要
(2015/10 からAPIキーが必須に...
天気アプリをつくる
34
http://openweathermap.org/
OpenWeatherMapのWebAPIで天気情報を取得する
Sign Upからユーザー登録する
天気アプリをつくる
35
http://home.openweathermap.org/
OpenWeatherMapでSign InしてWebAPI Home画面へ
API keyをメモる
天気アプリをつくる
36
全部消す
天気アプリをつくる
37
と思うじゃん?
以下を書く
var UI = require('ui');
天気アプリをつくる
38
var UI = require('ui');
var ajax = require('ajax');
// Show splash
var splashCard = new UI.Card({
title: "Ple...
天気アプリをつくる
39
var UI = require('ui');
var ajax = require('ajax');
// Show splash
var splashCard = new UI.Card({
title: "Ple...
天気アプリをつくる
40
var UI = require('ui');
var ajax = require('ajax');
// Show splash
var splashCard = new UI.Card({
title: "Ple...
天気アプリをつくる
41
COMPILATION→(EMULATOR)→RUN BUILD→BASALT
天気アプリをつくる
42
COMPILATION→(EMULATOR)→RUN BUILD→BASALT
実行は毎回この手順で行う
天気アプリをつくる
43
COMPILATION→(EMULATOR)→RUN BUILD→BASALT
実行は毎回この手順で行う
天気アプリをつくる
44
本当はEDITORのRUNボタン1つで,
SAVE→BUILD→INSTALL→RUNまでやってくれる
(今はバグがある)
実行はCOMPILATIONで設定された内容で処理される.
EMULATORになっていると自動...
天気アプリをつくる
45
// Construct URL
var cityName = 'Osaka';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + city...
天気アプリをつくる
46
ajax({
url: URL,
type: 'json'
},
function(data) {
// Success!
console.log('Successfully fetched weather data!...
天気アプリをつくる
47
function(data) {
// Success!
console.log('Successfully fetched weather data!');
var location = data.name;
var...
天気アプリをつくる
48
// Show to user
card.subtitle(location + ', ' + temperature);
card.body(description);
加工データ表示
天気アプリをつくる
49
全体
https://gist.github.com/japanetfutan/eff2e5e914ccad856a0b
Gist(短縮URL)
http://ur0.link/oUgz
天気アプリをつくる
50
例の手順でビルドして実行すると…
できた!
3. 改造してデジタル
WatchFaceをつくる
51
デジタルWatchFaceをつくる
52
左メニューのSETTINGSからSETTINGS画面を開き,
1番下にスクロールして DOWNLOAD AS ZIP を押下
適当に保存する
デジタルWatchFaceをつくる
53
右上メニューから PROJECTS を押下
PROJECTS 一覧画面が開く
IMPORT を押下して,先程DLしたZIPファイルを指定
デジタルWatchFaceをつくる
54
PROJECT NAMEは
weather_js_wf としておく
IMPORT を押下
デジタルWatchFaceをつくる
55
デジタルWatchFaceをつくる
56
左メニューからSETTINGSを開き
APP KINDをWatchfaceに変更.(これは絶対やらないとダメ)
APP NAMEも WEATHER_JS_WF に変更しておく
デジタルWatchFaceをつくる
57
下の方にある APP UUID の GENERATE ボタンを押下
現状のままだと先程作ったアプリとUUIDが被ってしまうため
デジタルWatchFaceをつくる
58
app.js を開く.
このままでもWatchFaceとして実行できるが,見た目も機能も変わらない
のでデジタル時計部分を作る
初期表示で Please Wait と表示していた title 部
更新時...
デジタルWatchFaceをつくる
59
title
subtitle
body
CardUIの構造
デジタルWatchFaceをつくる
60
初期表示の時にフルスクリーンになるよう,追記
デジタルWatchFaceをつくる
61
初期表示の時にフルスクリーンになるよう,追記
普通,WatchFaceに画面最上部のメニュー部は表示させない.
また,フルスクリーンにすると座標が上にズレるので座標配置に注意が必要
これはないw
デジタルWatchFaceをつくる
62
1番下に yyyy/mm/dd hh:mm:ss 表示処理を追記
デジタルWatchFaceをつくる
63
https://gist.github.com/japanetfutan/4299bfe7f56bf40d01ed
Gist(短縮URL)
http://ur0.link/oUna
デジタルWatchFaceをつくる
64
完成
デジタルWatchFaceをつくる
65
かんせい…
デジタルWatchFaceをつくる
66
大阪…2℃…10月に?…
67
デジタルWatchFaceをつくる
68
どっか違う所だったみたいw
東京でやろうw
オチ付ける予定じゃなかっ
たのに(;^ω^)
69
残りは もくもく
70
ありがとうございました
71
Twitter : @dvorak__
Dvorakはしもと
第0回 関西Pebbleアプリ勉強会
Upcoming SlideShare
Loading in …5
×

第0回 関西Pebbleアプリ勉強会

2,852 views

Published on

2015/10/31大阪開催のPebbleアプリ勉強会のスライドです.
初級者向けのPebble.jsでサンプルアプリと,そのカスタマイズ,CloudPebbleの説明です.

Published in: Technology

第0回 関西Pebbleアプリ勉強会

  1. 1. 第0回 関西Pebbleアプリ勉強会 2015/10/31 1 @dvorak__
  2. 2. 自己紹介 2 • ガジェットとかウェアラブルデバイスが好きなヒト Dvorakはしもと Twitter : @dvorak__
  3. 3. Agenda 3 1 CloudPebbleについて 2 天気・気温表示アプリつくる 3 改造してデジタルWatchFaceつくる 4 適当
  4. 4. 1. CloudPebbleについて 4 簡単!超便利!凄い!
  5. 5. おしまい 5
  6. 6. 1. CloudPebbleについて 6 1 GitHub連携できる 2 エミュレータついてる 3 ブラウザだから何処からでもできる 4 実機デバッグもできる
  7. 7. CloudPebbleにログイン まずはSETTINGS 7
  8. 8. お好みの設定で… と言いたい所ですが THEMEはデフォルトの CloudPebble以外をオススメ 理由は,エラー時に行に色が 付くのですが, 選択してる文字と同色で 非常に見づらいから 8
  9. 9. 前画面に戻って IMPORT 出力したZIPファイルか GITHUBのアドレスを指定して ソース一式をインポートできます 9
  10. 10. CREATE 押下で ダイアログが開きます PROJECT TYPE で Pebble.js (beta) を選択して PROJECT NAME を入力 (WEATHE_JS_APP) CREATE 10
  11. 11. CloudPebble Menu 11 ‣ SETTINGS:設定 ‣ TIMELINE:TIMELINE用のテストデータ(特にTIMELINEを使った アプリでない限りここは意識しなくていい) ‣ COMPILATION:デバッグ,実行環境設定など ‣ GITHUB:GitHub関係 ‣ SOURCE FILES:JSかCの一覧 ‣ RESOURCES:画像などのデータ
  12. 12. SETTINGS 12 ‣ (一部省略) ‣ APP KIND:アプリの種類 ‣ MENU IMAGE:画像は ‣ RESOURCESに入れる必要がある ‣ USERS LOCATION:GPS使うあぷりの場合オンチェック ‣ CONFIGURABLE:設定がある場合オンチェック ‣ DOWNLOAD AS ZIP:ここでDLしたファイルはPJイン ポートできる
  13. 13. COMPILATION 13 ‣ まずはRUN BUILD
  14. 14. COMPILATION 14 少し待つと 何か賑やかになった
  15. 15. COMPILATION 15 • EMULATORで実行するか実 機で実行するかの切り替え • ビルド対象のバージョン • 最後にビルドした結果 ✦ RUN BUILDで実行 ✦ GET PBWでファイル出力 • ログ
  16. 16. app.js 16 最初から何やらコードが書い てある いきなり実行してみよう!
  17. 17. app.js 17 最初から何やらコードが書い てある いきなり実行してみよう! …バグでエラーになる!
  18. 18. app.js 18 BUILDは通るけど,現状 (2015/10/30)ここで実行 するとChalk対象にエミュレー タで実行される. そして,現在CloudPebbleで Pebble.jsがChalkに対応して いない! クソかよw
  19. 19. 【余談】Pebbleのバージョン 19 APLITE(アプライト) 初代Pebble Pebble Steel * Pebble Timeが出た今,ク ラシックPebbleなんて言う言 い方もされる
  20. 20. 【余談】Pebbleのバージョン 20 BASALT(玄武岩) Pebble Time Pebble Time Steel * PT,PTSと略される
  21. 21. 【余談】Pebbleのバージョン 21 CHALK(チョーク) Pebble Time Round * PTRと略される AndroidのABCD…がお菓子の名前付けるみたいに, Pebbleは(小石って意味なので)石の種類の名前になる 次はDだから…(DIAMONDかな?)
  22. 22. COMPILATIONから実行 22 1. EMULATORタブ押下 2. RUN BUILD(さっき実行 してたら,しなくてもい い) 3. ちょっと待って SUCCEEDEDを確認後, BASALT押下
  23. 23. COMPILATIONから実行 23 1. EMULATORタブ押下 2. RUN BUILD(さっき実行 してたら,しなくてもい い) 3. ちょっと待って SUCCEEDEDを確認後, BASALT押下 成功した! VIEW LOGS押下
  24. 24. EMULATOR 24 • エミュレータ • 各物理ボタンで色々機能
  25. 25. EMULATOR 25 各ボタンの名前は覚えておこう! ←Back押下でアプリが終了する UP SELECT DOWN BACK
  26. 26. EMULATOR 26 • ギアアイコン押下で • 各種,環境設定ができる • 調子悪い時はSHUT DOWN • EMULATORで実機とほとんど同じ事ができる
  27. 27. EMULATOR 27 • ボタンを押すと右側にログが出る
  28. 28. EMULATOR 28 1. ギアアイコン押下で 2. SHUT DOWNでエミュレータを終了
  29. 29. COMPILATIONから実機で実行 29 1. COMPILATION押下 2. PHONEタブ押下 3. スマフォのPebble Time アプリ(DEVELOPER→ Enable Developer ConnectionsがONになっ ていること) 4. INSTALL AND RUN PCとスマフォが同じWi-Fi環境で あること!
  30. 30. ( ・́ー・`)どや 30
  31. 31. COMPILATIONから実機で実行 31 • 実機でボタン操作してもちゃ んとブラウザのログにリア ルタイムに表示される • SCREENSHOTで現在実機 で表示してる画面イメージ がブラウザからDLできる (この画像はAppStoreに 公開する時に使える)
  32. 32. 2. 天気アプリをつくる 32
  33. 33. 天気アプリをつくる 33 http://developer.getpebble.com/guides/js-apps/js-ajax/ このページのやつをやる 天気情報を取得するにはユーザー登録 が必要 (2015/10 からAPIキーが必須に なった)
  34. 34. 天気アプリをつくる 34 http://openweathermap.org/ OpenWeatherMapのWebAPIで天気情報を取得する Sign Upからユーザー登録する
  35. 35. 天気アプリをつくる 35 http://home.openweathermap.org/ OpenWeatherMapでSign InしてWebAPI Home画面へ API keyをメモる
  36. 36. 天気アプリをつくる 36 全部消す
  37. 37. 天気アプリをつくる 37 と思うじゃん? 以下を書く var UI = require('ui');
  38. 38. 天気アプリをつくる 38 var UI = require('ui'); var ajax = require('ajax'); // Show splash var splashCard = new UI.Card({ title: "Please Wait", body: "Downloading..." }); splashCard.show();
  39. 39. 天気アプリをつくる 39 var UI = require('ui'); var ajax = require('ajax'); // Show splash var splashCard = new UI.Card({ title: "Please Wait", body: "Downloading..." }); splashCard.show(); 保存(Ctrl + S)
  40. 40. 天気アプリをつくる 40 var UI = require('ui'); var ajax = require('ajax'); // Show splash var splashCard = new UI.Card({ title: "Please Wait", body: "Downloading..." }); splashCard.show(); 保存(Ctrl + S) 実行は…したらダメw
  41. 41. 天気アプリをつくる 41 COMPILATION→(EMULATOR)→RUN BUILD→BASALT
  42. 42. 天気アプリをつくる 42 COMPILATION→(EMULATOR)→RUN BUILD→BASALT 実行は毎回この手順で行う
  43. 43. 天気アプリをつくる 43 COMPILATION→(EMULATOR)→RUN BUILD→BASALT 実行は毎回この手順で行う
  44. 44. 天気アプリをつくる 44 本当はEDITORのRUNボタン1つで, SAVE→BUILD→INSTALL→RUNまでやってくれる (今はバグがある) 実行はCOMPILATIONで設定された内容で処理される. EMULATORになっていると自動でエミュレータ, PHONEだと実機で実行される.
  45. 45. 天気アプリをつくる 45 // Construct URL var cityName = 'Osaka'; var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&appid=' + myAPIKey; myAPIKey には,先程メモしたAPI keyを指定する
  46. 46. 天気アプリをつくる 46 ajax({ url: URL, type: 'json' }, function(data) { // Success! console.log('Successfully fetched weather data!'); }, function(error) { // Failure! console.log('Failed fetching weather data: ' + error); } ); AjaxでJSON取得
  47. 47. 天気アプリをつくる 47 function(data) { // Success! console.log('Successfully fetched weather data!'); var location = data.name; var temperature = Math.round(data.main.temp - 273.15) + 'C'; var description = data.weather[0].description; description = description.charAt(0).toUpperCase() + description.substring(1); } JSONデータ加工
  48. 48. 天気アプリをつくる 48 // Show to user card.subtitle(location + ', ' + temperature); card.body(description); 加工データ表示
  49. 49. 天気アプリをつくる 49 全体 https://gist.github.com/japanetfutan/eff2e5e914ccad856a0b Gist(短縮URL) http://ur0.link/oUgz
  50. 50. 天気アプリをつくる 50 例の手順でビルドして実行すると… できた!
  51. 51. 3. 改造してデジタル WatchFaceをつくる 51
  52. 52. デジタルWatchFaceをつくる 52 左メニューのSETTINGSからSETTINGS画面を開き, 1番下にスクロールして DOWNLOAD AS ZIP を押下 適当に保存する
  53. 53. デジタルWatchFaceをつくる 53 右上メニューから PROJECTS を押下 PROJECTS 一覧画面が開く IMPORT を押下して,先程DLしたZIPファイルを指定
  54. 54. デジタルWatchFaceをつくる 54 PROJECT NAMEは weather_js_wf としておく IMPORT を押下
  55. 55. デジタルWatchFaceをつくる 55
  56. 56. デジタルWatchFaceをつくる 56 左メニューからSETTINGSを開き APP KINDをWatchfaceに変更.(これは絶対やらないとダメ) APP NAMEも WEATHER_JS_WF に変更しておく
  57. 57. デジタルWatchFaceをつくる 57 下の方にある APP UUID の GENERATE ボタンを押下 現状のままだと先程作ったアプリとUUIDが被ってしまうため
  58. 58. デジタルWatchFaceをつくる 58 app.js を開く. このままでもWatchFaceとして実行できるが,見た目も機能も変わらない のでデジタル時計部分を作る 初期表示で Please Wait と表示していた title 部 更新時(Ajax Success時)に空にしている ここに日時を入れよう!
  59. 59. デジタルWatchFaceをつくる 59 title subtitle body CardUIの構造
  60. 60. デジタルWatchFaceをつくる 60 初期表示の時にフルスクリーンになるよう,追記
  61. 61. デジタルWatchFaceをつくる 61 初期表示の時にフルスクリーンになるよう,追記 普通,WatchFaceに画面最上部のメニュー部は表示させない. また,フルスクリーンにすると座標が上にズレるので座標配置に注意が必要 これはないw
  62. 62. デジタルWatchFaceをつくる 62 1番下に yyyy/mm/dd hh:mm:ss 表示処理を追記
  63. 63. デジタルWatchFaceをつくる 63 https://gist.github.com/japanetfutan/4299bfe7f56bf40d01ed Gist(短縮URL) http://ur0.link/oUna
  64. 64. デジタルWatchFaceをつくる 64 完成
  65. 65. デジタルWatchFaceをつくる 65 かんせい…
  66. 66. デジタルWatchFaceをつくる 66 大阪…2℃…10月に?…
  67. 67. 67
  68. 68. デジタルWatchFaceをつくる 68 どっか違う所だったみたいw 東京でやろうw
  69. 69. オチ付ける予定じゃなかっ たのに(;^ω^) 69
  70. 70. 残りは もくもく 70
  71. 71. ありがとうございました 71 Twitter : @dvorak__ Dvorakはしもと 第0回 関西Pebbleアプリ勉強会

×