Wear OS 向けウォッチフェイスのビルド

1. 始める前に

Wear OS 向けのウォッチフェイスを作成するには、表現力豊かでパフォーマンスに優れたウォッチフェイスを作成できる XML ベースの形式である Watch Face Format を使用する必要があります。

この Codelab は、XML を使用してウォッチフェイスを手作りしたい方、または独自のデザインツールを構築するためにフォーマットをより適切に理解したい方を対象としています。

グラフィカル ツールを使用して独自のウォッチフェイスを作成する場合は、ウォッチフェイス スタジオなどの既存のツールを確認することをおすすめします。

前提条件

  • XML の経験

演習内容

この Codelab では、以下について学びます。

  • WFF ウォッチフェイスをパッケージ化する方法
  • 常に画面表示モードを含むウォッチフェイスの作成方法
  • 図形などの要素の追加
  • ウォッチフェイスへのデータソースの組み込み
  • ウォッチフェイスのトラブルシューティングを行う方法

カスタマイズ可能なウォッチフェイスをビルドします。このウォッチフェイスでは、さまざまなカラーテーマから選択でき、歩数と日付のインジケーターが組み込まれています。

90468c36ea8b7ca.png 324c4462145dbcc6.png

必要なもの

2. Watch Face Format のプロジェクト構造の理解

Codelab のファイルをダウンロードする

始めに、Codelab のファイルをダウンロードします。

$ git clone https://github.com/android/codelab-watch-face-format

または、リポジトリを ZIP ファイルとしてダウンロードすることもできます。

watch-face-format ディレクトリには、start と finish の 2 つのプロジェクトがあります。ここでは start プロジェクトを使用しますが、終了した Codelab が含まれている finish プロジェクトをいつでも確認できます。

Watch Face Format プロジェクトの基本的な構造を見てみましょう。任意のエディタを使用するか、[File] > [Open...] を使用して Android Studio でスタート プロジェクト自体を開き、start ディレクトリを選択します。

start/watchface/src/main ディレクトリには次のファイルがあります。それぞれの役割を見てみましょう。

ファイル

説明

AndroidManifest.xml

通常の Android アプリと同様に、このファイルにはウォッチフェイスに関する重要な情報と、ウォッチフェイスのビルドに必要な情報が含まれています。

res/xml/watch_face_info.xml

ウォッチフェイス情報ファイルには、プレビュー画像の検索方法やウォッチフェイスをカスタマイズできるかどうかなど、ウォッチフェイスに関するメタデータが含まれています。

res/raw/watchface.xml

このファイルには、ウォッチフェイス自体の定義が含まれています。複数の定義を設定することもできますが、これが使用されるデフォルトのファイルです。

res/drawable/preview.png

すべてのウォッチフェイスには、システムで使用されるプレビュー画像が必要です。このプロジェクトをビルドするために、start/ フォルダには空白のプレビューが含まれています。これは後で更新します。

res/drawable/hour.pngres/drawable/minute.pngres/drawable/second.png

これらは、ウォッチフェイスで使用する時計の針です。

res/values/strings.xml

Android アプリと同様に、ウォッチフェイスで使用できる文字列が含まれています。

コードはどこにありますか？

プロジェクトにコードがないことに注意してください。AndroidManifest.xml ファイルを除き、プロジェクトのすべてのファイルはリソース ディレクトリである res/ にあります。これは、Watch Face Format のウォッチフェイスにコードを格納できないためです。たとえば、Kotlin コードや Java コードを格納しようとすると、Google Play ストアで承認されません。

Wear OS システムはこれらのリソースを読み取り、ウォッチフェイスのビルドと実行を自動的に行います。つまり、ランタイムやその他のロジックは不要で、開発の労力を節約できます。

3. ウォッチフェイスのビルド

上記の各ファイルを更新して、機能するウォッチフェイスを作成します。

マニフェストの準備

パッケージを Watch Face Format のウォッチフェイスとして識別するには、マニフェストで次の 2 つを宣言する必要があります。

  1. プロジェクトにコードがないこと。
  2. 使用されている Watch Face Format のバージョン。

まず、<application> 要素を更新して hasCode 属性を追加します。

