android wear


Agenda

➢ What’s Android Wear➢ Android Wearでできること

➢ Googleが描くコンセプト

➢ アプリケーション開発に必要な環境

➢ プロジェクトを作成する

➢ Android Ware Demo


What’s Android Wear ?？


服やカバン、腕時計ののように身につけて(wear)利用するコンピュータ

ウェアラブルとは


What’s Android Wear

➢ ウェアラブル端末用のAndroidプラットフォーム○ http://developer.android.com/wear/index.html

➢ 主に腕時計として使われている

LG G WatchMoto 360

http://developer.android.com/wear/index.html

http://developer.android.com/wear/index.html


➢ 四角と丸

エミュレータも用意されている


Android Wearでできること


Android Wearでできること

➢ ２つのUIモデル○ Context Stream○ Cue Card


Content Stream

➢ Notificationを表示○ Receive Voice Reply○ アプリケーションから○ ジオフェンスと連携○ センサーから


Cue Card

➢ Cue Card○ 「OK Google」または ”g” アイコンをタップ○ アクション一覧が表示される

OK Google


Android Wear SDKでできること

➢ Build Custom UI➢ Send Data➢ Control Sensors➢ Voice Action


Build Custom UI

➢ Notificationを重ねる➢ 背景画像を設定➢ 複数ページ対応


Send Data

➢ メッセージを送る


Control Sensors

➢ センサー入力○ センサデータを収集し、Androidのウェアラブル上にリアルタイムに表

示します


Voice Action

➢ 音声入力に対応○ デバイスをタッチしなくても入力ができる


Googleが描くコンセプト


Google Now を中心に

➢ Information that moves with you


電車の中で

4 stopsto: Jacson St.9 miniites to destination


タクシーで

Mega TaxiPickup 149 Linden Ave,Long Beach CA908024 minutes away


ビーチで

Warning !

Jellyfish reported in areaStay out of the water

Nearby BeachesZuma beach 3-5 ftCounty Line Beach 2-4 ftEl Porto Beach 1-3 ft


空港で

LAX→JFKDeparts 12:55pmTerminal 3, Gate 72Flight 867


試合結果を聞いてみたり

what's theSyracuse score ?

Syracuse 28Virginia 27


Google Wearは教えてくれる

➢ 今ここで何がしたいをサポート○ わざわざ調べなくても勝手に教えてくれる

➢ スマフォを取り出しての操作が不要○ 手が濡れてても平気○ ハンドルを握ってても平気


アプリケーション開

発に必要な環境


開発環境

➢ デバイス○ 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○ エミュレータ


開発者登録

➢ Android Wear Developer Previewのための開発者登録○ 登録手順

■ フォームから開発者情報を登録■ メールが送られてくる■ SDKをダウンロードする


Android Wear Previewを入手する

➢ 手順○ テスター登録をする

■ Sign Up Confirmationメールから登録ページヘ移動

○ Google Play からインストール■ 手持ちのAndroid 端末にインストールする


エミュレータの作成

➢ イメージの取得○ Android SDK Managerを起動○ Android Wear ARM EABI v7a System Image をインストールする


エミュレータの作成

➢ Device➢ CPU/ABI➢ Skin


➢ 選択して[Start...]

起動する


起動完了！


Android Wearと接続する

➢ Android Wear Previewを通して実機とエミュレータを接続する○ Android 4.3以上の端末が必要

$ adb -d forward tcp:5601 tcp:5601


➢ 手順○ エミュレータを起動する○ AndroidをPCに接続○ Android Wear Previewを起動

Android Wearと連携する

接続されていない状態


➢ 手順（続き）➢ Androidとエミュレータを接続する方法

○ ターミナルから次のコマンドを実行

○ [Connect]ボタンをクリック


$ adb -d forward tcp:5601 tcp:5601


➢ 接続されたことを確認○ [Connected]と表示されている○ エミュレータのアイコンが “g” になっている


接続されている状態



➢ Android to Android Wear○ AndroidのNotificationはそのまま表示される



➢ Android Wear to Android○ 表示されたNotificationを操作する○ [Open]をクリックするとアプリが起動する

メッセージが表示される

　横へフリック

上へフリック

　クリック！


1. AndroidでNotificationが表示される2. Previewアプリが検知3. Android Wearに通知

Notification通知の流れ（Preview）

Notification！

アプリ

GCM

現在地


➢ サンプルアプリ○ ElizaChat○ WearableNotificationsSample○ RecipeAssistant

サンプルアプリを動かす


➢ サンプルをビルドする○ ターミナルを起動○ アプリケーションプロジェクトディレクトリまで移動する

■ ここでは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.apk6483 KB/s (726078 bytes in 0.109s) pkg: /data/local/tmp/WearableNotificationsSample-debug-unaligned.apkSuccess


サンプルアプリケーションの起動

➢ アプリ一覧から起動する

クリック


➢ シンプルなチャットアプリ

ElizaChat

音声入力の代わりにキーボード入力


WearableNotificationsSample

➢ 様々なタイプのNotificationを表示する



設定を変えて実行



Example reply action

音声入力の代わりにキーボード入力



Open


Recipe Assistant

料理のレシピと手順を表示


プロジェクトを作成する


実習アプリケーションの説明

➢ アプリケーションの説明○ ボタンをクリックするとNotificationが表示される○ Android WearのOpenアイコンをタップすると画面が表示される

クリック

Notificationが表示される

画面をスワイプ

タップ


実習シンプルなNotification

➢ IDE○ Android Studio V0.5.8

➢➢ 手順

○ 1. ライブラリの追加○ 2. Notificationから起動されるActivityを追加○ 3. MainActivityにNotification表示処理を追加


実習

➢ 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')

}


実習

➢ 2. Notificationから起動されるActivityを追加○ Activity名：ViewEventActivity○ レイアウト

アプリケーションの作成


実習アプリケーションの作成

➢ 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());


実習Actionをカスタマイズ

Actionをカスタマイズして、アイコンを変更する


実習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);


実習Wearの新機能を使う

Iconを非表示

// Create a WearablesNotification.Builder to add special functionality for wearablesNotification notification = new WearableNotifications.Builder(notificationBuilder) .setHintHideIcon(true) .build();


notificationManager.notify(notificationId, notification);


実習Wearの新機能を使う

Reply Input

// Create the remote inputRemoteInput remoteInput = new RemoteInput.Builder("reply") .setLabel("Reply") .build();// Create wearable notification and add remote inputNotification replyNotification = new WearableNotifications.Builder(replyNotificationBuilder) .addRemoteInputForContentIntent(remoteInput) .build();


notificationManager.notify(1, replyNotification);


Android Wear Demo

android wear

Engineering