atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing.　なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

Xamarinであんよよいようぇあーのエミュ起動したい

Android Xamarin

つい最近まで、Xamarin Evolveっていうカンファレンスがアトランタでやってるらしい。
で、伊勢さんが行ってるみたい！

クロスプラットフォーム開発最前線！Xamarin Evolve 2014現地リポート (フェンリル | デベロッパーズブログ)

Xamarin Android Playerは、既存のエミュとほぼ変わらないっぽいけど、解像度をぱぱっと変えれたり、軽かったり、早かったりするらしい。
個人的にはSketchがきになるところだけど、これUIにも反映されるのかなぁ。

で、アトランタに泊まってる伊勢さんのホテルに、Best Buyの通販で買えるようになったMoto 360を投げつけて、持って帰ってきてもらうことに！
わーい！伊勢さんありがとー！


デバイスがあるとコードが書きたくなるので、<-ここ重要
まだ手元にはないのだけど試してみることに。

ただ、Javaはよくしらないので、ここはやっぱりXamarinで。
できるらしいとは聞いたので、とりあえずまずはXamarin関係ないけど、エミュレータまで。

現在の環境はXamarin.Androidをインストールしただけ。
terminalからadbもつつけないような環境。

１．まずはSDKのインストールから。
Android SDK Managerから、Android 4.4Wを適当にインストール
f:id:c-mitsuba:20141012044406p:plain

２．これだけでエミュレータが作れるようになるらしい。
AVDのDevice DefinitionsにAndroid Wear RoundとSquareが確認できます。
Wearの方はまるでMoto 360に最適化されたような設定（（
f:id:c-mitsuba:20141012044510p:plain

ここから、Create AVDをクリックすると、エミュレータ作るダイアログがでてきます。
ちなみに320*320ってなってるけど、実際は画面下に照光センサーがあるので、見切れる感じになるはず。
f:id:c-mitsuba:20141012044516p:plain
こんなかんじにMoto 360のスペックに合わせて設定してOK
f:id:c-mitsuba:20141012044529p:plain
AVDにデバイスができてるのでStart!
f:id:c-mitsuba:20141012045031p:plain
ただの丸いあんよよいよと、初めてのご挨拶
f:id:c-mitsuba:20141012045040p:plain
ちょっとまってね！
f:id:c-mitsuba:20141012050945p:plain
だれとや！！ってツッコミたくなるけど、Pairingできたらしい。
ちなみにペアリングするのは初回エミュレータ起動だけで、もう一回、セットアップの説明とか見たければ、エミュレータ起動時にwipe user dataするとよいです。
f:id:c-mitsuba:20141012050957p:plain
ここまで、来ればクリックなり、ドラッグなりして操作できます。
Moto 360はリューズが戻るボタンになってるっぽいですが、エミュレータで戻るには、画面上部にマウス持ってくと青くなる領域がボタンになってるので、それつつけばよいです。
f:id:c-mitsuba:20141012051047p:plain

さて、xamarinからどうやって開発すればいいんだろうなーformsつかえるんかなー

Xamarinであんよよいようぇあーのサンプルプロジェクトを実行したい

Xamarin Android

ただ単にXamarinを入れただけではAndroid Wearのプロジェクトはありません。
f:id:c-mitsuba:20141012055019p:plain

で、どうするのかというと、Xamarin Componentにこんなんあるみたい。
Android Wear Developer Preview / Components / Xamarin

早速ダウンロードしてみる。
解凍してみるとなんやかんやはいってる。
f:id:c-mitsuba:20141012055329p:plain

とりあえずMultiPageSample.slnをXamarin Studioで開いて、びるど！
すると、ビルドには成功するけど、デプロイに失敗します。
f:id:c-mitsuba:20141012055427p:plain

Deployment failed. Minimum Android version not supported by device.
デバイスが、最新のAndroid SDKには未対応だよ的なかんじらしい。
なので、エミュレータに合わせて、APIレベルを設定します。
API 20で作ってるので、
f:id:c-mitsuba:20141012044516p:plain

プロジェクトを右クリックして、「オプション」。
「ビルド」の「Android Application」をクリック。
「Minimum Android version」をOverride - Android 4.4.87(API Level 20)に合わせます。
こんなかんじ。
f:id:c-mitsuba:20141012055905p:plain

もっかいびるど！
すると、こんな画面がでます。
左から右にフリックすると、ページがめくれます。
f:id:c-mitsuba:20141012060142p:plain

