Windows の Android Studio で Wear アプリを動かす

こんにちは。エクセルソフトの田淵です。

Xamarin でも Wear アプリの開発が出来るので試してみようと思い、まずはその前段階として、Android Studio で動作確認するまでをメモとして残します。


# Android Studio と Wear のエミュレーター環境を用意

詳細は割愛しますが、

- [これから Xamarin を始めたい方向けの凄く丁寧なインストールガイド (Windows/Android 編) - Xamarin 日本語情報](http://ytabuchi.hatenablog.com/entry/2014/10/02/201817)
- [15分ではじめるAndroid Wear開発 - 実機を使った開発環境の作り方 - Qiita](http://qiita.com/tnj/items/83c41872125f01588068)

などを参照してください。その際の注意点としては、


- [Android L Developer Preview & Android Wear Support | Xamarin Blog](http://blog.xamarin.com/android-l-developer-preview-android-wear-support/) にあるように Android 5.0 (Lollipop/API 21), Android 4.4W (Wear/API 20) の開発には JDK 7 が必要ですので、6 ではなく 7 に移行しておき、%JAVA_HOME% を変更しておきます。
- [15分ではじめるAndroid Wear開発 - 実機を使った開発環境の作り方 - Qiita](http://qiita.com/tnj/items/83c41872125f01588068) にはリポジトリの追加についての記述がありますが、正式版が出ている 2014/10/31 現在はレポジトリの追加は不要です。
- Google  Repository は必須です。これがないと、AS が Wear のライブラリを自動で引っ張ってくるところで "Error:Failed to find: com.google.android.gms:play-services-wearable:+" などのエラーを吐きます。
<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141030/20141030125940.png" alt="f:id:ytabuchi:20141030125940p:plain" title="f:id:ytabuchi:20141030125940p:plain" class="hatena-fotolife" itemprop="image"></span>
- x86 の Android Wear エミュレーターの AVD を作成する時 (Round を使用する場合) は、Android Wear Round を選択して Create Device をクリックして AVD を作成しますが、  
<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141030/20141030130342.png" alt="f:id:ytabuchi:20141030130342p:plain" title="f:id:ytabuchi:20141030130342p:plain" class="hatena-fotolife" itemprop="image"></span>  
その際に Device が `Android Wear Round`、Target が `Android 4.4W`、CPU が `x86`、Skin が `AndroidWearRound` になっていて、
<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141030/20141030130555.png" alt="f:id:ytabuchi:20141030130555p:plain" title="f:id:ytabuchi:20141030130555p:plain" class="hatena-fotolife" itemprop="image"></span>  
**`Use Host GPU` にチェックが入っていないこと** を確認してください。チェックが入っていると、Round のスキンなのに画面四角い… という寂しい状態になってしまうようです。( [@simonTokyo](https://twitter.com/simonTokyo/status/527473331574800385) さんありがとうございます。)  
<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141030/20141030131025.png" alt="f:id:ytabuchi:20141030131025p:plain" title="f:id:ytabuchi:20141030131025p:plain" class="hatena-fotolife" itemprop="image" width="50%"></span>

まずはエミュレーターのみでの動作が確認できました。

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141030/20141030131130.png" alt="f:id:ytabuchi:20141030131130p:plain" title="f:id:ytabuchi:20141030131130p:plain" class="hatena-fotolife" itemprop="image"></span>


# Android Wear エミュレーターと Android 実機デバイスを接続する

次は実機と接続してみましょう。  
実機側にアプリが必要みたいなので、以下からインストールします。  
[Android Wear - Google Play の Android アプリ](https://play.google.com/store/apps/details?id=com.google.android.wearable.app&hl=ja)

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031110841.png" alt="f:id:ytabuchi:20141031110841p:plain" title="f:id:ytabuchi:20141031110841p:plain" class="hatena-fotolife" itemprop="image"></span>


実機の Android Wear アプリとエミュレーターを接続する前準備として [Android Wearエミュレータと実機をUSBデバッグ接続する | Smartphone-Zine](http://smartphone-zine.com/mobile/i-want-to-debug-usb-connection-and-an-actual-android-wear-emulator.html) の情報そのままに `adb -d forward tcp:5601 tcp:5601` を叩いておきます。(adb はしょっちゅう使いますので <SDKインストールフォルダ>\platform-tools に PATH を通しておきましょう)

Android Wear アプリを起動して、端末を選択の画面まで進めて右上の設定アイコンから `エミュレーターをペア設定` をタップします。

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031111308.png" alt="f:id:ytabuchi:20141031111308p:plain" title="f:id:ytabuchi:20141031111308p:plain" class="hatena-fotolife" itemprop="image"></span>
<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031111324.png" alt="f:id:ytabuchi:20141031111324p:plain" title="f:id:ytabuchi:20141031111324p:plain" class="hatena-fotolife" itemprop="image"></span>


`時計の通知をON` をタップして Android Wear にチェックすると、有効にするか聞かれたりしますので、OK します。

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031124158.png" alt="f:id:ytabuchi:20141031124158p:plain" title="f:id:ytabuchi:20141031124158p:plain" class="hatena-fotolife" itemprop="image"></span>
<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031131058.png" alt="f:id:ytabuchi:20141031131058p:plain" title="f:id:ytabuchi:20141031131058p:plain" class="hatena-fotolife" itemprop="image"></span>




これでエミュレーターと接続されているはずですので、試しに右上の Action overflow から デモカード を起動して `通知 (時間別)` をタップしてみましょう。

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031124210.png" alt="f:id:ytabuchi:20141031124210p:plain" title="f:id:ytabuchi:20141031124210p:plain" class="hatena-fotolife" itemprop="image"></span>
<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031113159.png" alt="f:id:ytabuchi:20141031113159p:plain" title="f:id:ytabuchi:20141031113159p:plain" class="hatena-fotolife" itemprop="image"></span>

出ましたー♪

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031113258.png" alt="f:id:ytabuchi:20141031113258p:plain" title="f:id:ytabuchi:20141031113258p:plain" class="hatena-fotolife" itemprop="image" width="50%"></span>
<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031113420.png" alt="f:id:ytabuchi:20141031113420p:plain" title="f:id:ytabuchi:20141031113420p:plain" class="hatena-fotolife" itemprop="image" width="50%"></span>

Wear で右にスワイプすると実機でその内容を表示できます。これはデモカードなので実機では Google Now が表示されて終わりますが、Gmail とか受信すると普通に Wear エミュレーターに表示されてアーカイブとか返信とか出来ますので面白いです。

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031114729.png" alt="f:id:ytabuchi:20141031114729p:plain" title="f:id:ytabuchi:20141031114729p:plain" class="hatena-fotolife" itemprop="image"></span>


**うまくいかないなぁという場合は、実機の USB ケーブルを一度抜いて再接続したからかもしれません。再接続した際は、都度 `adb -d forward tcp:5601 tcp:5601` が必要なので忘れないようにしましょう**


# サンプルの Wear アプリを実行してみる

さて、やっと笑 本題の Wear アプリを作ってみましょう。

通知は普通に行くようなので、試しに <android-studioインストールフォルダ>\sdk\samples\android-19\ui\BasicNotifications を適当な場所にコピーして Android Studio に Import して実機で実行してみましょう。

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031120646.png" alt="f:id:ytabuchi:20141031120646p:plain" title="f:id:ytabuchi:20141031120646p:plain" class="hatena-fotolife" itemprop="image"></span>

こんな感じで通知が Wear に表示されますね。

[15分ではじめるAndroid Wear開発 - 実機を使った開発環境の作り方 - Qiita](http://qiita.com/tnj/items/83c41872125f01588068) では <android-studioインストールフォルダ>\sdk\samples\android-20\wearable\FindMyPhone を動かしているので、それに倣ってやってみましょう。実機のアラームが鳴るはずです。

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031131506.png" alt="f:id:ytabuchi:20141031131506p:plain" title="f:id:ytabuchi:20141031131506p:plain" class="hatena-fotolife" itemprop="image" width="50%"></span>

上手く行ったら続いて <android-studioインストールフォルダ>\sdk\samples\android-20\wearable\SynchronizedNotifications を動かしてみましょう。こんな感じです。

<span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20141031/20141031125800.png" alt="f:id:ytabuchi:20141031125800p:plain" title="f:id:ytabuchi:20141031125800p:plain" class="hatena-fotolife" itemprop="image"></span>


次の回はこれを Xamarin で動かしてみたいと思います。といっても、既に Xamarin がこれらのサンプルを移植したものを [Samples | Xamarin](http://developer.xamarin.com/samples/android/Android%20Wear/) で公開していますので、興味のある方は是非試してみてください。

Wear 面白そうですね！色々な可能性を感じます。

以上です。