新モデル「Pebble Time」も発表され大注目のプロダクト、スマートウォッチ「Pebble」の基礎知識とアプリ開発入門

技術系同人誌サークルとのコラボ企画！編集部特選ニッチな技術記事（1）

2015/03/19 14:00

ポスト

Pebbleアプリの開発方法

　Pebbleアプリを開発する方法はいくつかあります。名前が似ていてややこしいものがあるため、先に一覧としてまとめてみます。

表1　開発方法まとめ
方法	説明
Pebble C SDK	Pebble本体側で動作するアプリを書くためのSDK。WatchappやWatchfaceをC言語で実装します。
Simply.js	Pebble AppをJavascriptで書けるようにしたフレームワーク。画像の表示など複雑なことは未サポートです。
Pebble.js	Simply.jsと同様のフレームワークですが、よりできることが増えています。今はbeta版です。
PebbleKit iOS／Android	iOSやAndroidのアプリの中に組み込むライブラリ。本体で動作するPebbleアプリと連携する際に用います。
PebbleKit JS	親機側のPebble公式アプリ上で動作するPebbleKitのJavascript版です。独自のiOS／Androidアプリの開発が不要になります。

　今回は、Pebbleアプリの開発方法としてメジャーと思われるPebble C SDK＋PebbleKit JSとPebble.jsの2つを取り上げます。

Pebble C SDK＋PebbleKit JS

　今現在、v2.9向けのPebbleアプリを開発する際の一番ベーシックな組み合わせだと思います。本体側で動作するアプリをC言語で記述し、APIを叩いたりネットワーク通信したりする箇所をPebbleKit JSで記述します。C言語では主にPebble本体のディスプレイに画像や文字を表示する部分を記述することになります。C言語をあまり触ったことがない自分でも素直に記述することができました。

　PebbleKitにはJS版以外にもiOS／Android用に組み込み用のライブラリが公開されています。自前のモバイルアプリを既に持っている場合にはそのライブラリを組み込むことで、Pebble本体と連携することが可能になります。しかし、いちいち1つのPebbleアプリごとに対応する1つのモバイルアプリを作るのは非常に面倒くさいです。PebbleKit JSを使うと、親機のPebbleアプリと連携する部分をJavascriptで書けるだけでなく、iOS／AndroidのPebble公式アプリで実行されるため、モバイルアプリの用意や配布をする必要が無くなり、個人で開発する上では嬉しいことが多いです。

　UIは基本的にはウィンドウとレイヤーと呼ばれる仕組みを使います。根本にあるウィンドウのレイヤーに別のレイヤーを乗せていき、1つの画面を構築します。例えば、画面の上に文字列を表示する場合には、以下のように記述します。一見癖があるように見えますが、少し書いてみるとすぐ慣れると思います。

Pebble C SDKで文字列と画像を描画する例

// 宣言
Window *window;
TextLayer *text_layer;
// ~~~~~
// 初期化と配置
window = window_create();

text_layer = text_layer_create(GRect(0, 50, 144, 30));
text_layer_set_text(text_layer, "Hello Pebble!");
text_layer_set_font(text_layer, fonts_get_system_font(FONT_KEY_GOTHIC_24_BOLD));
text_layer_set_text_alignment(text_layer, GTextAlignmentCenter);

layer_add_child(window_get_root_layer(window), text_layer_get_layer(text_layer));
// ~~~~~
// 後始末
text_layer_destroy(text_layer);
window_destroy(window);

Pebble C SDKでの文字列の表示例

Pebble.js

　Pebble.jsは、Pebbleアプリを全てJavaScriptのみで記述できるようにしたフレームワークです。PebbleKit JSと名前が似ていますが全く別物です（検索ビリティが低いのが辛い！）。親機側で動作するため、位置情報の取得やインターネット接続も可能で、またメモリに関してもほぼ無尽蔵に使えます。Pebble C SDK＋PebbleKit JSのときのようにC言語とJavaScriptの複数の言語を用いてコードを書かなくても良いという利点や、JavaScriptを使ってモダンな感じでPebbleアプリを作ることができる利点があります。C書くの辛い！という方はPebble.jsから始めてみるのもいいかもしれません。

