雑文発散

▼ [Pebble] そろそろ Pebble の開発についても体験しておこうと思ってチュートリアルを学んでみる #3

昨日の日記に書いた Pebble アプリのチュートリアル学習の続き。時刻表示はできたので、今度はそのカスタマイズである。

Watchface（ウォッチフェイス）をカスタマイズする

チュートリアルのパート2 Customize Your Watchface へ入っていく。

パート1 の Build Your Own Watchface では、時刻表示ができるようになったものの、単に文字を表示しているだけの味気ないデザインなので、もうちょっとなんとかしていこうぜ！って内容のようだ。

Pebble SDK では、これを実現するために次の手段などを利用するみたいだ。

• リソースマネジメント
• カスタムフォント
• 画像

このチュートリアルでいくつかのサンプルを試した後は、自分自身で好きなようにカスタマイズできるようになるって。やったね！

カスタムフォントの追加

カスタムフォントの利用は、そのフォント情報を appinfo.json に登録するところから行うようだ。使えるフォントは .ttf の拡張子が付いた TrueType フォント。

チュートリアルの例だと、JSON の media の部分から表示されているけど、その上位には resources がある。従って、こんな感じになる。

"resources": {
  "media": [
    {
      "type": "font",
      "name": "FONT_PERFECT_DOS_48",
      "file": "fonts/perfect-dos-vga.ttf",
      "compatibility": "2.7"
    }
  ]
}

ここで定義している perfect-dos-vga.ttf のファイルはどこにあるのか？と思ったのだけど、チュートリアルをよく読んだら「Here is an example font to use」というリンクがあるので、そいつをクリックするとダウンロードが始まる。そこで落ちてきたファイルを resources フォルダの下へ置くわけだ。

つまり、上記の appinfo.json の定義に合わせると、こういうディレクトリ構成になる。

PROJECT_TOP/resources/fonts/perfect-dos-vga.ttf

fonts というディレクトリも存在しないので自分で掘ることになる。

カスタムフォントを使う手順としては、 main_window_load() の処理内でカスタムフォントをロードして、テキストレイヤーにセットしてやればいいみたいだ。

使い終わった後の処理として main_window_unload() の中でカスタムフォントも unload してメモリ解放か何かをしてやる必要がある。

あとはテキストレイヤーの作成時に領域のサイズ指定を調整してやるみたいなんだけど、ここの数字はどうやって取ってくるものなんだろうか？

s_time_layer = text_layer_create(GRect(5, 52, 139, 50));

システムフォントを使っていた時には、こんな数字だった。

s_time_layer = text_layer_create(GRect(0, 55, 144, 50));

何かうまい取得方法があるのか、それとも試行錯誤で探していくのか。。。

その辺がちょっと分からないながらも、build & install すると、フォントが変わるはず、、、と思ったが、なぜかインストールに失敗した。

% pebble install --phone 192.168.1.78
[WARNING ] You are not logged in with your Pebble Account and will not be able to receive remote pins in the emulator. Please run 'pebble login' to connect your Pebble account.
[ERROR   ] [Errno 53] Software caused connection abort

Pebble SDK における Errno 53 ってなんだろ？と思ったのだけど、うまくたどり着けなかった。まぁ、でも、これは通信関係のエラーかな？と思って、iOS の Pebble アプリ（以下 Pebble.app）を終了させて、再度起動したらインストールできるようになった。

そうして表示されたのがこれ。

ちゃんと DOS っぽいフォントで時刻が表示されるようになった。

ビットマップイメージの追加

Pebble（カラー版の Pebble Time じゃないほう）は、白黒2値の画像が使える。グレイスケールも存在しない、#FFFFFF と #000000 の2値しかない漢らしい仕様。

画像を追加する場合もまずは、appinfo.json の media に定義を書く。先ほどのフォントと合わせると完成形はこのようになる。

"resources": {
  "media": [
    {
      "type": "font",
      "name": "FONT_PERFECT_DOS_48",
      "file": "fonts/perfect-dos-vga.ttf",
      "compatibility": "2.7"
    },
    {
      "type": "png",
      "name": "IMAGE_BACKGROUND",
      "file": "images/background.png"
    }
  ]
}

ちなみにこの画像もチュートリアルのページからダウンロードする。

画像を使う場合は、ビットマップレイヤー（BitmapLayer）を使うそうだ。テキストレイヤーと同じように、レイヤーを作成し、各種定義を行ない、ウインドウに追加するという流れ。

注意点として挙げられているのは、ウインドウへの追加の順序。先にビットマップレイヤーを追加して、その後でテキストレイヤーを追加する必要があるみたい。レイヤーがスタックしていくイメージなのだろうね。

そして、使ったリソースは、main_window_unload() で回収するのも同じ要領で行なう。

いつもの build & install を実施すれば、文字の裏にビットマップ画像が入った Watchface ができあがり。

写真のピントが甘いけど、撮りにくいんだよ、Pebble の画面って。。。

これでチュートリアルのパート2は終了。次は PebbleKit JS を使って Web ベースのコンテンツを表示するチュートリアル（PART 3）へ移る。