Pebble 開発チュートリアル(1-1)

Pebble Timeが届く前に、アプリ開発環境を試してみましょう。

開発環境は、Mac用、Linux用があります。Windowsの場合は、Virtual Machineを動かして、その中でLinux用の環境を使うことになります。

これともう一つ、Webブラウザで開発できるクラウド開発環境「CLOUDPEBBLE」があります。こちらでも、開発・エミュレータの利用・実機インストールすべてできます。何も準備しなくても、ブラウザさえあればどこでも開発できるのでとても便利。今回は、これを使いましょう。

Pebble Developerサイトに接続して「GET THE SDK」メニューから「LAUNCH CLOUDPEBBLE」を選びます。

最初の説明画面になります。「GET STARTED」を選ぶと、ログイン画面が開きます。ログインIDの登録は特に迷うところないと思います。

ログイン終わったら、チュートリアルにしたがっていきます。Developerサイトの「GET STARTED」メニューから「VIEW TUTORIAL」を選択。

チュートリアル画面になります。「Showing instructions for the SDK. Using CloudPebble?」を選択して、表示内容を CloudPebble用にしておいてください。

このチュートリアルの目標は

こういうデジタル時計Watchfaceを作るところまでです。C言語で作成します。

First Steps

(1)CloudPebbleを開いてログイン

ログインします。

(2)「Create」で新しいプロジェクトを作成。

名前は何でもいいです。ここでは「Tutorial 1」にしておきます。
「PROJECT TYPE」は「Pebble C SDK」を選び、テンプレートは空のプロジェクト「Empty project」を選びます。

現状だと、SDKを「SDK 2」と「SDK 3」から選べるようになっています。

「SDK 3」がPebble Timeのカラー対応になっています。「SDK 3」は今のところ「Pebble C」の開発環境しかないので、PROJECT TYPEの選択は無し。
最終的にはカラー対応もしたいので「SDK 3」で行ってみます。
「CREATE」ボタンを押してプロジェクトを作成です。

中身が何もないプロジェクト完成。

(3)プロジェクトの設定変更

Watchface Basics

(1)Cのソースファイルを新規作成します。

「Add New」から「C file」を選択。名前は「main.c」で「CREATE」を選択。

#include <pebble.h>

(2)チュートリアルに従ってベースとなる記載追加。

#include <pebble.h>

static void init() {
}

static void deinit() {
}

int main(void) {
  init();
  app_event_loop();
  deinit();
}

(3)Window表示用の処理を追加。

includeの下
・Windowの定義

static Window *s_main_window;

・Window load、Window unload関数

static void main_window_load(Window *window) {
}
static void main_window_unload(Window *window) {
}

init()内
・Window作成、Windowハンドラ定義

static void init() {
  // Create main Window element and assign to pointer
  s_main_window = window_create();
  // Set handlers to manage the elements inside the Window
  window_set_window_handlers(s_main_window, (WindowHandlers) {
    .load = main_window_load,
    .unload = main_window_unload
  });
  // Show the Window on the watch, with animated=true
  window_stack_push(s_main_window, true);
}

deinit()内
・Window削除

static void deinit() {
  // Destroy Window
   window_destroy(s_main_window);
}

これで、真っ白WindowのWatchfaceが動くようになります。

右端の緑色矢印ボタンで、ファイルセーブ後にエミュレータへのインストールと実行。

エミュレータが起動して、インストール完了でダイアログ出ます。「DISMISS」でダイアログ消えます。ここで「VIEW LOGS」を押すとプログラムが出力するLOGを見ることができます。まだ、エミュレータに表示されているのは、何もない真っ白画面ですね。

エミュレータはマウスでボタン操作できます。

ビルドでエラーが出た場合は、