初めてのアプリを構築する

このチュートリアルでは、Windows の Visual Studio 2022 または Windows、macOS、または Linux の Visual Studio Code で、初めての .NET マルチプラットフォーム アプリ UI (.NET MAUI) アプリを作成して実行する方法について説明します。 これは、開発環境が正しく設定されていることを確認するのに役立ちます。

Visual Studio

前提条件

• Visual Studio 2022 17.12 以降。.NET マルチプラットフォーム アプリ UI ワークロードがインストールされています。 詳細については、インストール を参照してください。

アプリを作成する

このチュートリアルでは、Visual Studio 2022 で初めての .NET MAUI アプリを作成し、Android エミュレーターで実行します。

Windows で iOS 用の .NET MAUI アプリを開発するには、Mac ビルド ホストが必要です。 特に iOS をターゲットにする必要がなく、Mac がない場合は、代わりに Android または Windows から開始することを検討してください。

このチュートリアルでは、Visual Studio で初めての .NET MAUI アプリを作成し、iOS シミュレーターで実行します。

このチュートリアルでは、Visual Studio 2022 で初めての .NET MAUI アプリを作成し、Windows で実行します。

1. Visual Studio 2022 を起動します。 [スタート] ウインドウで、[新しいプロジェクトの作成] をクリックして新しいプロジェクトを作成します。

   

2. [新しいプロジェクトの作成] ウィンドウの [すべてのプロジェクトの種類] ドロップダウンで [MAUI] を選択し、[.NET MAUI アプリ] テンプレートを選択し、[次へ] ボタンをクリックします。

   

3. [新しいプロジェクトの構成] ウィンドウで、プロジェクトの名前を指定し、適切な場所を選んで、[次へ] ボタンをクリックします。

   

4. [追加情報] ウィンドウで、対象とする .NET のバージョンを選択し、[作成] ボタンをクリックします。

   

5. プロジェクトが作成され、その依存関係が復元されるまで待ちます。

   

6. Visual Studio のツール バーで、[デバッグ ターゲット] ドロップダウンを使用して [Android エミュレーター] を選択し、[Android エミュレーター] エントリを選択します。

   

7. Visual Studio のツール バーで [Android エミュレーター] ボタンを押します。

   

   Visual Studio は、既定の Android SDK と Android Emulator をインストールするプロセスを開始します。

8. [Android SDK - ライセンス契約] ウィンドウで、[同意する] ボタンを押します。

   

9. [ユーザー アカウント制御] ダイアログで、[はい] ボタンを押します。

   

   Visual Studio が既定の Android SDK と Android Emulator をダウンロードするまで待ちます。

10. [ユーザー アカウント制御] ダイアログで、[はい] ボタンを押します。

    

11. Android SDK プラットフォームが見つかりません ダイアログで、Install ボタンを押します。

    

12. [Android SDK - ライセンス契約] ウィンドウで、[同意する] ボタンを押します。

    

    Visual Studio が Android SDK コンポーネントをインストールするまで待ちます。

13. [新しいデバイス] ウィンドウで、[作成] ボタンを押します。

    

    Visual Studio によって Android エミュレーターがダウンロード、解凍、作成されるのを待ちます。

14. [Android Device Manager] ウィンドウを閉じます。

    

15. Visual Studio ツール バーで、 Pixel 7 - API 35 (Android 15.0 - API 35) ボタンを押します。

    

16. [Android SDK - ライセンス契約] ウィンドウで、[同意する] ボタンを押します。

    

17. [ユーザー アカウント制御] ダイアログで、[はい] ボタンを押します。

    

    Visual Studio がインストールされ、Android SDK がダウンロードされるまで待ちます。

18. Visual Studio ツール バーで、 Pixel 7 - API 35 (Android 15.0 - API 35) ボタンを押して、アプリをビルドして実行します。

    

    Visual Studio で Android エミュレーターが起動し、アプリがビルドされて、エミュレーターにデプロイされます。

    警告

    Android エミュレーターのパフォーマンスを最大化するには、ハードウェア アクセラレーションを有効にする必要があります。 これを行わないと、エミュレーターの実行速度が遅くなります。 詳細については、「Android エミュレーター (Hyper-V と AEHD) でハードウェア アクセラレーションを有効にする方法」を参照してください。

19. Android エミュレーターで実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。

    

トラブルシューティング

アプリのコンパイルに失敗した場合は、「Troubleshooting known issues」をご覧ください。問題の解決策が見つかる可能性があります。 問題が Android エミュレーターに関連する場合は、「Android Emulator のトラブルシューティング」をご覧ください。