<application
    android:label="@string/watch_face_name"
    android:hasCode="false">

次に、<application> 要素に <property> を追加して、このウォッチフェイスで使用される Watch Face Format のバージョンを指定します。

<property
    android:name="com.google.wear.watchface.format.version"
    android:value="1" />

watch_face_info ファイルの定義

watch_face_info.xml ファイルには、プレビュー画像の場所を指定するという 1 つの必須要件があります。このプロジェクトでは、res/drawable/preview.png にプレビュー画像を用意しています。これは空のファイルですが、後で完成したウォッチフェイスの実際のスクリーンショットで更新します。

この Codelab の一環として、ウォッチフェイスをカスタマイズ可能にします。<Editable> 要素を使用して、watch_face_info.xml file でこれも宣言します。

res/xml/watch_face_info.xml を更新して、次の要素を追加します。

<Preview value="@drawable/preview" />
<Editable value="true" />

Watch Face Format の XML を記述する

実際のウォッチフェイスの定義は res/raw/watchface.xml に含まれています。エディタでこのファイルを確認します。<WatchFace> 要素で、ウォッチフェイスの幅と高さが 450 x 450 に定義されていることがわかります。この座標空間はファイルの残りの部分全体で使用されます。また、ウォッチフェイスが実行される実際のピクセル寸法に関係なく使用され、それに応じて拡大縮小されます。

XML は次のとおりです。

<?xml version="1.0"?>
<WatchFace width="450" height="450">
  <Scene>
    <PartText x="0" y="0" width="450" height="450">
      <Text>
        <Font family="SYNC_TO_DEVICE" size="48">Hello, World!</Font>
      </Text>
    </PartText>
  </Scene>
</WatchFace>

今のところ、この定義は単にスマートウォッチに「Hello, World!」を表示するだけです。残念ながら、まだ時刻は表示されません。- 後で戻って修正します。ウォッチフェイスをビルドしてデバイスに配置する方法を見てみましょう。

ウォッチフェイスのビルドとデプロイ

コマンドラインで、start ディレクトリにいることを確認して、次のコマンドを実行します。

./gradlew installDebug

または、Windows で:

gradlew.bat installDebug

これにより、ウォッチフェイスがビルドされ、デバイスにインストールされます。ウォッチフェイス画面を長押しして、Codelab ウォッチフェイスを見つけます。または、コマンドラインからウォッチフェイスを設定するには、次のコマンドを使用します。

adb shell am broadcast -a com.google.android.wearable.app.DEBUG_SURFACE --es operation set-watchface --es watchFaceId com.example.codelab

これで、スマートウォッチまたはエミュレータにウォッチフェイスが表示されます。完了

b1ab1ed6a1ce8575.png

4. 時間を追加する

Watch Face Format は、アナログ時計とデジタル時計の両方の表示に対応しています。1 つのウォッチフェイスに両方または複数の時計を表示することもできます。

< AnalogClock> 要素を使用してアナログ時計を追加する方法を見てみましょう。まず、watchface.xml ファイルから < PartText> 要素全体を削除し、次のように置き換えます。

<AnalogClock x="0" y="0" width="450" height="450">
  <!-- TODO: Add shadows here later -->
  <HourHand resource="hour"
      x="215" y="50" width="20" height="190"
      pivotX="0.5" pivotY="0.921" >
  </HourHand>
  <MinuteHand resource="minute"
      x="217" y="25" width="16" height="220"
      pivotX="0.5" pivotY="0.9">
  </MinuteHand>
  <SecondHand resource="second"
      x="221" y="15" width="8" height="245"
      pivotX="0.5" pivotY="0.857">
    <Variant mode="AMBIENT" target="alpha" value="0" />
    <Sweep frequency="15" />
  </SecondHand>
</AnalogClock>

<AnalogClock> 要素の高さと幅は 450 であるため、画面全体を占有しています。また、< HourHand>、< MinuteHand>、< SecondHand> の 3 つの子要素もあります。これらの定義については、次の点に注意してください。

  • リソース: これらの子要素にはそれぞれ、描画可能なアセットに対応するリソース属性があります。たとえば、res/drawable に hour.png ファイルがあり、<HourHand> 要素で使用されています。@drawable を指定する必要がないことに注意してください。
  • ピボット: 針は自動的に回転しますが、pivotX と pivotY でピボットの位置を指定します。たとえば、pivotY は次のように計算されます。

