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

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

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

元からあるウォッチフェイスデータの表示機能を減らして、数字の画像と背景を変える、という事をします。(2002/04/25に改変しました)
前回は、背景だけ変えたので、少しレベルアップですw

用意するもの

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

デザインを考える

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

ウォッチフェイスの表示面は 176x176ピクセル です。
背景画像も同サイズで作成し、時刻用のコロン(:)と、歩数のマークを配置しました。
英語合ってますか?w
画像はこちらからダウンロードしました。 Background vector created by freepik - www.freepik.com

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

Image creatorで時刻と歩数の画像を作り、背景画像に配置してデザインの調整をします。
(時刻と歩数の画像作成方法は関連記事をご覧ください。)
check_circle AMAZFIT Bip 自作 ウォッチフェイス⌚楽々画像作成できます。

似たようなウォッチフェイスデータ⌚をダウンロード

今回は時刻と歩数があるウォッチフェイスデータをダウンロードします。

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

ツールのダウンロード

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フォルダの背景や数字画像を、自分で作った画像に変えます。

オンラインの作業

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

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

編集

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

EDITで天気などの不要な部分を消して、DEGIGNで位置を調整します。

不要な表示を削除

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

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

[Design] でレイアウト修正

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

完成したら

下記関連記事の、「完成したら」以下を実行して下さい。

出来上がり

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

ベルトは3本セットで1580円でした。Amazonで即日配送。
ベルトの余りが内側になるので邪魔になりません。

参照したリンク先

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

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