6. Visual Studio ツール バーで、[Windows マシン] ボタンを押してアプリをビルドして実行します。

   

7. 実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。

   

トラブルシューティング

アプリのコンパイルに失敗した場合は、「Troubleshooting known issues」をご覧ください。問題の解決策が見つかる可能性があります。

6. Visual Studio で、IDE を Mac ビルド ホストとペアリングします。 詳細については、「iOS 開発のために Mac とペアリングする」をご覧ください。

7. Visual Studio のツールバーで、[デバッグ ターゲット] ドロップダウンを使用して [iOS シミュレーター] を選択し、次に特定の iOS シミュレーターを選択します。

   

8. Visual Studio ツールバーで、選択した iOS シミュレーターの [開始] ボタンを押して、アプリをビルドして実行します。

   

   Visual Studio はアプリをビルドし、Windows 用のリモート iOS シミュレーターを起動し、リモート シミュレーターにアプリをデプロイします。 Windows 用のリモート iOS シミュレーターの詳細については、「Remote iOS Simulator for Windows」をご覧ください。

9. 実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。

   

トラブルシューティング

アプリのコンパイルに失敗した場合は、「Troubleshooting known issues」をご覧ください。問題の解決策が見つかる可能性があります。

Mac Catalyst を対象とする .NET MAUI アプリは、Visual Studio Code を使用してのみ起動およびデバッグできます。

Visual Studio Code

前提条件

• .NET MAUI 拡張機能がインストールされ、構成されている Visual Studio Code:
  • C# Dev Kit に接続されている Microsoft アカウント。
  • インストールされている .NET SDK。
  • .NET MAUI SDK がインストールされています。
  • Apple プラットフォームをターゲットにする場合は、シミュレーター ランタイムや Xcode コマンド ライン ツールを含む Xcode が Mac にインストールされている必要があります。
  • Microsoft OpenJDK、Android SDK、および Android を対象とする場合は、コンピューターにインストールされている Android エミュレーター。

詳細については、インストール を参照してください。

アプリを作成する

このチュートリアルでは、Visual Studio Code で初めての .NET MAUI アプリを作成し、Android エミュレーターで実行します。

このチュートリアルでは、Mac 上の Visual Studio Code で初めての .NET MAUI アプリを作成し、iOS シミュレーターで実行します。

このチュートリアルでは、Mac 上の Visual Studio Code で初めての .NET MAUI アプリを作成し、macOS で実行します。

このチュートリアルでは、Windows 上の Visual Studio Code で最初の .NET MAUI アプリを作成し、Windows で実行します。

1. Visual Studio Code を起動します。 エクスプローラーので、[.NET プロジェクトの作成]を押します。

   

   または、Windows では CTRL+SHIFT+P を、macOS では CMD+SHIFT+P を押してから .NET: New Project... コマンドを実行します。

2. コマンド パレットで、.NET MAUI App テンプレート 選択します。

   

