Top Banner
サンプルアプリから学ぶ Android Wear
84

サンプルアプリから学ぶAndroid Wear

Jul 20, 2015

Download

Technology

M Inomata
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: サンプルアプリから学ぶAndroid Wear

サンプルアプリから学ぶ Android Wear

Page 2: サンプルアプリから学ぶAndroid Wear

自己紹介株式会社 tech vein 代表 猪俣 充央

Webシステム開発、Android/iOSアプリ開発などなどやっています。

twitter: @ino2222

Page 3: サンプルアプリから学ぶAndroid Wear

アジェンダ

• はじめに

• サンプル紹介(17個)

• Android Wear サンプルを動かすための手順

• まとめ

Page 4: サンプルアプリから学ぶAndroid Wear

はじめに

• このプレゼンは Android Wear 初心者向きです

• Android Wear 開発未経験者、Wearサンプルをほとんど触ったことがない方が対象になります。

Page 5: サンプルアプリから学ぶAndroid Wear

サンプル紹介(17個)

Page 6: サンプルアプリから学ぶAndroid Wear

1. AgendaData

Page 7: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• MobileからWearへ、カレンダーにある次の予定の通知を送るアプリ。

Page 8: サンプルアプリから学ぶAndroid Wear
Page 9: サンプルアプリから学ぶAndroid Wear

• カレンダーの直近イベントをMobileで取ってきて、Wearに通知する。

• MobileからWearの通知を削除できる。

• wearでも通知を削除できる。

Page 10: サンプルアプリから学ぶAndroid Wear

2. DataLayer

Page 11: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• Mobileで写真を撮ってWearに送るアプリ。

Page 12: サンプルアプリから学ぶAndroid Wear
Page 13: サンプルアプリから学ぶAndroid Wear

• Mobileで写真を撮ってWearに送る。

• 通信中はMobile、Wear両方で通信ログが流れる。

• 撮った写真(Bitmap)をAssetに変換して、DataApiでDataMapとして送信している。

• 大きなサイズの画像データを送るとずっと送信し続けて止まらないのでちょっと焦る。

Page 14: サンプルアプリから学ぶAndroid Wear

3. DelayedConfirmation

Page 15: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• Wearの通知からの操作でタイマーを起動して一定時間後にMobileに結果を表示するアプリ。

Page 16: サンプルアプリから学ぶAndroid Wear
Page 17: サンプルアプリから学ぶAndroid Wear
Page 18: サンプルアプリから学ぶAndroid Wear

• MobileからWearのアプリを起動する。

• Wearアプリからスタートボタンをおすと5秒数え、数え終わったらMobile側にToast通知して、自分(Wear)にもnotification表示する。

Page 19: サンプルアプリから学ぶAndroid Wear

4. ElizaChat

Page 20: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile のみ

• Wearを使ってElizaさんとチャットするアプリ。

Page 21: サンプルアプリから学ぶAndroid Wear
Page 22: サンプルアプリから学ぶAndroid Wear
Page 23: サンプルアプリから学ぶAndroid Wear

• 人工無能みたいなElizaさんとWearから音声チャットできるアプリ。

• Mobileからアプリ起動するとWearにnotificationを送って、wearからはnotificationから音声入力で返事をする。そうするとまた母艦から返事がwearに来て…の繰り返し。

• Mobileがチャットログ表示画面、兼、Elizaさん役。

• Elizaさんは決まった質問しか返してくれない。

• Wear側にアプリを入れなくてもここまでできる、というサンプル。

Page 24: サンプルアプリから学ぶAndroid Wear

5. EmbeddedApp

Page 25: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• wearアプリをリリースするときのサンプル。

Page 26: サンプルアプリから学ぶAndroid Wear
Page 27: サンプルアプリから学ぶAndroid Wear

• Mobile アプリを入れたら、繋がってるWearにも自動でアプリインストールさせるサンプル(だと思う)。

• ちゃんとソース追ってないです。ごめんなさい(^_^;)

Page 28: サンプルアプリから学ぶAndroid Wear

6. FindMyPhone

Page 29: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• WearからMobileを探せる超便利アプリ。

Page 30: サンプルアプリから学ぶAndroid Wear
Page 31: サンプルアプリから学ぶAndroid Wear

• wearからアプリを起動して、Mobileのアラームを鳴らしてMobile端末がどこにあるか知らせる。

