Wear OS 向けウォッチフェイスの作成

1. 始める前に

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

この 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...] を使用して start ディレクトリを選択し、Android Studio で開始プロジェクト自体を開きます。

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">

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

<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 の一環として、ウォッチフェイスをカスタマイズできるようにします。これも watch_face_info.xml file で <Editable> 要素を使用して宣言します。

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. バリデータの JAR ファイルを GitHub リポジトリからダウンロードします。
  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> では、[ ACCELEROMETER_ANGLE_XY] データソースを使用します。これは、X 方向と Y 方向の角度の合計を表します。

<!-- 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

キャプチャが [ディスプレイの形状] に設定されていることを確認します。

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 にアップロードする前に使用する必須のツールです。