最初の Xamarin.Forms アプリをビルドする

  • [アーティクル]

Windows での手順の詳細

上記のビデオと共に以下の手順に従います。

  1. [ファイル] > [新規] > [プロジェクト...] の順に選択するか、[新しいプロジェクトの作成...] ボタンを押します。

  2. "Xamarin" を検索するか、 [プロジェクト タイプ] メニューから [モバイル] を選択します。 プロジェクト タイプ [モバイル アプリ (Xamarin.Forms)] を選択します。

  3. プロジェクト名を選択します。この例では "AwesomeApp" が使用されています。

  4. 空のプロジェクト タイプをクリックして、確実に [Android] と [iOS] が選択されているようにします。

    Android と iOS の空のアプリ

  5. NuGet パッケージが復元される (ステータス バーに "復元が完了しました" メッセージが表示される) まで待ちます。

  6. 新しい Visual Studio 2022 のインストールでは Android SDK がインストールされません。次のように、最新の Android SDK をインストールするように求めるダイアログが表示される場合があります。

    Android SDK のインストール

  7. 新しい Visual Studio 2022 のインストールには、Android エミュレーターが構成されていません。 [デバッグ] ボタンのドロップダウン矢印をクリックし、 [Android Emulator の作成] を選択して、エミュレーターの作成画面を起動します。

    [Android Emulator の作成] ドロップダウン

  8. エミュレーターの作成画面で、既定の設定を使用して、 [作成] ボタンをクリックします。

    Android エミュレーターの作成画面

  9. エミュレーターを作成すると、[デバイス マネージャー] ウィンドウに戻ります。 [開始] ボタンをクリックして、新しいエミュレーターを起動します。

    デバイス マネージャーの Android エミュレーター

  10. Visual Studio 2022 では次のように [デバッグ] ボタンに新しいエミュレーターの名前が表示されるようになりました。

    [デバッグ] ボタン上の Android エミュレーター名

  11. [デバッグ] ボタンをクリックして、アプリケーションをビルドし、Android エミュレーターにデプロイします。

    アプリケーションを表示している Android エミュレーター

アプリケーションをカスタマイズする

アプリケーションをカスタマイズして、対話機能を追加することができます。 アプリケーションにユーザーの操作を追加するには、次の手順を実行します。

  1. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Android 上のアプリのデバッグ:

    ボタン付き Android アプリ

Visual Studio 2022 で iOS アプリをビルドする

ネットワーク接続された Mac コンピューターで Visual Studio から iOS アプリをビルドし、デバッグすることができます。 詳細については、セットアップ手順を参照してください。

Windows での手順の詳細

上記のビデオと共に以下の手順に従います。

  1. [ファイル]、[新規]、[プロジェクト] の順に選択するか、[新しいプロジェクトの作成] ボタンを押します。

    新しいプロジェクトを作成する

  2. "Xamarin" を検索するか、 [プロジェクト タイプ] メニューから [モバイル] を選択します。 プロジェクト タイプ [モバイル アプリ (Xamarin.Forms)] を選択します。

    Xamarin プロジェクトのフィルター

  3. プロジェクト名を選択します。この例では "AwesomeApp" が使用されています。

    プロジェクト名の選択

  4. 空のプロジェクト タイプをクリックして、確実に [Android] と [iOS] が選択されているようにします。

    Android および iOS と .NET Standard

  5. NuGet パッケージが復元される (ステータス バーに "復元が完了しました" メッセージが表示される) まで待ちます。

  6. 新しい Visual Studio 2019 のインストールには、Android エミュレーターが構成されていません。 [デバッグ] ボタンのドロップダウン矢印をクリックし、 [Android Emulator の作成] を選択して、エミュレーターの作成画面を起動します。

    [Android Emulator の作成] ドロップダウン

  7. エミュレーターの作成画面で、既定の設定を使用して、 [作成] ボタンをクリックします。

    Android エミュレーターの作成画面

  8. エミュレーターを作成すると、[デバイス マネージャー] ウィンドウに戻ります。 [開始] ボタンをクリックして、新しいエミュレーターを起動します。

    デバイス マネージャーの Android エミュレーター

  9. Visual Studio 2019 では [デバッグ] ボタンに新しいエミュレーターの名前が表示されるようになりました。

    [デバッグ] ボタン上の Android エミュレーター名

  10. [デバッグ] ボタンをクリックして、アプリケーションをビルドし、Android エミュレーターにデプロイします。

    アプリケーションを表示している Android エミュレーター

