モバイルアプリケーション開発体験ハンズオン
~実装からビルド・テスト・ベータテスト配布まで~
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 フォーム サンプル アプリケーション構築
101
Visual Studio Team Services 月額費用
Visual Studio Team Services のアカウント(テナント)と紐づいた
Azure サブスクリプションに請求されます
Visual Studio Team Services 料金詳細
https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-team-services/
最初の 5 ユーザー 無料
ユーザー数 6 から 10 612円 / ユーザー
ユーザー数 11 から 100 816円 / ユーザー
ユーザー数 101 から 1000 408円 / ユーザー
ユーザー数 1001 以上 204円 / ユーザー
* MSDN Subscription にひもづいたアカウントは
課金対象としてカウントされません
ユーザー Visual Studio Team Services の
ビルドパイプラインを利用する場合
無料のビルドパイプライン
*単一ジョブの最大実行時間 30 分
無料
有料のビルドパイプライン
*単一ジョブの最大実行時間 360 分
4,080円 /
パイプライン
自前のビルドサーバーを利用する場合
最初の1 つ目 無料
2 つ目以降
1,530円 /
パイプライン* 2017年1月14日時点
Visual Studio Mobile Center Preview
102
• ライフサイクルサービス ビルド、テスト、配布
• 監視サービス クラッシュログ収集、ログ分析
• モバイルバックエンドサービス 認証、DBテーブル
<対象モバイルアプリケーション>
iOS Android Windows
Object-C
Swift
React Native
Xamarin
Java
React Native
Xamarin
Coming Soon
Visual Studio Mobile Center = Free (Preview 期間のみ)
103
機能 制限事項
Build 1ビルド最大30分。1アプリあたり 10ブランチまで
Test 90 日トライアルとしてXamarin Test Cloud を利用
Distribute 2,000 テスターまで
Crashes
30日間のデータ保持
Analytics
~ アプリケーション ライフサイクル全般をカバー
▶
~ 開発に必要な機能を提供
~ 様々な開発に対応した包括的な開発基盤
~ 中小企業、オープン ソース開発、勉強向け ~ アプリの形態に限定された開発 ~ クロス プラットフォームのコード エディタ
104
UML モデリング
構造分析
コードカバレッジ
静的コード分析*
コードクローン分析
UI 自動テスト
探索的テスト
コードレビュー*
ストーリーボード*
データベース開発
IntelliTrace™ IntelliTrace Anywhere
コードマップデバッガ .NETメモリダンプ解析 Web テスト/ロードテスト
Fake Framework
テストケース管理
テストケース管理/フィードバック
プロファイル(CPU、メモリ、バッテリー消費)*
単体テスト*
要求管理 ソース管理/バグ管理
品質管理/サーバー ビルド
タスク管理/レポーティング/プロジェクト ポータル/フィードバック
IntelliTest
テスト影響分析
CodeLens
Include ファイル分析
Visual Studio 2015 エディション別 機能一覧
*Visual Studio Community での利用可能な機能
VS 2013 Ultimate 機能VS 2013 Premium 機能 VS 2015 新機能
構造分析
コードカバレッジ
静的コード分析*
コードクローン分析
UI 自動テスト
探索的テスト
コードレビュー*
ストーリーボード*
データベース開発
IntelliTrace™ IntelliTrace Anywhere
コードマップデバッガ .NETメモリダンプ解析 Web テスト/ロードテスト
Fake Framework
テストケース管理
テストケース管理/フィードバック
プロファイル(CPU、メモリ、バッテリー消費)*
単体テスト*
要求管理 ソース管理/バグ管理
品質管理/サーバー ビルド
タスク管理/レポーティング/プロジェクト ポータル/フィードバック
IntelliTest
テスト影響分析
CodeLens
Include ファイル分析
Visual Studio 2017 エディション別 機能一覧
*Visual Studio Community での利用可能な機能
VS 2017 新機能
Live Unit Testing
ライブ アーキテクチャの依存関係の検証
Xamarin Inspector
Xamarin Profiler
Xamarin Test Recorder
新インストーラー
起動速度の改善
IDE強化

