SlideShare uma empresa Scribd logo
1 de 106
モバイルアプリケーション開発体験ハンズオン
~実装からビルド・テスト・ベータテスト配布まで~
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強化

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Team Foundation Server / Visual Studio Team Services によるプロジェクト管理・リポジトリ管理・継続的イ...
Team Foundation Server / Visual Studio Team Services によるプロジェクト管理・リポジトリ管理・継続的イ...Team Foundation Server / Visual Studio Team Services によるプロジェクト管理・リポジトリ管理・継続的イ...
Team Foundation Server / Visual Studio Team Services によるプロジェクト管理・リポジトリ管理・継続的イ...
 
Entity Framework 6.1.3 + Windows フォーム サンプル アプリケーション構築 手順書
Entity Framework 6.1.3 + Windows フォームサンプル アプリケーション構築手順書Entity Framework 6.1.3 + Windows フォームサンプル アプリケーション構築手順書
Entity Framework 6.1.3 + Windows フォーム サンプル アプリケーション構築 手順書
 
コーディング不要! Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書
コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書コーディング不要!Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書
コーディング不要! Entity Framework 6.1.3 + ASP.NET MVC 5 サンプル アプリケーション構築 手順書
 
Team Foundation Server / Visual Studio Team Services 手順書
Team Foundation Server /Visual Studio Team Services 手順書Team Foundation Server /Visual Studio Team Services 手順書
Team Foundation Server / Visual Studio Team Services 手順書
 
Team Foundation Server プロセステンプレートの変更 手順書
Team Foundation Server プロセステンプレートの変更 手順書Team Foundation Server プロセステンプレートの変更 手順書
Team Foundation Server プロセステンプレートの変更 手順書
 
Team Foundation Server 2015 による テスト工数削減
Team Foundation Server 2015 によるテスト工数削減Team Foundation Server 2015 によるテスト工数削減
Team Foundation Server 2015 による テスト工数削減
 
Team Founfation Server / Visual Studio Online ハンズオン トレーニング手順書
Team Founfation Server / Visual Studio Online  ハンズオン トレーニング手順書Team Founfation Server / Visual Studio Online  ハンズオン トレーニング手順書
Team Founfation Server / Visual Studio Online ハンズオン トレーニング手順書
 
Visual Studio 2017 と Team Foundation Server / Visual Studio Team Services で実現...
Visual Studio 2017 とTeam Foundation Server /Visual Studio Team Services で実現...Visual Studio 2017 とTeam Foundation Server /Visual Studio Team Services で実現...
Visual Studio 2017 と Team Foundation Server / Visual Studio Team Services で実現...
 
Team Foundation Server 2015 Update 3 アップグレード 手順書 ~ Team Foundation Server 201...
Team Foundation Server 2015 Update 3アップグレード 手順書~ Team Foundation Server 201...Team Foundation Server 2015 Update 3アップグレード 手順書~ Team Foundation Server 201...
Team Foundation Server 2015 Update 3 アップグレード 手順書 ~ Team Foundation Server 201...
 
もう怖くない! Team Foundation Server 2015 Update 1 ワークアイテム管理と テンプレートのカスタマイズ 概要
もう怖くない!Team Foundation Server 2015 Update 1 ワークアイテム管理とテンプレートのカスタマイズ 概要もう怖くない!Team Foundation Server 2015 Update 1 ワークアイテム管理とテンプレートのカスタマイズ 概要
もう怖くない! Team Foundation Server 2015 Update 1 ワークアイテム管理と テンプレートのカスタマイズ 概要
 
Team Foundation Server 2015 Update 2.1 アップグレード 手順書 ~ Team Foundation Server 2...
Team Foundation Server 2015 Update 2.1アップグレード 手順書~ Team Foundation Server 2...Team Foundation Server 2015 Update 2.1アップグレード 手順書~ Team Foundation Server 2...
Team Foundation Server 2015 Update 2.1 アップグレード 手順書 ~ Team Foundation Server 2...
 
Team Foundation Server 2015 Update 1 インストール 手順書
Team Foundation Server 2015 Update 1インストール 手順書Team Foundation Server 2015 Update 1インストール 手順書
Team Foundation Server 2015 Update 1 インストール 手順書
 
Team Foundation Server 2015 Update 2.1 インストール手順書~ SQL Server インストールから チームプロジェ...
Team Foundation Server 2015 Update 2.1 インストール手順書~ SQL Server インストールから チームプロジェ...Team Foundation Server 2015 Update 2.1 インストール手順書~ SQL Server インストールから チームプロジェ...
Team Foundation Server 2015 Update 2.1 インストール手順書~ SQL Server インストールから チームプロジェ...
 
