Adding Web Content to a Rocky.js JavaScript Watchface

デバイスの互換性について Rocky.js は Pebble OS v4.x を必要とするため、Pebble Classic および Pebble Steel には対応しません。

Note: Pebble の新しい JavaScript ランタイムを開発中です！以前の Rocky.js 実装はModdableに置き換えられます。Moddable は、Pebble 開発に強化された機能をもたらす最新のオープンソース JavaScript エンジンです。Moddable を使用すると、開発者はより充実したランタイムと SDK で C と JavaScript を組み合わせたアプリを作成できます。詳細についてはこのブログ投稿をご覧ください。このチュートリアルは参考用にアーカイブされていますが、将来の SDK バージョンでは動作しない可能性があります。

rocky

PebbleKit JS を使用してユーザーのスマートフォンアプリ上で実行される JavaScript コンポーネント pkjs を使用します。この pkjs コンポーネントは、インターネットから情報にアクセスし、スマートフォン上で処理させるものです。そのため、この pkjs 環境は、Pebble Watch のようなハードウェアやメモリの制約はありません。

最初のステップ

最初に行う必要があるのは、Part 1 で作成したプロジェクトからファイルを編集することです。ファイルは /src/pkjs/index.js と呼ばれ、スマートフォンアプリの pkjs 部分のエントリーポイントです。

スマートフォンアプリ側のこの pkjs コンポーネントは、Pebble Watch とのメッセージの送受信、ユーザーの位置情報へのアクセス、Web リクエストの実行、その他のさまざまなタスクを実行できます。これらはすべて PebbleKit JS のドキュメントに記載されています。

Rocky.js（Pebble Watch 側）と pkjs（スマートフォン側）は両方とも JavaScript を使用していますが、API と目的は異なります。違いを理解し、間違ったコンポーネント内でコードを実行しようとしないことが重要です。

メッセージの送受信

例に進む前に、Pebble Watch 上の Rocky.js コンポーネントとスマートフォンアプリ上の pkjs コンポーネント間でメッセージを送受信する方法を理解することが重要です。

メッセージの送信

Pebble Watch からスマートフォンアプリにメッセージを送信するには、任意の JSON オブジェクトを送信できる rocky.postMessage メソッドを使用します：

// rocky index.js
var rocky = require("rocky");

// Send a message from the smartwatch
rocky.postMessage({ test: "hello from smartwatch" });

スマートフォンアプリから Pebble Watch にメッセージを送信するには、Pebble.postMessage メソッドを使用します：

// pkjs index.js

// Send a message from the mobile device
Pebble.postMessage({ test: "hello from mobile device" });

メッセージリスナー

rocky.on メソッドを使用して、Pebble Watch 側動作コードにメッセージリスナーを作成できます：

// rocky index.js

// On the smartwatch, begin listening for a message from the mobile device
rocky.on("message", function (event) {
  // Get the message that was passed
  console.log(JSON.stringify(event.data));
});

Pebble.on メソッドを使用して、スマートフォンアプリ側のpkjs コードにメッセージリスナーを作成することもできます：

// pkjs index.js

// On the phone, begin listening for a message from the smartwatch
Pebble.on("message", function (event) {
  // Get the message that was passed
  console.log(JSON.stringify(event.data));
});

位置情報のリクエスト

pkjs コンポーネントは、ユーザーのスマートフォンの位置にアクセスできます。Pebble Watch 側で動作する Rocky.js コンポーネントは位置情報に直接アクセスできないため、pkjs にリクエストする必要があります。

この機能を使用するには、アプリケーションの package.json ファイルの pebble.capabilities 配列に location フラグを含める必要があります。

// file: package.json
// ..
  "pebble": {
    "capabilities": ["location"]
  }
// ..

location フラグを追加したら、Geolocation API を使用してスマートフォンの GPS 座標にアクセスできます。この例では、Pebble Watch から「fetch」メッセージを受信したときにユーザーの位置情報をリクエストします。

// pkjs index.js

Pebble.on("message", function (event) {
  // Get the message that was passed
  var message = event.data;

  if (message.fetch) {
    navigator.geolocation.getCurrentPosition(
      function (pos) {
        // TODO: fetch weather
      },
      function (err) {
        console.error("Error getting location");
      },
      { timeout: 15000, maximumAge: 60000 }
    );
  }
});

Web サービス呼び出し

スマートフォンアプリの pkjs 側は、XMLHttpRequest オブジェクトにもアクセスできます。このオブジェクトを使用すると、開発者は外部 Web サービスと通信できます。

このチュートリアルでは、Pebble Developer Community でよく使用される一般的な天気 API である Open Weather Map と連携します。

XMLHttpRequest オブジェクトは非常に強力ですが、最初は使い始めるのが難しい場合があります。少し簡単にするために、オブジェクトをヘルパー関数でラップして、リクエストを行い、コールバックを発生させます：

// pkjs index.js

function request(url, type, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function () {
    callback(this.responseText);
  };
  xhr.open(type, url);
  xhr.send();
}