アプリケーションをカスタマイズする

アプリケーションをカスタマイズして、対話機能を追加することができます。 アプリケーションにユーザーの操作を追加するには、次の手順を実行します。

  1. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。

    <Button Text="Click Me" Clicked="Button_Clicked" />

  2. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。

    int count = 0;
void Button_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  3. Android 上のアプリのデバッグ:

    Android アプリ

Note

このサンプル アプリケーションには、ビデオで説明されていない追加の対話機能が含まれています。

Visual Studio 2019 で iOS アプリをビルドする

ネットワーク接続された Mac コンピューターで Visual Studio から iOS アプリをビルドし、デバッグすることができます。 詳細については、セットアップ手順を参照してください。

このビデオでは、Windows で Visual Studio 2019 を使用して iOS アプリをビルドおよびテストするプロセスについて説明しています。

Mac での手順の詳細

上記のビデオと共に以下の手順に従います。

  1. [ファイル]、[新しいソリューション] の順に選択するか、[新しいプロジェクト] ボタンをクリックし、[マルチプラットフォーム]、[アプリ]、[空白フォームのアプリ] の順に選択します。

    空白フォームのアプリ

  2. 次のように [Android] と [iOS] が選択されていることを確認します。

    Android および iOS と .NET Standard

注意

[アプリケーション名] と [組織の識別子] でサポートされている文字は、A-Z、a-z、'_'、'.'、および数字のみです。

  1. ソリューションを右クリックして、NuGet パッケージを復元します。

    スクリーンショットでは、ソリューションのコンテキスト メニューから選択された [NuGet パッケージの復元] が表示されています。

  2. デバッグ ボタン (または [実行]、[デバッグ開始]) をクリックして、Android エミュレーターを起動します。

  3. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Android 上のアプリのデバッグ:

    スクリーンショットには Android Emulator が表示されています。

  6. 右クリックして、iOS をスタートアップ プロジェクトに設定します。

    スタートアップ プロジェクトを iOS に設定する

  7. ドロップダウンから iOS シミュレーターを選択し、iOS でアプリをデバッグします。

Mac での手順の詳細

上記のビデオと共に以下の手順に従います。

  1. [ファイル]、[新しいソリューション] の順に選択するか、[新しいプロジェクト] ボタンをクリックし、[マルチプラットフォーム]、[アプリ]、[空白フォームのアプリ] の順に選択します。

    空白フォームのアプリ

  2. .NET Standard コード共有と共に、 [Android] と [iOS] が確実に選択されているようにします。

    Android および iOS と .NET Standard

注意

[アプリケーション名] と [組織の識別子] でサポートされている文字は、A-Z、a-z、'_'、'.'、および数字のみです。

  1. ソリューションを右クリックして、NuGet パッケージを復元します。

    スクリーンショットでは、ソリューションのコンテキスト メニューから選択された [NuGet パッケージの復元] が表示されています。

  2. デバッグ ボタン (または [実行]、[デバッグ開始]) をクリックして、Android エミュレーターを起動します。

  3. MainPage.xaml を編集し、</StackLayout> の末尾の前にこの XAML を追加します。

    <Button Text="Click Me" Clicked="Handle_Clicked" />

  4. MainPage.xaml.cs を編集し、クラスの末尾にこのコードを追加します。

    int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

  5. Android 上のアプリのデバッグ:

    スクリーンショットには Android Emulator が表示されています。

  6. 右クリックして、iOS をスタートアップ プロジェクトに設定します。

    スタートアップ プロジェクトを iOS に設定する

  7. iOS 上のアプリのデバッグ:

    iOS アプリ

完成したコードは GitHub で確認できます。

次のステップ