銀の弾丸、はじめました

Unityとかガジェットとか

Pebble.jsについてメモ

pebble pebble-time pebble.js

ドキュメントはここ．

developer.getpebble.com

実は結構，やれる事少ない…と言うか単純．
でも，ドキュメントが色々と省略されてて色々試行錯誤の連続だった（今も）
なので，メモを残しておく．

Pebble.js使う上で必ず宣言するやつ．

var UI = require('ui');
var Vector2 = require('vector2');  //条件によってはここ不要

親オブジェクトについて

WatchFaceアプリの場合は UI.Window を使い，通常のアプリの場合は UI.Window か UI.Card を使う感じ．
WatchFaceでは Card UI は使えない．（現在は使えるようです．）

var window = new UI.Window();

// または，以下のような感じ

var main = new UI.Card({
   title: 'Pebble.js',
   icon: 'images/menu_icon.png',
   subtitle: 'Hello World!',
   body: 'Press any button.'
 });

Accel（加速度センサ）について

必須コード

var Accel = require(‘ui/accel');
Accel.init()

加速度確認には2種類の方法がある．

Tap系

Accel.on('tap', function(e){
  console.log('Tap event on axis: ' + e.axis + ' and direction: ' + e.direction);
});

または

Window.or('accelTap', function(e){
  console.log('Tapped the window');
});

上記2種はWinodwを対象にしているかそれ以外（Cardとか？）を対象にTapのイベントトリガを設置するイメージ．

Tapとは叩くイメージがあるが，ここでは加速度が反応する行為（腕，手首を素早く振るなど）とする．
Tapイベントトリガは省電力．

Accel.on

常に加速度センサを監視して情報を取得するイメージ．

Accel.on('data', function(e) {
  console.log('Just received ' + e.samples + ' from the accelerometer.');
});

または

window.on('accelData', function(e) {
 console.log('Accel data: ' + JSON.stringify(e.accels));
});

ミリ秒単位で3軸データを取得する事も可能．
電池消費量は激しいがより細かいデータを収集できる．

また，加速度の反応する基準を Accel.config() で指定する事が可能．
（特定の座標以上の時，特定の動きの時にイベントを走らせるなどの事が可能）

その他いろいろ微妙に苦労した点

Windowフルスクリーン

var window = new UI.Window();
window.fullscree(true);

これで上部バー（hh:mm）部が非表示になり，座標全体が上にズレる！

setTimeout

n秒後にxxさせたい時に使う．

通常のJSの場合

function hogehoge(){
  console.log('hogehoge');
}

setTimeout('hogehoge()', 3000);

となるが，Pebble.jsの場合は以下のように書く必要がある．
別メソッドとして外出しできないっぽい…（文字列として書く必要もない…てか書いたらエラー）

Pebble.jsの場合

setTimeout(function(){
  console.log('hogehoge');
}, 3000);

Ajax

必須コード

var ajax = require('ajax');

JSはデフォルト非同期なので色々躓く部分があるが， async オプション false で簡単に同期処理解決できる．

ajax(
    {
      url: URL,
      type: 'json',
      async: false
    },
    function(data) {
      // Success!
      console.log('Successfully fetched weather data!');

      // Extract data
      var location = data.name;
      var temperature = Math.round(data.main.temp - 273.15) + 'C';

      // Always upper-case first letter of description
      var description = data.weather[0].description;
      description = description.charAt(0).toUpperCase() + description.substring(1);

      var date = new Date();
      var hour = date.getHours();
      var minutes = date.getMinutes();
      textField.text(location + ', ' + temperature + '\n' + description + '\n\n' + hour + ':' + minutes);

    },
    function(error) {
      // Failure!
      console.log('Failed fetching weather data: ' + error);

      return error;
    }
  );

font，colorなどの指定方法について

色のサンプル，名前は以下で確認できる．

developer.getpebble.com

Pebble.jsで色指定する際の特徴

  • キャメルケースっぽい．
  • 色の（フォント名も）スペースは詰める．
  • 意味が変わる部分の間は - （ハイフン）を挟む．

* 残念ながら現状ではCSSのように16進数表記の指定ができない．
↑
（ラッパー作ったら需要ありそう，存在しない色は近似値的な色にする的な）

var textField = new UI.Text({
  position: new Vector2(18,55),
  size: new Vector2(144, 168),
  //font: 'gothic-28-bold',
  font: 'gothic-28',
  backgroundColor: 'black',
  color: 'lightGray',
  textOverflow:'wrap',
  //textAlign:'center',
  text: ''
});

デフォルトのシステムフォント

以下は公式のサンプルコード．

github.com

ただし，数値のみしかないフォントも多い．
デザイン重視のアプリはカスタムフォント必須かも．

色について

Pebble C の場合 APLINE と BASALT で色を分けないとAPLINE で BUILD ERRORになる．
（APLITEの画面表示は2値なので白か黒以外の色の指定は出来ない）
しかし， Pebble.js の場合， BASALT 向けに lightGray と書いても APLINE で勝手に白になる．便利！

whiteを指定した場合の結果（左が APLINE で右が BASALT ）
f:id:japanetfutan:20150918162852p:plain f:id:japanetfutan:20150918162854p:plain

lightGrayを指定した場合の結果（左が APLINE で右が BASALT ）
f:id:japanetfutan:20150918162848p:plain f:id:japanetfutan:20150918162850p:plain

↑
自動で lightGray が white になっているのが確認できる．

Pebble.jsで使う色一覧を別エントリーにまとめました．

dvorak.hatenablog.com

memo.

APLITE : Pebble Classic，Pebble Watch
BASALT : Pebble Time

Settings（設定・コンフィグ周りの処理）

var Settings = require('settings');
  • Settings.config で設定画面への遷移，戻って来た（設定画面閉じた）時の処理を記述できる
  • 設定画面からの戻りの処理（鯖のWeb）はPebble CのJSと同様， pebblejs://close# な感じ

developer.getpebble.com

何か，勝手にオプション更新してくれる

指定した設定用ページのURLに対して

以下のオプションを勝手に付与してくれる（実際以下は「"{}」も含め，エンコードされてる）
?#{"start":null,"end":null}

デコードして，Hashの頭の # を消して， JSON.parse(HASH_DATA) するとJSONデータとしてサーバー側で扱える．

var h = decodeURIComponent(document.location.hash).substr(1);
//alert(h);
h=JSON.parse(h);
Pebble.js側は本当に勝手に色々やってくれるので，サーバー側でKeyとValueをセットする部分さえ作ればいい．

仕組みとしては，設定にstartとendと言う項目があったとして，
Pebble.js側は何もしなくても勝手にデータを上書きして更新してくれる．
（機能としてはJSのlocalStorageを使っている）

* 初回アクセス時にエラーになるので当然，宣言，初期化は必要．

サーバー側htmlでUIWebを閉じる際に 'pebblejs:close#'+encodeURIComponent(JSON.stringify({start:'value1', end:'value2'})); となっていれば，
あとはPebble.jsが勝手にKeyとValueを保存してくれる．

var options = {start:'value1, end:'value2'};
var location_uri = "pebblejs://close#" + encodeURIComponent(JSON.stringify(options));
document.location = location_uri;

次（2回目以降）に設定htmlを開く際にもPebble.js側は何もする必要がなく，設定ファイルを開くだけでいい．
（勝手に保存されているlocalStorageのKeyとValueを全てJSON StringにエンコードしてURLの語尾に付与する．）

この勝手にURL語尾に付与する部分とか最初気付かなくて色々悩んでた…Pebble.jsさん勝手にやり過ぎてて困る…
凄いんだけど，もっとDocumentにちゃんと記載してくれよ(；・∀・)

Settings.option

データの保存は内部的にJSのlocalStorageの上位層？に作られてるっぽい．
Settings.option を使ってるパラメータの保存，削除などを行う．

 Settings.data

Settings.option に影響させない（パラメータ以外のデータ？）については，
Settings.data を使う．（ネイティブJSのlocalStorageよりも Settings.dataの利用を推奨している）

まとめ的な

ググるとPebble C で Watchfaceアプリ作る的な情報が多い．
Pebble.jsはWebフロントエンドエンジニアやJS触れるデザイナーにも扱えるので是非挑戦して欲しいと思いました．
CloudPebble 使えばエミュレータもIDEも込みなので0円で，ブラウザのみでアプリがJavaScriptで作れちゃいます．
Pebble.js自体はまだ一応βですが，最初の「何だかよく分からない」部分がボトルネックになってると思うので，そこを少しでも取り払えたらな，と思いました．