2017年7月16日日曜日

Pebble TimeでWatchfaceを作った時の色々

色々終わってしまってて遅いのですが。ここ数日でまたPebble TimeのWatchfaceを作っていました。どうせなので作業手順を晒しておこうという感じです。ドット絵を用意して、アニメーションとしてWatchfaceに組み込んでみた話になります。



0. 環境
WindowsでPebbleの開発を行うなら、やはり公式ガイドで説明されているように仮想マシンを用意するのが一番良い手ですね。重いのは仕方ないとして。

使った環境はVirtual boxでのUbuntu 16.04で、割り当てメモリは1024MB、ストレージは16GBです。
動きが貧弱なので、基本的にWindows側で素材を作ってから仮想OSを立ち上げて、設定しておいた共有フォルダ経由で移動させて…という形を取っていました。


以前、Winodow10のBash on Ubuntu on Windowsを使ってPebble開発ができるというネタを書きましたが、いくつかWatchfaceを使ってみて止めておいたが良いなと感じました。
SDKを突っ込んで作ることはできますが、折角Pebbleに用意されている「Pebbleと接続している端末のIPアドレスを指定してインストール」の機能や「実機のログを取得」が使えないというのが勿体無いです(このあたりは、SSLErrorとあるのでネット周りが改善すれば使えそうですが)。後はQEMUで用意されているエミュレータが使えないというのも若干痛いというのも。





1. 素材の作成
アニメーションを付ける為、Edge(ドット絵を作れるエディタ)で必要なものを作り、透過やディレイを設定してからgifの形で保存。ちなみに使える色はColor Pickerで確認できます。なおこちらに乗っていない色も自動で補正してくれるので、あまり気にしなくても良い気がします。

ドット絵である必要がなければ、そのままGIMPから開始して良いと思います。


2. GIMPでgif読み込み、再保存
Edgeで作成したgifをそのまま持っていくと最終的にPebbleで実行時に「failed to load palette」で落ちるので、GIMPで形式を変更します。
そのまま対象のgifをインポートした上で、ツールバーから「画像」->「モード」を選択し、「RGB」に変更します。 多分変更前は「インデックス」になっていると思います。
変更後はgifとしてエクスポート。

3.gif2apngでapngを作成
Pebbleはgifには対応せず、apngという形式を要求しているので、そちらに変更します。
gif2apngは、http://gif2apng.sourceforge.net/ からダウンロード。公式ガイドではgif2apngはCUIで実行していますが、GUIでも問題ありません。ただし、必ず変換前に右下の設定ボタンから設定画面を開いて、
Compression Method: zlib
Optimization palette: unchecked
という設定をするのを忘れずに。CUIでは「-z0」のオプションを付ければOKです。
なお、apngの拡張子はpngです。


4.フォントの用意
システムフォント(デフォルトで用意されているフォント)を使いたくない場合は、拡張子がttfのフォントファイルを用意します。ただ、システムフォントの一覧を見ると結構数があるようです。

5. 仮想OSの起動とプロジェクト作成
ここで仮想OSの方を起動します。起動後はpebble new-project watchface <name>でプロジェクトを作成します。作成後は「resources」というディレクトリを作成して、そこに、ホストOSで作成した素材を保存します。
Virtual boxなら設定すればドラッグ&ドロップでホストOSからデータを持ち込めるはずなのですが、どうも上手くいってないので、共有フォルダの設定をした上で
sudo cp /media/<filename>/<data> <path>
と打ってデータをゲストOSに持ち込んで、chmodで権限を変更して使っています。

6. コードを書く,package.jsonの編集
普段からEmacsなので、ゲストOSで作っていますが、別にこれもホストOSで書いてからゲストOSに持ち込んでもいいのかなという気はしています。
package.jsonには、素材の分だけmediaに登録します。

7.ビルド,インストール
ビルド後は、buildディレクトリの中にpbwファイルが作成されます。これが本体です。
buildが正常に終了しているのであれば、pebble installします。
実機にインストールしたい場合は、実機と接続している端末(iPhone/Android)のPebbleアプリをsettingsからdeveloperを選択して、実機を通信待機状態にし、そのうえでpebble install --phone <IP address> します。
IPアドレスは、端末アプリのdeveloperを選択すれば確認できます。

エミュレータの場合は pebble install --emulator <version> とすれば動きます。ここではPebble Timeなので、pebble install --emulator basaltです。
(自分の環境だとかなり時間がかかってしまった為、これは実機でいいと思いました)
ちなみに、どちらの場合も--logsオプションを付けるとログが出力されます。実行時エラーは大体これで分かります。
動作確認ができ、ストアに登録する予定があるならば、この時点で
pebble screenshot <FILENAME>
と入力してスクリーンショットを取っておくと良いと思います。


8.ストアに登録
せっかくなのでストアに。 
固有のUUIDが必要なので、https://www.uuidgenerator.net/ でUUID(version 4)を生成。
(もともとpackage.jsonにUUIDは書いてあるのですが、自動生成されてるか分からなかったので念の為)
https://dev-portal.getpebble.com/developerにアクセスして、開発者用のアカウントを登録。後は書いてある通りに設定すれば簡単に登録できます。
なお、Package.jsonで指定した対応端末の分だけスクリーンショットが要求されます。面倒だったので、Basalt(Pebble Time)のスクリーンショットを使い回して登録しましたが。
Publishでストアに登録して、30分程で登録画面にストアへのリンクが表示されます。