• Mobileをどこかに忘れた時(BLE通信が切れた時)にWearが振動して知らせてくれる。

• Mobileに入れたサービスで音を鳴らしている。

• いきなり鳴ると結構びっくりするので、ドッキリにもどうぞ。

Page 32: サンプルアプリから学ぶAndroid Wear

7. Flashlight

Page 33: サンプルアプリから学ぶAndroid Wear

• インストール先 … Wear だけ

• Wearをミニ懐中電灯にするアプリ。

Page 34: サンプルアプリから学ぶAndroid Wear
Page 35: サンプルアプリから学ぶAndroid Wear

• ライト代わりに白い画面を表示する。

• ページ送り(スワイプ)するとチカチカする画面になる。

• Wearのカスタムビュー実装について学べる。

Page 36: サンプルアプリから学ぶAndroid Wear

8. Geofencing

Page 37: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• Geofencingで特定の場所に近づいたらWearに通知表示するアプリ。

Page 38: サンプルアプリから学ぶAndroid Wear
Page 39: サンプルアプリから学ぶAndroid Wear

• Google Play Services の Geofencing を使ってWearにNotification表示する。

• サンプルソースの定数に登録されている位置情報がGoogle 本社だったりGoogle I/O会場近辺だったりするので、そのままだとアメリカに行かないと動かない。

• Application 側の Constants.java に書いてある緯度経度を触ってうろうろするとよい。

Page 40: サンプルアプリから学ぶAndroid Wear

9. GridViewPager

Page 41: サンプルアプリから学ぶAndroid Wear

• インストール先 … Wear だけ

• グリッド構造になった画面(ページ)を縦横に切り替えて表示するサンプル。

Page 42: サンプルアプリから学ぶAndroid Wear
Page 43: サンプルアプリから学ぶAndroid Wear

• GridViewPagerクラスのサンプル実装

• 上下、左右でグリッド構造のページ(カード)切り替えができたり、背景が切り替わったりする。

• 左端のカードで左に移動するとアプリ終了。

• GridViewPagerの使い方を学べる。

Page 44: サンプルアプリから学ぶAndroid Wear

10. JunpingJack

Page 45: サンプルアプリから学ぶAndroid Wear

• インストール先 … Wear だけ

• Wearでジャンプを計測するアプリ。

Page 46: サンプルアプリから学ぶAndroid Wear
Page 47: サンプルアプリから学ぶAndroid Wear

• ジャンプするとカウントされる。

• めっちゃジャンプしないとカウントしてくれない。

• Wearの重力センサー(TYPE_GRAVITY)を使って検出している。

• 端末のX軸(端末の左右の軸なので腕と平行な方向)しか見ておらず、正負ともにしきい値をこえないとカウントしない激しい仕様。

• 表示されている絵のように腕を振り上げてジャンプするのを想定しているみたい。

Page 48: サンプルアプリから学ぶAndroid Wear

11. Notifications

Page 49: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• Mobile側、wear側両方の通知表示サンプルを見られる開発者向け超便利アプリ。

Page 50: サンプルアプリから学ぶAndroid Wear
Page 51: サンプルアプリから学ぶAndroid Wear
Page 52: サンプルアプリから学ぶAndroid Wear

• Mobile側、Wear側両方の通知表示サンプルを見ることができる開発者向けの便利アプリ。

• Notificationでどういう表示ができるかがわかる。

• Wear開発しなくてもAndroid開発するなら入れると便利そう。

Page 53: サンプルアプリから学ぶAndroid Wear

12. Quiz

Page 54: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• Wearの操作で答えるクイズゲーム。

Page 55: サンプルアプリから学ぶAndroid Wear
Page 56: サンプルアプリから学ぶAndroid Wear
Page 57: サンプルアプリから学ぶAndroid Wear
Page 58: サンプルアプリから学ぶAndroid Wear
Page 59: サンプルアプリから学ぶAndroid Wear

• Mobile側が出題者になってクイズを用意する。

• Wear側は回答者で、回答するとMobileに正解かが順次表示されていく。

• クイズは Application/src/main/assets/Quiz.json にあらかじめ書いておいたものが Read quiz from fileボタンで読み込まれる。

Page 60: サンプルアプリから学ぶAndroid Wear

13. RecipeAssistant

Page 61: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile だけ

• Mobileで見ている料理のレシピをWearに送って表示する料理支援アプリ。

