Amazfit bipのウォッチフェイスを自作する(Android用)

格安スマートウォッチ「Amazfit bip」のウォッチフェイス（文字盤）。標準では規定のデザインからしか選べませんが、現在は有志の解析により自由にオリジナルデザインを作成し、適用することが可能になっています。

ここではウォッチフェイスを自作し、そのウォッチフェイスを実際に反映する手順を解説します。ウォッチフェイスの作成にはWindowsパソコンが必要です。実際の反映はAndroidアプリを使用しますが、iPhoneアプリを使うことも可能です。

binファイルの展開／合成用ツールのダウンロード

ウォッチフェイスは最終的に拡張子が.binのファイルになります。このファイルを展開したり、再度合成するためのWindowsアプリが公開されています。

https://bitbucket.org/valeronm/amazfitbiptools/downloads/

こちらから「AmazfitBipTools-xxxxx.7z」をダウンロードし展開してください。（展開には7zipを展開するツールが必要です。）

ベースファイルの準備

ウォッチフェイスを完全自作することも不可能ではありませんが、ベースとなるデザインを修正した方が簡単なので、公開されているデザインに手を入れることにします。

下記サイトで様々なデザインが公開されているので、好みのデザインを探してください。

Fresh – Bip | Amazfit WatchFaces catalog

今回の説明では下記のデザインをベースとして使用します。

Tech Watch Full white 24h DK – Amazfit Bip Watch faces

Downloadを押すと、xxxx_xxxx.binなどとbinファイルの一覧が表示されるので、どれか1つ（下にある新しいヤツ）をダウンロードします。

Binファイルの展開

ダウンロードしたBinファイルを展開します。 AmazfitBipToolsを展開したフォルダにbinファイルを置き、コマンドラインで”WatchFace.exe
ファイル名.bin”と入力してください。

binファイルをWatchFace.exeにドラッグ＆ドロップすることでも展開されます。

ざっくり説明すると「ファイル名.JSON」が要素の配置を決める設計図です。

画像ファイルは文字盤に呼び出されるイメージで、ファイル名（数字）で役割が決まっています。サイズは最大176×176、色は規定の8色（+透明色）のみ使用可能です。

画像引用元：https://amazfitwatchfaces.com/editor/watchfaceEditor/?bip

Black 0x000000
Cyan 0x0000FF
Green 0x00FF00
Red 0xFF0000
Blue 0x00FFFF
Purple 0xFF00FF
Yellow 0xFFFF00
White 0xFFFFFF
Transparent 0xFEFE00

デザインを読み込む

デザインの修正はオンラインサービスの「Watchface Editor」を利用します。

まずはImagesのSELECTを押し、 BINファイルを展開して出てきたすべての画像ファイルを選択して開きます。

続いてJSONのSELECTを押し、BINファイルを展開して出てきたJSONファイルを選択します。

ここまで問題なくできれば、Watchface Editor上に元のデザインが表示されるはずです。

画像を編集する

デンマーク語になっている個所を英語に置き換えるため、展開された元ファイルの画像を編集します。

実際にファイルをみれば修正が必要な個所も大体分かると思いますが、たとえば「0000.png」が背景画像です。

このファイルをペイントソフトで書き換えます。自分は「GraphicsGale」と言うドットグラフィックエディタを使わせてもらいました。

背景画像や日付画像（0023.png – 0029.png)、Bluetooth接続を示す画像(0081.png)などをゴリゴリと書き換えていきます。

一通り編集が終わったら再度「Image – SELECT」から画像を選択しなおし、上手く編集できているか確認しましょう。

配置を編集する

Watchface Editorの「DESIGN」タブを開き、文字盤の配置を編集します。

今回は元データの日付表示がDay/Monthなので、これをMonth/Dayに変更します。該当する要素の上にマウスカーソルを置くと、その要素が何なのか表示されます。Dayを右側に、Monthを左側に移動しましょう。

デザインの修正が終わったら「EXPORT JSON」を押してJSONファイルをダウンロードします。

元データの古いJSONファイルは不要になったので削除し、あたらしいJSONファイルを元データの展開先フォルダに移動します。

