pebbleの時計(watchface)を作ってみよう:Watchface Generator編

pebbleの特徴は自分だけの時計を開発できることです。

開発するにはプログラミング言語のCやJavaScriptを使える必要があります。

ここで脱落してしまう人も多いかもしれませんが、実はもっと簡単に時計を作る方法があります。
それは、Paul Rode氏が作ったWatchface Generatorというウェブサービスです。

このサービスを利用すると、プログラムを作ることなく、簡単に自分だけの時計を作ることができます。## Watchface Generatorでの時計(watchface)の作り方

手順としては次のようになっています。

  1. 開始
  2. 背景を設定
  3. アナログ時計の設定
  4. デジタル時計の設定
  5. 日付表示の設定
  6. テキスト表示の設定
  7. バッテリー状態と接続状態表示の設定
  8. pebble用時計ファイルの生成!

何も設定せず、開始->生成!ということもできます。

1.開始

Watchface Generator をブラウザで開きます。
そして、「START」を押します。

Screen Shot 2014 09 29 at 20 06 22 1

2.背景を設定

背景色や背景に表示する画像を設定できます。

Screen Shot 2014 09 29 at 20 13 03

設定する画像はjpegでもpngでも大丈夫です。
また画像の色も、カラーでもモノクロでも大丈夫です。
ただし、全てモノクロの画像に変換されます。

Screen Shot 2014 09 29 at 20 13 41

Screen Shot 2014 09 29 at 20 14 35

画像の大きさもpebbleに合わせる必要はありませんが、横144px×縦168pxにあう大きさにするとぴったりになります。

大きさや位置はDimensionsとPositionで調整することができます。

3.アナログ時計の設定

アナログ時計を使いたい場合には「Show analog watch」をonに切り替えます。

Screen Shot 2014 09 29 at 20 20 17

時計の針のデザインを設定してきます。

Screen Shot 2014 09 29 at 20 23 15

4.デジタル時計の設定

デジタル時計を使いたい場合にはここで設定します。
ちなみにアナログ時計とデジタル時計を同時に使っても大丈夫です。

ClassicとCustom(beta)で内部的に何が違うのかわかりませんが、Customにするとフォントを細かく設定できます。
もしかすると不安定なところがあるのかもしれませんが、作ってみて頻繁に時計が落ちるようなことがなければCustomでいいと思います。

Screen Shot 2014 09 30 at 4 59 43

Screen Shot 2014 09 30 at 4 59 58

Screen Shot 2014 09 30 at 5 00 08

5.日付表示の設定

日付の設定です。
Formatのところが一瞬?ってなるかもしれませんが、左から順に、年月日曜日のどれを表示するかを選んでいきます。

日本であれば下のスクリーンショットのような「年/月/日 曜日」あたりがわかりやすいでしょうか。
年と曜日のところを空にすると「月/日」ということもできます。

Screen Shot 2014 09 30 at 5 11 58

Screen Shot 2014 09 30 at 5 12 16

6.テキスト表示の設定

任意の文字を表示させることができます。
でも日本語を入力してもpebbleでは表示されません(;_;)

何を書くか迷いますが、可愛い子の写真を背景に「I love you」とか書いてニヤニヤしておけばいいと思います(テキトウ)

Screen Shot 2014 09 30 at 5 17 53

7. バッテリー状態と接続状態表示の設定

バッテリーの状態を表示するアイコンと接続状態を表示するアイコンを設定できます。

Screen Shot 2014 09 30 at 5 21 52

Screen Shot 2014 09 30 at 5 22 14

8. pebble用時計ファイルの生成!

いよいよpebble用ファイルの生成です。

まず、Nameを設定します。

Screen Shot 2014 09 30 at 5 24 41

お約束ですが英字、数字、スペースとアンダースコア(_)しか使えないようです。

Create Watchfaceを押すとpebble用ファイルが生成されますが、そのままだと世界中の人がアクセスできる状態になります。
もし、見られたくない>< というような時計でしたらSettingsの「Protect watch face with password」をonにしてパスワードを設定しましょう。

Screen Shot 2014 09 30 at 5 30 24

そして準備が整ったら「Create Watchface」を押します。

Screen Shot 2014 09 30 at 5 31 17

少し待つとpebble用の時計ファイルが出来上がり、QRコードとURLが表示されます。

iphoneやandroid端末でQRコードを読んで、pebbleで開いてインストールします。

お好きなQRコードリーダーを使ってQRコードをよみ

IMG 7301

safari(iphone)を開き、パスワードを設定していればパスワードを入力します。渡しの場合、QRコードリーダー内蔵(?)のsafariだとうまくダウンロードできなかったので、そんなときは普通のsafariを起動しましょう。

IMG 7302

URLを開くと先ほど作った時計が!
Downloadをおしてダウンロードします。

IMG 7303

ダウンロードが完了したらpebbleで開くを押します。

IMG 7304

こんな画面になるので「LOAD」を押します。

IMG 7305

ぎゃー!!!!

IMG 7307

と、pebbleの時計とアプリのインストールできる上限に達したのでインストールできなかったようです。
慌てず、一旦pebbleアプリを開いていらない時計かアプリをUNLOADしましょう。

そしてもう1度LOADします。

IMG 7308

しばらくするとpebbleにインストールされます。

IMG 7309

できたー!

(あれ、時計がないぞこれ・・・)

まとめ

とにかくWatchface Generatorを使うと非常に簡単に作ることができます。

子どもと一緒に妖怪ごにょごにょのキャラを使った時計を作ったりして楽しめます。

告知

今度函館に遊びに行った時、pebbleの勉強会orもくもく会をする予定です。
函館近郊でpebbleを持ってる方、気になっている方はぜひ遊びに来てねー。

pebble勉強会@函館 – connpass