More Related Content
PDF
PPTX
PDF
Android Lollipop + Android Wear PPTX
PPTX
PPT
Android Wear Presentation PDF
PPTX
Similar to Android Wear
PDF
PDF
PDF
[展開用]Android wear abc2014w-kenichikambara PDF
PDF
PDF
PPTX
[ABC2016S]Android Wear アプリ開発入門 PDF
PDF
Android Wearアプリ プレビュー版→正式版への移植ガイド PPTX
PPTX
PDF
PDF
PDF
PDF
20120422 日本androidの会 横浜支部 smartwatch開発 PPTX
Android 開発, 運用時に使いたいライブラリやサービスの紹介 PDF
PDF
PDF
PPTX
Android Wear Design Guideline Android Wear
- 1.
- 2.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Agenda
➢ What’s Android Wear
➢ Android Wearでできること
➢ Googleが描くコンセプト
➢ アプリケーション開発に必要な環境
➢ プロジェクトを作成する
➢ Android Ware Demo
- 3.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
What’s
Android Wear ?
?
- 4.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
服やカバン、腕時計ののように身につけて(wear)利
用するコンピュータ
ウェアラブルとは
- 5.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
What’s Android Wear
➢ ウェアラブル端末用のAndroidプラットフォーム
○ http://developer.android.com/wear/index.html
➢ 主に腕時計として使われている
LG G WatchMoto 360
- 6.
- 7.
- 8.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Android Wearでできること
➢ 2つのUIモデル
○ Context Stream
○ Cue Card
- 9.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Content Stream
➢ Notificationを表示
○ Receive Voice Reply
○ アプリケーションから
○ ジオフェンスと連携
○ センサーから
- 10.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Cue Card
➢ Cue Card
○ 「OK Google」または ”g” アイコンをタップ
○ アクション一覧が表示される
OK Google
- 11.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Android Wear SDKでできること
➢ Build Custom UI
➢ Send Data
➢ Control Sensors
➢ Voice Action
- 12.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Build Custom UI
➢ Notificationを重ねる
➢ 背景画像を設定
➢ 複数ページ対応
- 13.
- 14.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Control Sensors
➢ センサー入力
○ センサデータを収集し、Androidのウェアラブル上にリアルタイムに表
示します
- 15.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Voice Action
➢ 音声入力に対応
○ デバイスをタッチしなくても入力ができる
- 16.
- 17.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Google Now を中心に
➢ Information that moves with you
- 18.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
電車の中で
4 stops
to: Jacson St.
9 miniites to destination
- 19.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
タクシーで
Mega Taxi
Pickup 149 Linden Ave,
Long Beach CA90802
4 minutes away
- 20.
Copyright © 2014TOPGATE 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 © 2014TOPGATE Corporation. All Rights Reserved.
空港で
LAX→JFK
Departs 12:55pm
Terminal 3, Gate 72
Flight 867
- 22.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
試合結果を聞いてみたり
what's the
Syracuse score ?
Syracuse 28
Virginia 27
- 23.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Google Wearは教えてくれる
➢ 今ここで何がしたいをサポート
○ わざわざ調べなくても勝手に教えてくれる
➢ スマフォを取り出しての操作が不要
○ 手が濡れてても平気
○ ハンドルを握ってても平気
- 24.
- 25.
Copyright © 2014TOPGATE 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 © 2014TOPGATE Corporation. All Rights Reserved.
開発者登録
➢ Android Wear Developer Previewのための開発者登録
○ 登録手順
■ フォームから開発者情報を登録
■ メールが送られてくる
■ SDKをダウンロードする
- 27.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Android Wear Previewを入手する
➢ 手順
○ テスター登録をする
■ Sign Up Confirmationメールから登録ページヘ移動
○ Google Play から インストール
■ 手持ちのAndroid 端末にインストールする
- 28.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
エミュレータの作成
➢ イメージの取得
○ Android SDK Managerを起動
○ Android Wear ARM EABI v7a System Image をインストールする
- 29.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
エミュレータの作成
➢ Device
➢ CPU/ABI
➢ Skin
- 30.
- 31.
- 32.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Android Wearと接続する
➢ Android Wear Previewを通して実機とエミュレータを接続す
る
○ Android 4.3以上の端末が必要
$ adb -d forward tcp:5601 tcp:5601
- 33.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
➢ 手順
○ エミュレータを起動する
○ AndroidをPCに接続
○ Android Wear Previewを起動
Android Wearと連携する
接続されていない状
態
- 34.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
➢ 手順(続き)
➢ Androidとエミュレータを接続する方法
○ ターミナルから次のコマンドを実行
○ [Connect]ボタンをクリック
Android Wearと接続する
$ adb -d forward tcp:5601 tcp:5601
- 35.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
➢ 接続されたことを確認
○ [Connected]と表示されている
○ エミュレータのアイコンが “g” になっている
Android Wearと接続する
接続されている
状態
- 36.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Android Wearと連携する
➢ Android to Android Wear
○ AndroidのNotificationはそのまま表示される
- 37.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Android Wearと連携する
➢ Android Wear to Android
○ 表示されたNotificationを操作する
○ [Open]をクリックするとアプリが起動する
メッセージが
表示される
横へフリック
上へフリック
クリック!
- 38.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
1. AndroidでNotificationが表示される
2. Previewアプリが検知
3. Android Wearに通知
Notification通知の流れ(Preview)
Notification!
アプリ
GCM
現在地
- 39.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
➢ サンプルアプリ
○ ElizaChat
○ WearableNotificationsSample
○ RecipeAssistant
サンプルアプリを動かす
- 40.
Copyright © 2014TOPGATE 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 © 2014TOPGATE Corporation. All Rights Reserved.
サンプルアプリケーションの起動
➢ アプリ一覧から起動する
クリック
- 42.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
➢ シンプルなチャットアプリ
ElizaChat
音声入力の代わりに
キーボード入力
- 43.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
WearableNotificationsSample
➢ 様々なタイプのNotificationを表示する
- 44.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
WearableNotificationsSample
設定を変えて実行
- 45.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
WearableNotificationsSample
Example reply action
音声入力の代わりにキー
ボード入力
- 46.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
WearableNotificationsSample
Open
- 47.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
Recipe Assistant
料理のレシピと手順を表示
- 48.
- 49.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
実習
アプリケーションの説明
➢ アプリケーションの説明
○ ボタンをクリックするとNotificationが表示される
○ Android WearのOpenアイコンをタップすると画面が表示される
クリック
Notificationが表
示される
画面をスワイプ
タップ
- 50.
Copyright © 2014TOPGATE Corporation. All Rights Reserved.
実習
シンプルなNotification
➢ IDE
○ Android Studio V0.5.8
➢
➢ 手順
○ 1. ライブラリの追加
○ 2. Notificationから起動されるActivityを追加
○ 3. MainActivityにNotification表示処理を追加
- 51.
Copyright © 2014TOPGATE 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 © 2014TOPGATE Corporation. All Rights Reserved.
実習
➢ 2. Notificationから起動されるActivityを追加
○ Activity名:ViewEventActivity
○ レイアウト
アプリケーションの作成
- 53.
Copyright © 2014TOPGATE 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 © 2014TOPGATE Corporation. All Rights Reserved.
実習
Actionをカスタマイズ
Actionをカスタマイズして、アイコンを変更する
- 55.
Copyright © 2014TOPGATE 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 © 2014TOPGATE 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 © 2014TOPGATE 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.