f08428ae204605e1.png

c194bd487cebbe26.png

  • バリアント: <SecondHand> に < Variant> 子要素が含まれています。これは、アンビエント モードではウォッチフェイスが 1 分ごとにのみ更新されるため、秒針を非表示にします。

次のコードを実行してウォッチフェイスを再ビルドし、デバイスまたはエミュレータにデプロイします。

./gradlew installDebug

今回は、動作する時計を作成しました。ただし、改善できる点はまだたくさんあります。

52628bf6c0d30d09.png

5. 色とテーマ設定の追加

ウォッチフェイスの魅力の一つは、カスタマイズして個性を表現できることです。

現時点ではウォッチフェイスは白一色で少し地味なため、色を追加しましょう。さらに、カラーテーマをカスタマイズできるようにしましょう。

ColorConfiguration の作成

まず、ウォッチフェイスで使用できるカラーテーマを定義します。watchface.xml で <!-- TODO: Add UserConfigurations here --> というテキストを見つけて、次のように置き換えます。

<UserConfigurations>
  <ColorConfiguration id="themeColor" displayName="color_label" defaultValue="0">
    <ColorOption id="0" displayName="color_theme_0" colors="#ffbe0b #fb5607 #ff006e #8338ec #883c3c3c" />
    <ColorOption id="1" displayName="color_theme_1" colors="#8ecae6 #219ebc #ffb703 #fb8500 #883c3c3c" />
    <ColorOption id="2" displayName="color_theme_2" colors="#ff595e #ffca3a #8ac926 #1982c4 #883c3c3c" />
    <ColorOption id="3" displayName="color_theme_3" colors="#ff0000 #00ff00 #ff00ff #00ffff #883c3c3c" />
    <ColorOption id="4" displayName="color_theme_4" colors="#ff99c8 #fcf6bd #d0f4de #a9def9 #883c3c3c" />
    <ColorOption id="5" displayName="color_theme_5" colors="#1be7ff #6eeb83 #e4ff1a #ffb800 #883c3c3c" />
  </ColorConfiguration>
</UserConfigurations>

これにより、6 色のテーマが定義され、各テーマに 5 色が含まれます。各テーマは、colors 属性に示すように、スペース区切りの色のリストです。

各テーマにはわかりやすい名前が必要なため、res/values/strings.xml ファイルに次の定義を追加します。

<string name="color_label">Color Theme</string>
<string name="color_theme_0">Bold</string>
<string name="color_theme_1">Magic</string>
<string name="color_theme_2">Breeze</string>
<string name="color_theme_3">Daytime</string>
<string name="color_theme_4">Relaxed</string>
<string name="color_theme_5">Smart</string>

ColorConfiguration の使用

カラーテーマを定義したら、各針に tintColor 属性を追加して、時計の針に適用します。watchface.xml を次のように変更します。

<HourHand ... tintColor="[CONFIGURATION.themeColor.0]">
...
<MinuteHand ... tintColor="[CONFIGURATION.themeColor.1]">
...
<SecondHand ... tintColor="[CONFIGURATION.themeColor.2]">

<HourHand> は選択したテーマの最初の色、<MinuteHand> は 2 番目の色、<SecondHand> は 3 番目の色を参照します。

先ほどと同様にウォッチフェイスを再ビルドしてデプロイすると、ウォッチフェイスがカラーで表示されます。

e382aaf41c7990d9.png

さらに、ウォッチフェイスを長押しして設定ボタンをタップすると、6 つのカラーテーマから選択できます。

79ffac91f7cabaf5.png

6. 背景色を追加する

このウォッチフェイスをさらに目立たせるために、いくつかの方法があります。大胆な背景デザインを追加しましょう。背景は大部分が黒色のままですが、この色のアクセントによってデザインが引き立ちます。

Watch Face Format の < PartDraw> 要素を使用します。この要素を使用すると、線、長方形、楕円、円弧などのプリミティブを描画するレイヤを作成できます。テキスト <!-- TODO: Add the background design here --> を次のように置き換えます。