BINファイルを作成する

修正したJSONファイルと、修正した画像ファイル群を使ってBINファイルを生成します。

コマンドラインで”WatchFace.exe 編集したファイル名.json”と入力してください。

JSONファイルとおなじフォルダにある画像を使ってBINファイルが生成されます。

この時に生成されるのは以下の4つのファイルです。

ファイル名_packed.bin(BINファイル本体)
ファイル名_packed_animated.gif(文字盤のアニメーションサンプル）
ファイル名_packed_static.png(文字盤の画像サンプル）
ファイル名_packed.log(BINファイル生成時の動作ログ）

Amazfit WatchFaces にアップロードする

作成したBINファイルを使うには、スマホにBINファイルを転送し、そこからさらにスマホのアプリ(Mi Fit, Amaztools, notify & fitness for amazfitなど)を使ってAmazfit Bipに転送する必要があります。

スマホにBINファイルを転送するには、パソコンから直接転送する手もあるのですが、今回はAmazfit関連の文字盤が世界中のユーザーからアップロードされているサイト「Amazfit WatchFaces」を利用します。

アップロードするにはユーザー登録が必要なので、適宜アカウントを作成してください。アカウント作成後、ログインした状態でメニューから「Bip」を開きます。

上部にある雲形のアップロードアイコンを選ぶとアップロード画面になります。

入力欄は上から順にデザイン名、使用言語、タグ、イメージ画像アップロード、BINファイルアップロード、詳細説明欄です。

検索用のタグは他の人が探すときに使うものです。サジェスト機能が付いているので、それっぽい単語を入れると補完してくれます。文字盤の機能として有効になっている要素(weather, steps, calorie, Heartrateなど）やデザインの特徴(mm-dd, white, 24hなど）を入力してください。

文字盤のイメージ画像はBINファイル生成時に一緒に作成された”ファイル名_packed_animated.gif”を使ってください。

BINファイルは作成したBINファイルを指定します。

詳細説明欄には文字盤を探している人に有効な情報を記述します。今回のように誰かのデザインを修正して再利用する場合はその旨も忘れずに記述しましょう。

一通り記述すると下記画像のようなイメージになるはずです。

間違いないようなら下部の「Start uploading」ボタンを押してアップロードしましょう。

アップロード後でも修正や削除は可能なので、あまり難しく考えずにアップロードして大丈夫です。

文字盤を変更する

アップロードした文字盤デザインをAmazfit bipに適用します。

文字盤変更も色々なやり方があるのですが、今回はAndroid用アプリ「Notify & Fitness for Amazfit」を使用します。

無料版でも大体の機能が使えますが、有料版でも220円と安いのでサクッと買ってください。その価値のあるアプリです。

アプリインストールと初期セットアップを済ませると、こんな感じの画面になるはずです。

下の方にスクロールすると「カスタムウォッチフェイス」の欄があるので、それを右に手繰り…

「もっと表示」を開きます。

Amazfit bip Watchfaceのサイトに移動するので、自分のデザインを探します。サイト右上の　＾　を選ぶと検索もできるので活用してください。

見つけたデザインの「Download」を押し…

適用したいバージョンのBINファイル（下の方があたらしい）を押すとダウンロードが始まります。

ファイルに問題が無ければ、「ファームウェアを更新」の画面になるはずです。「アップデート開始」を選んでファイルを転送、うまくいけば文字盤が変更されるはずです。

お疲れさまでした！

謝辞

この文章を書くにあたり「健康ぶーむ：ブログ : Amazfit Bipの文字盤を自作する（iPhone用）」を参考にさせて頂きました。有益な情報の公開に感謝します。

おわりに

長々と書いてきましたが、実際に1つ1つ進めれば、それほど難しくなく自作デザインの作成が可能です。

Amazfit bipは正規国内代理店も決まり、以前以上に盛り上がりを感じますが、日本人に向いた文字盤デザインはまだまだ少ないのが現状です。これを読んだあなたも、ぜひ新しいデザインを作成してみてください。

私が作成したデザインは、下記のページから見られます。

Search – hide10 | Amazfit WatchFaces catalog