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

第0回関西Pebbleアプリ勉強会
2015/10/31
1
@dvorak__

自己紹介
2
• ガジェットとかウェアラブルデバイスが好きなヒト
Dvorakはしもと
Twitter : @dvorak__

Agenda
3
1 CloudPebbleについて
2 天気・気温表示アプリつくる
3 改造してデジタルWatchFaceつくる
4 適当

1. CloudPebbleについて
4
簡単！超便利！凄い！

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：デバッグ，実行環境設定など
‣ GITHUB：GitHub関係
‣ SOURCE FILES：JSかCの一覧
‣ RESOURCES：画像などのデータ

SETTINGS
12
‣ （一部省略）
‣ APP KIND：アプリの種類
‣ MENU IMAGE：画像は
‣ RESOURCESに入れる必要がある
‣ USERS LOCATION：GPS使うあぷりの場合オンチェック
‣ CONFIGURABLE：設定がある場合オンチェック
‣ DOWNLOAD AS ZIP：ここでDLしたファイルはPJイン
ポートできる

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に対応して
いない！
クソかよｗ

【余談】Pebbleのバージョン
19
APLITE（アプライト）
初代Pebble
Pebble Steel
* Pebble Timeが出た今，ク
ラシックPebbleなんて言う言
い方もされる

20
BASALT（玄武岩）
Pebble Time
Pebble Time Steel
* PT，PTSと略される

21
CHALK（チョーク）
Pebble Time Round
* PTRと略される
AndroidのABCD…がお菓子の名前付けるみたいに，
Pebbleは（小石って意味なので）石の種類の名前になる
次はDだから…（DIAMONDかな？）

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になっ
ていること)
4. INSTALL AND RUN
PCとスマフォが同じWi-Fi環境で
あること！

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 ajax = require('ajax');
// Show splash
var splashCard = new UI.Card({
title: "Please Wait",
body: "Downloading..."
});
splashCard.show();

39
// Show splash
});
splashCard.show();
保存（Ctrl + S)

40
// Show splash
});
splashCard.show();
保存（Ctrl + S)
実行は…したらダメｗ

41
COMPILATION→(EMULATOR)→RUN BUILD→BASALT

42
実行は毎回この手順で行う

43
実行は毎回この手順で行う

44
本当はEDITORのRUNボタン1つで，
SAVE→BUILD→INSTALL→RUNまでやってくれる
（今はバグがある）
実行はCOMPILATIONで設定された内容で処理される．
EMULATORになっていると自動でエミュレータ，
PHONEだと実機で実行される．

45
// Construct URL
var cityName = 'Osaka';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName +
'&appid=' + myAPIKey;
myAPIKey には，先程メモしたAPI keyを指定する

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
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
// Show to user
card.subtitle(location + ', ' + temperature);
card.body(description);
加工データ表示

49
全体
https://gist.github.com/japanetfutan/eﬀ2e5e914ccad856a0b
Gist（短縮URL）
http://ur0.link/oUgz

50
例の手順でビルドして実行すると…
できた！

3. 改造してデジタル
WatchFaceをつくる
51

デジタルWatchFaceをつくる
52
左メニューのSETTINGSからSETTINGS画面を開き，
1番下にスクロールして DOWNLOAD AS ZIP を押下
適当に保存する

53
右上メニューから PROJECTS を押下
PROJECTS 一覧画面が開く
IMPORT を押下して，先程DLしたZIPファイルを指定

54
PROJECT NAMEは
weather_js_wf としておく
IMPORT を押下

55

56
左メニューからSETTINGSを開き
APP KINDをWatchfaceに変更．（これは絶対やらないとダメ）
APP NAMEも WEATHER_JS_WF に変更しておく

57
下の方にある APP UUID の GENERATE ボタンを押下
現状のままだと先程作ったアプリとUUIDが被ってしまうため

58
app.js を開く．
このままでもWatchFaceとして実行できるが，見た目も機能も変わらない
のでデジタル時計部分を作る
初期表示で Please Wait と表示していた title 部
更新時（Ajax Success時）に空にしている
ここに日時を入れよう！

59
title
subtitle
body
CardUIの構造

60
初期表示の時にフルスクリーンになるよう，追記

61
初期表示の時にフルスクリーンになるよう，追記
普通，WatchFaceに画面最上部のメニュー部は表示させない．
また，フルスクリーンにすると座標が上にズレるので座標配置に注意が必要
これはないｗ

62
1番下に yyyy/mm/dd hh:mm:ss 表示処理を追記

63
https://gist.github.com/japanetfutan/4299bfe7f56bf40d01ed
Gist（短縮URL）
http://ur0.link/oUna

64
完成

65
かんせい…

66
大阪…2℃…10月に？…

68
どっか違う所だったみたいｗ
東京でやろうｗ

オチ付ける予定じゃなかっ
たのに（；＾ω＾）
69

ありがとうございました
71
Twitter : @dvorak__
Dvorakはしもと
第0回関西Pebbleアプリ勉強会

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

Recommended

Recommended

More Related Content

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

Similar to 第0回関西Pebbleアプリ勉強会 (13)

Recently uploaded

Recently uploaded (10)