ボタンを押して、戻ると、ホームにXamarinのゴリラが！（いやサルかもしらへんけど、よくしらへん（
どうやらこれが通知っぽい。
f:id:c-mitsuba:20141012055927p:plain
左から右にフリックすると無視できて、右から左にフリックすると、Openになります。

とりあえずうごいた！
けど、これどうなってるんやろなー。

Xamarinであんよよいようぇあーの開発しててもデザインビューが使いたい

Xamarin Android

とりあえず前回のソースを読もうと思って、まずはMain.axmlを開くとこうなりました。
f:id:c-mitsuba:20141012065058p:plain
この悲しみが漂う感じがとても残念ですね。

いろいろ調べていくと、どうやら現時点の最新のAndroid SDK r23.05とXamarinの相性が悪いらしい。
Android SDK r23.02ならうまくいきました。

で、SDKはここに転がってます。
http://dl-ssl.google.com/android/repository/tools_r23.0.2-macosx.zip
http://dl-ssl.google.com/android/repository/tools_r23.0.2-windows.zip

xamarinインストール時のAndroid SDKのデフォルトパスはこちら。
Mac:
/Users/[UserName]/Library/Developer/Xamarin/android-sdk-macosx/tools
windows:
C:\Users{USER NAME}\AppData\Local\Android\android-sdk\tools

ちなみに、MacのLiberaryは不可視フォルダになっています。
MacのFinderでLibraryが見えない人は、Terminalで

defaults write com.apple.finder AppleShowAllFiles TRUE
killall Finder

とかするとでてきます。

で、落としてきたzip解凍するとtoolsフォルダが出てくるので、さっきのパスにあるtoolsと差し替えるとー
でたーー！！！！
ちょっとうれしい。
f:id:c-mitsuba:20141012070850p:plain

でもって、デザインビューで端末やらなんやらをmoto 360用にあわせるとー。。。
f:id:c-mitsuba:20141012070937p:plain

うん、まぁ四角いけど、ないより100倍いいね、うん。
とりあえずうざいエラーダイアログがでなくなって快適。

Xamarinであんよよいようぇあーのプロジェクトを作りたい

Android Xamarin

ここまででなんとかようやく開発環境が整えられた感じですね。

とりあえずなんか作ってみたくなったので、Android Wear向けのプロジェクトを作成してみましょう。

プロジェクトはAndroid Applicationを選択します。
f:id:c-mitsuba:20141012091508p:plain

プロジェクトができたら、[Components]を右クリックして[Get More Components..]をクリックします。
で、前に紹介したコンポーネントを[wear]とかで検索して探してきます。
f:id:c-mitsuba:20141012091513p:plain
右のボタンをクリックしてインストールしてー
f:id:c-mitsuba:20141012091731p:plain

とりあえずビルドするとーうごきました！
f:id:c-mitsuba:20141012091831p:plain

あとは普通にaxmlとかバシバシ書いていく感じですかね。

ちなみにXamarin.Formsでも試してみたところ、ビルドもデプロイも通りますが、実行時に
MainActivity.csのbase.OnCreate(bundle)で

You cannot use indeterminate progress on a watch.

って怒られてException吐いて落ちます。
調べるとTitaniumとかXamarinでもそういう報告が上がっているみたいで、まだまだ未対応なかんじ。

時計もXamlで組めるようになるといいなー

Xamarinであんよよいようぇあーのデザインをしやすくする

Android Xamarin

デフォルトのデザインビューは四角くって、エミュで実行するまで、どんなかんじかよくわかりません。
なので、こんなふうにしました。
f:id:c-mitsuba:20141012163833p:plain
左がエミュレータ、真ん中でデザインビュー、右がmask用の画像。
とりあえず、moto 360では画面が丸くクリップされるの、マスク用の透過pngを作って、それっぽくみえるようにします。
で、デザインビュー右上にあるThemeを[Theme.DeviceDefault.Dialog.NoFrame]にします。

すると、エミュレータとそっくりなデザインビューのできあがり！
axmlはこんなかんじ。不可視プロパティとかないんかなぁ。

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#92D8AB">
    <Button
        android:id="@+id/myButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <ImageView
        android:layout_width="320px"
        android:layout_height="320px"
        android:id="@+id/mask"
        android:src="@drawable/mask" />
</AbsoluteLayout>

mask.pngは320px*320pxで、円を繰り抜いた画像です。
管理はしないけど、一応おいておこう。
Dropbox - mask.png

ひとまずこれで、まともにデザインできるようになりました。