Android WearのWatch Faceを作る(概念編)

2015/11/11 4398hit

Android WearのWatch Faceを作る 目次

Watch Faceを作る(概念編)
5分で作るWatch Face
サンプルを読み解く
画像を使ってオリジナル時計を作る
設定画面を作る
コンパニオンアプリの作成
その他Tips

Android Wearが発売されて1年以上が経ち、段々と面白いアプリも増えてきたように思います。
ウェアラブルとしては後発名だけあって進化の速度は早いように思います。


特にWatch Faceという独自の文字盤を作ることが出来るようになったのがとても嬉しい。
私はRotary watchというロータリーエンジンをデフォルメしたWatchFaceをリリースしています。


WatchFaceを作ることで、自分だけのオリジナルな時計を作ることが出来ます。
それも、背景の写真を変えるとか、針の形を変えるなんていう制限あるカスタマイズではなく、完全に自由な発想をそのまま作ることができるので、時計の概念を崩すような時計を作ることも可能です。
また、時計として表示するだけでなく、対話的な挙動をつけたりSNSの新着を表示するような仕組みを組み込むことも出来ます。

今回の連載ではWatchFaceの作り方を、実際に作成しながら学んでいきます。
最終的にはカスタマイズ可能なアニメーションするオリジナルのアナログ時計を作成します。


注意すべき点

Watch Faceの作り方は基本的に自由です。
ただし、幾つかの部分で注意する必要があります。

開発環境はAndroid Studioを使う。

Eclipseを使って開発するよりAndroid Studioを使って開発したほうがずっと簡単です。
EclipseのAndroidサポート自体が終了するのでこれを機にAndroid Studioに移行してしまいましょう。

電池の使用量に制限がある。

Watch Faceを作る上で一番大きな問題が電池使用量です。
Android Wearのバッテリーはスマートフォンの1/5〜1/10程度しかないうえに、Watch Faceが実行されている時間は通常のActivityより断然多くなります。
そのためWatchFaceではバッテリーの使用量を抑える必要があります。

Android Wear側の仕組みとして、Watch Faceは表示された後数秒でスリープまたはAmbient Modeという省電力状態になります。スリープになるかAmbient Modeになるかはユーザーの設定によって変わってきます。
Ambient Mode対応については後に詳しく記載しますが、これによりWatch Faceを作るときは、通常時と別にAmbient Modeを意識した作りにする必要があります。

Watch Face側としては、じゃぶじゃぶと電力を使うことは許されずに消費電力の少ない=計算量の少ない 作りを意識する必要があります。

限られた操作性。

Watch Faceでは通常のAndroid同様にタッチイベントなどを拾うことが出来ます。
しかしながら、長押しはWatch Faceの変更、上方向からのフリックは簡易設定、下方向からのフリックはNotificationの表示、左方向からのフリックはランチャーの起動とシステム標準の挙動が設定されており使うことが出来ません。
また画面が小さいため、画面上に沢山のボタンを置くことも出来ません。
実質的には多くとも画面上4箇所程度のタップ判定を行う程度に抑える必要があります。

多環境対応。

もしWatch Faceを広く公開するつもりがあるのであれば、通常のAndroidと同様にAndroid Wearにも様々なハードウェアがあることに注意が必要です。
液晶画面には丸型と四角のものが有り、解像度も様々であることに特に注意してください。

画面サイズについてはスマートフォンとちがって、どれも大きく違いません。
厳密には小さな画面も大きな画面も有りますが、いずれにしてもUIの構造を変えるほどの差がありません。
そのため、多解像度対応についてはスマートフォンと異なるアプローチが取られます。

スマートフォンの場合は3.5インチ程度から6インチサイズまでありますし、タブレットまで同じAPKで対応するならそれ以上のサイズについても意識する必要があります。
UI部品は、画面サイズに応じてピクセル数を変えるdpi単位が用いられ、ピクセルサイズに応じて画像を切り替えることでどの端末でも同じような大きさのUI部品となるように作るのが一般的です。

Android Wearの場合はUI部品の大きさを揃えるよりも、画面いっぱいに表示されるようにUIを全て均一に拡大縮小するのが一般的です。
そのため、画像を画面密度ごとに用意するのではなくある程度大きめの画像を用意しておいてリサイズするという方法になります。

デザインを考える。

Watch Faceのデザインを考えます。 基本的にはどんなデザインも可能ですが、注意が必要なのがAmbient Modeの存在です。
Ambient Modeになると、液晶の色数が減り、バックライトが抑えられ、画面のリフレッシュレートが1分間あたり1回になります。
色数がどの程度減るかについては端末によって異なるようで、フルカラーの画像はGear Liveやmoto360では16色程度の色数となりました。
しかしながら、どういった色数になるかわからないことと、バックライトが消えてコントラストの低い文字は認識しづらくなることを想定すると、白黒+アンチエイリアスで作るのが無難かと思います。

リフレッシュレートが1分間あたり1回になるということは秒針の表現が出来なくなることを意味しています。
そのため、白黒でも通用するデザインかつ、秒針がなくなっても問題ないデザインを考えます。
その他にも振り子時計のようなアニメーション部分は再現が出来なくなります。
Ambient Modeの時だけ全く違うデザインにすることも可能です。

デザインをする上では、それが丸型や正方形、長方形の画面で表示されるかもしれないことを意識します。
丸型に合わせて、四角に表示された時にカド部分を余白にするのが楽かと思います。
丸型と四角で別々のデザインをすることも可能です。

画像を用意する。

Androidスマートフォンの場合、複数の解像度を用意するためにイラストレーターなどのドロー系ツールを使ってデザインするのが望ましいですが、Android Wearの場合それほど多くの画面サイズをサポートする必要が無いのと、端末側で拡大縮小するのが前提となるため、Photoshopのようなペイント系ツールでデザインすることも出来ます。(ただし、将来的により高解像度なWearが出た時に備えて実際に出力するより高解像度な画像を用意しておくことをおすすめします。

画像を用意するときには、Bitmapで出力する部分と、LineやTextなどプログラムで出力する部分を切り分けます。
基本的にはLineやTextで出力したほうがリサイズが発生しない分綺麗に描画されるようになります。
より多彩な表現を使いたい時にはBitmapが必要となるでしょう。

Bitmapで出力する部分については、背景のような動かない部分と、長針・短針のようにそれぞれ個別に動く部分を別々に切り出せるように意識します。
Android Wearではどのようなデザインにするのも自由なため 長針や短針という概念がない時計を作ることも可能です。

次回は実際にWatch Faceを作成します。

前:Macで格安に高音質なディジタル音声出力を行う 次:Watch Faceを作る 5分で作るWatch Face

関連キーワード

[Android][Java][モバイル][IT][ウェアラブル]

コメントを投稿する

名前URI
コメント