More Related Content
Similar to Android Wear (20)
Android Wear
- 2. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Agenda
➢ What’s Android Wear
➢ Android Wearでできること
➢ Googleが描くコンセプト
➢ アプリケーション開発に必要な環境
➢ プロジェクトを作成する
➢ Android Ware Demo
- 3. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
What’s
Android Wear ?
?
- 4. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
服やカバン、腕時計ののように身につけて(wear)利
用するコンピュータ
ウェアラブルとは
- 5. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
What’s Android Wear
➢ ウェアラブル端末用のAndroidプラットフォーム
○ http://developer.android.com/wear/index.html
➢ 主に腕時計として使われている
LG G WatchMoto 360
- 6. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
➢ 四角と丸
エミュレータも用意されている
- 7. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Android Wearで
できること
- 8. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Android Wearでできること
➢ 2つのUIモデル
○ Context Stream
○ Cue Card
- 9. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Content Stream
➢ Notificationを表示
○ Receive Voice Reply
○ アプリケーションから
○ ジオフェンスと連携
○ センサーから
- 10. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Cue Card
➢ Cue Card
○ 「OK Google」または ”g” アイコンをタップ
○ アクション一覧が表示される
OK Google
- 11. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Android Wear SDKでできること
➢ Build Custom UI
➢ Send Data
➢ Control Sensors
➢ Voice Action
- 12. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Build Custom UI
➢ Notificationを重ねる
➢ 背景画像を設定
➢ 複数ページ対応
- 13. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Send Data
➢ メッセージを送る
- 14. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Control Sensors
➢ センサー入力
○ センサデータを収集し、Androidのウェアラブル上にリアルタイムに表
示します
- 15. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Voice Action
➢ 音声入力に対応
○ デバイスをタッチしなくても入力ができる
- 17. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Google Now を中心に
➢ Information that moves with you
- 18. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
電車の中で
4 stops
to: Jacson St.
9 miniites to destination
- 19. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
タクシーで
Mega Taxi
Pickup 149 Linden Ave,
Long Beach CA90802
4 minutes away
- 20. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
ビーチで
Warning !
Jellyfish reported in area
Stay out of the water
Nearby Beaches
Zuma beach 3-5 ft
County Line Beach 2-4 ft
El Porto Beach 1-3 ft
- 21. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
空港で
LAX→JFK
Departs 12:55pm
Terminal 3, Gate 72
Flight 867
- 22. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
試合結果を聞いてみたり
what's the
Syracuse score ?
Syracuse 28
Virginia 27
- 23. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Google Wearは教えてくれる
➢ 今ここで何がしたいをサポート
○ わざわざ調べなくても勝手に教えてくれる
➢ スマフォを取り出しての操作が不要
○ 手が濡れてても平気
○ ハンドルを握ってても平気
- 24. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
アプリケーション開
発に必要な環境
- 25. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
開発環境
➢ デバイス
○ Android
■ Android 4.3以上
➢ 開発ツール
○ Android SDK Tools 22.6 or higher
○ Eclipse ADT Plugin or higher
○ Android Studio 0.5.1 or higher
○ Android Wear Preview
➢ Android Wear
○ エミュレータ
- 26. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
開発者登録
➢ Android Wear Developer Previewのための開発者登録
○ 登録手順
■ フォームから開発者情報を登録
■ メールが送られてくる
■ SDKをダウンロードする
- 27. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Android Wear Previewを入手する
➢ 手順
○ テスター登録をする
■ Sign Up Confirmationメールから登録ページヘ移動
○ Google Play から インストール
■ 手持ちのAndroid 端末にインストールする
- 28. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
エミュレータの作成
➢ イメージの取得
○ Android SDK Managerを起動
○ Android Wear ARM EABI v7a System Image をインストールする
- 29. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
エミュレータの作成
➢ Device
➢ CPU/ABI
➢ Skin
- 30. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
➢ 選択して[Start...]
起動する
- 32. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Android Wearと接続する
➢ Android Wear Previewを通して実機とエミュレータを接続す
る
○ Android 4.3以上の端末が必要
$ adb -d forward tcp:5601 tcp:5601
- 33. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
➢ 手順
○ エミュレータを起動する
○ AndroidをPCに接続
○ Android Wear Previewを起動
Android Wearと連携する
接続されていない状
態
- 34. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
➢ 手順(続き)
➢ Androidとエミュレータを接続する方法
○ ターミナルから次のコマンドを実行
○ [Connect]ボタンをクリック
Android Wearと接続する
$ adb -d forward tcp:5601 tcp:5601
- 35. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
➢ 接続されたことを確認
○ [Connected]と表示されている
○ エミュレータのアイコンが “g” になっている
Android Wearと接続する
接続されている
状態
- 36. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Android Wearと連携する
➢ Android to Android Wear
○ AndroidのNotificationはそのまま表示される
- 37. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Android Wearと連携する
➢ Android Wear to Android
○ 表示されたNotificationを操作する
○ [Open]をクリックするとアプリが起動する
メッセージが
表示される
横へフリック
上へフリック
クリック!
- 38. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
1. AndroidでNotificationが表示される
2. Previewアプリが検知
3. Android Wearに通知
Notification通知の流れ(Preview)
Notification!
アプリ
GCM
現在地
- 39. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
➢ サンプルアプリ
○ ElizaChat
○ WearableNotificationsSample
○ RecipeAssistant
サンプルアプリを動かす
- 40. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
➢ サンプルをビルドする
○ ターミナルを起動
○ アプリケーションプロジェクトディレクトリまで移動する
■ ここではWearableNotificationsSample
○ gradlewを実行する
○ apkファイルをインストールする
サンプルアプリケーションのビルド
$ cd [Android WearPreview]/samples/WearableNotificationsSample
$ chmod +x graidlew
$./gradlew
...
BUILD SUCCESSFUL
Total time: 5.348 secs
$ adb -s 079c74c8 install build/apk/WearableNotificationsSample-debug-
unaligned.apk
6483 KB/s (726078 bytes in 0.109s)
pkg: /data/local/tmp/WearableNotificationsSample-debug-unaligned.apk
Success
- 41. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
サンプルアプリケーションの起動
➢ アプリ一覧から起動する
クリック
- 42. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
➢ シンプルなチャットアプリ
ElizaChat
音声入力の代わりに
キーボード入力
- 43. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
WearableNotificationsSample
➢ 様々なタイプのNotificationを表示する
- 44. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
WearableNotificationsSample
設定を変えて実行
- 45. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
WearableNotificationsSample
Example reply action
音声入力の代わりにキー
ボード入力
- 46. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
WearableNotificationsSample
Open
- 47. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Recipe Assistant
料理のレシピと手順を表示
- 49. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
アプリケーションの説明
➢ アプリケーションの説明
○ ボタンをクリックするとNotificationが表示される
○ Android WearのOpenアイコンをタップすると画面が表示される
クリック
Notificationが表
示される
画面をスワイプ
タップ
- 50. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
シンプルなNotification
➢ IDE
○ Android Studio V0.5.8
➢
➢ 手順
○ 1. ライブラリの追加
○ 2. Notificationから起動されるActivityを追加
○ 3. MainActivityにNotification表示処理を追加
- 51. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
➢ 1. ライブラリの追加build.gradleの修正
○ Developer Previewに含まれている
”wearable-preview-support.jar”
をプロジェクトのlibsにコピーする
○ build.gradleの修正
■ dependenciesに以下のjarを追加する
● /android-support-v4.jar
● wearable-preview-support.jar
アプリケーションの作成
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:support-v4:19.1.+"
compile files('../libs/wearable-preview-support.jar')
}
- 52. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
➢ 2. Notificationから起動されるActivityを追加
○ Activity名:ViewEventActivity
○ レイアウト
アプリケーションの作成
- 53. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
アプリケーションの作成
➢ 3. MainActivityにNotification表示処理を追加
○ Buttonが押された時の処理を追加する
■ 通常のNotificationの表示処理と同じ
Intent viewIntent = new Intent(this, ViewEventActivity.class);
viewIntent.putExtra("eventId", eventId);
PendingIntent viewPendingIntent =
PendingIntent.getActivity(this, 0, viewIntent, 0);
NotificationCompat.Builder notificationBuilder =
new NotificationCompat.Builder(this)
.setSmallIcon(R.drawable.ic_launcher)
.setContentTitle(eventTitle)
.setContentText(eventMessate)
.setContentIntent(viewPendingIntent);
NotificationManagerCompat notificationManager =
NotificationManagerCompat.from(this);
notificationManager.notify(notificationId, notificationBuilder.build());
- 54. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
Actionをカスタマイズ
Actionをカスタマイズして、アイコンを変更する
- 55. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
Actionをカスタマイズ
➢ MainActivityにNotification表示処理を修正
Intent viewIntent = new Intent(Intent.ACTION_VIEW);
Uri uri = Uri.parse("content://contacts/people/");
viewIntent.setData(uri);
PendingIntent viewPendingIntent =
PendingIntent.getActivity(this, 0, viewIntent, 0);
NotificationCompat.Builder notificationBuilder =
new NotificationCompat.Builder(this)
.setSmallIcon(R.drawable.ic_launcher)
.setContentTitle(eventTitle)
.setContentText(eventMessate)
.setContentIntent(viewPendingIntent)
.addAction(android.R.drawable.sym_contact_card, "Contacts",
viewPendingIntent);
- 56. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
Wearの新機能を使う
Iconを非表示
// Create a WearablesNotification.Builder to add special functionality for wearables
Notification notification =
new WearableNotifications.Builder(notificationBuilder)
.setHintHideIcon(true)
.build();
NotificationManagerCompat notificationManager =
NotificationManagerCompat.from(this);
notificationManager.notify(notificationId, notification);
- 57. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
実習
Wearの新機能を使う
Reply Input
// Create the remote input
RemoteInput remoteInput = new RemoteInput.Builder("reply")
.setLabel("Reply")
.build();
// Create wearable notification and add remote input
Notification replyNotification =
new WearableNotifications.Builder(replyNotificationBuilder)
.addRemoteInputForContentIntent(remoteInput)
.build();
NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this);
notificationManager.notify(1, replyNotification);
- 58. Copyright © 2014 TOPGATE Corporation. All Rights Reserved.
Android Wear
Demo