雑文発散

«前の日記(2015-06-10) 最新 次の日記(2015-06-12)» 編集
過去の日記

2015-06-11 [長年日記]

[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)を終了させて、再度起動したらインストールできるようになった。

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

Pebble app

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

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

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

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

"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 app

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

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


#4 へ続く