第39回プログラミング生放送（2016/02/13）で行ったプレゼンのスライドです。 AndroidWearでWatchFaceを作る方法を、自動入力プログラムの編集を行う方法で簡単に作成しています。 詳しくはこちらをご覧ください。 【初心者向け】今日から始める Android Wear – Watch Face制作 – Atelier kebin http://atelier-kebin.bitter.jp/post-436/

1. kebin (@kebin628)
今日から始める
Android Wear -
Watch Face制作
プログラミング生放送勉強会 第39回
2016-02-13

2. 簡単な自己紹介
kebin
Twitter: @kebin628
とある大学の院生
VRとハンドジェスチャを用いた
発想支援ソフトウェアの実装、評価
「マスコットアプリ文化祭2015
キャラクターウォッチフェイス」で応募
2

3. 簡単なアプリ紹介
マスコットアプリ文化祭2015 キャラクターウォッチフェイス
AndroidWear用ウォッチフェイスアプリ
キャラクターの画像、背景等を好みで変えられる
Google Playで配信中
3

4. 簡単なアプリ紹介
WatchFace
Android Wearの待機画面
Android端末と連携するデバイス
パソコンさえあれば自分で作れる
WatchFace制作の入り口を示す
ウォッチフェイス制作を通じ、AndroidWearに
興味を持ってもらうのが本日の目標
自動入力されたコードに追加する形で作る
4

5. 今日の内容
今日の内容は
Atelier kebin(http://atelier-kebin.bitter.jp) にて解説
Twitterアカウント(@kebin628)の固定ツイートからも飛べます
5

6. WatchFace制作
作りたいWatchFaceをイメージする
最初なので簡単なものにする
プロ生ちゃんの画像を前面に
単色背景
デジタル時間表示
6
15:30:20

7. WatchFace制作
Android Studioを落とす
Android用のGoogle公式IDE
iOS, Macで言うXCode、Windowsで言うVisual Studio
今回は出たばかりのAndroid Studio 2.0 Beta2を使用
ダウンロードが終わったら起動してみる
7

8. WatchFace制作
新しいプロジェクトを作成し、
プロジェクト名を決める
デバイス選択で「Phone and Tablet」と
「Wear」を選択
API20以下だとWatchFaceAPIが無いため、
WearのAPIは必ず21以上にする
8

9. WatchFace制作
WearのActivityの設定
Wearは「Watch Face」
Activityのカスタマイズ
サービス名は適当に（ここではMyWatchFace）
デジタル時計なので、Styleは「Digital」
Interactiveのチェックを外す
9

10. WatchFace制作
プロジェクトがコード付きで
自動生成される
mobileとwearの2つの環境ができる
主に弄るのはwearのMyWatchFace
試しにこの状態でwear環境を
実行してみる（デフォルトの状態）
上部のrun を選択
10

11. WatchFace制作
追加したWatchFaceを選択
時計画面を長押しで選択
時計として必要な物がこの時点で大体出来てる
作るプロジェクトを
WatchFaceに指定したため、
殆ど入力されている
名前の変更、
プレビュー画像の変更、
WatchFace画面を変更する
11

12. WatchFace制作
コードの中を確認
WatchFaceの処理はwear側のCanvasWatchFaceServiceを
継承したMyWatchFace(サービス名)クラスで行われる
EngineHundlerクラス…スレッド間通信
Engineクラス…描画など(CanvasWatchFaceServices.Engine継承)
void onDraw(Canvas canvas, Rect bounds)メソッド
… WatchFaceの描画
複雑なことしなければ、OnDraw内を書き換えればOK
12

13. WatchFace制作
13
引数
・Canvas canvas … 書き込むcanvas
・Rect bounds … 描画範囲 ① 背景描画
アンビエントモード時
… 背景を黒くする
非アンビエントモード時
… 背景色を指定した色にする
② 時刻の描画
アンビエントモードでなければ
秒まで表示する
onDraw()
プロジェクト作成時の状態
アンビエントモード
無操作時後のスリープ的な画面
全体グレースケール推奨
onDraw()の呼ばれる頻度が減る(1秒→1分)

14. WatchFace制作
起動時（データの読み込み）
プロ生ちゃんの画像2種を読み込み
onDraw()
1. 背景色を塗りcanvasに描画
2. プロ生ちゃんの画像をcanvasに描画
3. 時間の描画
14
アンビエントモード用通常用

15. WatchFace制作
画像の読み込み(pronamachan.png)
画像をwear/res/drawable以下に置く
Engineクラスに読み込む
グローバル空間にとりあえず画像保存フィールドを作成
[例] Bitmap characterImage, characterGrayImage;
onCreate()内で画像を読み込み
[例] characterImage =
BitmapFactory.decodeResource(getResources(), R.drawable.pronamachan);
15

16. WatchFace制作
書き換えたonDraw
16
変更点
通常時背景色を緑に
画像を追加
時間の表示位置を変更

17. WatchFace制作
一応完成
名前やプレビューがデフォルトのままなので
Manifestを変える必要がある
17

18. WatchFace制作
wearのAndroidManifest.xml編集
WatchFaceの項目はapplication以下のservice
18
Service直下
name … CanvasWatchFaceのあるクラス
label … WatchFaceの名前
meta-data
…watchface.preview(_circular)
→ プレビュー画像(drawable以下)

19. WatchFace制作
設定の変更
WatchFace名(label):
My Digital(@string/my_digital_name)
→ プロ生39th
プレビュー画像の変更
DDMSやWearコンパニオンアプリ等で撮影し、
リネームしてdrawable以下のに置き換え
適当な名前つけて、Manifestに書いてもOK
19
preview_digital.png
preview_digital_circular.png

20. WatchFace制作
ビルドして終了、確認
自分で使うも良し、GooglePlayで公開するも良し
20

21. Android Wearのススメ
Android Wearアプリは案外簡単に作れる
Android(Java)の知識ストックがあればなお良し
パソコン1台あれば挑戦可能
Windows, Mac, Linux対応
実機無くても公式エミュレータで実験可能
気が向いたらトライしてみると良いかも
折角なら、実機買ってみるのも面白いかも
21

22. Android Wearのススメ
Android Wearの利点（主観）
通知や情報の確認が簡単で早い
移動中、満員電車の中でも強い
内容をそのまま確認可能
携帯置き忘れに気づける
使わないと分からない部分が多い
22

23. Android Wearのススメ
23
アプリについて
対応はGooglePlayで確認可能

24. Android Wearのススメ
アプリがまだまだ非対応
Androidの通知がそのまま端末に出る
表示しきれず、肝心なところが見れない
アプリ依存の機能は、アプリ側で対応が必要
24

25. Android Wearのススメ
有名なアプリでも非対応（AndroidWear限定の可能性アリ）
対応させることでアプリを差別化できるかも？
実際に使ってみて、不便な点を解決するアプリや、
これがあると面白いと思ったアプリが受けるかも
余裕があったら購入して、対応アプリを作るのも面白い
25