前回は、PebbleTime の開発環境について紹介しました。
CloudPebble という、Web 上の IDE とエミュレータを使用して開発ができるのでしたね。

今回は、CloudPebble を使って、実際に Watchface を作って動かしてみるところまでを紹介します。

準備

CloudPebble を使う上で、以下 2 点の準備が必要です。

Pebble アカウントの作成
- Pebbleのアカウント作成画面から「SIGN UP」をクリックしてカウントを作成してください。メールアドレスとパスワードが必要です。
github アカウントの作成
- github のトップページから「Sign up for Github」をクリックしてアカウントを作成してください。
- これは必須ではないですが、コードをバージョン管理するために必要です。

CloudPebble

プロジェクト一覧

ログインすると、まず自分が作成したプロジェクトの一覧が表示されます。初めてログインしたときは空ですね。

f:id:tatur0u:20150625220007p:plain

設定画面

右上の「SETTINGS」ボタンを押すと、CloudPebble 全体の設定画面が開きます。

f:id:tatur0u:20150625220013p:plain

ここでは以下の設定が可能です。それぞれお好みで設定してください。

カテゴリ	項目	値	説明
EDITOR SETTINGS	AUTOCOMPLETION	As-you-type	コードを書くたびに自動的にコンパイルしてエラーをチェックする
		When pressing Ctrl-Space	コードを保存するたびに自動的にコンパイルしてエラーをチェックする
		Never	自動コンパイルは実施しない
	KEYBINDS	Standard	スタンダード（使用している OS の流儀に従う）
		vim-like	vim ぽい
		emacs-like	emacs ぽい
	THEME	CloudPebble	背景やシンタックスハイライトの色
		Monokai (Sublime Text)
		Blackboard (TextMate)
		Eclipse
		Solarized (light)
		Solarized (dark)
	INDENTS	Using spaces	字下げにスペースを使用する
	INDENTS	Using tabs	字下げにタブを使用する
	TAB WIDTH		字下げの幅（スペース何個分か）デフォルト: 4
GITHUB INTEGRATION	github アカウントを登録すると、任意のリポジトリへ push したり pull したりできます。

プロジェクトの作成

右上の「PROJECTS」をクリックし、プロジェクト一覧画面に戻るとプロジェクトを作成できます。

「CREATE」ボタンを押してプロジェクトを作成しましょう。

f:id:tatur0u:20150625220044p:plain

ここでは、以下が選択できます。

項目	値		説明
PROJECT NAME			プロジェクト名日本語もOK
PROJECT TYPE	Pebble C SDK		C言語で Watchface を作るときはこちらを選択
PROJECT TYPE	Pebble.js (beta)		Javascript で Watchface を作るときはこちらを選択
SDK VERSION	SDK 2		古い Pebble 専用の SDK です
SDK VERSION	SDK 3		PebbleTime と、OS を新しくした Pebble 用の SDK です
TEMPLATE	Empty project		空（ソースファイルが無い）プロジェクトを作成
	Standard Templates	Minimal	Window と TextLayer だけの、何も表示しないプロジェクトを作成
	Standard Templates	ButtonClick	ボタンに応じて表示が変わるサンプルプロジェクトを作成
	SDK demos	HelloWorld	文字を表示するだけのサンプルプロジェクトを作成
	SDK demos	AppMessage	スマートフォンとデータを送受信するサンプルプロジェクトの作成

今回は以下のように設定します。

カテゴリ	値	設定理由
PROJECT NAME	HelloWorld	お約束だから
PROJECT TYPE	Pebble C SDK	C言語で開発する記事だから
SDK VERISON	SDK 3	PebbleTime 用の Watchface を作成するから
TEMPLATE	HelloWorld	手っ取り早くコードを見られるから

プロジェクト画面

作成したプロジェクトを開くと、以下の様な画面となります。

左上の「HELLOWORLD」はプロジェクト名です。

f:id:tatur0u:20150625220055p:plain

プロジェクトの設定画面

「SETTINGS」をクリックすると、プロジェクトの設定画面が開きます。

f:id:tatur0u:20150625220104p:plain

「PROJECT NAME」と「SDK VERSION」は良いですね。

「BUILD APLITE」「BUILD BASALT」というのは、プラットフォーム名です。

プラットフォーム名	説明
APLITE	Pebble、PebbleSteel
BASALT	PebbleTime

今回は PebbleTime 用に作成するので BASALT のみ ON にします。 APLITE も ON にすると、両方を考慮して作成する必要があります。

続いて、設定画面を下にスクロールしたところです。

f:id:tatur0u:20150625220111p:plain

これは、Watchface をリリースするときに必要な情報です。基本的にはこのままで良いのですが、重要な変更点があります。

「APP KIND」を「Watchface」に変更する

APP KIND はデフォルトでは Watchapp になっているので注意してください。

更に下へ。

f:id:tatur0u:20150625220122p:plain

これは、スマートフォンとデータを送受信するときに必要な設定です。これも、今はこのままで良いでしょう。

Timeline

つづいて「TIMELINE (PREVIEW)」をクリックしてみましょう。

f:id:tatur0u:20150625220129p:plain

これは、PebbleTime から採用された新しいUI 「Timeline」のデバッグ用データです。ここに書いたデータを Timeline に流し込むことができます。

今回は Timeline は扱わないので、このままで良いでしょう。

コンパイル

「COMPILATION」ボタンをクリックしてみましょう。

f:id:tatur0u:20150625220135p:plain

この画面で、コードをコンパイルして実行イメージを作成できます。ボタンが 3 つ並んでます。

ボタン名	説明
RUN BUILD	コンパイルを実行します
GET PBW	作成した実行イメージ（PBW）をダウンロードしますこれはリリース時に使用します実機を使って開発する場合でも必要ありません
BUILD LOG	コンパイル時のログを表示します

Github

「GITHUB」ボタンをクリックしてみましょう。

f:id:tatur0u:20150625220141p:plain

この画面で github との連携を行います。「GITHUB REPO」にリポジトリ名を「BRANCH」にブランチ名を入力すると、push と pull ができます。
なお、リポジトリ名は CloudPebbleの設定画面で設定した github アカウントのみ受け付けます。
また、リポジトリ名は存在しないものでも大丈夫です。なければ自動で作成してくれます。