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

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

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

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


cloud_01

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

cloud_02

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

cloud_03

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

cloud_04

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

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

cloud_05

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


First Steps

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

ログインします。

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

名前は何でもいいです。ここでは「Tutorial 1」にしておきます。
「PROJECT TYPE」は「Pebble C SDK」を選び、テンプレートは空のプロジェクト「Empty project」を選びます。
cloud_06
現状だと、SDKを「SDK 2」と「SDK 3」から選べるようになっています。
cloud_07
「SDK 3」がPebble Timeのカラー対応になっています。「SDK 3」は今のところ「Pebble C」の開発環境しかないので、PROJECT TYPEの選択は無し。
最終的にはカラー対応もしたいので「SDK 3」で行ってみます。
「CREATE」ボタンを押してプロジェクトを作成です。

cloud_12

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

(3)プロジェクトの設定変更
左メニューの「SETTING」を選択して、APP KINDを「Watchapp」から「Watchface」に変更します。
cloud_09
違いは以下の通りです。
「Watchapp」:ボタンは4つ全部使える。メニューがある。
「Watchface」:デフォルトの画面表示(Watchface)にできる。ボタンは使えない。登録されているWatchfaceは上下のボタンで切り替えることができる。(上下ボタンでのWatchface切り替えは、Pebble Timeだと廃止されるっぽいですが。)
cloud_10
ちなみにプロジェクトが不要になった場合には「SETTING」一番下に「DELETE PROJECT」から削除できます。

Watchface Basics

(1)Cのソースファイルを新規作成します。
cloud_11
「Add New」から「C file」を選択。名前は「main.c」で「CREATE」を選択。
cloud_12
main.cファイルが新しく作成されました。
#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が動くようになります。
cloud_16

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

cloud_17
エミュレータが起動して、インストール完了でダイアログ出ます。「DISMISS」でダイアログ消えます。ここで「VIEW LOGS」を押すとプログラムが出力するLOGを見ることができます。まだ、エミュレータに表示されているのは、何もない真っ白画面ですね。
cloud_19
エミュレータはマウスでボタン操作できます。
ビルドでエラーが出た場合は、
cloud_18
「BUILD LOG」からエラー場所を見つけて修正できます。

ここまでの内容は、チュートリアルページの「EDIT IN CLOUDPEBBLE」から完成済みプロジェクトを取得できますのでサクっと結果だけ見たい人はこれがいいですね。
cloud_13
cloud_14
チュートリアルサンプルでプロジェクトが作成されます。
cloud_15
上記で作った内容がすでに入ってるので、すぐ実行して確認可能です。


コメント投稿は締め切りました。