モバイルアプリ開発体験ハンズオンAndroid 編

2
目次 (1)
 環境構築編 4
 Visual Studio App Center のアカウント作成 5
 Android Emulator の準備 10
 Visual Studio Team Services のアカウント作成 15
 開発編 22
 Visual Studio と Git の接続 23
 Xamarin.Android アプリ作成 26
 プロファイリングの実行 44
 ソースコードのコミット 49
 自動ビルド・テスト・配布編 53
 Visual Studio App Center でビルド 54
 UI テストの作成 61
 Visual Studio App Center での UI テストの実行 74
 ユーザーへの配布 92

3
目次 (2)
 バックエンド構築編 96
 Mobile Apps の作成 97
 SQL Database の作成 103
 Xamarin + Mobile Apps サンプルの作成 109
 オフラインデータ同期編 119
 オフラインデータ同期がない場合の動作を確認 120
 オフラインデータ同期の有効化 121
 Xamarin.Forms編 125
 Xamarin.Forms アプリの作成 126
 DependencyService の実装 135
 Xamarin.Forms アプリの実行 145

4
環境構築編
- Visual Studio App Center のアカウント作成
- Android Emulator の準備
- Visual Studio Team Services のアカウント作成

5
1. ブラウザーで https://appcenter.ms/login にアクセスし、[Continue with Microsoft] をクリックしま
す。
Visual Studio App Center のアカウント作成 (1)
1

6
1. マイクロソフトアカウントを入力します。
2. [次へ] をクリックします。
3. パスワードを入力します。
4. [サインイン] をクリックします。
1
3
4
2

7
Visual Studio App Center にログインしました。今回のハンズオン用のアプリケーションの設定を行います。
1. 表示されている [username] の値を記録します。
2. [Choose username] をクリックします。
3. [Add new app] をクリックします。
3
2
1

8
1. [Name] には、[AndroidDemo] と入力します。
2. [OS] には、[Android] を選択します。
3. [Platform] には、[Xamarin] を選択します。
4. [Add new app] をクリックします。
1
2
3
4

9
下記の画面が表示されると、Visual Studio App Center の設定は完了です。
次のスライドへ進んでください。

10
今回のハンズオンで使用する Android Emulator を準備します。
1. Visual Studio を起動し、メニュー [ツール] をクリックします。
2. [Android] – [Android エミュレーターマネージャー] の順にクリックします。
Android Emulator の準備 (1)
2
1

11
Android エミュレーターマネージャーが起動します。
1. [Device Definition] をクリックします。
2. [Nexus 5 by Google] をクリックします。
3. [Create AVD...] をクリックします。
2
1
3

12
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] をクリックしてウインドウを閉じます。
2
1
3
4
5
6

13
Android Emulator を起動します。
1. 先ほど作成した AVD をクリックして選択します。
2. [Start] をクリックします。
3. [Launch] をクリックして、Android Emulator を起動します。
21
3

14
1. Android Emulator が起動し、Android の Welcome メッセージが表示されます。[GOT IT] をクリックします。
2. Android の画面が表示されていることを確認します。
2
1
Android Emulator は閉じないこと！

15
1. ブラウザーで https://www.visualstudio.com/ja-jp にアクセスし、[Sign in] をクリックします。
Visual Studio Team Services のアカウント作成 (1)
1

16
Visual Studio Team Services のサインイン画面が表示されます。
1. Microsoft アカウントを入力します。
3. Microsoftアカウントのパスワードを入力します。
4. [サインイン]をクリックします。
3
4
1
2

17
1. 詳細情報に関する画面が表示されます。[発信元] に [Japan] を選択します。
2. [続行]をクリックします。
1
2

18
1. [新しいアカウントの作成] をクリックします。
1

19
Visual Studio Team Services のアカウント作成画面が表示されます。
1. 任意のURLを入力します。
2. [Git] を選択します。
3. [詳細の変更]をクリックします。
2
3
1

20
1. プロジェクト名が [MyFirstProject] 、プロセステンプレート [Agile] となっている事を確認します。
2. [続行]をクリックして、Visual Studio Team Services のアカウントを作成します。
2
1
プロジェクト名は変更可能ですが、
本手順書では、デフォルトのままにします。

21
Visual Studio Team Services のアカウント作成が完了すると下記画面が表示されます。
今回は、MyFirstProject というチームプロジェクトをそのまま使用します。

開発編
- Visual Studio と Git の接続
- Xamarin.Android アプリ作成
- プロファイリングの実行
- ソースコードのコミット

