PebbleアプリでHello, World

Pebbleアプリ開発のためHomebrewのPython環境整理の続き。

http://developer.getpebble.com/1/GettingStarted/HelloWorld/をやっただけの内容。SDKのバージョンは 1.12

create_pebble_project.pyを使ってプロジェクトを作成する。sdkのパスと出力するプロジェクトのパスを引数で指定するようだ。

$ ~/pebble-dev/PebbleSDK-1.12/Pebble/tools/create_pebble_project.py ~/pebble-dev/PebbleSDK-1.12/Pebble/sdk hello_world

Creating project here:

    /Users/makoto_kw/pebble/hello_world

Now run:

    cd hello_world
    ./waf configure
    ./waf build

作成された階層はこんな形になる。プロジェクト無いの実体のあるファイルはresources/src/resource_map.jsonsrc/hello_world.cであとはsdにあるファイルのシンボリックリンクになっている。これはどうやってソース管理すればいいのだろう。。。別にシンボリックリンクじゃなくてコピーでもいい気がする。PythonをセットアップしたもののPebbleアプリの言語はC言語になっているようだ。

.
├── include -> /Users/makoto_kw/pebble-dev/PebbleSDK-1.12/Pebble/sdk/include
├── lib -> /Users/makoto_kw/pebble-dev/PebbleSDK-1.12/Pebble/sdk/lib
├── pebble_app.ld -> /Users/makoto_kw/pebble-dev/PebbleSDK-1.12/Pebble/sdk/pebble_app.ld
├── resources
│   ├── src
│   │   └── resource_map.json
│   └── wscript -> /Users/makoto_kw/pebble-dev/PebbleSDK-1.12/Pebble/sdk/resources/wscript
├── src
│   └── hello_world.c
├── tools -> /Users/makoto_kw/pebble-dev/PebbleSDK-1.12/Pebble/sdk/tools
├── waf -> /Users/makoto_kw/pebble-dev/PebbleSDK-1.12/Pebble/sdk/waf
└── wscript -> /Users/makoto_kw/pebble-dev/PebbleSDK-1.12/Pebble/sdk/wscript

とりあえずプロジェクト作成時に表示されたNow runにある

./waf configure
./waf build

を実行すると成功する。

デフォルトでは何も処理をしていないので、handle_initをサイトのいわれるがままに変更する。地味にLayerを作ってそこにテキストをDrawしてウィンドウに追加しているようだ。フォントの指定があるのでこののあたりに日本語フォントがないから日本語が表示されないという問題がでてくるのだろう。

src/hello_world.c
void handle_init(AppContextRef ctx) {
  window_init(&window, "Window Name");
  window_stack_push(&window, true /* Animated */);
  text_layer_init(&hello_layer, GRect(0, 65, 144, 30));
  text_layer_set_text_alignment(&hello_layer, GTextAlignmentCenter);
  text_layer_set_text(&hello_layer, "Hello World!");
  text_layer_set_font(&hello_layer, fonts_get_system_font(FONT_KEY_ROBOTO_CONDENSED_21));
  layer_add_child(&window.layer, &hello_layer.layer);
}

GRect(0, 65, 144, 30) と指定している、Pebbleのディスプレイサイズは 144×168。水平方向のセンタリングは GTextAlignmentCenter で行えるようだ。垂直方向は高さ30のテキスト領域なので、168-30/2 = 69 になるのだが4のずれは実際のBaselineからの微調整だろうか。フォントサイズを数値で指定している箇所がなく、フォントのdefineを見ると以下のようになっている。