<Group x="100" y="100" width="250" height="250" name="background" alpha="127">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <PartDraw x="0" y="0" width="250" height="250">
    <Ellipse x="0" y="0" width="250" height="250">
      <Fill color="[CONFIGURATION.themeColor.3]" />
    </Ellipse>
    <Ellipse x="50" y="50" width="150" height="150">
      <Fill color="#000000" />
    </Ellipse>
  </PartDraw>
</Group>

<Variant> 要素が再び使用されていることに注目してください。これにより、アンビエント モードのときに背景のリングが削除され、点灯するピクセルの数が最小限に抑えられます。

また、カラーテーマを再度使用してリングの色を選択し、ウォッチフェイスのすべての要素でスタイルを維持していることにも注目してください。

710c8969df19226b.png

7. ウォッチフェイスの検証

ウォッチフェイスの拡張に進む前に、Watch Face Format バリデータを使用して開発プロセスを効率化する方法を学びましょう。

バリデータは、XML の正確性をチェックするツールです。ウォッチフェイスを作成してデプロイした後に、動作しないことが判明するだけの結果となる場合の時間を省くことができます。

  1. GitHub リポジトリからバリデータ JAR ファイルをダウンロードします。
  2. watchface.xml ファイルに対してバリデータを実行する
java -jar wff-validator.jar 1 watchface/src/main/res/raw/watchface.xml

ウォッチフェイスの XML が有効な場合は確認メッセージが表示されます。エラーが見つかった場合は、エラーの詳細と場所が表示されます。例:

SEVERE: [Line 18:Column 49]: cvc-complex-type.2.4.a: Invalid content was found starting with element 'PartDrw'

8. データソースの使用

Watch Face Format では、さまざまなデータソースを活用して、ウォッチフェイスの利便性を高めることができます。

ウォッチフェイスの利便性を高めるために、よく使用される 2 つのデータソースである現在の日付（以前の日付を忘れたことがない人はいるでしょうか）と 1 日の歩数を追加しましょう。

これらの各要素は、テキスト オペレーションを実行するためのレイヤである < PartText> コンテナに配置されます。

日付を追加する

<!-- TODO: Add the date/time element here --> のテキストを次のように置き換えます。

<PartText x="225" y="225" width="225" height="225">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <TextCircular centerX="0" centerY="0" width="415" height="415" startAngle="180" endAngle="90" align="CENTER" direction="COUNTER_CLOCKWISE">
    <Font family="SYNC_TO_DEVICE" size="28" color="[CONFIGURATION.themeColor.0]">
      <Template>
        <![CDATA[%d %s]]>
        <Parameter expression="[DAY]"/>
        <Parameter expression="[MONTH_S]"/>
      </Template>
    </Font>
  </TextCircular>
</PartText>

上のスニペットでは、< Template> を使用して、2 つのデータソースを文字列にフォーマットしています。DAY は 1～31 の整数であり、MONTH_S はすでに文字列であるため、整数と文字列をともに配置するには、書式設定式 %d %s を使用します。

これを CDATA 要素で囲むことは、レンダリングに空白文字が誤って組み込まれ、位置や配置に影響する可能性が生じることを回避できるため、おすすめの方法です。

最後に、カラーテーマを再度使用して、ウォッチフェイスの最新の追加部分が既存のテーマを維持するようにしたことを改めて確認します。

歩数を追加する

<!-- TODO: Add the step count element here --> のテキストを次のように置き換えます。

<PartText x="0" y="0" width="225" height="225">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <TextCircular centerX="225" centerY="225" width="415" height="415" startAngle="270" endAngle="360" align="CENTER" direction="CLOCKWISE">
    <Font family="SYNC_TO_DEVICE" size="28" color="[CONFIGURATION.themeColor.2]">
      <Template>
        <![CDATA[%05d]]>
        <Parameter expression="[STEP_COUNT]"/>
      </Template>
    </Font>
  </TextCircular>
</PartText>

Watch Face Format はさまざまなデータソースをサポートしており、歩数はあらゆるウォッチフェイスに追加できる優れた機能です。この機能によってユーザーは、日々の動きや運動を記録できます。