モバイルアプリケーション開発体験ハンズオン ~実装からビルド・テスト・ベータテスト配布まで~ Android 編

  • 1.
  • 2.
    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
  • 3.
    環境構築編 - Android Emulatorの準備 - Visual Studio Mobile Center のアカウント作成 - Visual Studio Team Services のアカウント作成
  • 4.
    4 1. ブラウザーで https://mobile.azure.comにアクセスし、[Connect with Microsoft] をクリックします。 Visual Studio Mobile Center のアカウント作成 (1) 1
  • 5.
    5 1. マイクロソフトアカウントを入力します。 2. [次へ]をクリックします。 3. パスワードを入力します。 4. [サインイン] をクリックします。 Visual Studio Mobile Center のアカウント作成 (2) 1 3 4 2
  • 6.
    6 Visual Studio MobileCenter にログインしました。今回のハンズオン用のアプリケーションの設定を行います。 1. 表示されている [username] の値を記録します。 2. [Choose username] をクリックします。 3. [Add new app] をクリックします。 Visual Studio Mobile Center のアカウント作成 (3) 32 1
  • 7.
    7 1. [Name] には、[AndroidDemo]と入力します。 2. [OS] には、[Android] を選択します。 3. [Platform] には、[Xamarin] を選択します。 4. [Add new app] をクリックします。 Visual Studio Mobile Center のアカウント作成 (4) 1 2 3 4
  • 8.
    8 下記の画面が表示されると、Visual Studio MobileCenter の設定は完了です。 次のスライドへ進んでください。 Visual Studio Mobile Center のアカウント作成 (5)
  • 9.
    9 Visual Studio MobileCenter にログインしているユーザーパスワードを設定します。 1. [ユーザー] アイコンをクリックします。 2. [Account Settings] をクリックします。 Visual Studio Mobile Center のアカウント作成 (6) 1 2
  • 10.
    10 1. [Password] をクリックします。 2.[Send set password email] をクリックします。 3. [メール送信が完了した] 旨のメッセージが表示されていることを確認します。 Visual Studio Mobile Center のアカウント作成 (7) 1 2 3
  • 11.
    11 1. マイクロソフトアカウントに紐づいたメールボックスにメールが届いています。[Set yourpassword] をクリックします。 2. 設定したいパスワードを入力します。自由に入力いただいて結構ですが、特になければ[Welcome00] と入力します。 3. [Change password] をクリックしてパスワードを設定します。 Visual Studio Mobile Center のアカウント作成 (8) 1 2 3
  • 12.
    12 今回のハンズオンで使用する Android Emulatorを準備します。 1. Visual Studio を起動し、メニュー [ツール] をクリックします。 2. [Android] – [Android エミュレーター マネージャー] の順にクリックします。 Android Emulator の準備 (1) 2 1
  • 13.
    13 Android エミュレーター マネージャーが起動します。 1.[Device Definition] をクリックします。 2. [Nexus 5 by Google] をクリックします。 3. [Create AVD...] をクリックします。 Android Emulator の準備 (2) 2 1 3
  • 14.
    14 1. [Target] は、[Android6.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.
    15 Android Emulator を起動します。 1.先ほど作成した AVD をクリックして選択します。 2. [Start] をクリックします。 3. [Launch] をクリックして、Android Emulator を起動します。 Android Emulator の準備 (4) 21 3
  • 16.
    16 1. Android Emulatorが起動し、Android の Welcome メッセージが表示されます。[GOT IT] をクリックします。 2. Android の画面が表示されていることを確認します。 Android Emulator の準備 (5) 2 1 Android Emulator は閉じないこと!
  • 17.
    17 1. ブラウザーで https://www.visualstudio.com/ja-jpにアクセスし、[Sign in] をクリックします。 Visual Studio Team Services のアカウント作成 (1) 1
  • 18.
    18 Visual Studio TeamServices のサインイン画面が表示されます。 1. Microsoft アカウントを入力します。 2. [次へ] をクリックします。 3. Microsoftアカウントのパスワードを入力します。 4. [サインイン]をクリックします。 Visual Studio Team Services のアカウント作成 (2) 3 4 1 2
  • 19.
    19 1. [新しいアカウントの作成] をクリックします。 VisualStudio Team Services のアカウント作成 (3) 1
  • 20.
    20 Visual Studio TeamServices のアカウント作成画面が表示されます。 1. 任意のURLを入力します。 2. [Git] を選択します。 3. [詳細の変更]をクリックします。 Visual Studio Team Services のアカウント作成 (4) 2 3 1
  • 21.
    21 1. プロジェクト名が [MyFirstProject]、 プロセステンプレート [Agile] となっている事を確認します。 2. [続行]をクリックして、Visual Studio Team Services のアカウントを作成します。 Visual Studio Team Services のアカウント作成 (5) 2 1 プロジェクト名は変更可能ですが、 本手順書では、デフォルトのままにします。
  • 22.
    22 Visual Studio TeamServices のアカウント作成が完了すると下記画面が表示されます。 今回は、MyFirstProject というチームプロジェクトをそのまま使用します。 Visual Studio Team Services のアカウント作成 (6)
  • 23.
    開発編 - Visual Studioと Git の接続 - Xamarin.Android アプリ作成 - プロファイリングの実行 - ソースコードのコミット
  • 24.
    24 1. [コピー] アイコンをクリックして、Git の URL をコピーします。 2. Visual Studio を起動し、メニュー [表示] – [チーム エクスプローラー] の順にクリックします。 3. [チームエクスプローラー] の [接続] アイコンをクリックします。 4. [ローカル Git リポジトリ] の [複製] をクリックします。 Visual Studio と Git の接続 (1) 1 4 2 3
  • 25.
    25 Visual Studio 上に作成したGit リポジトリを複製します。 1. 先ほどコピーした URL を貼り付けします。 2. [複製] をクリックします。 3. [マイクロソフトアカウント] を入力します。 4. 続いて、[次へ] をクリックします。 Visual Studio と Git の接続 (2) 2 1 4 3
  • 26.
    26 1. [マイクロソフトアカウントのパスワード] を入力します。 2.続いて、[サインイン] をクリックします。 3. Visual Studio のメニュー [表示] – [チーム エクスプローラー] の順にクリックします。 4. Visual Studio のチームエクスプローラーの [新しいプロジェクトまたはソリューションを作成] をクリックします。 Visual Studio と Git の接続 (3) 2 1 4 3
  • 27.
    27 1. 新しいプロジェクトの作成画面が開きます。[Visual C#]の [Android] を選択します。 2. [空のアプリ]を選択します。 3. [ソリューションのディレクトリを作成]と[新しいGit リポジトリの作成] にチェックがはいっていることを確認します。 4. [OK] をクリックします。 Xamarin.Android アプリ作成 (1) 3 2 1 4
  • 28.
    28 Xamarin.Android プロジェクトが作成されます。まずはビューデザイナーを起動します。 1. [ソリューションエクスプローラー] をクリックします。 2. [ソリューション エクスプローラー] にある[Resources] フォルダー – [layout] フォルダーを順にクリックします。 3. [Main.axml] をダブルクリックしてビューデザイナーを起動します。 Xamarin.Android アプリ作成 (2) 3 1 2
  • 29.
    29 まずは、Text コントロールを配置します。 1. VisualStudio の [ツールボックス] をクリックします。 2. [ツールボックス] の [Text(Large)] をクリックします。 3. [Text(Large)] をドラッグ & ドロップしてビューデザイナー上に配置します。 Xamarin.Android アプリ作成 (3) 31 2
  • 30.
    30 Text コントロールのプロパティ値を設定します。 1. VisualStudio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。 2. [プロパティウインドウ] の [Main] にある [text] を [パスワードを入力] と変更します。 3. ビューデザイナー上にある[Large Text] の文字列が [パスワードを入力] に変更されていることを確認します。 Xamarin.Android アプリ作成 (4) 3 1 2
  • 31.
    31 続いては、Plain Text コントロールを配置します。 1.Visual Studio の [ツールボックス] をクリックします。 2. [ツールボックス] の [Plain Text] をクリックします。 3. [Plain Text] をドラッグ & ドロップしてビューデザイナー上に配置します。 Xamarin.Android アプリ作成 (5) 3 1 2
  • 32.
    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.
    33 続いては、Button コントロールを配置します。 1. VisualStudio の [ツールボックス] をクリックします。 2. [ツールボックス] の [Button] をクリックします。 3. [Button] をドラッグ & ドロップしてビューデザイナー上に配置します。 Xamarin.Android アプリ作成 (7) 3 1 2
  • 34.
    34 Button コントロールのプロパティ値を設定します。 1. VisualStudio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。 2. [プロパティウインドウ] の [Main] にある [id] を [@+id/TranslateButton] と変更します。 3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [変換] と変更します。 4. ビューデザイナー上にあるボタンの文字が [変換] に変更されていることを確認します。 Xamarin.Android アプリ作成 (8) 4 1 2 3
  • 35.
    35 最後に、Button コントロールをもう一つ配置します。 1. VisualStudio の [ツールボックス] をクリックします。 2. [ツールボックス] の [Button] をクリックします。 3. [Button] をドラッグ & ドロップしてビューデザイナー上に配置します。 Xamarin.Android アプリ作成 (9) 3 1 2
  • 36.
    36 Button コントロールのプロパティ値を設定します。 1. VisualStudio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。 2. [プロパティウインドウ] の [Main] にある [id] を [@+id/CallButton] と変更します。 3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [Call] と変更します。 4. ビューデザイナー上にあるボタンの文字が [Call] に変更されていることを確認します。 Xamarin.Android アプリ作成 (10) 4 1 2 3
  • 37.
    37 ビューデザイナーで配置したコントロールの挙動の実装を行います。 1. Visual Studioの [ソリューション エクスプローラー] の プロジェクト [App1] を右クリックします。 2. [追加] – [新しい項目] の順にクリックします。 Xamarin.Android アプリ作成 (11) 1 2
  • 38.
    38 1. 新しい項目の追加画面が開きます。[Visual C#]の [コード] を選択します。 2. [コードファイル] をクリックして選択します。 3. [名前] を [PhoneTranslator.cs] に変更します。 4. [追加] をクリックします。 Xamarin.Android アプリ作成 (12) 1 2 3 4
  • 39.
    39 1. [PhoneTranslator.cs] のソースコードは、 https://1drv.ms/t/s!AA8nkeSt8_2qnCQにあります。 アクセスしてソースコードをコピーして、Visual Studio の [PhoneTranslator.cs] に貼り付けします。 2. [すべて保存] アイコンをクリックして、ソースコードを保存します。 Xamarin.Android アプリ作成 (13) 1 2
  • 40.
    40 1. 続いて、[MainActivity.cs] を編集します。ソースコードは、 https://1drv.ms/t/s!AA8nkeSt8_2qnCUにあります。 アクセスしてソースコードをコピーして、VisualStudio の [MainActivity.cs] を上書きする形で貼り付けします。 2. [すべて保存] アイコンをクリックして、ソースコードを保存します。 Xamarin.Android アプリ作成 (14) 1 2
  • 41.
    41 最後に、プロジェクトの設定を編集します。 1. Visual Studioの [ソリューション エクスプローラー] の [App1] の [Properties] をダブルクリックします。 2. [アプリケーション] の [Android バージョンを使用したコンパイル] を [Android 6.0] にします。 Xamarin.Android アプリ作成 (15) 1 2
  • 42.
    42 1. [Android マニフェスト]をクリックして選択します。 2. [必要なアクセス許可] の [CALL_PHONE] にチェックいれ、このアプリから電話発信を許可します。 3. 続いて、[必要なアクセス許可] の [INTERNET] にチェックいれ、このアプリからインターネットアクセスを許可します。 Xamarin.Android アプリ作成 (16) 1 2 3
  • 43.
    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.
    44 続いて、このアプリで電話発信が許可されていることを確認します。 1. [CALL 29873-3247854]ボタンをクリックします。 2. [Call …?] というポップアップウインドウが表示されていることを確認します。今回は[CANCEL] をクリックします。 3. Visual Studio で[デバッグの停止] アイコンをクリックして、デバッグ実行を終了します。 Xamarin.Android アプリ作成 (18) 3 2 1
  • 45.
    45 Xamarin Profiler を使用すると、Xamarinで作成したモバイルアプリケーションのプロファイリングが可能になります。 1.Visual Studio の [ツール] をクリックします。 2. [Xamarin Profiler] をクリックします。 プロファイリングの実行 (1) 2 1
  • 46.
    46 今回は Xamarin Profilerを実行するだけなのですべてをプロファイリングします。 1. [All Instruments] をクリックして選択します。 2. [Choose] をクリックしてプロファイリングを開始します。 プロファイリングの実行 (2) 1 2
  • 47.
    47 Xamarin Profiler が起動します。 1.[Allocations] をクリックします。 2. 詳細情報が表示されていることを確認します。 プロファイリングの実行 (3) 1 2
  • 48.
    48 1. [Time Profiler]をクリックします。 2. 詳細情報が表示されていることを確認します。 プロファイリングの実行 (4) 1 2
  • 49.
    49 1. Android Emulatorで [変換] ボタンをクリックします。 2. Xamarin Profiler の Timer Profiler の CPU 利用率が変化していることを確認します。 プロファイリングの実行 (5) 1 2
  • 50.
    50 1. [Time Profiler]で CPU 利用率が変化している前後をドラッグ&ドロップします。 2. ドラッグ&ドロップした範囲のCall Treeが表示されていることを確認します。 3. [X] をクリックして Xamarin Profiler を終了します。 プロファイリングの実行 (6) 1 2 3
  • 51.
    51 1. リリース用の設定をします。Visual Studioプロジェクトのプロパティ画面で [Android オプション] をクリックします。 2. [構成] は [Release] を選択します。 3. [詳細設定] をクリックします。 4. [サポートされているアーキテクチャ] をクリックして、 [x86] と[x86_64] を追加します。 5. [閉じる] をクリックします。 6. [すべて保存] アイコンをクリックして、ソースコードを保存します。 ソースコードのコミット (1) 5 1 3 2 4 6
  • 52.
    52 ソースコードのコミット (2) 1. メニュー[表示] – [チーム エクスプローラー] の順にクリックします。 2. [チームエクスプローラー] の [設定] をクリックします。 1 2
  • 53.
    53 ソースコードのコミット (3) 1. [グローバル設定]をクリックします。 2. [ユーザー名] を入力します。 3. [電子メールアドレス] には、今回使用しているMSアカウントを入力します。 4. [更新] をクリックします。 1 4 2 3 既に入力されている場合は、 次に進んでください。
  • 54.
    54 ソースコードのコミット (4) 1. [ホームアイコン]をクリックします。 2. [変更] をクリックします。 3. [コメント] には、[Xamarin.Android] と入力します。 4. [すべてをコミット] をクリックします。 5. コミットがローカルで作成されました。[同期] をクリックします。 6. 今回は [プッシュ] をクリックして、Visual Studio Team Services のリポジトリに Push します。 ここまで操作が完了したら、Visual Studio を終了してください! 1 4 2 3 5 6
  • 55.
    自動ビルド・テスト・配布編 - Visual StudioMobile Center でビルド - UI テストの作成 - Visual Studio Mobile Center での UI テストの実行 - ユーザーへの配布
  • 56.
    56 Visual Studio TeamServices のソースコードを Visual Studio Mobile Center でビルドして成果物をダウンロードします。 1. ブラウザーで Visual Studio Mobile Center の画面に移動します。[Build] をクリックします。 2. 連携するコースコード管理サービスを選択します。[Visual Studio Team Services] をクリックします。 Visual Studio Mobile Center でビルド (1) 2 1
  • 57.
    57 Visual Studio MobileCenter から Visual Studio Team Services へのアクセス承認画面が表示されます。 1. [承認] をクリックします。 Visual Studio Mobile Center でビルド (2) 1
  • 58.
    58 1. 連携する Gitリポジトリのリストが表示されます。[MyFirstProject] をクリックします。 Visual Studio Mobile Center でビルド (3) 1
  • 59.
    59 1. ビルドするブランチを指定します。[master] をクリックします。 2.master ブランチでのビルド設定をします。[Configure build] をクリックします。 Visual Studio Mobile Center でビルド (4) 1 2
  • 60.
    60 1. [Project] には、[App1.csproj]が選択されていることを確認します。 2. [Configuration] には、[Release] が選択されていることを確認します。 3. [Save] をクリックします。 Visual Studio Mobile Center でビルド (5) 3 1 2
  • 61.
  • 62.
    62 1. ダウンロード フォルダーにある[build.zip] を展開して、作成された [build] フォルダーの中にある [buildApp1.App1.apk] を [デスクトップフォルダー] にコピーします。 2. [デスクトップフォルダー] フォルダーの中に、[App1.App1.apk] があることを確認します。 Visual Studio Mobile Center でビルド (7) 1 2
  • 63.
    63 Visual Studio MobileCenter でのビルド成果物として 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.
    64 Xamarin Test Recorderをインストールします。 1. ダウンロードフォルダーにある [Xamarin.TestRecorder.VSIX...vsix] をダブルクリックします。 2. [インストール] をクリックして、Xamarin Test Recorderインストールします。 3. Xamarin Test Recorder のインストールが完了したことを確認して、[閉じる] をクリックします。 UI テストの作成 (2) 2 3 1
  • 65.
    65 1. Visual Studioを起動し、メニュー [ファイル] - [新規作成] – [プロジェクト] の順にクリックします。 UI テストの作成 (3) 1
  • 66.
    66 1. 新しいプロジェクトの作成画面が開きます。[Visual C#]の [Android] を選択します。 2. [UIテストアプリ (Xamarin.UITest | Android)]を選択します。 3. [OK] をクリックします。 UI テストの作成 (4) 2 1 3
  • 67.
    67 1. Xamarin TestRecorderによる操作記録を開始します。[ソリューション エクスプローラー] をクリックします。 2. [Test.cs] をダブルクリックします。 3. [Xamarin Test Recorder] アイコンをクリックします。 UI テストの作成 (5) 3 2 1
  • 68.
    68 1. [Record NewTest] – [Select APK] の順にクリックします。 2. Visual Studio Mobile Center でのビルド成果物 [App1.App1.apk] を選択します。 3. [開く] をクリックします。Android Emulator にアプリがアップロードされます。 UI テストの作成 (6) 1 2 3
  • 69.
    69 1. しばらく待つと、Visual Studio上にNewTestクラスが追加されることを確認します。 これで Xamarin Test Recorder の準備は完了です。Android Emulator 上での操作が記録されます。 UI テストの作成 (7) 1
  • 70.
    70 Android Emulator 上での操作記録を実施します。 間違った操作をした場合は操作記録完了後にソースコードを削除してください。 1.Android Emulator 上で [1-855-XAMARIN] の文字をクリックします。 そして、文字列を削除し、[XamarinTest] と入力します。 2. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Take Screenshot] をクリックします。 UI テストの作成 (8) 1 2
  • 71.
    71 続けて、Android Emulator 上での操作記録を実施します。 間違った操作をした場合は操作記録完了後にソースコードを削除してください。 1.Android Emulator 上で [変換] ボタンをクリックします。 2. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Take Screenshot] をクリックします。 UI テストの作成 (9) 1 2
  • 72.
    72 続けて、Android Emulator 上での操作記録を実施します。 間違った操作をした場合は操作記録完了後にソースコードを削除してください。 1.Android Emulator 上で [CALL 92627468378] ボタンをクリックします。 2. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Take Screenshot] をクリックします。 UI テストの作成 (10) 1 2
  • 73.
    73 1. Visual StudioでXamarin Test Recorder のアイコンをクリックして、[Stop recording] をクリックします。 [NewTest] が下記の手順になっていることを確認します。 間違った操作をした場合はここで不要なソースコードを削除してください。 UI テストの作成 (11) 2 1
  • 74.
    74 1. コードの修正を行います。[AppLaunches] は不要なのでコメントアウトします。 2.評価式を追加します。47行目に下記のコードを追加します。 Call ボタンの文字列の評価式ですが、今回はテストを意図的に失敗するように “Test” という文字列を期待値として もたせています。 UI テストの作成 (12) 2 1
  • 75.
    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.
    76 作成した UI テストをVisual Studio Mobile Center 上で実行します。 1. 26行目のコメントアウトします。 2. [すべて保存] アイコンをクリックして、ソースコードを保存します。 Visual Studio Mobile Center での UI テストの実行 (1) 2 1
  • 77.
    77 作成した UI テストをVisual Studio Mobile Center 上で実行できるようにパッケージをアップグレードします。 1. Visual Studio のメニュー [ツール] – [NuGet パッケージマネージャ] – [ソリューションの NuGet パッケージの管理] の順にクリックします。 Visual Studio Mobile Center での UI テストの実行 (2) 1
  • 78.
    78 1. [Xamarin.UITest] をクリックして選択します。 2.[UITest1] プロジェクトにチェックをいれます。 3. [インストール] をクリックして最新の Xamarin.UITest パッケージをインストールします。 4. インストールが完了すると、[出力] ウインドウに [パッケージが正常にインストールされました。] と表示されることを 確認します。 Visual Studio Mobile Center での UI テストの実行 (3) 1 2 3 4
  • 79.
    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.
    80 1. New testrun をクリックします。 Visual Studio Mobile Center での UI テストの実行 (5) 1
  • 81.
    81 1. デバイスの選択画面が表示されます。[フィルター] アイコンをクリックします。 2.[OS Versions] をクリックします。 3. [Android 6.0.1] にチェックをいれます。 4. [X] をクリックしてフィルターを閉じます。 Visual Studio Mobile Center での UI テストの実行 (6) 1 2 3 4
  • 82.
    82 1. Android 6.0.1OS のデバイスを 3 つ選択します。リストの上から 3 つ選択するとテスト実行時間の待ち時間が増える 場合があります。 2. [Select 3 devices] をクリックします。 Visual Studio Mobile Center での UI テストの実行 (7) 1 2
  • 83.
    83 1. [System launguage]は [Japanese (Japan)] を選択します。 2. [Test framework] は、[Xamarin.UITest] をチェックします。 3. [Next] をクリックします。 Visual Studio Mobile Center での UI テストの実行 (8) 1 2 3
  • 84.
    84 Visual Studio MobileCenter での UI テストの実行手順の記載があることを確認します。 1. [Running tests] の [copy to clipcoard] をクリックしてコピーして、メモ帳などに貼り付けします。 2. [Done] をクリックします。 Visual Studio Mobile Center での UI テストの実行 (9) 1 2
  • 85.
    85 1. Node.js をインストールします。https://nodejs.org/ja/download/ にアクセスして [Windows Installer] をクリッ クし、Node.js インストーラーをダウンロードします。 Visual Studio Mobile Center での UI テストの実行 (10) 1
  • 86.
    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.
    87 1. Mobile CenterCLI をインストールします。Windows の検索ボックスで [cmd] と入力します。 2. 検索結果から [コマンドプロンプト] をクリックします。 3. コマンドプロンプト上で [npm install -g mobile-center-cli] と入力してから [Enter キー] を押して、Mobile Center CLI をインストールします。 Visual Studio Mobile Center での UI テストの実行 (12) 2 1
  • 88.
    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.
    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.
    90 1. UI テスト結果を確認します。ブラウザーでVisual Studio Mobile Center にアクセスし、[Test] をクリックします。 2. 先ほどコマンドラインで実行した UI テストの結果が表示されています。クリックします。 Visual Studio Mobile Center での UI テストの実行 (15) 1 2
  • 91.
    91 1. UI テストのテスト結果の履歴が確認できます。今回のテスト結果を確認します。[New Test] をクリックします。 Visual Studio Mobile Center での UI テストの実行 (16) 1
  • 92.
    92 1. 今回のテスト結果の詳細が表示されます。[New Test]の一番下のステップをクリックします。 2. [左上のデバイス] をクリックして、失敗したテストのデバイスログを確認します。 Visual Studio Mobile Center での UI テストの実行 (17) 1 2
  • 93.
    93 今回のテストでのデバイスの状態が確認できます。 1. CPU メモリの利用状況の推移を確認できます。 2.テストにかかった時間を確認できます。 3. [Logs] をクリックします。 Visual Studio Mobile Center での UI テストの実行 (18) 1 2 3
  • 94.
    94 デバイスログが確認できます。 1. [TEST FAILUTURES]をクリックします。 2. テスト失敗のログが表示されていることを確認します。 Visual Studio Mobile Center での UI テストの実行 (19) 1 2
  • 95.
    95 Visual Studio MobileCenter では、成果物をユーザーに配布することも行えます。 1. ブラウザーで Visual Studio Mobile Center にアクセスし、[Distribute アイコン] をクリックします。 2. [Distribute new release] をクリックします。 ユーザーへの配布 (1) 1 2
  • 96.
    96 1. パッケージを選択します。デスクトップの [App1.App1.apk]を選択します。少し待ってアップロード完了を確認します。 2. [Next] をクリックします。 3. [Release notes] には、[デモです。] と入力します。 4. [Next] をクリックします。 ユーザーへの配布 (2) 1 2 3 4
  • 97.
    97 1. 配布先のグループはデフォルトの [Collaborators]をクリックして選択します。 2. [Next] をクリックします。 3. [Distribute] をクリックして指定したグループにアプリケーションを配布をします。 ユーザーへの配布 (3) 2 3 1
  • 98.
    98 今回は、マイクロソフトアカウントに紐づいたメールボックスにメールが届いています。 1. 届いたメールの [Seedetails] をクリックします。 2. PC からアクセスすると、[Android デバイスからアクセスしないとインストールできない] 旨のメッセージが表示されて いることを確認します。実際には、Android 端末からアクセスするとアプリがインストールできます。 ユーザーへの配布 (4) 1 2
  • 99.
  • 100.
    100 手順書 • Team FoundationServer / 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 フォーム サンプル アプリケーション構築
  • 101.
    101 Visual Studio TeamServices 月額費用 Visual Studio Team Services のアカウント(テナント)と紐づいた Azure サブスクリプションに請求されます Visual Studio Team Services 料金詳細 https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-team-services/ 最初の 5 ユーザー 無料 ユーザー数 6 から 10 612円 / ユーザー ユーザー数 11 から 100 816円 / ユーザー ユーザー数 101 から 1000 408円 / ユーザー ユーザー数 1001 以上 204円 / ユーザー * MSDN Subscription にひもづいたアカウントは 課金対象としてカウントされません ユーザー Visual Studio Team Services の ビルドパイプラインを利用する場合 無料のビルドパイプライン *単一ジョブの最大実行時間 30 分 無料 有料のビルドパイプライン *単一ジョブの最大実行時間 360 分 4,080円 / パイプライン 自前のビルドサーバーを利用する場合 最初の1 つ目 無料 2 つ目以降 1,530円 / パイプライン* 2017年1月14日時点
  • 102.
    Visual Studio MobileCenter Preview 102 • ライフサイクルサービス ビルド、テスト、配布 • 監視サービス クラッシュログ収集、ログ分析 • モバイルバックエンドサービス 認証、DBテーブル <対象モバイルアプリケーション> iOS Android Windows Object-C Swift React Native Xamarin Java React Native Xamarin Coming Soon
  • 103.
    Visual Studio MobileCenter = Free (Preview 期間のみ) 103 機能 制限事項 Build 1ビルド最大30分。1アプリあたり 10ブランチまで Test 90 日トライアルとしてXamarin Test Cloud を利用 Distribute 2,000 テスターまで Crashes 30日間のデータ保持 Analytics
  • 104.
    ~ アプリケーション ライフサイクル全般をカバー ▶ ~開発に必要な機能を提供 ~ 様々な開発に対応した包括的な開発基盤 ~ 中小企業、オープン ソース開発、勉強向け ~ アプリの形態に限定された開発 ~ クロス プラットフォームのコード エディタ 104
  • 105.
    UML モデリング 構造分析 コードカバレッジ 静的コード分析* コードクローン分析 UI 自動テスト 探索的テスト コードレビュー* ストーリーボード* データベース開発 IntelliTrace™IntelliTrace Anywhere コードマップデバッガ .NETメモリダンプ解析 Web テスト/ロードテスト Fake Framework テストケース管理 テストケース管理/フィードバック プロファイル(CPU、メモリ、バッテリー消費)* 単体テスト* 要求管理 ソース管理/バグ管理 品質管理/サーバー ビルド タスク管理/レポーティング/プロジェクト ポータル/フィードバック IntelliTest テスト影響分析 CodeLens Include ファイル分析 Visual Studio 2015 エディション別 機能一覧 *Visual Studio Community での利用可能な機能 VS 2013 Ultimate 機能VS 2013 Premium 機能 VS 2015 新機能
  • 106.
    構造分析 コードカバレッジ 静的コード分析* コードクローン分析 UI 自動テスト 探索的テスト コードレビュー* ストーリーボード* データベース開発 IntelliTrace™ IntelliTraceAnywhere コードマップデバッガ .NETメモリダンプ解析 Web テスト/ロードテスト Fake Framework テストケース管理 テストケース管理/フィードバック プロファイル(CPU、メモリ、バッテリー消費)* 単体テスト* 要求管理 ソース管理/バグ管理 品質管理/サーバー ビルド タスク管理/レポーティング/プロジェクト ポータル/フィードバック IntelliTest テスト影響分析 CodeLens Include ファイル分析 Visual Studio 2017 エディション別 機能一覧 *Visual Studio Community での利用可能な機能 VS 2017 新機能 Live Unit Testing ライブ アーキテクチャの依存関係の検証 Xamarin Inspector Xamarin Profiler Xamarin Test Recorder 新インストーラー 起動速度の改善 IDE強化

Editor's Notes