Page 62: サンプルアプリから学ぶAndroid Wear
Page 63: サンプルアプリから学ぶAndroid Wear
Page 64: サンプルアプリから学ぶAndroid Wear

• Mobileで見ている料理のレシピをNotificationでWearに通知する。

• 料理のレシピデータはMobileのApplication/src/main/assets内に格納している。

• Wear側に何もインストールしなくてもページャ表示できるよ、っていうサンプル。

• 肉テロアプリ。

Page 65: サンプルアプリから学ぶAndroid Wear

14. SkeletonWearableApp

Page 66: サンプルアプリから学ぶAndroid Wear

• インストール先 … Wear だけ

• Mobileなし、Wearだけで色々するサンプル

Page 67: サンプルアプリから学ぶAndroid Wear
Page 68: サンプルアプリから学ぶAndroid Wear

• 色々(↓)なことがWearだけでできるよっていうサンプル。

• Show Notification

• wearアプリ上からの通知表示、通知からのActivity起動、グリッドビュー表示

• Start Timer(5 sec)

• 画面下部のタイマーがアニメーションする機能。

Page 69: サンプルアプリから学ぶAndroid Wear

15. SynchronizedNotifications

Page 70: サンプルアプリから学ぶAndroid Wear

• インストール先 … Mobile、Wear 両方

• Notification表示先制御のサンプル。

Page 71: サンプルアプリから学ぶAndroid Wear
Page 72: サンプルアプリから学ぶAndroid Wear

• 通知表示先制御のサンプルアプリ。

• mobile単体への通知、wear単体への通知、両方別々の内容で通知の3パターンを試せる。

• ソースを見たら両方通知はmobile単体通知+wear単体通知を順番に実行しているだけ。どうなの。

Page 73: サンプルアプリから学ぶAndroid Wear

16. Timer

Page 74: サンプルアプリから学ぶAndroid Wear

• インストール先 … Wear だけ

• Intent Filterで標準タイマーを置き換えるサンプル。

Page 75: サンプルアプリから学ぶAndroid Wear
Page 76: サンプルアプリから学ぶAndroid Wear

• ランチャーはなく、インテントフィルタ―だけしか提供されていない。

• com.android.example.clockwork.timer.TIMER

• android.intent.action.SET_TIMER

• Wearの標準タイマーを起動しようとするとTimerSampleがでてくるようになる。

• アプリとしては使いにくい…

Page 77: サンプルアプリから学ぶAndroid Wear

17. WatchViewStab

Page 78: サンプルアプリから学ぶAndroid Wear

• インストール先 … Wear だけ

• 画面の形によってアプリの動作を変えるサンプル。

Page 79: サンプルアプリから学ぶAndroid Wear
Page 80: サンプルアプリから学ぶAndroid Wear

• android.support.wearable.view.WatchViewStubクラスの利用サンプル。

• 丸い画面か四角い画面かで表示を変える。

• 画面タップしたら画面の形に合わせたアニメーションをする。

• 画面長押ししたら終了ボタンのオーバーレイ(android.support.wearable.view.DismissOverlayView)を出す。

• 新しくWearプロジェクトを作る時にテンプレートでBlank Wear Activityを選ぶとWatchViewStab対応のレイアウトが作成される。

• 画面の形状によって見た目だけでなく処理も分けたい時はこのサンプルを参考にするといいかも。

Page 81: サンプルアプリから学ぶAndroid Wear

Android Wear サンプルを 動かすための手順

Page 82: サンプルアプリから学ぶAndroid Wear

• Android SDK Manager で必要なパッケージをインストールする。 • Android 4.4W(API20) > SDK Platform • Android 4.4W(API20) > Samples for SDK

• Android Studio からImport Project で sdk/samples/android-20/wearable/ 以下のフォルダを開く。

• ターゲット指定でApplication(スマホ向け)やWear(Wear端末向け)を選んで、それぞれ実行する。

• これだけです。簡単ですね。

Page 83: サンプルアプリから学ぶAndroid Wear

まとめ• おすすめサンプルはFindMyPhoneとNotificationsの2つ。

• サンプルに外部への通信機能を入れるとか、少し手を加えるだけでも面白いアプリが作れるかも?

• Wear 開発のきっかけとして、サンプルを動かしてみよう。

Page 84: サンプルアプリから学ぶAndroid Wear

ご静聴ありがとうございました。