Rocky.js Overview

Rocky.js を使用すると、ウォッチ上でネイティブに実行される ECMAScript 5.1 JavaScript を使用して Pebble 4.0 ウォッチフェイスを作成できます。Rocky.js は、JerryScript とのコラボレーションにより実現されています。

現時点では、Rocky.js を使用してウォッチアプリを作成することはできませんが、現在この目標に向けて取り組んでいます。

ウォッチ上で JavaScript が動く！

var rocky = require("rocky");

rocky.on("minutechange", function (event) {
  rocky.requestDraw();
});

rocky.on("draw", function (event) {
  var ctx = event.context;
  ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
  ctx.fillStyle = "white";
  ctx.textAlign = "center";

  var w = ctx.canvas.unobstructedWidth;
  var h = ctx.canvas.unobstructedHeight;
  ctx.fillText("JavaScript\non the watch!", w / 2, h / 2);
});

Rocky.js プロジェクト

Rocky.js プロジェクトは、C SDK を使用して作成されたプロジェクトとは異なる構造を持っています。ウォッチ上で実行される Rocky.js (rocky) コンポーネントと、スマートフォン上で実行される PebbleKit JS (pkjs) コンポーネントがあります。pkjs コンポーネントを使用すると、開発者は Web サービスにアクセスしたり、位置情報を使用したり、データ処理タスクをスマートフォンにオフロードしたりできます。

プロジェクトの作成

Pebble SDK をインストールしたら、次のコマンドを使用して新しい Rocky.js プロジェクトを作成できます：

$ pebble new-project --rocky projectname

Rocky JS

ローカル SDK では、ウォッチ上のアプリケーションへのメイン エントリ ポイントは /src/rocky/index.js です。

このファイルは、Rocky.js JavaScript コードが配置される場所です。このファイル内のすべてのコードは、スマートウォッチ上で実行されます。標準的な JavaScript に加えて、開発者は rocky オブジェクトにアクセスできます。追加のスクリプトも追加できます。以下を参照してください。

PebbleKit JS

ローカル SDK では、主要な PebbleKit JS スクリプトは /src/pkjs/index.js です。

すべての PebbleKit JS コードは、スマートウォッチに接続されたモバイル デバイス上で実行されます。標準的な JavaScript に加えて、開発者は WebSockets、XMLHttpRequest、Geolocation、LocalStorage、および Pebble オブジェクトにアクセスできます。追加のスクリプトも追加できます。以下を参照してください。

Shared JS

Rocky.js と PebbleKit JS の間でコードを共有する必要がある場合は、共有エリアに JavaScript ファイルを配置できます。

ローカル SDK では、共有ファイルを /src/common/ に配置します。

共有 JavaScript ファイルは、CommonJS Module 形式を使用して参照できます。

// Shared JS (index.js)
function test() {
  console.log("Hello from shared code");
}

module.exports.test = test;

// Rocky JS
var shared = require("../common/index");
shared.test();

// PebbleKit JS
var shared = require("../common/index");
shared.test();

追加スクリプト

Rocky JS と PebbleKit JS は、どちらも複数の .js ファイルの使用をサポートしています。これにより、コードをクリーンでモジュール化された状態に保つことができます。追加のスクリプトには CommonJS Module 形式を使用し、スクリプト内で require() してください。

// additional.js
function test() {
  console.log("Additional File");
}

module.exports.test = test;

var additional = require("./additional");
additional.test();

利用可能な API

Rocky.js の最初のリリースでは、ウォッチフェイスのみを作成する機能に焦点を当てています。時間の経過とともに、さらに多くの API を追加していく予定であり、JavaScript が Pebble 開発者エコシステムの他の部分と機能の同等性を持つことを決意しています。

私たちは、標準的な Web APIs に沿って API を開発しました。これは既存の Pebble 開発者にとっては奇妙に見えるかもしれませんが、これによりコードの再利用が促進され、全体的により良いエクスペリエンスが提供されると確信しています。

システム イベント

すべてのウォッチフェイスが必要とする可能性が高い一連のイベントを提供しており、これらの各イベントでは、イベントが発生したときに呼び出されるコールバック関数を提供できます。

既存の Pebble 開発者は、次のようなチック スタイルのイベントに精通しているでしょう：

• secondchange
• minutechange
• hourchange
• daychange

これらのイベントを使用することで、setInterval の代わりに、壁時計の時刻と自動的に同期を保つことができます。