「Entity Framework Coreを使ってみる」 公開用
「Entity Framework Coreを使ってみる」 公開用「Entity Framework Coreを使ってみる」 公開用
「Entity Framework Coreを使ってみる」 公開用
 
Team Foundation Server入門
Team Foundation Server入門Team Foundation Server入門
Team Foundation Server入門
 
Visual Studio Online BUILD を本気で使いこなして品質&効率を劇的に上げる! [ Comm Tech Festival ] C-4
Visual Studio Online BUILD を本気で使いこなして品質&効率を劇的に上げる! [ Comm Tech Festival ] C-4Visual Studio Online BUILD を本気で使いこなして品質&効率を劇的に上げる! [ Comm Tech Festival ] C-4
Visual Studio Online BUILD を本気で使いこなして品質&効率を劇的に上げる! [ Comm Tech Festival ] C-4
 
Windows Admin Center 2103.2 and Windows Admin Center on Azure
Windows Admin Center 2103.2 and Windows Admin Center on AzureWindows Admin Center 2103.2 and Windows Admin Center on Azure
Windows Admin Center 2103.2 and Windows Admin Center on Azure
 
Visual Studio Onlineを使ってみた
Visual Studio Onlineを使ってみたVisual Studio Onlineを使ってみた
Visual Studio Onlineを使ってみた
 
ネットワーク第5回
ネットワーク第5回ネットワーク第5回
ネットワーク第5回
 
はじめてのTeam Foundation ServerとVisual Studio Online
はじめてのTeam Foundation ServerとVisual Studio OnlineはじめてのTeam Foundation ServerとVisual Studio Online
はじめてのTeam Foundation ServerとVisual Studio Online
 

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

Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
 
Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka
Slug 3-windows phone7helloworld-classmethod-ryuichi-nonakaSlug 3-windows phone7helloworld-classmethod-ryuichi-nonaka
Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka
Ryuichi Nonaka
 
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
schoowebcampus
 
Andriod開発環境の構築
Andriod開発環境の構築Andriod開発環境の構築
Andriod開発環境の構築
Kimiyuki Yamauchi
 
JAZUG女子部 第2回勉強会 ハンズオン
JAZUG女子部 第2回勉強会 ハンズオンJAZUG女子部 第2回勉強会 ハンズオン
JAZUG女子部 第2回勉強会 ハンズオン
Kana SUZUKI
 
Windows Phoneの 企業内活用方法、 社内向けアプリ開発と展開
Windows Phoneの企業内活用方法、社内向けアプリ開発と展開Windows Phoneの企業内活用方法、社内向けアプリ開発と展開
Windows Phoneの 企業内活用方法、 社内向けアプリ開発と展開
Akira Onishi
 

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

Unity開発アプリに広告実装するよー!
Unity開発アプリに広告実装するよー!Unity開発アプリに広告実装するよー!
Unity開発アプリに広告実装するよー!
 
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
 
Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka
Slug 3-windows phone7helloworld-classmethod-ryuichi-nonakaSlug 3-windows phone7helloworld-classmethod-ryuichi-nonaka
Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka
 
C#版人狼知能エージェントの作り方~Visual Studio編~(AIWolf.NET 1.0.6版)
C#版人狼知能エージェントの作り方~Visual Studio編~(AIWolf.NET 1.0.6版)C#版人狼知能エージェントの作り方~Visual Studio編~(AIWolf.NET 1.0.6版)
C#版人狼知能エージェントの作り方~Visual Studio編~(AIWolf.NET 1.0.6版)
 
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
 
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
デブサミ2015「実践!クロスプラットフォーム モバイルアプリ開発」
 
[TL10] Azure IaaS 構築・運用・管理の専門家が語る DevTest Labs ~高速・費用無駄ナシ・簡単管理を実現する開発・テスト環境の構築~
[TL10] Azure IaaS 構築・運用・管理の専門家が語る DevTest Labs ~高速・費用無駄ナシ・簡単管理を実現する開発・テスト環境の構築~[TL10] Azure IaaS 構築・運用・管理の専門家が語る DevTest Labs ~高速・費用無駄ナシ・簡単管理を実現する開発・テスト環境の構築~
[TL10] Azure IaaS 構築・運用・管理の専門家が語る DevTest Labs ~高速・費用無駄ナシ・簡単管理を実現する開発・テスト環境の構築~
 
Androidプログラミング入門
Androidプログラミング入門Androidプログラミング入門
Androidプログラミング入門
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
 