#define FONT_KEY_FONT_FALLBACK "RESOURCE_ID_FONT_FALLBACK"
#define FONT_KEY_GOTHIC_14 "RESOURCE_ID_GOTHIC_14"
#define FONT_KEY_GOTHIC_14_BOLD "RESOURCE_ID_GOTHIC_14_BOLD"
#define FONT_KEY_GOTHIC_18 "RESOURCE_ID_GOTHIC_18"
#define FONT_KEY_GOTHIC_18_BOLD "RESOURCE_ID_GOTHIC_18_BOLD"
#define FONT_KEY_GOTHIC_24 "RESOURCE_ID_GOTHIC_24"
#define FONT_KEY_GOTHIC_24_BOLD "RESOURCE_ID_GOTHIC_24_BOLD"
#define FONT_KEY_GOTHIC_28 "RESOURCE_ID_GOTHIC_28"
#define FONT_KEY_GOTHIC_28_BOLD "RESOURCE_ID_GOTHIC_28_BOLD"
#define FONT_KEY_BITHAM_30_BLACK "RESOURCE_ID_BITHAM_30_BLACK"
#define FONT_KEY_BITHAM_42_BOLD "RESOURCE_ID_BITHAM_42_BOLD"
#define FONT_KEY_BITHAM_42_LIGHT "RESOURCE_ID_BITHAM_42_LIGHT"
#define FONT_KEY_BITHAM_42_MEDIUM_NUMBERS "RESOURCE_ID_BITHAM_42_MEDIUM_NUMBERS"
#define FONT_KEY_BITHAM_34_MEDIUM_NUMBERS "RESOURCE_ID_BITHAM_34_MEDIUM_NUMBERS"
#define FONT_KEY_BITHAM_34_LIGHT_SUBSET "RESOURCE_ID_BITHAM_34_LIGHT_SUBSET"
#define FONT_KEY_BITHAM_18_LIGHT_SUBSET "RESOURCE_ID_BITHAM_18_LIGHT_SUBSET"
#define FONT_KEY_ROBOTO_CONDENSED_21 "RESOURCE_ID_ROBOTO_CONDENSED_21"
#define FONT_KEY_ROBOTO_BOLD_SUBSET_49 "RESOURCE_ID_ROBOTO_BOLD_SUBSET_49"
#define FONT_KEY_DROID_SERIF_28_BOLD "RESOURCE_ID_DROID_SERIF_28_BOLD"

ヘッダを見るとGFont fonts_get_system_font(const char *font_key);GFont fonts_load_custom_font(ResHandle resource); が定義されている。システムフォントをつかう場合は用意されたdefineにあるサイズしか使えないという理解ので良いのだろうか。

解析はこれくらいにして最後にアプリ名を設定する。create_pebble_project.pyMY_UUID が生成されるのでそれがアプリのIDとして区別されると思われる。DEFAULT_MENU_ICONとかAPP_INFO_STANDARD_APPという項目があるのでアイコンやアプリの種類を変更できるようだ。

src/hello_world.c
BL_APP_INFO(MY_UUID,
             "Hello World", "Acme Corp",
             1, 0, /* App version */
             DEFAULT_MENU_ICON,
             APP_INFO_STANDARD_APP);

とおもったが種類じゃなくてビットフラグだった。

typedef enum {
  //! Use to indicate the application is not a watchface, but a "standard" app.
  //! The system will show the app in the main menu.
  APP_INFO_STANDARD_APP = 0,
  //! Use to indicate the application is a watchface.
  //! The system will show the app in the watchfaces menu.
  APP_INFO_WATCH_FACE = 1 << 0,
  //! Use to hide the application.
  APP_INFO_VISIBILITY_HIDDEN = 1 << 1,
  //! Use to hide the application, unless there is ongoing communication with
  //! the companion smartphone application.
  APP_INFO_VISIBILITY_SHOWN_ON_COMMUNICATION = 1 << 2,
} PebbleAppFlags;

Watchアプリのインストールはウェブ経由のiOS経由でPebbleに入れる。ウェブ経由でダウンロードさせるため、ために以下のようにpythonでローカルでHTTPServerを起動する。

python -m SimpleHTTPServer 8000

ifconfigでマシンのIPアドレスを調べれば、同じLAN内のiOSからはhttp://<your computer ip address>:8000/build/をSafariで開けてディレクトリ内のファイル一覧が見えるので .pbw ファイルを選択すると恐らく拡張子関連付けでPebble iOSアプリがそのファイル開いて実機のPebbleに送ってくれる。

ちなみにChrome Extensionを使ってOS XからiOSのChromeにURLを送ってみたがChromeからはpbwファイルがダウンロードができなかったのでしぶしぶSafariでURLを直打ちした。

PebbleでHello World

人見知りソフトウェアエンジニアです。ビジュアル系、お笑い、Pixarが好き。勢いで吉本超合金おたけびBOTを作った。オールザッツ漫才が放送されない東京在住。

趣味や日常からアウトプットの場としてブログを書いています。自作のWordPressプラグインにGitHub Flavored MarkdownAmazonJSなど。