kebin (@kebin628)

今日から始めるAndroid Wear - Watch Face制作

プログラミング生放送勉強会 第39回 2016-02-13

簡単な自己紹介

kebin Twitter: @kebin628

とある大学の院生

VRとハンドジェスチャを用いた発想支援ソフトウェアの実装、評価

「マスコットアプリ文化祭2015 　キャラクターウォッチフェイス」で応募

2

簡単なアプリ紹介

マスコットアプリ文化祭2015 キャラクターウォッチフェイス

AndroidWear用ウォッチフェイスアプリ

キャラクターの画像、背景等を好みで変えられる Google Playで配信中

3

簡単なアプリ紹介

WatchFace Android Wearの待機画面

Android端末と連携するデバイス

パソコンさえあれば自分で作れる

WatchFace制作の入り口を示す ウォッチフェイス制作を通じ、AndroidWearに興味を持ってもらうのが本日の目標

自動入力されたコードに追加する形で作る

4

今日の内容

今日の内容はAtelier kebin(http://atelier-kebin.bitter.jp) にて解説

Twitterアカウント(@kebin628)の固定ツイートからも飛べます

5

WatchFace制作

作りたいWatchFaceをイメージする

最初なので簡単なものにする

プロ生ちゃんの画像を前面に

単色背景

デジタル時間表示

6

15:30:20

WatchFace制作

Android Studioを落とす

Android用のGoogle公式IDE

iOS, Macで言うXCode、Windowsで言うVisual Studio

今回は出たばかりのAndroid Studio 2.0 Beta2を使用

ダウンロードが終わったら起動してみる

7

WatchFace制作

新しいプロジェクトを作成し、プロジェクト名を決める

デバイス選択で「Phone and Tablet」と「Wear」を選択 API20以下だとWatchFaceAPIが無いため、WearのAPIは必ず21以上にする

8

WatchFace制作

WearのActivityの設定

Wearは「Watch Face」

Activityのカスタマイズ

サービス名は適当に（ここではMyWatchFace）

デジタル時計なので、Styleは「Digital」

Interactiveのチェックを外す

9

WatchFace制作

プロジェクトがコード付きで自動生成される

mobileとwearの2つの環境ができる

主に弄るのはwearのMyWatchFace

試しにこの状態でwear環境を実行してみる（デフォルトの状態）

上部のrun　　を選択

10

WatchFace制作

追加したWatchFaceを選択

時計画面を長押しで選択

時計として必要な物がこの時点で大体出来てる

作るプロジェクトをWatchFaceに指定したため、殆ど入力されている

名前の変更、プレビュー画像の変更、WatchFace画面を変更する

11

WatchFace制作

コードの中を確認

WatchFaceの処理はwear側のCanvasWatchFaceServiceを 継承したMyWatchFace(サービス名)クラスで行われる

EngineHundlerクラス…スレッド間通信

Engineクラス…描画など(CanvasWatchFaceServices.Engine継承)

void onDraw(Canvas canvas, Rect bounds)メソッド… WatchFaceの描画

複雑なことしなければ、OnDraw内を書き換えればOK

12

WatchFace制作

13

引数・Canvas canvas … 書き込むcanvas・Rect bounds … 描画範囲 ① 背景描画

アンビエントモード時 … 背景を黒くする非アンビエントモード時 … 背景色を指定した色にする

② 時刻の描画アンビエントモードでなければ 秒まで表示する

onDraw()プロジェクト作成時の状態

アンビエントモード　無操作時後のスリープ的な画面　全体グレースケール推奨　onDraw()の呼ばれる頻度が減る(1秒→1分)

WatchFace制作

起動時（データの読み込み）

プロ生ちゃんの画像2種を読み込み

onDraw()

1. 背景色を塗りcanvasに描画

2. プロ生ちゃんの画像をcanvasに描画

3. 時間の描画

14

アンビエントモード用通常用

WatchFace制作

画像の読み込み(pronamachan.png)

画像をwear/res/drawable以下に置く

Engineクラスに読み込む

グローバル空間にとりあえず画像保存フィールドを作成

[例] Bitmap characterImage, characterGrayImage;

onCreate()内で画像を読み込み

[例] characterImage = BitmapFactory.decodeResource(getResources(), R.drawable.pronamachan);

15

WatchFace制作

書き換えたonDraw

16

変更点通常時背景色を緑に画像を追加時間の表示位置を変更

WatchFace制作

一応完成

名前やプレビューがデフォルトのままなのでManifestを変える必要がある

17

WatchFace制作

wearのAndroidManifest.xml編集

WatchFaceの項目はapplication以下のservice

18

Service直下name … CanvasWatchFaceのあるクラスlabel … WatchFaceの名前

meta-data…watchface.preview(_circular)→ プレビュー画像(drawable以下)

WatchFace制作

設定の変更

WatchFace名(label): My Digital(@string/my_digital_name) → プロ生39th

プレビュー画像の変更

DDMSやWearコンパニオンアプリ等で撮影し、リネームしてdrawable以下のに置き換え

適当な名前つけて、Manifestに書いてもOK

19

preview_digital.png

preview_digital_circular.png

WatchFace制作

ビルドして終了、確認

自分で使うも良し、GooglePlayで公開するも良し

20

Android Wearのススメ

Android Wearアプリは案外簡単に作れる

Android(Java)の知識ストックがあればなお良し

パソコン1台あれば挑戦可能

Windows, Mac, Linux対応

実機無くても公式エミュレータで実験可能

気が向いたらトライしてみると良いかも

折角なら、実機買ってみるのも面白いかも

21

Android Wearのススメ

Android Wearの利点（主観）

通知や情報の確認が簡単で早い

移動中、満員電車の中でも強い

内容をそのまま確認可能

携帯置き忘れに気づける

使わないと分からない部分が多い

22

Android Wearのススメ

23

アプリについて

対応はGooglePlayで確認可能

Android Wearのススメ

アプリがまだまだ非対応

Androidの通知がそのまま端末に出る

表示しきれず、肝心なところが見れない

アプリ依存の機能は、アプリ側で対応が必要

24

Android Wearのススメ

有名なアプリでも非対応（AndroidWear限定の可能性アリ）

対応させることでアプリを差別化できるかも？

実際に使ってみて、不便な点を解決するアプリや、これがあると面白いと思ったアプリが受けるかも

余裕があったら購入して、対応アプリを作るのも面白い

25