Titanium
TitaniumTitanium
Titanium
 
PageWorks -- デザイナーの為のオープンソース簡単CMS
PageWorks -- デザイナーの為のオープンソース簡単CMSPageWorks -- デザイナーの為のオープンソース簡単CMS
PageWorks -- デザイナーの為のオープンソース簡単CMS
 
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdfコンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
 
Andriod開発環境の構築
Andriod開発環境の構築Andriod開発環境の構築
Andriod開発環境の構築
 
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 EastiOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
 
SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発
 
2022.04.23 .NET 6 -7 時代のデスクトップ アプリケーション開発
2022.04.23 .NET 6 -7 時代のデスクトップ アプリケーション開発2022.04.23 .NET 6 -7 時代のデスクトップ アプリケーション開発
2022.04.23 .NET 6 -7 時代のデスクトップ アプリケーション開発
 
JAZUG女子部 第2回勉強会 ハンズオン
JAZUG女子部 第2回勉強会 ハンズオンJAZUG女子部 第2回勉強会 ハンズオン
JAZUG女子部 第2回勉強会 ハンズオン
 
Windows Phoneの 企業内活用方法、 社内向けアプリ開発と展開
Windows Phoneの企業内活用方法、社内向けアプリ開発と展開Windows Phoneの企業内活用方法、社内向けアプリ開発と展開
Windows Phoneの 企業内活用方法、 社内向けアプリ開発と展開
 
.NET CoreとVS Codeで作る人狼知能
.NET CoreとVS Codeで作る人狼知能.NET CoreとVS Codeで作る人狼知能
.NET CoreとVS Codeで作る人狼知能
 
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
 

Mais de Masaki Takeda

BizSpark 経由での Microsoft Azure 有効化 & WordPress インストール
BizSpark 経由での Microsoft Azure 有効化 & WordPress インストールBizSpark 経由での Microsoft Azure 有効化 & WordPress インストール
BizSpark 経由での Microsoft Azure 有効化 & WordPress インストール
Masaki Takeda
 

Mais de Masaki Takeda (9)

マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio App Center, Azure Mobile Apps
マイクロソフトモバイルアプリ開発環境の全貌Xamarin, Visual Studio App Center, Azure Mobile Apps マイクロソフトモバイルアプリ開発環境の全貌Xamarin, Visual Studio App Center, Azure Mobile Apps
マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio App Center, Azure Mobile Apps
 
マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio Mobile Center, Azure Mobile Apps
マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio Mobile Center, Azure Mobile Apps マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio Mobile Center, Azure Mobile Apps
マイクロソフト モバイルアプリ開発環境の全貌 Xamarin, Visual Studio Mobile Center, Azure Mobile Apps
 
Xamarin 101 ~環境構築からビルド・テストまで~
Xamarin 101 ~環境構築からビルド・テストまで~Xamarin 101 ~環境構築からビルド・テストまで~
Xamarin 101 ~環境構築からビルド・テストまで~
 
WordPress 使いのためのMicrosoft Azure 超入門
WordPress 使いのためのMicrosoft Azure 超入門 WordPress 使いのためのMicrosoft Azure 超入門
WordPress 使いのためのMicrosoft Azure 超入門
 
MT東京-16 CMS夏祭り CMS をもっと便利にするマイクロソフトのサービス概要
MT東京-16 CMS夏祭り CMS をもっと便利にするマイクロソフトのサービス概要MT東京-16 CMS夏祭り CMS をもっと便利にするマイクロソフトのサービス概要
MT東京-16 CMS夏祭り CMS をもっと便利にするマイクロソフトのサービス概要
 
それでもボクはMicrosoft Azure を使う
それでもボクはMicrosoft Azure を使うそれでもボクはMicrosoft Azure を使う
それでもボクはMicrosoft Azure を使う
 
MTとAzure の素敵な関係@MTDDC Meetup Tohoku 2015
MTとAzure の素敵な関係@MTDDC Meetup Tohoku 2015MTとAzure の素敵な関係@MTDDC Meetup Tohoku 2015
MTとAzure の素敵な関係@MTDDC Meetup Tohoku 2015
 
BizSpark 経由での Microsoft Azure 有効化 & WordPress インストール
BizSpark 経由での Microsoft Azure 有効化 & WordPress インストールBizSpark 経由での Microsoft Azure 有効化 & WordPress インストール
BizSpark 経由での Microsoft Azure 有効化 & WordPress インストール
 