ウォッチフェイスをビルドしてデプロイし、最新の追加内容を確認します。

78cd5888c9e3a9a6.png

9. 最後の仕上げとプレビュー

ウォッチフェイスでは細部まで気を配ることが重要です。そこで、さらにいくつかの仕上げを加えましょう。

ウォッチフェイスに影を追加する

ウォッチフェイスの針は、異なる色でうまく調和していますが、ウォッチフェイスに対して少し平面的に見えます。<!-- TODO: Add shadows here later --> を次のコードに置き換えて、時計の針の背後に影を追加します。

<HourHand resource="hour" x="220" y="55" width="20" height="190"
    pivotX="0.5" pivotY="0.921" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
</HourHand>
<MinuteHand resource="minute" x="222" y="30" width="16" height="220"
    pivotX="0.5" pivotY="0.9" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
</MinuteHand>
<SecondHand resource="second" x="226" y="20" width="8" height="245"
    pivotX="0.5" pivotY="0.857" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <Sweep frequency="15" />
</SecondHand>

8b5959083acc5689.png

有名な時計メーカーはすべて、文字盤にロゴを配置しています。自分たちだけのロゴを追加しましょう。もちろん、Android のロゴを使用しましょう。

ただし、これはスマートウォッチであるため、違った方法で、ユーザーの手首の角度に応じて動くロゴを追加しましょう。

そのためには、画像を < Group> 要素内に配置し、< Transform> 要素を使用して、手首の角度に基づいて <Group> 要素に回転を適用します。構造は次のようになります。

e738ca09c695ca93.png

要素のデフォルトのピボット ポイントは中央にあるため、<Group> の pivotX と pivotY を調整する必要はありません。<Group> に <Transform> を適用すると、<PartImage> がその中心のピボット ポイントを中心に回転します。

<Transform> では、X 方向と Y 方向の角度の合計を表す [ ACCELEROMETER_ANGLE_XY] データソースを使用します。

<!-- TODO: Add the Android logo --> を次のスニペットに置き換えます。

<Group x="92" y="92" width="266" height="266" name="logo_container">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <Transform target="angle" mode="BY" value="0.1 * [ACCELEROMETER_ANGLE_XY]" />
  <PartImage x="97" y="0" width="72" height="72"
    tintColor="[CONFIGURATION.themeColor.2]">
    <Image resource="android"/>
  </PartImage>
</Group>

ウォッチフェイスを再デプロイします。実機を使用している場合は、装着して手首を動かしてみましょう。Android ロゴが動くのがわかります。エミュレータを使用している場合は、エミュレータの拡張コントロールを開き、仮想センサーで X 軸と Y 軸の角度を操作します。

プレビューを更新する

Codelab の冒頭で、preview.png ファイルがあることを説明したのを思い出してください。このファイルは、システムがウォッチフェイスのプレビューを表示するために使用します。完成したウォッチフェイスをより適切に反映するように、これを更新しましょう。

スクリーンショットを生成する最も簡単な方法は、エミュレータを使用することです。ウォッチフェイスが実行されている状態で、スクリーンショット ボタンをクリックします。

6172ea8cc9309516.png

キャプチャが [Display Shape] に設定されていることを確認します。

9d90300c3ce4d8f.png

画像を保存し、res/drawable/preview.png ファイルをこの新しい画像に置き換えます。これまでと同じようにウォッチフェイスを再ビルドしてデプロイします。

10. 完了

これで完了です。Watch Face Format を使用してウォッチフェイスを作成する際の基本についての学習が完了しました。

Codelab の解答

この Codelab の解答コードは GitHub から入手できます。

$ git clone https://github.com/android/codelab-watch-face-format

または、リポジトリを ZIP ファイルとしてダウンロードすることもできます。

次のステップ

Watch Face Format では、他にもさまざまなことができます。次のステップとして、以下の内容をおすすめします。

ウォッチフェイスを強化する

公開の準備中

  • メモリ使用量ツールを使ってみる。このツールはウォッチフェイスのメモリ使用量を分析するものであり、ウォッチフェイスを Google Play にアップロードする前に使用する必須のツールです。