クイック スタート: AI を使用してWindows アプリをビルドして発行する

このクイック スタートでは、AI アシスタンスを使用して、空のフォルダーから発行済みのWindows アプリに移動します。 Visual Studioは必要ありません。

Note

Visual Studio? Windows開発のGitHub Copilotの設定を参照してください。 このクイック スタートでは、VS Code と winapp CLI を使用します。

  • 必要な無料ツールをインストールします (約 5 分)
  • コマンド ラインから WinUI アプリをスキャフォールディングする
  • winui-dev AI エージェントを使用して機能を追加する
  • パッケージ化してMicrosoft Storeに発行する

完了までの時間: 約 30 分
Cost: free (GitHub Copilot Free レベルで十分)


前提条件

開始する前に、次のツールをインストールします。 すべて無料です。

1.Visual Studio Code

winget install Microsoft.VisualStudioCode

2..NET SDK 10 以降

winget install Microsoft.DotNet.SDK.10

3.Windows アプリ Development CLI (winapp CLI)

winget install Microsoft.winappcli --source winget

4. WinUI dotnet の新しいテンプレート

dotnet new install Microsoft.WindowsAppSDK.WinUI.CSharp.Templates

5. GitHub CLIgh copilot コマンドに必要 — GitHub Copilot のサブスクリプションが必要、無料プランあり)

winget install GitHub.cli

Important

インストールが完了したら、ターミナルを閉じてから再度開きます。 gh コマンドは、新しいシェル セッションが更新された PATH を選択するまで使用できません。

gh auth login
gh extension install github/gh-copilot

6. GitHub Copilot 向け WinUI エージェント プラグイン

gh copilot plugin install winui@awesome-copilot

7. VS Code 用 WinApp 拡張機能

code --install-extension microsoft-winappcli.winapp

または、[拡張機能] パネルで WinApp を検索します (Ctrl + Shift + X)。 完全なコマンド リファレンスについては、 VS Code ツール を参照してください。

セットアップを確認する

winapp --version

Tip

最良の結果を得るには、AI エージェントを Microsoft Learn MCP サーバー に接続します。トレーニング データに依存するのではなく、クエリ時に現在の WinUI 3 API ドキュメントをフェッチします。


手順 1: 新しい WinUI アプリをスキャフォールディングする

新しいフォルダーを作成し、NavigationView レイアウトを使用して WinUI アプリをスキャフォールディングします。

mkdir MyFirstApp
cd MyFirstApp
dotnet new winui-navview

手順 2: アプリを実行する

機能の追加を開始する前に、アプリをビルドして実行してすべてが動作していることを確認します。

dotnet run

アプリは、緩いレイアウトのパッケージとして起動します。MSIX のインストールは必要ありません。 [ホーム]、[バージョン情報]、[設定] ページを含む NavigationView を含む WinUI 3 アプリが表示されます。

MyFirstApp が実行されているスクリーンショット。[ホーム]、[バージョン情報]、[設定] の項目が表示された NavigationView が表示された WinUI 3 ウィンドウで、[ホーム] ページが選択され、[This is the Home page]\(ホーム ページです\) が表示されています。

正常に起動したら、VS Code でプロジェクトを開きます。

code .

Note

最初に成功したの前に dotnet run キーを押さないでください。 VS Code のデバッガーは、まだ存在しない .exe を探します。 dotnet run成功すると、F5 キーと WinApp 拡張機能パネルの [実行] ボタンの両方が正常に動作します。


手順 3: AI エージェントを使用して機能を追加する

VS Code で GitHub Copilot Chat (Ctrl + Alt + I) を開き、Agent モードに切り替えて、winui-dev エージェントを選択します。 次のような要求を入力します。

Add a settings page to my WinUI NavigationView app with a toggle for dark mode

エージェントによってコードが生成され、必要なファイルが作成され、ナビゲーション構造が更新されます。 変更を確認し、結果を確認します。

dotnet run

実行中のアプリの [設定] ページに移動して、機能が正しく追加されたことを確認します。

Tip

UI 検証を自動化しますか? CI パイプラインに役立つ、アプリの UI ツリーを検査、検索、スクリーンショットする コマンドの winapp ui アプリのテストを参照してください。


手順 4: アプリをパッケージ化する

アプリをフォルダーに発行し、MSIX インストーラーとしてパッケージ化します。

Important

パッケージ化手順では、コンピューターの信頼されたルート ストアに証明書をインストールし、 管理者特権 (管理者) ターミナルが必要です。 PowerShell または Windows ターミナル を右クリックし、管理者として実行を選択し、プロジェクト フォルダーに戻ります。

dotnet publish -o ./publish
winapp pack ./publish --generate-cert --install-cert

--generate-cert --install-cert は、テスト用のローカル開発証明書を作成してインストールします。 ストアの申請には、代わりにパートナー センター証明書を使用してください。


手順 5: Microsoft Storeに発行する

コマンド ラインから直接アプリを送信します。

winapp store publish ./*.msix --appId <your-app-id>

Note

発行するには、 パートナー センター アカウントが必要です。 通常、アプリの認定には 1 ~ 3 営業日かかります。


次のステップ

無料のツールと AI アシスタンスのみを使用して、Windows アプリを構築して発行しました。 次に進む場所を次に示します。