MTとAzureの素敵な関係 '14名古屋
MTとAzureの素敵な関係 '14名古屋MTとAzureの素敵な関係 '14名古屋
MTとAzureの素敵な関係 '14名古屋
 

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

  • 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 Mobile Center にログインしました。今回のハンズオン用のアプリケーションの設定を行います。 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 Mobile Center の設定は完了です。 次のスライドへ進んでください。 Visual Studio Mobile Center のアカウント作成 (5)
  • 9. 9 Visual Studio Mobile Center にログインしているユーザーパスワードを設定します。 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 your password] をクリックします。 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] は、[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. 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 Team Services のサインイン画面が表示されます。 1. Microsoft アカウントを入力します。 2. [次へ] をクリックします。 3. Microsoftアカウントのパスワードを入力します。 4. [サインイン]をクリックします。 Visual Studio Team Services のアカウント作成 (2) 3 4 1 2
  • 19. 19 1. [新しいアカウントの作成] をクリックします。 Visual Studio Team Services のアカウント作成 (3) 1
  • 20. 20 Visual Studio Team Services のアカウント作成画面が表示されます。 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 Team Services のアカウント作成が完了すると下記画面が表示されます。 今回は、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. Visual Studio の [ツールボックス] をクリックします。 2. [ツールボックス] の [Text(Large)] をクリックします。 3. [Text(Large)] をドラッグ & ドロップしてビューデザイナー上に配置します。 Xamarin.Android アプリ作成 (3) 31 2
  • 30. 30 Text コントロールのプロパティ値を設定します。 1. Visual Studio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。 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. Visual Studio の [ツールボックス] をクリックします。 2. [ツールボックス] の [Button] をクリックします。 3. [Button] をドラッグ & ドロップしてビューデザイナー上に配置します。 Xamarin.Android アプリ作成 (7) 3 1 2
  • 34. 34 Button コントロールのプロパティ値を設定します。 1. Visual Studio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。 2. [プロパティウインドウ] の [Main] にある [id] を [@+id/TranslateButton] と変更します。 3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [変換] と変更します。 4. ビューデザイナー上にあるボタンの文字が [変換] に変更されていることを確認します。 Xamarin.Android アプリ作成 (8) 4 1 2 3
  • 35. 35 最後に、Button コントロールをもう一つ配置します。 1. Visual Studio の [ツールボックス] をクリックします。 2. [ツールボックス] の [Button] をクリックします。 3. [Button] をドラッグ & ドロップしてビューデザイナー上に配置します。 Xamarin.Android アプリ作成 (9) 3 1 2
  • 36. 36 Button コントロールのプロパティ値を設定します。 1. Visual Studio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。 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にあります。 アクセスしてソースコードをコピーして、Visual Studio の [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 Studio Mobile Center でビルド - UI テストの作成 - Visual Studio Mobile Center での UI テストの実行 - ユーザーへの配布
  • 56. 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. 57 Visual Studio Mobile Center から 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
  • 62. 62 1. ダウンロード フォルダーにある [build.zip] を展開して、作成された [build] フォルダーの中にある [buildApp1.App1.apk] を [デスクトップフォルダー] にコピーします。 2. [デスクトップフォルダー] フォルダーの中に、[App1.App1.apk] があることを確認します。 Visual Studio Mobile Center でビルド (7) 1 2
  • 63. 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. 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 Test Recorderによる操作記録を開始します。[ソリューション エクスプローラー] をクリックします。 2. [Test.cs] をダブルクリックします。 3. [Xamarin Test Recorder] アイコンをクリックします。 UI テストの作成 (5) 3 2 1
  • 68. 68 1. [Record New Test] – [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 test run をクリックします。 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.1 OS のデバイスを 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 Mobile Center での 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 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. 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 Mobile Center では、成果物をユーザーに配布することも行えます。 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. 届いたメールの [See details] をクリックします。 2. PC からアクセスすると、[Android デバイスからアクセスしないとインストールできない] 旨のメッセージが表示されて いることを確認します。実際には、Android 端末からアクセスするとアプリがインストールできます。 ユーザーへの配布 (4) 1 2
  • 100. 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. 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日時点
  • 102. Visual Studio Mobile Center Preview 102 • ライフサイクルサービス ビルド、テスト、配布 • 監視サービス クラッシュログ収集、ログ分析 • モバイルバックエンドサービス 認証、DBテーブル <対象モバイルアプリケーション> iOS Android Windows Object-C Swift React Native Xamarin Java React Native Xamarin Coming Soon
  • 103. Visual Studio Mobile Center = 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™ 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強化

Notas do Editor