注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

AMAZFIT Bip 自作 ウォッチフェイス⌚カスタム文字盤 (その1)

Amazfit bipのウォッチフェイスを自分好みにしちゃいましょー。より愛着も沸きます!

完全な自作って訳じゃ無いけれど、元からあるウォッチフェイスデータの表示機能を減らして、背景を変える、という事をします。(2002/04/15に改変しました)

用意するもの

  • Windowsパソコン
  • Android端末
  • 時計(AmazfitBip)
  • Windowsパソコンで拡張子が7zの圧縮ファイルを解凍するソフト
  • 拡張子がpngのファイルを編集するソフト
  • DropBoxのアカウント
  • Androidアプリ「Notify & Fitness for Amazfit」
スポンサーリンク

文字盤表示に必要な機能は何かを考える

ウォッチフェイスを探す為に、どんな機能が必要か考えます。私はこんな感じ。
looks_one 時計looks_two 歩数looks_3 バッテリー

秒数・心拍数はバッテリー減りに影響があるらしいです。

ウォッチフェイスを探す

AMAZFIT Bip ウォッチフェイスを探す
クリックで拡大 フルサイズ 1016 x 440
  • Windowsパソコンでhttps://amazfitwatchfaces.com/に行く
  • 左のメニューから「Amazfit Bip」を選択
  • Fresh(新作)、Top(人気順)、Updated(アップデートされたモノ)から、作りたいウォッチフェイスに似ているかつ必要な機能が表示されているモノを探してください。後で機能を減らすのは簡単だけれど、増やすのが大変だからです。
  • 理想のウォッチフェイスをクリック
  • 「Download」をクリック
  • xxxxxxxxx.bin を選択
  • binファイルがダウンロードされます

AMAZFIT Bip 自作 ウォッチフェイス

今回は、こちらにしました。https://amazfitwatchfaces.com/bip/view/34631

ツールのダウンロード

binファイルを展開する為のツールをダウンロードします。

AMAZFIT Bip 自作 ツールのダウンロード
クリックで拡大 フルサイズ 1008 x 355
拡張子が7zの圧縮ファイルを解凍するソフトが無い場合は「7z 解凍」で検索して好みのソフトで解凍して下さい。※私は「Lhaplus」を使用しました。
拡張子「7z」って何?!怪しい!って思ったんだけれど、これもzip形式などと同じ圧縮ファイルだそうで。ゲームファイルの圧縮など、比較的サイズの大きいファイルの圧縮に利用されていることが多いとされます。

AMAZFIT Bip 自作

解凍したフォルダの中。

次の工程でフォルダの中にあるWatchFace.exeにbinファイルをドラック&ドロップするよ!

binファイルの展開

  • binファイルの名前を分かりやすい名前に変えます。
  • face.binという名前に変えました。
  • face.binを「WatchFace.exe」にドラック&ドロップ
    AMAZFIT Bip binファイルの展開
  • binファイル名と同じ名前のフォルダが出来ます。以下faceフォルダと記載します。
    AMAZFIT Bip binファイルの展開
  • faceフォルダの中に背景や数字の画像などのパーツが入っていればOK

オリジナルデザインを作る

画像ファイルを編集

faceフォルダに背景や数字の画像などが入っていますのでお好みで修正してください。私は背景のみ変更しました。
#000000 #0000FF #00FF00 #FF0000 #00FFFF #FF00FF #FFFF00 #FFFFFF の色限定で作ると綺麗です。

パーツ画像については、楽に作成できるので下記をご覧下さい。

AMAZFIT Bip 画像ファイルを編集

背景を変えようと思います。

オレンジの四角で囲った部分を画像加工ソフトで消しました。

ごめんよわんちゃん。

AMAZFIT Bip 画像ファイルを編集

心拍数のハートとか、アラームのベル、ブルートゥースマークは機能不要の為削除。
背景が完成しました。
わんちゃんから、女の子にしました。

オンラインの作業

ウォッチフェイスのレイアウトデザインをオンラインで修正・確認・登録します。
PCでBip Wfeditor又は、Watchface Editorを開きます。

  • [View] をクリック(最初から[View]だと思いますが一応)
  • Images: 「Select」をクリック
  • faceフォルダの中身を「全てを選択(Ctrl +A)」して「開く」
  • JSON : 「Select」をクリック
  • faceフォルダにある、face.jsonを選択して「開く」
  • 文字盤が表示されたら、ひとまずOKです
AMAZFIT Bip 自作 オンラインの作業
クリックで拡大 フルサイズ 596 x 287

不要な表示を削除

  • [Edit] をクリック
  • 「Date」横の+をクリック
  • 「TOGGLE DAY」「TOGGLE MONTH」をクリック
  • 黒字に白文字になれば消えてます

こんな感じで、不要な表示を消していきます。

[Design] でレイアウト修正

[Design] をクリックすると、マウスで位置を調整できます。他のウォッチフェイスを作った時の画像ですが下記を参考ください。
AMAZFIT Bip 自作 レイアウト修正

完成したら

  • [Design] 又は [Edit]にある、「Export JSON」を押します
  • face.jsonがダウンロードされます
  • face.jsonfaceフォルダに移動
  • メッセージが出たら「ファイルを置き換える」を選んでください
  • face.jsonを「WatchFace.exe」にドラック&ドロップ
  • faceフォルダの中に生成された face_packed.binをDropBoxにアップロードします

ウォッチフェイスの反映

AMAZFIT Bip 自作 ウォッチフェイスの反映
クリックで拡大

Androidアプリ「Notify & Fitness for Amazfit」を起動 右上にあるイコライザーっぽいボタンを押す ウォッチフェイスを押す カスタムウォッチフェイスを押す

ウォッチフェイスの反映 AMAZFIT Bip 自作

左上のmenuを押す DropBoxを押す face_packed.binを押す 「アップデート開始」を押す

AMAZFIT Bip 自作 ウォッチフェイスの反映

ウォッチフェイスが設定されます👌
やったーできました。

チープなベルトと合ってる!

参照したリンク先

おかげで私でもウォッチフェイスを作る事が出来ました。

Amazfit bipのウォッチフェイスを自作する(Android用)
https://www.hide10.com/archives/30291
Amazfit Bipの文字盤を自作する(iPhone用)
http://blog.livedoor.jp/takaj22/archives/52183083.html

商品のリンクです

2020年2月現在、Yahoo!ショッピングが安かった!(8,700円)

このページで説明している「Amazfit Bip」のリンクです。
0