　Pebble.jsでは、ウィンドウとエレメントを組み合わせてUIを構成します。例えば、画面の上に文字列を表示する場合には、以下のように記述します。Pebble C SDKのときと比べてみると、やっていることは同じでも大分モダンに書けることが分かると思います。ちなみに背景色や文字色がPebble C SDKのときと白黒が真逆なのは、Pebble C SDKは白地に黒字を書くようなデフォルト値を設定しているのに対し、Pebble.jsではその逆になっているためです。なぜ統一しないのかちょっと不思議なところです。

Pebble.jsで文字列と画像を描画する例

var _window = new UI.Window();
var text = new UI.Text({
    position  : new Vector2(0, 50),
    size  : new Vector2(144, 30),
    font  : 'gothic-24-bold',
    text  : 'Hello Pebble!',
    textAlign : 'center'
});
_window.add(text);

Pebble.jsでの文字列の表示例

　Pebble.jsはオープンソースとして公開されているので、詳しく知りたい方は目を通してみるのもいいかもしれません。ざっと目を通した感じでは、Simply.jsを拡張したものを内包していて、Pebble C SDKの各インターフェースごとに対応する命令をJavaScript側から投げることで、C言語での記述を不要にし、JavaScriptだけでアプリのコードを書けるようにしているようでした。

　Pebble.jsを利用する際は、2015年2月の時点でβ版なので、APIが突然変わる可能性がある点に注意してください。また、ネイティブ（C言語）で書く場合と比べると入力レスポンスが悪いのが体感できるレベルだったので、現時点だと高い入力レスポンスを要求するゲームを作るのにも向いていないのかもしれません。今Pebble.jsを使う場合には少し注意して使ってみることをオススメします。

おわりに

　ざっくりとPebbleに関して書いてみました。公式や有志の方による開発チュートリアルも整っているので最初に何か作ってみたくなった時は、そこから始めてみると良いと思います。公式チュートリアルは、天気情報を取得してPebble上に表示するところまでやるので、結構やりごたえのあるものとなっています。オススメは、公式のWatchfaceチュートリアルから、有志の方が書いたSDK 2.0チュートリアルをやってみるルートです。両方ともPebble C SDK＋PebbleKit JSでの開発を対象としたチュートリアルなので、Pebble.jsからやってみたい方は公式のPebble.jsチュートリアルをやってみると、Pebble.jsの基本部分は大丈夫だと思います。

　これを読んでPebbleに興味を持った方は、ぜひ白黒ディスプレイのPebbleを買って愛でてください（通常版は99ドル、スチール版は199ドル）。発送方法にもよりますが注文してから10日以内には手元に届くと思います。カラーになったPebble Timeが早く手元に欲しいという方はKickstarterのPebble Timeのプロジェクトページを覗いてみてください。

　Pebble Timeでは、カラーディスプレイや音声入力に対応し機能的な面で十分期待できますが、時計のデザインに関してもPebbleよりも受けやすそうな見た目になったので（個人的には「これだけ付いてりゃいいんでしょ！」的に最適化されたPebbleの見た目も大好きですが）Pebble以上に人気が出るのではないでしょうか。まだ気が早いかもしれませんが、Pebble Timeから進化した後継機はどんなものになるんでしょうね？ Pebbleには時計としての実用性とガジェットとしてのワクワク感を備えたまま突き進んでもらいたいです。それでは、失礼します。

本記事が掲載されている同人誌『NANAKA+Inside PRESS vol.6』について

　Webサービス屋がよってたかってつくる技術マガジン『NANAKA+Inside PRESS』は、コミックマーケットにあわせて発行しています。

　今回の特集は、「メトロパイパー男～東京メトロのパイプをパイプで覗け」です。東京メトロのオープンデータ活用コンテストにシェルスクリプトで挑む男の物語。その男の名はシェルショッカー！出来上がったサイトはメトロパイパー！！副都心線と有楽町線の乗り入れも完全再現。炎上の発生メカニズムと、起こってしまったときの対策コラム「そうだったのか！炎上について学びましょう」、ビックデータの歴史を速習できる「Hadoop界隈が何を言っているかわからない件」なども掲載。表紙の紙はNTスフールを採用。不思議な肌触りです。

　サークルの歴史と、この本を作るために利用した組版ツールについての折本「NANAKA+INSIDE PRESS vol.6付録　組版についての小冊子」付き。

► お求めは、COMIC ZINまたはコミックマーケットなどの即売会にて。

NANAKA+Inside PRESS vol.6

価格：700円（イベント価格）／書店委託 1233円

仕様：B5版 44ページモノクロ

発行：第7開発セクション