23
1. [コピー] アイコンをクリックして、 Git の URL をコピーします。
2. Visual Studio を起動し、メニュー [表示] – [チームエクスプローラー] の順にクリックします。
3. [チームエクスプローラー] の [接続] アイコンをクリックします。
4. [ローカル Git リポジトリ] の [複製] をクリックします。
Visual Studio と Git の接続 (1)
1
4
2
3

24
Visual Studio 上に作成した Git リポジトリを複製します。
1. 先ほどコピーした URL を貼り付けします。
2. [複製] をクリックします。
3. [マイクロソフトアカウント] を入力します。
4. 続いて、[次へ] をクリックします。
2
1
4
3

25
1. [マイクロソフトアカウントのパスワード] を入力します。
2. 続いて、[サインイン] をクリックします。
3. Visual Studio のメニュー [表示] – [チームエクスプローラー] の順にクリックします。
4. Visual Studio のチームエクスプローラーの [新しいプロジェクトまたはソリューションを作成] をクリックします。
2
1
4
3

26
1. 新しいプロジェクトの作成画面が開きます。[Visual C#] の [Android] を選択します。
2. [空のアプリ]を選択します。
3. [ソリューションのディレクトリを作成]と[新しいGit リポジトリの作成] にチェックがはいっていることを確認します。
4. [OK] をクリックします。
Xamarin.Android アプリ作成 (1)
3
2
1
4

27
Xamarin.Android プロジェクトが作成されます。まずはビューデザイナーを起動します。
1. [ソリューションエクスプローラー] をクリックします。
2. [ソリューションエクスプローラー] にある[Resources] フォルダー – [layout] フォルダーを順にクリックします。
3. [Main.axml] をダブルクリックしてビューデザイナーを起動します。
3
1
2

28
まずは、Text コントロールを配置します。
1. Visual Studio の [ツールボックス] をクリックします。
2. [ツールボックス] の [Text(Large)] をクリックします。
3. [Text(Large)] をドラッグ & ドロップしてビューデザイナー上に配置します。
31
2

29
Text コントロールのプロパティ値を設定します。
1. Visual Studio のメニュー [表示] – [プロパティウインドウ] の順にクリックします。
2. [プロパティウインドウ] の [Main] にある [text] を [パスワードを入力] と変更します。
3. ビューデザイナー上にある[Large Text] の文字列が [パスワードを入力] に変更されていることを確認します。
3
1
2

30
続いては、Plain Text コントロールを配置します。
2. [ツールボックス] の [Plain Text] をクリックします。
3. [Plain Text] をドラッグ & ドロップしてビューデザイナー上に配置します。
3
1
2

31
Plain Text コントロールのプロパティ値を設定します。
2. [プロパティウインドウ] の [Main] にある [id] を [@+id/PhoneNumberText] と変更します。
3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [1-855-XAMARIN] と変更します。
4. ビューデザイナー上にある文字列が [1-855-XAMARIN] に変更されていることを確認します。
4
1
2
3

32
続いては、Button コントロールを配置します。
2. [ツールボックス] の [Button] をクリックします。
3. [Button] をドラッグ & ドロップしてビューデザイナー上に配置します。
3
1
2

33
Button コントロールのプロパティ値を設定します。
2. [プロパティウインドウ] の [Main] にある [id] を [@+id/TranslateButton] と変更します。
3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [変換] と変更します。
4. ビューデザイナー上にあるボタンの文字が [変換] に変更されていることを確認します。
4
1
2
3

34
最後に、Button コントロールをもう一つ配置します。
2. [ツールボックス] の [Button] をクリックします。
3. [Button] をドラッグ & ドロップしてビューデザイナー上に配置します。
3
1
2

35
Button コントロールのプロパティ値を設定します。
2. [プロパティウインドウ] の [Main] にある [id] を [@+id/CallButton] と変更します。
3. 同じく、[プロパティウインドウ] の [Main] にある [text] を [Call] と変更します。
4. ビューデザイナー上にあるボタンの文字が [Call] に変更されていることを確認します。
4
1
2
3

36
ビューデザイナーで配置したコントロールの挙動の実装を行います。
1. Visual Studio の [ソリューションエクスプローラー] のプロジェクト [App1] を右クリックします。
2. [追加] – [新しい項目] の順にクリックします。
1
2

37
1. 新しい項目の追加画面が開きます。[Visual C#] の [コード] を選択します。
2. [コードファイル] をクリックして選択します。
3. [名前] を [PhoneTranslator.cs] に変更します。
4. [追加] をクリックします。
1
2
3
4

38
1. [PhoneTranslator.cs] のソースコードは、
https://1drv.ms/t/s!AA8nkeSt8_2qnCQ にあります。
アクセスしてソースコードをコピーして、Visual Studio の [PhoneTranslator.cs] に貼り付けします。
2. [すべて保存] アイコンをクリックして、ソースコードを保存します。
1
2

39
1. 続いて、[MainActivity.cs] を編集します。ソースコードは、
https://1drv.ms/t/s!AA8nkeSt8_2qnCUにあります。
アクセスしてソースコードをコピーして、Visual Studio の [MainActivity.cs] を上書きする形で貼り付けします。
1
2

40
最後に、プロジェクトの設定を編集します。
1. Visual Studio の [ソリューションエクスプローラー] の [App1] の [Properties] をダブルクリックします。
2. [アプリケーション] の [Android バージョンを使用したコンパイル] を [Android 6.0] にします。
1
2

41
1. [Android マニフェスト] をクリックして選択します。
2. [必要なアクセス許可] の [CALL_PHONE] にチェックいれ、このアプリから電話発信を許可します。
3. 続いて、[必要なアクセス許可] の [INTERNET] にチェックいれ、このアプリからインターネットアクセスを許可します。
1
2
3

42
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] に変更されていることを確認します。
1 2
3
4
5

43
続いて、このアプリで電話発信が許可されていることを確認します。
1. [CALL 29873-3247854] ボタンをクリックします。
2. [Call …?] というポップアップウインドウが表示されていることを確認します。今回は[CANCEL] をクリックします。
3. Visual Studio で[デバッグの停止] アイコンをクリックして、デバッグ実行を終了します。
3
2
1

44
Xamarin Profiler を使用すると、Xamarinで作成したモバイルアプリケーションのプロファイリングが可能になります。
1. Visual Studio の [ツール] をクリックします。
2. [Xamarin Profiler] をクリックします。Xamarin Profiler が起動します。
3. [割り当て] をクリックして選択します。
4. [プロファイリングの開始] をクリックします。
プロファイリングの実行 (1)
2
1
3
4
クリックできない場合は、
スライド 49 に進んでください。

45
Xamarin Profiler が起動します。
1. [割り当て] をクリックします。
2. 詳細情報が表示されていることを確認します。
3. [X] をクリックして、 Xamarin Profiler を終了します。
1
2
3

46
1. Visual Studio の [ツール] をクリックします。
2. [Xamarin Profiler] をクリックします。Xamarin Profiler が起動します。
3. [時間プロファイラー] をクリックして選択します。
4. [プロファイリングの開始] をクリックします。
2
1
3
4

47
1. [時間プロファイラー] のCPU 時間が変化している前後をドラッグ＆ドロップします。
2. 詳細情報が表示されていることを確認します。
1
2

48
1. Android Emulator で [変換] ボタンをクリックします。
2. Xamarin Profiler の時間プロファイラーの CPU 時間が変化していることを確認します。
3. [X] をクリックして Xamarin Profiler を終了します。
1
2
3

49
1. リリース用の設定をします。Visual Studio プロジェクトのプロパティ画面で [Android オプション] をクリックします。
2. [構成] は [Release] を選択します。
3. [詳細設定] をクリックします。
4. [サポートされているアーキテクチャ] をクリックして、 [x86] と[x86_64] を追加します。
5. [閉じる] をクリックします。
ソースコードのコミット (1)
5
1
3
2
4
6

50
1. メニュー [表示] – [チームエクスプローラー] の順にクリックします。
2. [チームエクスプローラー] の [設定] をクリックします。
1
2

51
1. [グローバル設定] をクリックします。
2. [ユーザー名] を入力します。
3. [電子メールアドレス] には、今回使用しているMSアカウントを入力します。
4. [更新] をクリックします。
1
4
2
3
既に入力されている場合は、
次に進んでください。

52
1. [ホームアイコン] をクリックします。
2. [変更] をクリックします。
3. [コメント] には、[Xamarin.Android] と入力します。
4. [すべてをコミット] をクリックします。
5. コミットがローカルで作成されました。[同期] をクリックします。
6. 今回は [プッシュ] をクリックして、Visual Studio Team Services のリポジトリに Push します。
ここまで操作が完了したら、Visual Studio を終了してください！
1
4
2
3
5
6

自動ビルド・テスト・配布編
- Visual Studio App Center でビルド
- UI テストの作成
- Visual Studio App Center での UI テストの実行
- ユーザーへの配布

54
Visual Studio Team Services のソースコードを Visual Studio App Center でビルドして成果物をダウンロードします。
1. ブラウザーで Visual Studio App Center の画面に移動します。[Build] をクリックします。
2. 連携するコースコード管理サービスを選択します。[Visual Studio Team Services] をクリックします。
Visual Studio App Center でビルド (1)
2
1

55
Visual Studio App Center から Visual Studio Team Services へのアクセス承認画面が表示されます。
1. [承認] をクリックします。
1

56
1. チームプロジェクトを選択します。 [MyFirstProject] をクリックします。
2. 連携する Git リポジトリのリストが表示されます。[MyFirstProject] をクリックします。
1
2

57
1. ビルドするブランチを指定します。[master] をクリックします。
2. master ブランチでのビルド設定をします。[Configure build] をクリックします。
1 2

58
1. [Project] には、[App1.csproj] が選択されていることを確認します。
2. [Configuration] には、[Release] が選択されていることを確認します。
3. [Save & Build] をクリックします。
3
1
2

59
1. ビルドが自動的に開始されます。ビルドが成功したことを確認してクリックします。
2. ビルドが成功している場合は成果物をダウンロードできます。[Download] – [Download build] の順にクリックします。
1
2

60
1. ダウンロードフォルダーにある [App1.App1.apk] を [デスクトップフォルダー] にコピーします。
2. [デスクトップフォルダー] フォルダーの中に、[App1.App1.apk] があることを確認します。
1 2

61
Visual Studio App 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

62
Xamarin Test Recorder をインストールします。
1. ダウンロードフォルダーにある [Xamarin.TestRecorder.VSIX...vsix] をダブルクリックします。
2. [インストール] をクリックして、Xamarin Test Recorderインストールします。
3. Xamarin Test Recorder のインストールが完了したことを確認して、[閉じる] をクリックします。
2
3
1

63
1. Visual Studio を起動し、メニュー [ファイル] - [新規作成] – [プロジェクト] の順にクリックします。
1

64
1. 新しいプロジェクトの作成画面が開きます。[Visual C#] の [Android] を選択します。
2. [UIテストアプリ (Xamarin.UITest | Android)]を選択します。
3. [UI テストソリューションファイルの場所] をコピーしてメモ帳などに貼り付けます。
2
1
4
3

65
1. Xamarin Test Recorderによる操作記録を開始します。[ソリューションエクスプローラー] をクリックします。
2. [Test.cs] をダブルクリックします。
3. [Xamarin Test Recorder] アイコンをクリックします。
3
2
1

66
1. [Record New Test] – [Select APK] の順にクリックします。
2. Visual Studio App Center でのビルド成果物 [App1.App1.apk] を選択します。
3. [開く] をクリックします。Android Emulator にアプリがアップロードされます。
1
2
3

67
1. しばらく待つと、Visual Studio上にNewTest クラスが追加されることを確認します。
これで Xamarin Test Recorder の準備は完了です。Android Emulator 上での操作が記録されます。
1

68
Android Emulator 上での操作記録を実施します。
間違った操作をした場合は操作記録完了後にソースコードを削除してください。
1. Android Emulator 上で [1-855-XAMARIN] の文字をクリックします。
そして、文字列を削除し、[XamarinTest] と入力します。
2. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Take Screenshot] をクリックします。
1
2
Xamarin Test Recorder が上手く動作しない場合は、
https://1drv.ms/t/s!Ag8nkeSt8_2qnFleRBjGzcar2neN
からソースコードをコピーしてください。

69
続けて、Android Emulator 上での操作記録を実施します。
1. Android Emulator 上で [変換] ボタンをクリックします。
1
2

70
続けて、Android Emulator 上での操作記録を実施します。
1. Android Emulator 上で [CALL 92627468378] ボタンをクリックします。
1
2

71
1. Visual Studioで Xamarin Test Recorder のアイコンをクリックして、[Stop recording] をクリックします。
[NewTest] が下記の手順になっていることを確認します。
間違った操作をした場合はここで不要なソースコードを削除してください。
2
1

72
1. コードの修正を行います。[AppLaunches] は不要なのでコメントアウトします。
2. 評価式を追加します。47行目に下記のコードを追加します。
Call ボタンの文字列の評価式ですが、今回はテストを意図的に失敗するように “Test” という文字列を期待値として
もたせています。
2
1

73
1. Android Emulator 上で UI テストを実行します。26行目のコメントアウトを解除して、デスクトップにある APK
ファイルへのフルパスを記載します。.Apkfile (”C:/Users/(ユーザー名)/Desktop/App1.App1.apk”) のよう
に、”¥” ではなく “/” で記載してください。
3. メニュー [テスト] - [実行] - [すべてのテスト] の順にクリックして、UI テストを実行します。
4. Android Emulator 上で自動で操作されていることを確認します。
5. テスト結果は失敗となります。[NewTest] をダブルクリックして、追加した評価式が機能していることを確認します。
2
1
5
4

74
作成した UI テストを Visual Studio App Center 上で実行します。
1. 26行目のコメントアウトします。
Visual Studio App Center での UI テストの実行 (1)
2
1

75
作成した UI テストを Visual Studio App Center 上で実行できるようにパッケージをアップグレードします。
1. Visual Studio のメニュー [ツール] – [NuGet パッケージマネージャ] – [ソリューションの NuGet パッケージの管理]
の順にクリックします。
1

76
1. [Xamarin.UITest] をクリックして選択します。
2. [UITest1] プロジェクトにチェックをいれます。
3. [Xamarin.UITest] の [2.2.0] を選択します。⇒忘れずに！
4. [インストール] をクリックして Xamarin.UITest パッケージをインストールします。
5. インストールが完了すると、[出力] ウインドウに [パッケージが正常にインストールされました。] と表示されることを
確認します。
1
2
4
4
3

77
1. Visual Studio のメニュー [ビルド] – [ソリューションのビルド] の順にクリックして、ビルドを実行します。
Visual Studio App Center 上で UI テスト実行設定を行います。
2. ブラウザーで Visual Studio App Center にアクセスし、[Test アイコン] をクリックします。
3. [Start testing your app] をクリックして、UI テストを有効化します。
1
2
3

78
1. [Start 30-Day trial] をクリックします。
2. デバイスの選択画面が表示されます。[フィルター] アイコンをクリックします。
3. [OS Versions] をクリックします。
4. [Android 6.0.1] にチェックをいれます。
5. [X] をクリックしてフィルターを閉じます。
2
3
4
5
1

79
1. Android 6.0.1 OS のデバイスを 3 つ選択します。リストの上から 3 つ選択するとテスト実行時間の待ち時間が増える
場合があります。
2. [Select 3 devices] をクリックします。
1
2

80
1. [System launguage] は [Japanese (Japan)] を選択します。
2. [Test framework] は、[Xamarin.UITest] をチェックします。
3. [Next] をクリックします。
1
2
3

81
Visual Studio App Center での UI テストの実行手順の記載があることを確認します。
1. [Running tests] の [copy to clipcoard] をクリックしてコピーして、メモ帳などに貼り付けします。
2. [Done] をクリックします。
1
2

82
1. Node.js をインストールします。 https://nodejs.org/ja/download/ にアクセスして [Windows Installer] をクリッ
クし、Node.js インストーラーをダウンロードします。
1

83
1. ダウンロードした Node.js インストーラーをダブルクリックします。
2. Node.js のインストールウイザードに従って Node.js のインストールを
実施します。
1
2-1 2-2 2-3
2-4 2-5 2-6

84
1. App Center CLI をインストールします。Windows の検索ボックスで [cmd] と入力します。
2. 検索結果から [コマンドプロンプト] をクリックします。
3. コマンドプロンプト上で [npm install -g appcenter-cli] と入力してから [Enter キー] を押して、App Center CLI
をインストールします。
2
1

85
App Center CLI からログインコマンドを実行します。
1. コマンドプロンプト上で [appcenter login] と入力してから [Enter キー] を押します。
2. ブラウザーが開いてアクセスコードが表示されます。[コピーアイコン] をクリックしてアクセスコードをコピーします。
3. コマンドプロンプト上でアクセスコード貼り付けしてから [Enter キー] を押します。
4. [Loogin in as [ユーザー名]] と表示されていることを確認します。
1
3
2
4

86
App Center CLI から UI テストを実行します。
1. コマンドプロンプト上で [cd (スライド 64 [3] でコピーしたフォルダ)] と入力してから [Enter キー] を押し、プロ
ジェクトフォルダーに移動します。
2. 先ほどコピーしたコマンドを実行します。
• [pathToFile.apk] は、[C:¥Users¥(ユーザー名)¥Desktop¥App1.App1.apk] と置き換えます。
• [pathToUITestBuildDir] は、[UITest1¥UITest1¥bin¥Debug] と置き換えます。
3. 10 分程度待つとテストが終了します。今回は失敗していることを確認します。
1
2
3
実行に約 10 分かかります。
先にスライド 92 以降を進めてください。

87
1. UI テスト結果を確認します。ブラウザーで Visual Studio App Center にアクセスし、[Test] をクリックします。
2. 先ほどコマンドラインで実行した UI テストの結果が表示されています。クリックします。
1
2

88
1. UI テストのテスト結果の履歴が確認できます。今回のテスト結果を確認します。[New Test] をクリックします。
1

89
1. 今回のテスト結果の詳細が表示されます。[New Test] の一番下のステップをクリックします。
2. [左上のデバイス] をクリックして、失敗したテストのデバイスログを確認します。
1
2

90
今回のテストでのデバイスの状態が確認できます。
1. CPU メモリの利用状況の推移を確認できます。
2. テストにかかった時間を確認できます。
3. [Logs] をクリックします。
1
2
3

91
デバイスログが確認できます。
1. [TEST FAILUTURES] をクリックします。
2. テスト失敗のログが表示されていることを確認します。
1
2

92
Visual Studio App Center では、成果物をユーザーに配布することも行えます。
1. ブラウザーで Visual Studio App Center にアクセスし、[Distribute アイコン] をクリックします。
2. [Distribute new release] をクリックします。
ユーザーへの配布 (1)
1
2

93
1. パッケージを選択します。デスクトップの [App1.App1.apk] を選択します。少し待ってアップロード完了を確認します。
3. [Release notes] には、[デモです。] と入力します。
1
2
3
4

94
1. 配布先のグループはデフォルトの [Collaborators] をクリックして選択します。
3. [Distribute] をクリックして指定したグループにアプリケーションを配布をします。
2 3
1

95
今回は、マイクロソフトアカウントに紐づいたメールボックスにメールが届いています。
1. 届いたメールの [Install] をクリックします。
2. PC からアクセスすると、[Android デバイスからアクセスしないとインストールできない] 旨のメッセージが表示されて
いることを確認します。実際には、Android 端末からアクセスするとアプリがインストールできます。
1
2

96
バックエンド構築編
- Mobile Apps の作成
- SQL Database の作成
- Xamarin + Mobile Apps サンプルの作成
ここから先は、Microsoft Azure サブスクリプションが必要です。

97
1. ブラウザーで https://portal.azure.com にアクセスし、Azure ログイン可能なアカウントを入力します。
3. 入力したアカウントの種類によりリダイレクト先がかわります。リダイレクト先で、パスワードを入力します。
4. [サインイン] をクリックします。
Mobile Apps の作成 (1)
1
2
3
4

98
Azure Portal のダッシュボードが表示されます。
1. Dev Test Lab を作成します。[+新規] をクリックします。
1

99
1. [Web + モバイル] をクリックします。
2. [モバイルアプリ] をクリックします。
1
2

100
1. [アプリ名] には、任意の文字列でユニークな名前を入力します。
2. [リソースグループ] には、[新規作成] をクリックし、[MobileApp] と入力します。
3. [App Service プラン/場所] をクリックします。
4. [+新規作成] をクリックします。
1
2
3
4

101
1. [App Service プラン] には、[MobileApps] と入力します。
2. [場所] は、[Japan East (東日本)] を選択します。
3. [価格レベル] をクリックします。
4. [F1 Free] をクリックします。
5. [選択] をクリックします。
1
4
2
3
56

102
1. [作成] をクリックして Mobile Apps を作成します。
1

103
続いて、SQL Database を作成します。[+新規] をクリックします。
SQL Database の作成 (1)
1

104
1. [Databases] をクリックします。
2. [SQL Database] をクリックします。
1
2

105
1. [データベース名] には、[Backend] と入力します。
2. [リソースグループ] には、[既存のものを使用] をクリックし、[MobileApp] を選択します。
3. [サーバー] をクリックします。
4. [+新規作成] をクリックします。
1
2
3
4

106
1. [サーバー名] には、任意の文字列でユニークな名前を入力します。
2. [サーバー管理者ログオン] は、[azuredaisuki] と入力します。
3. [パスワード], [パスワードの確認] は、[Welcome00] と入力します。
4. [場所] は、[東日本] を選択します。
1
2
3
5
4

107
1. [価格レベル] をクリックします。
2. [価格レベル] は、[Basic] を選択します。
4. [作成] をクリックして、SQL Database を作成します。
1
4
3
2

108
SQL Database の作成には数分かかります。
1. SQL Database の作成完了を確認します。[通知アイコン] をクリックします。
2. [展開が成功しました] と表示されていることを確認します。
1
2

109
1. [すべてのリソース] をクリックします。
2. [App Service アイコン] の [Mobile Apps] をクリックします。
Xamarin + Mobile Apps サンプルの作成 (1)
1
2

110
1. [アプリスロット] の [1/0] をクリックします。
2. [先ほど作成した Mobile Apps の名前] をクリックします。
1
2

111
1. [クイックスタート] をクリックします。
2. [Xamarin.Android] をクリックします。
1
2

112
1. [データベースの接続] の赤枠の個所をクリックします。
2. [+追加] をクリックします。
3. [SQL Database] をクリックします。
4. [Backend] をクリックして選択します。
1
2
3
4

113
1. [接続文字列] をクリックします。
2. [SQL 管理ユーザー名] は、[azuredaisuki] と入力します。
3. [SQL 管理管理パスワード] は、[Welcome00] と入力します。
1
2
3
45

114
1. [MS_TableConnectionString] が追加されていることを確認します。
2. [X] をクリックしてブレードを閉じます。
3. [データベース接続が既に存在します] と表示されていることを確認します。
1
2
3

115
接続したデータベースにサンプル用のテーブルを作成します。
1. [バックエンド言語] は、[Node.js] を選択します。
2. [これにより、すべてのサイトコンテンツが…] にチェックをいれます。
3. [TodoItem テーブルの作成] をクリックして、テーブルを作成します。
4. [TodoItem テーブルが既に存在します] と表示されていることを確認します。
1
2
3
4

116
最後にモバイルアプリのサンプルプロジェクトをダウンロードします。
1. [新しいアプリの作成] をクリックします。
2. [ダウンロード] をクリックします。
3. [ダウンロード] フォルダにある [zip 形式のファイル] を右クリックします。
4. [すべて展開...] をクリックします。
Xamarin.Forms + Mobile Apps サンプルの作成 (8)
1
4
2
3

117
1. [展開] をクリックします。
2. 展開されたフォルダが新しいウインドウで開きます。[(作成した MobileApps の名前).sln] をダブルクリックします。
3. Visual Studio が起動します。セキュリティ警告ウインドウが表示されますが、[OK] をクリックします。
Xamarin+ Mobile Apps サンプルの作成 (9)
1
2
3

118
1. Visual Studio の [ソリューションエクスプローラー] の [Properties] をダブルクリックします。
2. [アプリケーション] の [Android バージョンを使用したコンパイル] を [Android 6.0] にします。
3. [AVD_for_Nexus_5…] をクリックして、モバイルアプリをデバッグ実行します。
4. エミュレータ上でアプリが起動したことを確認します。
1
2
3
4

119
オフラインデータ同期編
- オフラインデータ同期がない場合の動作を確認
- オフラインデータ同期の有効化

120
オフラインデータ同期がない場合の動作を確認 (1)
先ほどダウンロードしたサンプルアプリには、オフラインデータ同期のコードも組み込まれています。
1. お手元のマシンの Wifi をオフにします。Android エミュレータ上で実行しているアプリで [test] と入力します。
2. [Add] ボタンをクリックします。
3. [Error ウインドウ] が表示されることを確認します。お手元のマシンの Wifi をオンにします。
1
3
2

121
オフラインデータ同期の有効化 (1)
1. Visual Studio で [デバック実行の停止ボタン] をクリックします。
2. [ソリューションエクスプローラー] で [ToDoActivity.cs] をダブルクリックしてファイルを開きます。
3. 8行目のコメントを解除します。
1
3
2

122
1. Visual Studio のメニュー [ビルド] – [ソリューションのクリーン]の順にクリックします。
2. [AVD_for_Nexus_5…] をクリックして、モバイルアプリをデバッグ実行します。
1
2

123
1. お手元のマシンの Wifi をオフにします。Android エミュレータ上で実行しているアプリで [Offline] と入力します。
2. [Add] ボタンをクリックします。
3. しばらくすると[Error ウインドウ] が表示されます。メッセージが先ほどと異なっていることを確認します。
4. ローカルのデータベース (SQLite) に [Offiline] の文字がストアされていることを確認します。
2
1
4
3

124
1. お手元のマシンの Wifi をオンにします。Azure Portal に戻り、[クイックスタート] をクリックします。
2. [Easy Tables] をクリックします。
3. [TodoItem] をクリックします。
4. 先ほどローカルのデータベース (SQLite) に保存されたデータが SQL Database 上に保存されていることを確認します。
5. Visual Studio で [デバック実行の停止ボタン] をクリックします。
2
1
3
4
5

125
Xamarin.Forms 編
- Xamarin.Forms アプリの作成
- DependencyService の実装
- Xamarin.Forms アプリの実行

126
Xamarin.Forms アプリの作成 (1)
1. Visual Studio を起動します。[ファイル] - [新規作成] – [プロジェクト] の順にクリックします。
1

127
1. [Visual C#] – [Cross-Platform] の順にクリックします。
2. [Cross Platform App] をクリックします。
3. [名前] は、[Phoneword] に変更します。
1
3
2
4

128
1. テンプレートは、[Blank App] を選択します。
2. [Code Share Strategy] は、[PCL] を選択します。
3. [OK] をクリックして、プロジェクトを作成します。作成には少々時間がかかります。
1
2
3

129
1. まずはUI 部分を作成します。プロジェクト [Phoneword] の [MainPage.xaml] をダブルクリックします。
2. https://developer.xamarin.com/guides/xamarin-forms/getting-started/hello-xamarin-forms/quickstart/ の
Step 9 のコードをコピーして MainPage.xaml に上書きで貼り付けします。
1
2

130
MainPage.xaml.cs を編集します。
1. プロジェクト [Phoneword] の [MainPage.xaml] の左側にある [▷] – [MainPage.xaml.cs] の順にクリックします。
Step 11 のコードをコピーして MainPage.xaml.cs に上書きで貼り付けします。
1
2

131
App.xaml.cs を編集します。
プロジェクト [Phoneword] の [App.xaml] の左側にある [▷] – [App.xaml.cs] の順にクリックします。
Step 13 のコードをコピーして App.xaml.cs に上書きで貼り付けします。
1
2

132
1. Visual Studio の [ソリューションエクスプローラー] のプロジェクト [Phoneword] を右クリックします。
1
2

133
3. [名前] を [PhoneTranslator.cs] に変更します。
1
2
3
4

134
1. PhoneTranslator.cs を編集します。
2. プロジェクト [Phoneword] の [PhoneTranslator.cs] をダブルクリックします。
Step 16 のコードをコピーして PhoneTranslator.cs に貼り付けします。
1
2

135
共通コードからカメラなどのプラットフォーム固有機能を呼び出すには、DependencyService を使います。
1. Visual Studio の [ソリューションエクスプローラー] のプロジェクト [Phoneword] を右クリックします。
DependencyService の実装 (1)
1
2

136
2. [インターフェース] をクリックして選択します。
3. [名前] を [IDialer.cs] に変更します。
1
2
3
4

137
IDialer.cs を編集します。
プロジェクト [Phoneword] の [IDialer.cs] をダブルクリックします。
Step 19 のコードをコピーして IDialer.cs に上書きで貼り付けします。
12

138
Android のプラットフォーム固有機能を実装します。
1. Visual Studio の [ソリューションエクスプローラー] のプロジェクト [Phoneword.Android] を右クリックします。
1
2

139
3. [名前] を [PhoneDialer.cs] に変更します。
1
2
3
4

140
PhoneDialer.cs を編集します。
プロジェクト [Phoneword.Android] の [PhoneDialer.cs] をダブルクリックします。
Step 25 のコードをコピーして PhoneDialer.cs に貼り付けします。
1
2

141
プロジェクト [Phoneword.Android] の設定を編集します。
1. Visual Studio [ソリューションエクスプローラー] の [Phoneword.Android] の [Properties] をダブルクリックします。
2. [Android マニフェスト] をクリックして選択します。
3. [必要なアクセス許可] の [CALL_PHONE] にチェックいれ、このアプリから電話発信を許可します。
1
2
3

142
iOS のプラットフォーム固有機能を実装します。
1. Visual Studio の [ソリューションエクスプローラー] のプロジェクト [Phoneword.iOS] を右クリックします。
1
2

143
1. 新しい項目の追加画面が開きます。[Apple] の [Code] を選択します。
2. [クラス] をクリックして選択します。
3. [名前] を [PhoneDialer.cs] に変更します。
1
2
3
4

144
PhoneDialer.cs を編集します。
プロジェクト [Phoneword.iOS] の [PhoneDialer.cs] をダブルクリックします。
Step 22 のコードをコピーして PhoneDialer.cs に上書きで貼り付けします。
1
2

145
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] に変更されていることを確認してクリックします。
6. 電話発信の確認のポップアップウインドウが表示されていることを確認します。
Xamarin.Forms アプリの実行 (1)
1 2
3
4
5
6

モバイルアプリ開発体験ハンズオン Android 編

More Related Content

What's hot

Similar to モバイルアプリ開発体験ハンズオン Android 編

More from Masaki Takeda

Recently uploaded