また、pkjs コンポーネントから JavaScript JSON オブジェクトを受信するための message イベント、利用可能なシステム メモリに顕著な変化があった場合の memorypressure イベント、画面更新を制御するために使用する draw イベントもあります。

var rocky = require("rocky");

rocky.on("minutechange", function (event) {
  // Request the screen to be redrawn on next pass
  rocky.requestDraw();
});

Drawing Canvas

キャンバスは 2D レンダリング コンテキストで、Pebble スマートウォッチのディスプレイを表します。キャンバス コンテキストは、テキストと図形の描画に使用されます。可能な限り標準的な Web API メソッドとプロパティをサポートすることを目指しているため、キャンバスは CanvasRenderingContext2D として利用可能になっています。

キャンバスはまだ完全には実装されていないため、現時点では特定のメソッドとプロパティは使用できないことに注意してください。私たちはまだこれに取り組んでいるため、将来のアップデートでより多くの機能が期待できます！

rocky.on("draw", function (event) {
  var ctx = event.context;

  ctx.fillStyle = "red";
  ctx.textAlign = "center";
  ctx.font = "14px Gothic";

  var w = ctx.canvas.unobstructedWidth;
  var h = ctx.canvas.unobstructedHeight;
  ctx.fillText("Rocky.js Rocks!", w / 2, h / 2);
});

メッセージング

Rocky.js プロジェクトのみの場合、新しい簡素化された通信チャネル postMessage() と on('message', ...) を追加しました。これにより、スマートフォンとスマートウォッチの間で JavaScript JSON オブジェクトを送受信できます。

// Rocky.js (rocky)

// Receive data from the phone (pkjs)
rocky.on("message", function (event) {
  console.log(JSON.stringify(event.data));
});

// Send data to the phone (pkjs)
rocky.postMessage({ command: "fetch" });

// PebbleKit JS (pkjs)

// Receive data from the watch (rocky)
Pebble.on("message", function (event) {
  if (event.data.command === "fetch") {
    // doSomething();
  }
});

// Send data to the watch (rocky)
Pebble.postMessage({
  temperature: 90,
  condition: "Hot",
});

Rocky.js チュートリアルの part 2 で、post message の動作例を確認できます。

Memory Pressure

memorypressure イベントは、利用可能なシステム メモリに顕著な変化があるたびに発行されます。これにより、開発者はメモリ不足時にアプリケーションが終了するのを防ぐために、メモリを解放する機会が得られます。

rocky.on("memorypressure", function (event) {
  console.log(event.level);
});

memorypressure イベントの詳細な例は、ここで提供されています。

Content Size

contentSize プロパティを使用すると、開発者はシステムの Text Size 設定（Settings > Notifications > Text Size）に基づいて、ウォッチフェイスのデザインを動的に適応させることができます。

contentSize は、UserPreferences オブジェクトを介して Rocky.js で公開されています。

rocky.on("draw", function (event) {
  var ctx = event.context;
  // ...
  if (rocky.userPreferences.contentSize === "x-large") {
    ctx.font = "42px bold numbers Leco-numbers";
  } else {
    ctx.font = "32px bold numbers Leco-numbers";
  }
  // ...
});

アプリ構成

Clay は、Pebble アプリにオフライン構成ページを簡単に追加できる JavaScript ライブラリです。デフォルトでは、Clay は現在 Rocky.js と互換性がありませんが、clay.js ファイルを手動で含め、デフォルトのイベントをオーバーライドすることで動作させることができます。

Clay を使用するコミュニティの Rocky.js プロジェクトは、ここで見つけることができます。

制限事項

Rocky.js はついにベータ版を脱却しましたが、まだいくつかの制限と制約があることに注意する必要があります：

• カスタム フォント、画像、その他のリソースのサポートはまだありません。
• C コードは使用できません。
• messageKeys はありません。
• Pebble Packages はサポートされていません。
• Rocky.js プロジェクトには、ファイル サイズとメモリの制約があります。大きな JS ライブラリを含めると、おそらく動作しません。

はじめに

Rocky.js ウォッチフェイスの入門用に、2 部構成のチュートリアルを作成しました。このチュートリアルでは、デジタルおよびアナログのウォッチフェイスの作成、さらにインターネットから天気情報を取得する方法について、知っておく必要があるすべてのことを説明しています。

より詳細な情報をお探しの場合は、API ドキュメントをご覧ください。