3. [プロジェクトの場所 ダイアログで、新しいプロジェクトを作成する場所を選択します。

   大事な

   プロジェクトは空のフォルダーに作成する必要があります。

4. コマンド パレットで、新しいプロジェクトの名前を入力し、enter押します。

   

5. コマンド パレットで、[プロジェクトの作成]押します。

   

   プロジェクトが作成されるまで待ち、必要に応じてフォルダーを信頼できる場所として受け入れます。

6. エクスプローラーので、プロジェクトのルート ノードを展開し、MainPage.xaml.csなどの C# ファイルを開きます。

   

7. Visual Studio Code で、Windows の場合は Ctrl + Shift + P、macOS の場合は CMD + SHIFT + P を押し、.NET MAUI: Android の構成を選択し、その後 Android 環境の更新を実行することで、Android 環境が正しく構成されていることを確認します。 検出されたエラーに対処する必要があります。

8. Visual Studio Code の下部にあるステータス バーで、{ } 中かっこ記号を押し、デバッグ ターゲット が特定の Android エミュレーターに設定されていることを確認します。

   

   デバッグ ターゲットを設定するには、Windows では Ctrl + Shift + P を、macOS では CMD + Shift + P を押して、コマンド パレットから .NET MAUI: Pick Android Device を選択します。

9. F5 押すか、Visual Studio Code の右上隅にある [ 実行] ボタンを押して、Android でアプリをビルドして実行します。

   

   コマンド パレットでデバッガーを選択するように求められた場合は、C# を選択し、プロジェクトの起動構成を選択します。

10. 選択した Android エミュレーターで実行中のアプリで、[クリック] ボタンを数回押し、ボタンのクリック回数が増加していることを確認します。

    

Android デバイスでアプリをデバッグする

Android デバイスでアプリをデバッグするには:

1. デバイスがデプロイ用に設定されていることを確認します。 詳細については、「展開用にデバイスを設定する」を参照してください。
2. デバイスをコンピューターに接続し、Visual Studio Code でデバッグ ターゲットとして選択します。
3. アプリを実行します。

7. Visual Studio Code で、CMD+SHIFT+P キーを押し、[.NET MAUI: Apple の構成]を選択した後、[Apple 環境の更新]を実行して、Apple 環境が正しく構成されていることを確認します。 検出されたエラーに対処する必要があります。

8. Visual Studio Code の下部にあるステータス バーで、{ } 中かっこ記号を押し、デバッグ ターゲット が特定の iOS シミュレーターに設定されていることを確認します。

   

   また、CMD+SHIFT+P を押してコマンド パレットから .NET MAUI: Pick iOS Device を選択することで、デバッグターゲットを設定することもできます。

9. f5 押すか、Visual Studio Code の右上隅にある [実行] ボタンを押して、iOS でアプリをビルドして実行します。

   

   コマンド パレットでデバッガーを選択するように求められた場合は、C# を選択し、プロジェクトの起動構成を選択します。

10. 選択した iOS シミュレーターで実行中のアプリで、[私をクリック] ボタンを数回押し、ボタンのクリック数が増加していることを観察します。

    

iOS デバイスでアプリをデバッグする

iOS デバイスでアプリをデバッグするには:

1. Xcode > 設定 > アカウント で、Apple ID を Xcode に追加していることを確認します。
2. Apple Developer Program に属している場合は、デバイスがチームに登録されていることを確認します。
3. デバイスで開発者モードを有効にします。 アプリを初めて実行するときに、デバイスにポップアップが表示される場合があります。[許可] を選択してください。 開発者モードの詳細については、「developer.apple.com のデバイス で開発者モードを有効にする を参照してください。
4. デバイスをコンピューターに接続し、Visual Studio Code でデバッグ ターゲットとして選択します。
5. アプリを実行します。

7. Visual Studio Code で、CMD+SHIFT+P キーを押し、[.NET MAUI: Apple の構成]を選択した後、[Apple 環境の更新]を実行して、Apple 環境が正しく構成されていることを確認します。 検出されたエラーに対処する必要があります。

8. Visual Studio Code の下部にあるステータス バーで、{ } 中かっこ記号を押し、デバッグ ターゲット が Mac に設定されていることを確認します。

   

   また、CMD + SHIFT + P 押し、コマンド パレットから [.NET MAUI: Pick macOS Device] 選択することで、デバッグ ターゲットを設定することもできます。

9. f5 押すか、Visual Studio Code の右上隅にある [実行] ボタンを押して、macOS でアプリをビルドして実行します。

   

   コマンド パレットでデバッガーを選択するように求められた場合は、C# を選択し、プロジェクトの起動構成を選択します。

10. 実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。

    

7. Visual Studio Code の下部にあるステータス バーで、{ } 中かっこ記号を押し、デバッグ ターゲット が Windows に設定されていることを確認します。

   

   また、ctrl + Shift + P 押し、コマンド パレットから [.NET MAUI: Pick Windows Device]\(.NET MAUI: Windows デバイスの選択\) 選択することで、デバッグ ターゲットを設定することもできます。

8. F5 押すか、Visual Studio Code の右上隅にある [ の実行] ボタンを押して、Windows でアプリをビルドして実行します。

   

   コマンド パレットでデバッガーを選択するように求められた場合は、C# を選択し、プロジェクトの起動構成を選択します。

9. 実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。

   

トラブルシューティング

アプリのビルドとデプロイに失敗した場合は、既知の問題のトラブルシューティングを確認してください。問題の解決策が得られる可能性があります。

次のステップ

このチュートリアルでは、初めての .NET Multi-platform App UI (.NET MAUI) アプリを作成して実行する方法について説明しました。

.NET MAUI を使用してアプリを構築する際の基礎については、「.NET MAUI アプリを作成する」をご覧ください。 または、完全な .NET MAUI トレーニング コースについては、「.NET MAUI を使用してモバイルおよびデスクトップ アプリを構築する」をご覧ください。