request() メソッドを呼び出すときに提供する必要がある 3 つの引数は、URL、リクエストのタイプ（GET または POST）、およびレスポンスが受信されたときのコールバックです。

天気データの取得

URL は OpenWeatherMap API ページで指定されており、getCurrentPosition() によって提供される座標（緯度と経度）と、それに続く API キーが含まれています：

API KEY が必要です

2015年10月現在、OpenWeatherMapのデータを取得するにはAPIキーが必要です。これらはOpenWeatherMap.orgから無料で取得できます。

var myAPIKey = "1234567";
var url =
  "http://api.openweathermap.org/data/2.5/weather" +
  "?lat=" +
  pos.coords.latitude +
  "&lon=" +
  pos.coords.longitude +
  "&appid=" +
  myAPIKey;

すべてをまとめると、メッセージハンドラは次のようになります：

// pkjs index.js

var myAPIKey = "1234567";

Pebble.on("message", function (event) {
  // Get the message that was passed
  var message = event.data;

  if (message.fetch) {
    navigator.geolocation.getCurrentPosition(
      function (pos) {
        var url =
          "http://api.openweathermap.org/data/2.5/weather" +
          "?lat=" +
          pos.coords.latitude +
          "&lon=" +
          pos.coords.longitude +
          "&appid=" +
          myAPIKey;

        request(url, "GET", function (respText) {
          var weatherData = JSON.parse(respText);
          //TODO: Send weather to smartwatch
        });
      },
      function (err) {
        console.error("Error getting location");
      },
      { timeout: 15000, maximumAge: 60000 }
    );
  }
});

仕上げ

OpenWeatherMap から天気データを受信したら、Pebble.postMessage を使用して Pebble Watch に送信する必要があります：

// pkjs index.js

// ..
request(url, "GET", function (respText) {
  var weatherData = JSON.parse(respText);

  Pebble.postMessage({
    weather: {
      // Convert from Kelvin
      celcius: Math.round(weatherData.main.temp - 273.15),
      fahrenheit: Math.round(((weatherData.main.temp - 273.15) * 9) / 5 + 32),
      desc: weatherData.weather[0].main,
    },
  });
});

Pebble Watch 上で、weather メッセージをリッスンするメッセージハンドラを作成し、画面に描画できるように情報を保存する必要があります。

// rocky index.js
var rocky = require("rocky");

// Global object to store weather data
var weather;

rocky.on("message", function (event) {
  // Receive a message from the mobile device (pkjs)
  var message = event.data;

  if (message.weather) {
    // Save the weather data
    weather = message.weather;

    // Request a redraw so we see the information
    rocky.requestDraw();
  }
});

また、アプリケーション起動時と 1 時間ごとに天気データをリクエストするために、Pebble Watch から「fetch」コマンドを送信する必要があります：

// rocky index.js

// ..

rocky.on("hourchange", function (event) {
  // Send a message to fetch the weather information (on startup and every hour)
  rocky.postMessage({ fetch: true });
});

最後に、温度と状態を表示するために、Rocky の draw ハンドラに新しいコードが必要です：

// rocky index.js
var rocky = require("rocky");

// ..

function drawWeather(ctx, weather) {
  // Create a string describing the weather
  //var weatherString = weather.celcius + 'ºC, ' + weather.desc;
  var weatherString = weather.fahrenheit + "ºF, " + weather.desc;

  // Draw the text, top center
  ctx.fillStyle = "lightgray";
  ctx.textAlign = "center";
  ctx.font = "14px Gothic";
  ctx.fillText(weatherString, ctx.canvas.unobstructedWidth / 2, 2);
}

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

  // Clear the screen
  ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);

  // Draw the conditions (before clock hands, so it's drawn underneath them)
  if (weather) {
    drawWeather(ctx, weather);
  }

  // ..
});

まとめ

これで、JavaScript 文字盤に Web コンテンツを追加することに成功しました！これを行うには：

package.json で location を有効にしました
pkjs に Pebble.on('message', function() {...}); リスナーを追加しました
pkjs でユーザーの現在の GPS 座標を取得しました
XMLHttpRequest を使用して OpenWeatherMap API にクエリを実行しました
Pebble.postMessage() を使用して、スマートフォンアプリから Pebble Watch に現在の天気状態を送信しました
Pebble Watch 上で、pkjs から天気データを受信するために rocky.on('message', function() {...}); リスナーを作成しました
hourchange イベントをサブスクライブして、起動時と 1 時間ごとに天気データをリクエストするメッセージを pkjs に送信しました
最後に、天気状態をテキストとして画面に描画しました

コードに問題がある場合は、下のボタンを使用して提供されているサンプルソースコードと照合してください。

View Source Code

次のステップ

このチュートリアルを楽しんでいただき、何か素晴らしいものを作るインスピレーションになれば幸いです！

作成したものを @pebbledev にツイートして教えていただくか、Discord の素晴らしい開発者コミュニティに参加してください。

Tutorials