初めてのアプリを構築する
[アーティクル]
03/12/2024
4 人の共同作成者
フィードバック
この記事の内容
このチュートリアルでは、Windows 上の Visual Studio 2022 または Visual Studio 2022 for Mac で初めての .NET Multi-platform App UI (.NET MAUI) アプリを作成して実行する方法について説明します。 これは、開発環境が正しく設定されていることを確認するのに役立ちます。
前提条件
Visual Studio 2022 17.8 以降で、.NET Multi-platform App 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 で実行します。
Visual Studio 2022 を起動します。 [スタート] ウインドウで、[新しいプロジェクトの作成] をクリックして新しいプロジェクトを作成します。
[新しいプロジェクトの作成] ウィンドウの [すべてのプロジェクトの種類] ドロップダウンで [MAUI] を選択し、[.NET MAUI アプリ] テンプレートを選択し、[次へ] ボタンをクリックします。
[新しいプロジェクトの構成] ウィンドウで、プロジェクトの名前を指定し、適切な場所を選んで、[次へ] ボタンをクリックします。
[追加情報] ウィンドウで、対象とする .NET のバージョンを選択し、[作成] ボタンをクリックします。
プロジェクトが作成され、その依存関係が復元されるまで待ちます。
Visual Studio のツール バーで、[デバッグ ターゲット] ドロップダウンを使用して [Android エミュレーター] を選択し、[Android エミュレーター] エントリを選択します。
Visual Studio のツール バーで [Android エミュレーター] ボタンを押します。
Visual Studio は、既定の Android SDK と Android エミュレーターのインストールを開始します。
[Android SDK - ライセンス契約] ウィンドウで、[同意する] ボタンを押します。
[Android SDK - ライセンス契約] ウィンドウで、[同意する] ボタンを押します。
[ユーザー アカウント制御] ダイアログで、[はい] ボタンを押します。
[ライセンスの同意] ウィンドウで、[同意する] ボタンを選びます。
Visual Studio によって Android SDK と Android Emulator がダウンロードされるのを待ちます。
Visual Studio のツール バーで [Android エミュレーター] ボタンを押します。
Visual Studio では、既定の Android エミュレーターの作成が開始されます。
[ユーザー アカウント制御] ダイアログで、[はい] ボタンを押します。
[新しいデバイス] ウィンドウで、[作成] ボタンを押します。
Visual Studio によって Android エミュレーターがダウンロード、解凍、作成されるのを待ちます。
[Android Device Manager] ウィンドウを閉じます。
Visual Studio ツール バーで、Pixel 5 - API 34 (Android 14.0 - API 33) ボタンを押して、アプリをビルドして実行します。
Visual Studio で Android エミュレーターが起動し、アプリがビルドされて、エミュレーターにデプロイされます。
Android エミュレーターで実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。
トラブルシューティング
アプリのコンパイルに失敗した場合は、「Troubleshooting known issues 」をご覧ください。問題の解決策が見つかる可能性があります。 問題が Android エミュレーターに関連する場合は、「Android Emulator のトラブルシューティング 」をご覧ください。
Visual Studio のツール バーで、[デバッグ ターゲット] ドロップダウンを使用して [フレームワーク] を選択し、次に net8.0-windows エントリを選択します。
Visual Studio ツール バーで、[Windows マシン] ボタンを押してアプリをビルドして実行します。
開発者モードを有効にしていない場合は、Visual Studio で有効にするように求められます。 [Windows の開発者モードを有効にする] ダイアログで、[開発者向け設定] をクリックして設定アプリを開きます。
設定アプリで [開発者モード] をオンにして、免責事項に同意します。
設定アプリを閉じ、[Windows の開発者モードを有効にする] ダイアログを閉じます。
実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。
トラブルシューティング
アプリのコンパイルに失敗した場合は、「Troubleshooting known issues 」をご覧ください。問題の解決策が見つかる可能性があります。
Visual Studio で、IDE を Mac ビルド ホストとペアリングします。 詳細については、「iOS 開発のために Mac とペアリングする 」をご覧ください。
Visual Studio のツールバーで、[デバッグ ターゲット] ドロップダウンを使用して [iOS シミュレーター] を選択し、次に特定の iOS シミュレーターを選択します。
Visual Studio ツールバーで、選択した iOS シミュレーターの [開始] ボタンを押して、アプリをビルドして実行します。
Visual Studio はアプリをビルドし、Windows 用のリモート iOS シミュレーターを起動し、リモート シミュレーターにアプリをデプロイします。 Windows 用のリモート iOS シミュレーターの詳細については、「Remote iOS Simulator for Windows 」をご覧ください。
実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。
トラブルシューティング
アプリのコンパイルに失敗した場合は、「Troubleshooting known issues 」をご覧ください。問題の解決策が見つかる可能性があります。
Mac Catalyst を対象とする .NET MAUI アプリは、Visual Studio 2022 for Mac でのみ起動とデバッグができます。
前提条件
.NET、.NET MAUI、Android、iOS ワークロードがインストールされた Visual Studio 2022 for Mac 17.6。 詳細については、インストール を参照してください。
重要
Visual Studio for Mac を .NET 8 で使用するには、Visual Studio > [環境設定] > [その他] > [プレビュー機能] > [インストールされている場合は .NET 8 SDK を使用する (再起動が必要)] チェックボックスを有効にします。
アプリを作成する
このチュートリアルでは、Visual Studio 2022 for Mac で初めての .NET MAUI アプリを作成し、選択したプラットフォームで実行します。
Visual Studio 2022 for Mac を起動します。 スタート ウィンドウで、[新規] を選択して新しいプロジェクトを作成します。
[新しいプロジェクト用のテンプレートを選択] ウィンドウで、[マルチプラットフォーム > アプリ] を選択し、.NET MAUI アプリ テンプレートを選択し、[続行] をクリックします。
[新しい .NET MAUI アプリの構成] ウィンドウで、対象とする .NET のバージョンを選択し、[続行] をクリックします。
[新しい .NET MAUI アプリの構成] ウィンドウで、プロジェクトの名前として「MyMauiApp 」を入力し、プロジェクトの適切な場所を選んで [作成] をクリックします。
プロジェクトが作成され、その依存関係が復元されるまで待ちます。
Mac に Android SDK コンポーネントがない場合は、Visual Studio 2022 for Mac に情報バーが表示されます。 [インストール] をクリックして、Android SDK をインストールします。
[Android SDK] ウィンドウで、[Android の依存関係を自動的にダウンロードしてインストール] チェックボックスを選択し、[ダウンロードとインストール] をクリックします。
[ライセンスの同意] ウィンドウで、[同意する] をクリックします。
Visual Studio 2022 for Mac が Android SDK をダウンロードするまで待ちます。
Visual Studio 2022 for Mac ツール バーで、デバッグ ターゲットを Android Emulator に変更します。
Visual Studio 2022 for Mac ツール バーで、[再生] を押してアプリをビルドし、起動を試みます。
Visual Studio 2022 for Mac はアプリをビルドし、既定の Android Emulator を作成します。
[新しいデバイス] ウィンドウで、[作成] をクリックします。
[ライセンスの同意] ウィンドウで、[同意する] をクリックします。
Visual Studio 2022 for Mac が Android Emulator をダウンロードしてインストールするまで待ちます。
[Android Device Manager] ウィンドウを閉じます。
Visual Studio 2022 for Mac ツール バーで、デバッグ ターゲットを Pixel 5 - API 34 (API 34) に変更します。
Visual Studio 2022 for Mac ツールバーで、[再生] を押して、Android Emulator 内でアプリを起動します。
Visual Studio 2022 for Mac は Android Emulator を起動し、アプリをビルドして、アプリを Emulator に配置します。
Android Emulator で実行中のアプリで、[ここをクリック] ボタンを数回押して、ボタンのクリック数が増加していることを確認します。
Visual Studio 2022 for Mac ツール バーで、デバッグ ターゲットが iOS シミュレーターに設定されていることを確認します。
Visual Studio 2022 for Mac ツール バーで、[再生] ボタンを押して、選択した iOS シミュレーター内でアプリを起動します。
Visual Studio 2022 for Mac は、iOS シミュレーターを起動し、アプリをビルドして、アプリをシミュレーターにデプロイします。
実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。
Visual Studio 2022 for Mac ツール バーで、デバッグ ターゲットが My Mac (MacCatalyst) に設定されていることを確認します。
Visual Studio 2022 for Mac で MyMauiApp プロジェクトを右クリックし、[プロジェクト ファイルの編集] を選択します。 次に、プロジェクト ファイル エディターで、最初の <ItemGroup> の前に次の XML を挿入します。
<PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net8.0-maccatalyst|AnyCPU'">
<RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers>
</PropertyGroup>
Visual Studio 2022 for Mac ツール バーで、[再生] ボタンを押して Mac でアプリを起動します。
Visual Studio 2022 for Mac は、アプリをビルドしてデプロイします。
実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。
Windows を対象とする .NET MAUI アプリは、Visual Studio 2022 を使用した場合のみ、起動やデバッグを実行できます。
Note
Visual Studio Code での .NET MAUI のサポートはまだプレビュー段階です。 お試しいただき、フィードバックを共有してください 。
拡張機能をインストールする
手順 に従って、Visual Studio Code 用の .NET MAUI 拡張機能を設定します。
アプリを作成する
.NET MAUI アプリを作成するには、次の手順を実行します。
エクスプローラーで [.NET プロジェクトの作成] または >CTRL/CMD+SHIFT+P[.NET: 新しいプロジェクト...] をクリックします。
[.NET MAUI アプリ] または [.NET MAUI Blazor アプリ] を選択します。空の フォルダーを選択します。 エクスプローラーが再度開くと、フォルダーは空になりません。プロジェクトに名前を付けます。
プロジェクトがソリューション エクスプローラーに正常に読み込まれたことを確認し、C# または XAML ファイルを開きます。
[ファイル] > [開く...] を使用して、Visual Studio Code で既存の .NET MAUI プロジェクトを開くこともできます。
これで、Visual Studio Code の C# 開発キットの ソリューション エクスプローラーにアプリが表示されます。 .NET MAUI 拡張機能は C# 開発キットに依存するため、.NET MAUI 拡張機能と共にすべての機能 を使用できます。
ターゲット デバイスを選択する
Visual Studio Code の右下隅にある中かっこ記号 { } をクリックします。 ここでは、スタートアップ プロジェクトを変更し、デバッグ ターゲットを開発用コンピューターで有効なものに変更し、いずれかの設定を Visual Studio Code ステータス バーにピン留めできます。
CTRL/CMD+SHIFT+P を使用して ".NET MAUI" を検索し、コマンド パレットでスタートアップ プロジェクトとデバッグ ターゲットを設定することもできます。
既定では、ローカルの macOS または Windows 開発用コンピューターにデプロイできます。 macOS では、iOS シミュレーターにデプロイすることもできます。
Android エミュレーターを使用する場合は、次の手順に従います。
ターミナルで <YOUR_ANDROID_SDK_DIRECTORY>/cmdline-tools/latest/bin/ に移動します。
Windows で sdkmanager --install emulator と sdkmanager --install system-images;android-33;google_apis;x86_64 を実行するか、macOS で ./sdkmanager --install emulator と ./sdkmanager --install system-images;android-33;google_apis;x86_64 を実行します。
その後、Android の avdmanager を使用してコマンド ラインで新しいエミュレーターを作成できます。 たとえば、Windows で avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" を実行するか、macOS で ./avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" を実行できます。
物理的な Android デバイス でデバッグすることもできます。
アプリのデバッグ
アプリをデバッグするには、Visual Studio Code の [実行とデバッグ] メニューに移動し、[実行とデバッグ] ボタンを選択します。 代わりに、F5 を使用してデバッグ セッションを開始することもできます。 Visual Studio Code でデバッガーの選択を求められた場合は、必ず ".NET MAUI" を選択してください。
デバッガーは、かっこの { } メニューで設定したデバッグ ターゲットとスタートアップ プロジェクトを自動的に選択します。 何も選択していない場合は、デバッグ ターゲットを選択するように求められます。
アプリのデバッグが開始されたら、組み込みの Visual Studio Code デバッグ ツールを使用して、ブレークポイントの設定、コード全体のステップ実行とその他 の操作を行うことができます。
詳細情報
拡張機能に関する問題が発生した場合は、トラブルシューティングの手順 に従うか、既知の問題 を確認するか、フィードバック を提供できます。
次のステップ
このチュートリアルでは、初めての .NET Multi-platform App UI (.NET MAUI) アプリを作成して実行する方法について説明しました。
.NET MAUI を使用してアプリを構築する際の基礎については、「.NET MAUI アプリを作成する 」をご覧ください。 または、完全な .NET MAUI トレーニング コースについては、「.NET MAUI を使用してモバイルおよびデスクトップ アプリを構築する 」をご覧ください。
