android wearアプリ開発の基礎
TRANSCRIPT
2015/04/18UNIPRO講習会
Android Wearアプリ開発の基礎
株式会社UNIPRO 高木 雅
1
2015/04/18UNIPRO講習会
Android Wearとは (1)
• 腕時計型デバイス向けのAndroid OS • 2014年3月にリリース • Apple Watchより一足先に発売
• 搭載機種 • Moto 360 • LG G Watch / G Watch R • Samsung Gear Live • ASUS ZenWatch • Sony SmartWatch3 • Huawei Watch など
• 有名時計ブランドが参入を表明 • TAG HEUER、Swatch
• Nexus端末は存在しない
2
SmartWatch3
Moto360
G Watch R
2015/04/18UNIPRO講習会
Android Wearとは (2)
• ハードウェア • ディスプレイ • 円形または四角形 • タッチパネル • 有機ELがほとんど ※薄型化・省電力化に有利なため？
• 入出力デバイス • スリープボタン • マイク（音声入力） • スピーカー • バイブレータ
• 通信 • Wi-Fi、Bluetooth
• センサ • 心拍数モニタ、加速度センサ、磁気センサ など
3
2015/04/18UNIPRO講習会
こんなものを作れます
• Wearアプリ • 基本的にはスマホ・タブレットと同じAPI • ある機能：各種View、マイク、各種センサ • ない機能：WebView、ウィジェット、USB連携
• 通知領域への常駐表示
• 母艦スマホとのデータ同期
• 文字盤 • JavaのCanvasで実現できる範囲なら任意のデザイン • 加速度などのセンサ情報を反映することも可能 • 文字盤の光沢を再現する、とか
• 常時表示には制限あり • 操作後5～10秒でAmbientモードに移行 • 画面描画が原則1分毎に • 省電力化のため「黒っぽい背景・明度の低い描画色」が推奨される
4
2015/04/18UNIPRO講習会
Apple Watchとの違い
• 文字盤アプリを作れる • 腕時計型デバイスのロマン？ • もちろんGoogle PLAYで配布可能
• Apple Watchはプリセットの組み合わせ • 公式サイトも「数百万通り｣｢ほぼ無限」と歯切れの悪い表現 • なお、時計アプリはリジェクトされる模様 • http://www.dorapro.co.jp/engineerblog/?p=634
• 母艦はAndroidでもiPhoneでもOK • GoogleがiPhone連携の準備を進めている • Appleにリジェクトされないと良いが…
• 時計らしい円形ディスプレイ • そういえば、なぜApple Watchは四角形なんだろう？
5
2015/04/18UNIPRO講習会
開発環境
• Android Studio • Eclipse + ADT環境では作れません • インストール方法は下記のページを参照 • http://thinkit.co.jp/story/2015/02/25/5644
• プロジェクト作成時に “Wear” を選択 • Phone and Tablet • TV • Wear • Glass
• Android Wear実機 • エミュレータでも良いけど、つまらないよね • USB接続 または 母艦スマホ経由でBluetooth接続 • G Watch R + Xperia Z3c の組み合わせでは後者はうまくいかず。よく分からん
6
2015/04/18UNIPRO講習会
プロジェクト構成
• Android Studioスタイルに準拠 • 見かけは Eclipse + ADT と似ているが、実体は異なる(!)
7
Eclipse + ADT • src • [package name] • *.java
• assets • libs • res • drawable • layout • menu • values
• AndroidManifest.xml
Android Studio • java • [package name] • *.java ロジック
• res • drawable 画像 • layout レイアウト • menu メニュー • mipmap アイコン • values スタイル等
• manifests • AndroidManifest.xml
メタ情報
物理フォルダ • src • main • java • …
• res • …
• AndroidManifest.xml • assets 添付ファイル
• libs ライブラリ
2015/04/18UNIPRO講習会
• AndroidManifest.xml !!!!!!!!!!
• res/xml/watch_face.xml
文字盤の作り方 (1)8
<uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" /> <uses-feature android:name="android.hardware.type.watch" /> : <service android:name=".MyWatchFaceService" android:label="@string/rironriron" android:permission="android.permission.BIND_WALLPAPER" > <meta-data android:name="android.service.wallpaper" android:resource="@xml/watch_face" /> <meta-data android:name="com.google.android.wearable.watchface.preview" android:resource="@drawable/preview" /> <meta-data android:name="com.google.android.wearable.watchface.preview_circular" android:resource="@drawable/preview_circular" /> <intent-filter> <action android:name="android.service.wallpaper.WallpaperService" /> <category android:name="com.google.android.wearable.watchface.category.WATCH_FACE" /> </intent-filter> </service>
<?xml version="1.0" encoding=“UTF-8"?> <wallpaper xmlns:android="http://schemas.android.com/apk/res/android" />
プレビュー画像（四角形）
プレビュー画像（円形）
表示名
2015/04/18UNIPRO講習会
文字盤の作り方 (2)
• java/[package name]/MyWatchFaceService.java9
public class MyWatchFaceService extends CanvasWatchFaceService { @Override public Engine onCreateEngine() { return new Engine(); } ! private class Engine extends CanvasWatchFaceService.Engine { @Override public void onCreate(SurfaceHolder holder) { super.onCreate(holder); ! // WatchFaceの属性を指定する setWatchFaceStyle(new WatchFaceStyle.Builder(MyWatchFaceService.this) .setCardPeekMode(WatchFaceStyle.PEEK_MODE_SHORT) .setBackgroundVisibility(WatchFaceStyle.BACKGROUND_VISIBILITY_INTERRUPTIVE) .setShowSystemUiTime(false) .build()); ! // 画像、ペン（Paint）など繰り返し使うものは、ここで生成しておく mPaint = new Paint(); mPaint.setARGB(255, 127, 127, 127); mPaint.setStrokeWidth(12.0f); mPaint.setAntiAlias(true); mPaint.setStrokeCap(Paint.Cap.ROUND); mPaint.setStyle(Paint.Style.STROKE); }
2015/04/18UNIPRO講習会
文字盤の作り方 (3)10
/* 画面OFFであっても、1分毎に呼ばれるメソッド */ @Override public void onTimeTick() { super.onTimeTick(); invalidate(); // 再描画 } ! /* Ambientモードが変化した時に呼ばれるメソッド */ @Override public void onAmbientModeChanged(boolean inAmbientMode) { super.onAmbientModeChanged(inAmbientMode); // Ambientモードなら描画色を半透明に（→黒背景なら輝度が下がる） mPaint.setAlpha(inMuteMode ? 127 : 255); invalidate(); // 再描画 } ! /* 描画時に呼ばれるメソッド */ @Override public void onDraw(Canvas canvas, Rect bounds) { // ここでCanvasに描画 if (!isInAmbientMode()) { // AmbientModeの時は秒針を省略 } if (isVisible() && !isInAmbientMode()) { invalidate(); // 再描画 } } } }
2015/04/18UNIPRO講習会
文字盤の作例11
2015/04/18UNIPRO講習会
有機ELディスプレイの特性
• 自発光 • 有機材料自体が励起光を発する • RGBの鋭いスペクトルを含むため、発色が鮮やか • 液晶は白色のバックライト光をフィルタリングして色を作るので白っぽくなりがち
• 視野角が広い、応答速度が速い • 液晶のような物理フィルタ構造を持たないため
• 消費電力 • 表示する色の明度によって変わる • 液晶の消費電力は色に依存しない
• 明るい部分ほど消費電力が大きい • 黒い部分は電力を消費しない。当然、光も発さないのでコントラスト比が極めて高い
• 経年劣化 • 有機材料の酸化により徐々に輝度が落ちる • 同じ場所ばかり光らせるとムラができることも
12