Skip to main content
モバイルアプリケーション開発体験ハンズオン
~実装からビルド・テスト・ベータテスト配布まで~
Android 編
日本マイクロソフト株式会社
Azure アプリケーション開発技術営業部
武田 正樹 Masaki.Takeda@microsoft.com
最終更新日: 2017 年 8 月 6 日
2
目次 (1)
 環境構築編 3
 Visual Studio Mobile Center のアカウント作成 4
 Android Emulator の準備 12
 Visual Studio Team Services のアカウント作成 17
 開発編 23
 Visual Studio と Git の接続 24
 Xamarin.Android アプリ作成 27
 プロファイリングの実行 45
 ソースコードのコミット 51
 自動ビルド・テスト・配布編 54
 Visual Studio Mobile Center でビルド 55
 UI テストの作成 63
 Visual Studio Mobile Center での UI テストの実行 76
 ユーザーへの配布 95
 参考資料 99
環境構築編
- Android Emulator の準備
- Visual Studio Mobile Center のアカウント作成
- Visual Studio Team Services のアカウント作成
4
1. ブラウザーで https://mobile.azure.com にアクセスし、[Connect with Microsoft] をクリックします。
Visual Studio Mobile Center のアカウント作成 (1)
1
5
1. マイクロソフトアカウントを入力します。
2. [次へ] をクリックします。
3. パスワードを入力します。
4. [サインイン] をクリックします。
Visual Studio Mobile Center のアカウント作成 (2)
1
3
4
2
6
Visual Studio Mobile Center にログインしました。今回のハンズオン用のアプリケーションの設定を行います。
1. 表示されている [username] の値を記録します。
2. [Choose username] をクリックします。
3. [Add new app] をクリックします。
Visual Studio Mobile Center のアカウント作成 (3)
32
1
7
1. [Name] には、[AndroidDemo] と入力します。
2. [OS] には、[Android] を選択します。
3. [Platform] には、[Xamarin] を選択します。
4. [Add new app] をクリックします。
Visual Studio Mobile Center のアカウント作成 (4)
1
2
3
4
8
下記の画面が表示されると、Visual Studio Mobile Center の設定は完了です。
次のスライドへ進んでください。
Visual Studio Mobile Center のアカウント作成 (5)
9
Visual Studio Mobile Center にログインしているユーザーパスワードを設定します。
1. [ユーザー] アイコンをクリックします。
2. [Account Settings] をクリックします。
Visual Studio Mobile Center のアカウント作成 (6)
1
2
10
1. [Password] をクリックします。
2. [Send set password email] をクリックします。
3. [メール送信が完了した] 旨のメッセージが表示されていることを確認します。
Visual Studio Mobile Center のアカウント作成 (7)
1
2
3
11
1. マイクロソフトアカウントに紐づいたメールボックスにメールが届いています。[Set your password] をクリックします。
2. 設定したいパスワードを入力します。自由に入力いただいて結構ですが、特になければ[Welcome00] と入力します。
3. [Change password] をクリックしてパスワードを設定します。
Visual Studio Mobile Center のアカウント作成 (8)
1
2
3
12
今回のハンズオンで使用する Android Emulator を準備します。
1. Visual Studio を起動し、メニュー [ツール] をクリックします。
2. [Android] – [Android エミュレーター マネージャー] の順にクリックします。
Android Emulator の準備 (1)
2
1
13
Android エミュレーター マネージャーが起動します。
1. [Device Definition] をクリックします。
2. [Nexus 5 by Google] をクリックします。
3. [Create AVD...] をクリックします。
Android Emulator の準備 (2)
2
1
3
14
1. [Target] は、[Android 6.0 – API Level 23] を選択します。
2. [CPU/ABI] は、[Google APIs Intel Atom (x86)] を選択します。
3. [Skin] は、[No skin] を選択します。
4. [Memory Options] の [RAM] は、[1024] に変更します。
5. [OK] をクリックして、AVDを作成します。
6. 作成結果が表示されます。[OK] をクリックしてウインドウを閉じます。
Android Emulator の準備 (3)
2
1
3
4
5
6
15
Android Emulator を起動します。
1. 先ほど作成した AVD をクリックして選択します。
2. [Start] をクリックします。
3. [Launch] をクリックして、Android Emulator を起動します。
Android Emulator の準備 (4)
21
3
16
1. Android Emulator が起動し、Android の Welcome メッセージが表示されます。[GOT IT] をクリックします。
2. Android の画面が表示されていることを確認します。
Android Emulator の準備 (5)
2
1
Android Emulator は閉じないこと!
17
1. ブラウザーで https://www.visualstudio.com/ja-jp にアクセスし、[Sign in] をクリックします。
Visual Studio Team Services のアカウント作成 (1)
1
18
Visual Studio Team Services のサインイン画面が表示されます。
1. Microsoft アカウントを入力します。
2. [次へ] をクリックします。
3. Microsoftアカウントのパスワードを入力します。
4. [サインイン]をクリックします。
Visual Studio Team Services のアカウント作成 (2)
3
4
1
2
19
1. [新しいアカウントの作成] をクリックします。
Visual Studio Team Services のアカウント作成 (3)
1
20
Visual Studio Team Services のアカウント作成画面が表示されます。
1. 任意のURLを入力します。
2. [Git] を選択します。
3. [詳細の変更]をクリックします。
Visual Studio Team Services のアカウント作成 (4)
2
3
1
21
1. プロジェクト名が [MyFirstProject] 、 プロセステンプレート [Agile] となっている事を確認します。
2. [続行]をクリックして、Visual Studio Team Services のアカウントを作成します。
Visual Studio Team Services のアカウント作成 (5)
2
1
プロジェクト名は変更可能ですが、
本手順書では、デフォルトのままにします。
22
Visual Studio Team Services のアカウント作成が完了すると下記画面が表示されます。
今回は、MyFirstProject というチームプロジェクトをそのまま使用します。
Visual Studio Team Services のアカウント作成 (6)
開発編
- Visual Studio と Git の接続
- Xamarin.Android アプリ作成
- プロファイリングの実行
- ソースコードのコミット
24
1. [コピー] アイコンをクリックして、 Git の URL をコピーします。
2. Visual Studio を起動し、メニュー [表示] – [チーム エクスプローラー] の順にクリックします。
3. [チームエクスプローラー] の [接続] アイコンをクリックします。
4. [ローカル Git リポジトリ] の [複製] をクリックします。
Visual Studio と Git の接続 (1)
1
4
2
3
25
Visual Studio 上に作成した Git リポジトリを複製します。
1. 先ほどコピーした URL を貼り付けします。
2. [複製] をクリックします。
3. [マイクロソフトアカウント] を入力します。
4. 続いて、[次へ] をクリックします。
Visual Studio と Git の接続 (2)
2
1
4
3
26
1. [マイクロソフトアカウントのパスワード] を入力します。
2. 続いて、[サインイン] をクリックします。
3. Visual Studio のメニュー [表示] – [チーム エクスプローラー] の順にクリックします。
4. Visual Studio のチームエクスプローラーの [新しいプロジェクトまたはソリューションを作成] をクリックします。
Visual Studio と Git の接続 (3)
2
1
4
3
27
1. 新しいプロジェクトの作成画面が開きます。[Visual C#] の [Android] を選択します。
2. [空のアプリ]を選択します。
3. [ソリューションのディレクトリを作成]と[新しいGit リポジトリの作成] にチェックがはいっていることを確認します。
4. [OK] をクリックします。
Xamarin.Android アプリ作成 (1)
3
2
1
4
28
Xamarin.Android プロジェクトが作成されます。まずはビューデザイナーを起動します。
1. [ソリューション エクスプローラー] をクリックします。
2. [ソリューション エクスプローラー] にある[Resources] フォルダー – [layout] フォルダーを順にクリックします。
3. [Main.axml] をダブルクリックしてビューデザイナーを起動します。
Xamarin.Android アプリ作成 (2)
3
1
2
29
まずは、Text コントロールを配置します。
1. Visual Studio の [ツールボックス] をクリックします。
2. [ツールボックス] の [Text(Large)] をクリックします。
3. [Text(Large)] をドラッグ & ドロップしてビューデザイナー上に配置します。
Xamarin.Android アプリ作成 (3)
31
2
30
Text コントロールのプロパティ値を設定します。
1. Visual Studio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。
2. [プロパティウインドウ] の [Main] にある [text] を [パスワードを入力] と変更します。
3. ビューデザイナー上にある[Large Text] の文字列が [パスワードを入力] に変更されていることを確認します。
Xamarin.Android アプリ作成 (4)
3
1
2
31
続いては、Plain Text コントロールを配置します。
1. Visual Studio の [ツールボックス] をクリックします。
2. [ツールボックス] の [Plain Text] をクリックします。
3. [Plain Text] をドラッグ & ドロップしてビューデザイナー上に配置します。
Xamarin.Android アプリ作成 (5)
3
1
2
32
Plain Text コントロールのプロパティ値を設定します。
1. Visual Studio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。
2. [プロパティウインドウ] の [Main] にある [id] を [@+id/PhoneNumberText] と変更します。
3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [1-855-XAMARIN] と変更します。
4. ビューデザイナー上にある文字列が [1-855-XAMARIN] に変更されていることを確認します。
Xamarin.Android アプリ作成 (6)
4
1
2
3
33
続いては、Button コントロールを配置します。
1. Visual Studio の [ツールボックス] をクリックします。
2. [ツールボックス] の [Button] をクリックします。
3. [Button] をドラッグ & ドロップしてビューデザイナー上に配置します。
Xamarin.Android アプリ作成 (7)
3
1
2
34
Button コントロールのプロパティ値を設定します。
1. Visual Studio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。
2. [プロパティウインドウ] の [Main] にある [id] を [@+id/TranslateButton] と変更します。
3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [変換] と変更します。
4. ビューデザイナー上にあるボタンの文字が [変換] に変更されていることを確認します。
Xamarin.Android アプリ作成 (8)
4
1
2
3
35
最後に、Button コントロールをもう一つ配置します。
1. Visual Studio の [ツールボックス] をクリックします。
2. [ツールボックス] の [Button] をクリックします。
3. [Button] をドラッグ & ドロップしてビューデザイナー上に配置します。
Xamarin.Android アプリ作成 (9)
3
1
2
36
Button コントロールのプロパティ値を設定します。
1. Visual Studio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。
2. [プロパティウインドウ] の [Main] にある [id] を [@+id/CallButton] と変更します。
3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [Call] と変更します。
4. ビューデザイナー上にあるボタンの文字が [Call] に変更されていることを確認します。
Xamarin.Android アプリ作成 (10)
4
1
2
3
37
ビューデザイナーで配置したコントロールの挙動の実装を行います。
1. Visual Studio の [ソリューション エクスプローラー] の プロジェクト [App1] を右クリックします。
2. [追加] – [新しい項目] の順にクリックします。
Xamarin.Android アプリ作成 (11)
1
2
38
1. 新しい項目の追加画面が開きます。[Visual C#] の [コード] を選択します。
2. [コードファイル] をクリックして選択します。
3. [名前] を [PhoneTranslator.cs] に変更します。
4. [追加] をクリックします。
Xamarin.Android アプリ作成 (12)
1
2
3
4
39
1. [PhoneTranslator.cs] のソースコードは、
https://1drv.ms/t/s!AA8nkeSt8_2qnCQ にあります。
アクセスしてソースコードをコピーして、Visual Studio の [PhoneTranslator.cs] に貼り付けします。
2. [すべて保存] アイコンをクリックして、ソースコードを保存します。
Xamarin.Android アプリ作成 (13)
1
2
40
1. 続いて、[MainActivity.cs] を編集します。ソースコードは、
https://1drv.ms/t/s!AA8nkeSt8_2qnCUにあります。
アクセスしてソースコードをコピーして、Visual Studio の [MainActivity.cs] を上書きする形で貼り付けします。
2. [すべて保存] アイコンをクリックして、ソースコードを保存します。
Xamarin.Android アプリ作成 (14)
1
2
41
最後に、プロジェクトの設定を編集します。
1. Visual Studio の [ソリューション エクスプローラー] の [App1] の [Properties] をダブルクリックします。
2. [アプリケーション] の [Android バージョンを使用したコンパイル] を [Android 6.0] にします。
Xamarin.Android アプリ作成 (15)
1
2
42
1. [Android マニフェスト] をクリックして選択します。
2. [必要なアクセス許可] の [CALL_PHONE] にチェックいれ、このアプリから電話発信を許可します。
3. 続いて、[必要なアクセス許可] の [INTERNET] にチェックいれ、このアプリからインターネットアクセスを許可します。
Xamarin.Android アプリ作成 (16)
1
2
3
43
1. [すべて保存] アイコンをクリックして、ソースコードを保存します。
2. [AVD_for_Nexus_5_by_Google (Android 6.0 – API 23)] をクリックして、先ほど起動した Android Emulator へ
のデバッグ実行をします。
3. Android Emulator 上にアプリが実行されています。[1-855-Xamarin] を [Azure-Daisuki] に変更します。
4. [変換] ボタンをクリックします。
5. [CALL] ボタンが、[CALL 29873-3247854] に変更されていることを確認します。
Xamarin.Android アプリ作成 (17)
1 2
3
4
5
44
続いて、このアプリで電話発信が許可されていることを確認します。
1. [CALL 29873-3247854] ボタンをクリックします。
2. [Call …?] というポップアップウインドウが表示されていることを確認します。今回は[CANCEL] をクリックします。
3. Visual Studio で[デバッグの停止] アイコンをクリックして、デバッグ実行を終了します。
Xamarin.Android アプリ作成 (18)
3
2
1
45
Xamarin Profiler を使用すると、Xamarinで作成したモバイルアプリケーションのプロファイリングが可能になります。
1. Visual Studio の [ツール] をクリックします。
2. [Xamarin Profiler] をクリックします。
プロファイリングの実行 (1)
2
1
46
今回は Xamarin Profiler を実行するだけなのですべてをプロファイリングします。
1. [All Instruments] をクリックして選択します。
2. [Choose] をクリックしてプロファイリングを開始します。
プロファイリングの実行 (2)
1
2
47
Xamarin Profiler が起動します。
1. [Allocations] をクリックします。
2. 詳細情報が表示されていることを確認します。
プロファイリングの実行 (3)
1
2
48
1. [Time Profiler] をクリックします。
2. 詳細情報が表示されていることを確認します。
プロファイリングの実行 (4)
1
2
49
1. Android Emulator で [変換] ボタンをクリックします。
2. Xamarin Profiler の Timer Profiler の CPU 利用率が変化していることを確認します。
プロファイリングの実行 (5)
1
2
50
1. [Time Profiler] で CPU 利用率が変化している前後をドラッグ&ドロップします。
2. ドラッグ&ドロップした範囲のCall Treeが表示されていることを確認します。
3. [X] をクリックして Xamarin Profiler を終了します。
プロファイリングの実行 (6)
1
2
3
51
1. リリース用の設定をします。Visual Studio プロジェクトのプロパティ画面で [Android オプション] をクリックします。
2. [構成] は [Release] を選択します。
3. [詳細設定] をクリックします。
4. [サポートされているアーキテクチャ] をクリックして、 [x86] と[x86_64] を追加します。
5. [閉じる] をクリックします。
6. [すべて保存] アイコンをクリックして、ソースコードを保存します。
ソースコードのコミット (1)
5
1
3
2
4
6
52
ソースコードのコミット (2)
1. メニュー [表示] – [チーム エクスプローラー] の順にクリックします。
2. [チームエクスプローラー] の [設定] をクリックします。
1
2
53
ソースコードのコミット (3)
1. [グローバル設定] をクリックします。
2. [ユーザー名] を入力します。
3. [電子メールアドレス] には、今回使用しているMSアカウントを入力します。
4. [更新] をクリックします。
1
4
2
3
既に入力されている場合は、
次に進んでください。
54
ソースコードのコミット (4)
1. [ホームアイコン] をクリックします。
2. [変更] をクリックします。
3. [コメント] には、[Xamarin.Android] と入力します。
4. [すべてをコミット] をクリックします。
5. コミットがローカルで作成されました。[同期] をクリックします。
6. 今回は [プッシュ] をクリックして、Visual Studio Team Services のリポジトリに Push します。
ここまで操作が完了したら、Visual Studio を終了してください!
1
4
2
3
5
6
自動ビルド・テスト・配布編
- Visual Studio Mobile Center でビルド
- UI テストの作成
- Visual Studio Mobile Center での UI テストの実行
- ユーザーへの配布
56
Visual Studio Team Services のソースコードを Visual Studio Mobile Center でビルドして成果物をダウンロードします。
1. ブラウザーで Visual Studio Mobile Center の画面に移動します。[Build] をクリックします。
2. 連携するコースコード管理サービスを選択します。[Visual Studio Team Services] をクリックします。
Visual Studio Mobile Center でビルド (1)
2
1
57
Visual Studio Mobile Center から Visual Studio Team Services へのアクセス承認画面が表示されます。
1. [承認] をクリックします。
Visual Studio Mobile Center でビルド (2)
1
58
1. 連携する Git リポジトリのリストが表示されます。[MyFirstProject] をクリックします。
Visual Studio Mobile Center でビルド (3)
1
59
1. ビルドするブランチを指定します。[master] をクリックします。
2. master ブランチでのビルド設定をします。[Configure build] をクリックします。
Visual Studio Mobile Center でビルド (4)
1
2
60
1. [Project] には、[App1.csproj] が選択されていることを確認します。
2. [Configuration] には、[Release] が選択されていることを確認します。
3. [Save] をクリックします。
Visual Studio Mobile Center でビルド (5)
3
1
2
61
1. ビルドが自動的に開始されます。ビルドが成功したことを確認してクリックします。
2. ビルドが成功している場合は成果物をダウンロードできます。[Download] – [Download build] の順にクリックします。
Visual Studio Mobile Center でビルド (6)
1
2
62
1. ダウンロード フォルダーにある [build.zip] を展開して、作成された [build] フォルダーの中にある
[buildApp1.App1.apk] を [デスクトップフォルダー] にコピーします。
2. [デスクトップフォルダー] フォルダーの中に、[App1.App1.apk] があることを確認します。
Visual Studio Mobile Center でビルド (7)
1 2
63
Visual Studio Mobile Center でのビルド成果物として APK ファイルが生成されました。
続いては、この APK ファイルを使ってUIテストを作成します。今回は Xamarin Test Recorder を使用します。
1. ブラウザーの検索画面で、[Xamarin test recorder marketplace] と入力して検索ボタンをクリックします。
2. 検索結果の [Xamarin Test Recorder – Visual Studio Marketplace] をクリックします。
3. https://marketplace.visualstudio.com/items?itemName=XamarinInc.XamarinTestRecorder2015 に移動します。
[Download] ボタンをクリックしてダウンロードします。
UI テストの作成 (1)
2
3
1
64
Xamarin Test Recorder をインストールします。
1. ダウンロードフォルダーにある [Xamarin.TestRecorder.VSIX...vsix] をダブルクリックします。
2. [インストール] をクリックして、Xamarin Test Recorderインストールします。
3. Xamarin Test Recorder のインストールが完了したことを確認して、[閉じる] をクリックします。
UI テストの作成 (2)
2
3
1
65
1. Visual Studio を起動し、メニュー [ファイル] - [新規作成] – [プロジェクト] の順にクリックします。
UI テストの作成 (3)
1
66
1. 新しいプロジェクトの作成画面が開きます。[Visual C#] の [Android] を選択します。
2. [UIテストアプリ (Xamarin.UITest | Android)]を選択します。
3. [OK] をクリックします。
UI テストの作成 (4)
2
1
3
67
1. Xamarin Test Recorderによる操作記録を開始します。[ソリューション エクスプローラー] をクリックします。
2. [Test.cs] をダブルクリックします。
3. [Xamarin Test Recorder] アイコンをクリックします。
UI テストの作成 (5)
3
2
1
68
1. [Record New Test] – [Select APK] の順にクリックします。
2. Visual Studio Mobile Center でのビルド成果物 [App1.App1.apk] を選択します。
3. [開く] をクリックします。Android Emulator にアプリがアップロードされます。
UI テストの作成 (6)
1
2
3
69
1. しばらく待つと、Visual Studio上にNewTest クラスが追加されることを確認します。
これで Xamarin Test Recorder の準備は完了です。Android Emulator 上での操作が記録されます。
UI テストの作成 (7)
1
70
Android Emulator 上での操作記録を実施します。
間違った操作をした場合は操作記録完了後にソースコードを削除してください。
1. Android Emulator 上で [1-855-XAMARIN] の文字をクリックします。
そして、文字列を削除し、[XamarinTest] と入力します。
2. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Take Screenshot] をクリックします。
UI テストの作成 (8)
1
2
71
続けて、Android Emulator 上での操作記録を実施します。
間違った操作をした場合は操作記録完了後にソースコードを削除してください。
1. Android Emulator 上で [変換] ボタンをクリックします。
2. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Take Screenshot] をクリックします。
UI テストの作成 (9)
1
2
72
続けて、Android Emulator 上での操作記録を実施します。
間違った操作をした場合は操作記録完了後にソースコードを削除してください。
1. Android Emulator 上で [CALL 92627468378] ボタンをクリックします。
2. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Take Screenshot] をクリックします。
UI テストの作成 (10)
1
2
73
1. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Stop recording] をクリックします。
[NewTest] が下記の手順になっていることを確認します。
間違った操作をした場合はここで不要なソースコードを削除してください。
UI テストの作成 (11)
2
1
74
1. コードの修正を行います。[AppLaunches] は不要なのでコメントアウトします。
2. 評価式を追加します。47行目に下記のコードを追加します。
Call ボタンの文字列の評価式ですが、今回はテストを意図的に失敗するように “Test” という文字列を期待値として
もたせています。
UI テストの作成 (12)
2
1
75
1. Android Emulator 上で UI テストを実行します。26行目のコメントアウトを解除して、デスクトップにある APK
ファイルへのフルパスを記載します。.Apkfile (”C:/Users/(ユーザー名)/Desktop/App1.App1.apk”) のよう
に、”” ではなく “/” で記載してください。
2. [すべて保存] アイコンをクリックして、ソースコードを保存します。
3. メニュー [テスト] - [実行] - [すべてのテスト] の順にクリックして、UI テストを実行します。
4. Android Emulator 上で自動で操作されていることを確認します。
5. テスト結果は失敗となります。[NewTest] をダブルクリックして、追加した評価式が機能していることを確認します。
UI テストの作成 (13)
2
1
5
4
76
作成した UI テストを Visual Studio Mobile Center 上で実行します。
1. 26行目のコメントアウトします。
2. [すべて保存] アイコンをクリックして、ソースコードを保存します。
Visual Studio Mobile Center での UI テストの実行 (1)
2
1
77
作成した UI テストを Visual Studio Mobile Center 上で実行できるようにパッケージをアップグレードします。
1. Visual Studio のメニュー [ツール] – [NuGet パッケージマネージャ] – [ソリューションの NuGet パッケージの管理]
の順にクリックします。
Visual Studio Mobile Center での UI テストの実行 (2)
1
78
1. [Xamarin.UITest] をクリックして選択します。
2. [UITest1] プロジェクトにチェックをいれます。
3. [インストール] をクリックして最新の Xamarin.UITest パッケージをインストールします。
4. インストールが完了すると、[出力] ウインドウに [パッケージが正常にインストールされました。] と表示されることを
確認します。
Visual Studio Mobile Center での UI テストの実行 (3)
1
2
3
4
79
1. Visual Studio のメニュー [ビルド] – [ソリューションのビルド] の順にクリックして、ビルドを実行します。
Visual Studio Mobile Center 上で UI テスト実行設定を行います。
2. ブラウザーで Visual Studio Mobile Center にアクセスし、[Test アイコン] をクリックします。
3. [Try automated UI testing] をクリックして、UI テストを有効化します。
Visual Studio Mobile Center での UI テストの実行 (4)
1
2
3
80
1. New test run をクリックします。
Visual Studio Mobile Center での UI テストの実行 (5)
1
81
1. デバイスの選択画面が表示されます。[フィルター] アイコンをクリックします。
2. [OS Versions] をクリックします。
3. [Android 6.0.1] にチェックをいれます。
4. [X] をクリックしてフィルターを閉じます。
Visual Studio Mobile Center での UI テストの実行 (6)
1
2
3
4
82
1. Android 6.0.1 OS のデバイスを 3 つ選択します。リストの上から 3 つ選択するとテスト実行時間の待ち時間が増える
場合があります。
2. [Select 3 devices] をクリックします。
Visual Studio Mobile Center での UI テストの実行 (7)
1
2
83
1. [System launguage] は [Japanese (Japan)] を選択します。
2. [Test framework] は、[Xamarin.UITest] をチェックします。
3. [Next] をクリックします。
Visual Studio Mobile Center での UI テストの実行 (8)
1
2
3
84
Visual Studio Mobile Center での UI テストの実行手順の記載があることを確認します。
1. [Running tests] の [copy to clipcoard] をクリックしてコピーして、メモ帳などに貼り付けします。
2. [Done] をクリックします。
Visual Studio Mobile Center での UI テストの実行 (9)
1
2
85
1. Node.js をインストールします。 https://nodejs.org/ja/download/ にアクセスして [Windows Installer] をクリッ
クし、Node.js インストーラーをダウンロードします。
Visual Studio Mobile Center での UI テストの実行 (10)
1
86
1. ダウンロードした Node.js インストーラーをダブルクリックします。
2. Node.js のインストールウイザードに従って Node.js のインストールを
実施します。
Visual Studio Mobile Center での UI テストの実行 (11)
1
2-1 2-2 2-3
2-4 2-5 2-6
87
1. Mobile Center CLI をインストールします。Windows の検索ボックスで [cmd] と入力します。
2. 検索結果から [コマンドプロンプト] をクリックします。
3. コマンドプロンプト上で [npm install -g mobile-center-cli] と入力してから [Enter キー] を押して、Mobile
Center CLI をインストールします。
Visual Studio Mobile Center での UI テストの実行 (12)
2
1
88
Mobile Center CLI から ログインコマンドを実行します。
1. コマンドプロンプト上で [mobile-center login] と入力してから [Enter キー] を押します。
2. [Enable telemetry?] には、[Yes] と入力してから [Enter キー] を押します。
3. ブラウザーが開いてアクセスコードが表示されます。[コピーアイコン] をクリックしてアクセスコードをコピーします。
4. コマンドプロンプト上でアクセスコード貼り付けしてから [Enter キー] を押します。
5. [Loogin in as [ユーザー名]] と表示されていることを確認します。
Visual Studio Mobile Center での UI テストの実行 (13)
2
1
4
3
5
89
Mobile Center CLI から UI テストを実行します。
1. コマンドプロンプト上で [cd “DocumentsVisual Studio 2017Projects“]と入力してから [Enter キー] を押し、
プロジェクトフォルダーに移動します。
2. 先ほどコピーした mobile-center コマンドを実行します。テレメトリの質問は [Y] と入力します。
• [pathToFile.apk] は、[C:Users(ユーザー名)DesktopApp1.App1.apk] と置き換えます。
• [pathToUITestBuildDir] は、[UITest1UITest1binDebug] と置き換えます。
3. 10 分程度待つとテストが終了します。今回は失敗していることを確認します。
Visual Studio Mobile Center での UI テストの実行 (14)
1
2
3
90
1. UI テスト結果を確認します。ブラウザーで Visual Studio Mobile Center にアクセスし、[Test] をクリックします。
2. 先ほどコマンドラインで実行した UI テストの結果が表示されています。クリックします。
Visual Studio Mobile Center での UI テストの実行 (15)
1
2
91
1. UI テストのテスト結果の履歴が確認できます。 今回のテスト結果を確認します。[New Test] をクリックします。
Visual Studio Mobile Center での UI テストの実行 (16)
1
92
1. 今回のテスト結果の詳細が表示されます。[New Test] の一番下のステップをクリックします。
2. [左上のデバイス] をクリックして、失敗したテストのデバイスログを確認します。
Visual Studio Mobile Center での UI テストの実行 (17)
1
2
93
今回のテストでのデバイスの状態が確認できます。
1. CPU メモリの利用状況の推移を確認できます。
2. テストにかかった時間を確認できます。
3. [Logs] をクリックします。
Visual Studio Mobile Center での UI テストの実行 (18)
1
2
3
94
デバイスログが確認できます。
1. [TEST FAILUTURES] をクリックします。
2. テスト失敗のログが表示されていることを確認します。
Visual Studio Mobile Center での UI テストの実行 (19)
1
2
95
Visual Studio Mobile Center では、成果物をユーザーに配布することも行えます。
1. ブラウザーで Visual Studio Mobile Center にアクセスし、[Distribute アイコン] をクリックします。
2. [Distribute new release] をクリックします。
ユーザーへの配布 (1)
1
2
96
1. パッケージを選択します。デスクトップの [App1.App1.apk] を選択します。少し待ってアップロード完了を確認します。
2. [Next] をクリックします。
3. [Release notes] には、[デモです。] と入力します。
4. [Next] をクリックします。
ユーザーへの配布 (2)
1
2
3
4
97
1. 配布先のグループはデフォルトの [Collaborators] をクリックして選択します。
2. [Next] をクリックします。
3. [Distribute] をクリックして指定したグループにアプリケーションを配布をします。
ユーザーへの配布 (3)
2 3
1
98
今回は、マイクロソフトアカウントに紐づいたメールボックスにメールが届いています。
1. 届いたメールの [See details] をクリックします。
2. PC からアクセスすると、[Android デバイスからアクセスしないとインストールできない] 旨のメッセージが表示されて
いることを確認します。実際には、Android 端末からアクセスするとアプリがインストールできます。
ユーザーへの配布 (4)
1
2
参考資料
100
手順書
• Team Foundation Server / Visual Studio Team Services 体験
• Visual Studio + Team Foundation Server / Visual Studio Team Services による開発業務効率化体験
• Visual Studio と Team Foundation Server / Visual Studio Team Services で実現するビルド・テスト・
デプロイ自動化
• Visual Studio と Team Foundation Server / Visual Studio Team Services で実現するビルド・テスト・
デプロイ自動化 + Azure 仮想マシン起動自動化
• Team Foundation Server 2015 Update 3 インストール
• Team Foundation Server 2015 Update 3 へのアップグレード
• Team Foundation Server 2015 によるテスト工数削減
• Team Foundation Server プロセステンプレートの変更
• Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築
• Entity Framework 6.1.3 + Windows フォーム サンプル アプリケーション構築