Quantcast
Channel: かずきのBlog@hatena
Viewing all articles
Browse latest Browse all 1387

Xamarin + Visual Studio Mobile Centerをやってみよう

$
0
0

Visual Studio Mobile Centerは、モバイルアプリを開発する際に必要になる以下の機能を提供してくれる便利なやつです。

  • リポジトリ(GitHub, VSTS, Bitbucket)と連携しての自動ビルド
  • Xamarin.UITestなどのテストコードをプールされた様々な実機上で実行
  • アプリのテスト配布
  • クラウド上のデータストア
  • SNSやAzure ADと連携した認証機能
  • テレメトリ収集
  • クラッシュレポート

1つ1つ見て行こうと思います。

アプリの作成

まず、機能を使うためにMobile Center上でアプリを作らないといけません。Mobile Centerの画面の右上にアプリを作るためのボタンがあるので、Add New Appします。

f:id:okazuki:20170408163559p:plain

そうすると、アプリの情報を入れる画面が出てきます。

f:id:okazuki:20170408163820p:plain

名前などの必要な情報を入れて画面下部のボタンを押すだけです。 今回は、AndroidでXamarinを選択して見ました。

これでアプリができました。

f:id:okazuki:20170408164016p:plain

リポジトリと連携しての自動ビルド

自動ビルドしたいですよね? ということで簡単にできます。アプリの画面の左側からBuildを選びます。 そうすると以下のように、どのサービスと繋ぐかが画面に出てきます。

f:id:okazuki:20170408164114p:plain

ここではGitHubを選んで適当なXamarinのプロジェクトの入ったリポジトリを選択します。

リポジトリを選ぶと、どのブランチに対してビルドをするのかというのを選択する画面になります。今回選んだリポジトリは、masterブランチしかないため以下のように1つだけの選択肢になってます。

f:id:okazuki:20170408164254p:plain

ブランチを選ぶと構成してね見たいな画面になるのでSet up branchを選びます。

f:id:okazuki:20170408164423p:plain

Build on pushで、ブランチにプッシュが来るたびにビルドが走るようになります。

Sign buildsで、署名されたパッケージを作ってくれます。Androidの場合は、Xamarin StudioやVisual Studioでアーカイブ作るときに作れるkeystoreを指定します。iOSの場合は、プロビジョニングプロファイル?と証明書?を指定するみたいです。

iOSに必要なフィアルとかは、ここら辺のサイトが参考になりそうです。

macdays.hatenablog.com

Run a launch test on a deviceでは、とりあえずアプリを実機に入れて起動するかどうかだけの確認をしてくれるみたいです。

Distribute buildsは、アプリをテスト配布するかどうかが選べます。これをOnにすると、後述する、配布先のグループみたいなものに登録されてる人たちにメールを飛ばすことができるようになります。

これで自動ビルドの構成は終わりです。簡単ですね。VSTS使うよりお手軽です。(その代わりカスタマイズできない)

f:id:okazuki:20170408170452p:plain

Test

Testは、実機テストしてくれます。

Testを選んでNew test runを選択すると、デバイスを選んだり言語を選んだりする画面が出てきます。

f:id:okazuki:20170408170637p:plain

f:id:okazuki:20170408170720p:plain

色々なテストフレームワークに対応しています。ここではXamarin.UITestを選んで見ました。

そうすると、nodejsでmobile-center-cliを入れて以下のコマンドを叩けという案内が出てきます。

f:id:okazuki:20170408171639p:plain

言われた通りに叩きます。叩く場所は、書いてある通り、Xamarinのプロジェクトのpackagesフォルダになります。

こんな感じのコマンドになります。

mobile-center test run uitest --app "kaota/HelloWorld" --devices XXXXXXXX --app-path com.companyname.DemoDemoApp.apk  --test-series "master" --locale "ja_JP" --build-dir ../DemoDemoApp.UITest/bin/Release

このコマンドを叩くとmobile-center loginしろと言われるので、言われた通りmobile-center loginをします。このとき要注意なのが、MSアカウントとかと紐付けたMobile Centerのアカウントだと認証失敗するというところです。これは、パスワードを忘れた時のフローを流してパスワード再発行すると上手くいくようになります。

詳細は、ここに書いてあります。(こんなのわからんわ!)

docs.microsoft.com

テストの実行結果は以下のように閲覧することができます。

f:id:okazuki:20170408173056p:plain

f:id:okazuki:20170408173111p:plain

Distribute

これは、ビルド成果物や自分でパッケージングしたapkとかをテスト配布するための機能を提供します。

グループを作って、そこにメアドで人を招待して新しいリリースを作ることでパッケージをダウンロードするためのURLの入ったメールが飛ぶという感じです。そんなに難しくないですね。

f:id:okazuki:20170408173512p:plain

Tables / Identity

これは、Microsoft Azure Mobile Appsを作ってくれて、それのEasy tableと認証機能を使えるようにしているだけです。詳しくはMobile Appsの説明を見て見てください。

Crashes / Analytics

これは、クラッシュレポートとテレメトリの収集なんかができるようになります。 導入方法は簡単で、Mobile Center作ったときに表示される手順に従ってNuGetからパッケージを入れて初期化コードを書いて、必要に応じてトレースログのコードを入れるだけです。

入れるパッケージは以下の2つになります。

  • Microsoft.Azure.Mobile.Analytics
  • Microsoft.Azure.Mobile.Crashes

そして、Xamarin.Formsの場合は、以下のような初期化コードをApp.xaml.csのOnStartメソッドの中に書きます。 キー情報が必要になりますが、これはMobile Centerでアプリを作った時の画面に表示されています。

protectedoverridevoid OnStart()
{
    base.OnStart();
    MobileCenter.Start("ios=iOS用にmobile centerでアプリを作って取得できるキー;" +
           "android=Androidようにmobile centerでアプリを作って取得できるキー",
        typeof(Analytics),
        typeof(Crashes));
}

あとは、以下のようにトレース取りたいところに以下のようなコードを差し込むだけです。

Analytics.TrackEvent(
    "ItemsPage appearing.",
    new Dictionary<string, string> { { "Category", "Trace" } });

これで、Analyticsのところで以下のようにトレースを確認できます。

f:id:okazuki:20170408174354p:plain

f:id:okazuki:20170408174408p:plain

また、アプリが例外でクラッシュしたときに自動的にレポートが上がるようになります。以下のように確認ができます。

f:id:okazuki:20170408174530p:plain

f:id:okazuki:20170408174544p:plain

まとめ

モバイルアプリを開発していると欲しくなるようなテレメトリ収集や、クラッシュレポートなんかもついてるし、自動ビルドや実機テスト、テスト配布なんかもできていい感じです。おまけにMobile Appsの機能も使えちゃう。 早く正式リリースされないかなぁ。(お値段いくらになるんだろう)


Viewing all articles
Browse latest Browse all 1387

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>