.NET 9を使用して、"Hello, World!" のUWPアプリ (XAML) を作成する

このチュートリアルでは、 ネイティブ AOT (Ahead-of-Time) で XAML、C#、.NET 9 を使用して、Windows 上のユニバーサル Windows プラットフォーム (UWP) 用の単純な "Hello, World!" アプリを作成する方法について説明します。 Microsoft Visual Studio の 1 つのプロジェクトを使用すると、サポートされているすべてのバージョンの Windows 10 と Windows 11 で実行されるアプリをビルドできます。

ここでは、次の方法を学習します。

• Visual Studio で .NET 9 を対象とする新しい UWP プロジェクトを作成します。
• スタート ページの UI を変更する XAML を記述します。
• Visual Studio のローカル デスクトップでプロジェクトを実行します。
• SpeechSynthesizer を使用して、ボタンを押したときにアプリを話します。

[前提条件]

• ユニバーサル Windows アプリとは
• Visual Studio (および Windows) をダウンロードします。 助けが必要な場合は、設定方法を学んでください。
• また、Visual Studio で既定のウィンドウ レイアウトを使用していることを前提としています。 既定のレイアウトを変更する場合は、[ ウィンドウ レイアウトのリセット] コマンドを使用してウィンドウ メニューで リセット できます。

手順 1: Visual Studio で新しいプロジェクトを作成する

1. Visual Studio を起動します。

2. [ ファイル ] メニューの [ 新規 > プロジェクト ] を選択し、[ 新しいプロジェクト ] ダイアログを開きます。

3. 使用可能なテンプレートの一覧をフィルター処理するには、[言語] ドロップダウン リストから C# を選択し、[プロジェクトの種類] ドロップダウン リストから UWP を選択して、C# 開発者が使用できる UWP プロジェクト テンプレートの一覧を表示します。

   

   (UWP テンプレートが表示されない場合は、UWP アプリを作成するためのコンポーネントが見つからない可能性があります。Windows スタート メニューから Visual Studio インストーラー を開くことで、インストール プロセスを繰り返し、UWP サポートを追加できます。詳細については、「 UWP 開発用に Visual Studio を設定 する」を参照してください)。

4. UWP 空のアプリ テンプレートを選択します。

   重要

   必ず UWP Blank App テンプレートを選択してください。 UWP 空のアプリ (.NET ネイティブ) テンプレートを選択すると、.NET 9 ではなく .NET ネイティブ ランタイムが対象になります。 .NET Native を対象とするアプリは、最新の .NET および C# 機能やセキュリティとパフォーマンスの向上にアクセスできません。 2 つのプロジェクトの種類の違いの詳細については、「 .NET 9 とネイティブ AOT のプレビュー UWP サポートを使用して UWP アプリを最新化する」を参照してください。

5. [ 次へ] を選択し、 プロジェクト名として「HelloWorld」と入力します。 を選択してを作成します。

   

   注

   Visual Studio を初めて使用する場合は、開発者モードのを有効にするように求める [設定] ダイアログ 表示されることがあります。 開発者モードは、ストアからのみではなく、アプリを直接実行するアクセス許可など、特定の機能を有効にする特別な設定です。 詳細については、「 デバイスの開発を有効にする」を参照してください。 このガイドを続行するには、[開発者モード]選択し、[はい]クリックして、ダイアログを閉じます。

   

6. [ターゲット バージョン]/[最小バージョン]ダイアログボックスが表示されます。 このチュートリアルでは既定の設定で問題ないため、[ OK] を 選択してプロジェクトを作成します。

   

7. 新しいプロジェクトが開くと、そのファイルが右側の ソリューション エクスプローラー ウィンドウに表示されます。 ファイルを表示するには、[プロパティ] タブまたは GitHub の [Copilot チャット] タブではなく、[ソリューション エクスプローラー] タブを選択する必要がある場合があります。

   

UWP 空のアプリは最小限のテンプレートですが、まだ多くのファイルが含まれています。 これらのファイルは、C# を使用するすべての UWP アプリに不可欠です。 Visual Studio で作成するすべての UWP プロジェクトには、それらが含まれています。

ファイルの内容

プロジェクト内のファイルを表示および編集するには、 ソリューション エクスプローラーでファイルをダブルクリックします。 フォルダーと同じように XAML ファイルを展開して、関連付けられているコード ファイルを表示します。 XAML ファイルは、デザイン サーフェイスと XAML エディターの両方を示す分割ビューで開きます。

App.xaml と App.xaml.cs に する

• App.xaml は、アプリ全体で使用されるリソースを宣言するファイルです。
• App.xaml.csは、App.xaml のコードビハインド ファイルです。 コードビハインドページと同様に、InitializeComponent メソッドを呼び出すコンストラクタが含まれています。 InitializeComponent メソッドは記述しません。 これは Visual Studio によって生成され、主な目的は XAML ファイルで宣言された要素を初期化することです。
• App.xaml.csは、アプリのエントリ ポイントです。
• App.xaml.csには、アプリの アクティブ化 と 中断 を処理するメソッドも含まれています。

MainPage.xaml

• MainPage.xaml は、アプリの UI を定義する場所です。 XAML マークアップを使用して要素を直接追加することも、Visual Studio によって提供されるデザイン ツールを使用することもできます。
• MainPage.xaml.cs は MainPage.xaml のコードビハインドページです。 ここで、アプリ ロジックとイベント ハンドラーを追加します。
• これら 2 つのファイルを組み合わせて、MainPage名前空間の Page から継承する HelloWorld という新しいクラスを定義します。

Package.appxmanifest

• アプリの名前、説明、タイル、スタート ページなど、アプリを記述するマニフェスト ファイル。
• アプリに含まれる依存関係、リソース、ファイルの一覧が含まれます。

ロゴ画像のセット

• アセット/Square150x150Logo.scale-200.png と Wide310x150Logo.scale-200.png は、スタート メニューのアプリ (中またはワイド サイズ) を表します。
• Assets/Square44x44Logo.png は、スタート メニュー、タスク バー、タスク マネージャーのアプリ一覧でアプリを表します。
• アセット/StoreLogo.png は、Microsoft Store のアプリを表します。
• アセット/SplashScreen.scale-200.png は、アプリの起動時に表示されるスプラッシュ画面です。
• 資産/LockScreenLogo.scale-200.png は、システムがロックされているときに、ロック画面でアプリを表すために使用できます。

手順 2: ボタンを追加する

デザイナー ビューの使用

ページにボタンを追加しましょう。 このチュートリアルでは、前に示したファイルの一部 (App.xaml、MainPage.xaml、MainPage.xaml.cs) のみを操作します。

1. MainPage.xaml をダブルクリックして、XAML エディターで開きます。

   

   注

   .NET 9 を使用する UWP 空のアプリ テンプレートを使用する場合、デザイン ビューは表示されません。 XAML デザイン ビューを使用して UWP プロジェクトを操作する場合は、代わりに UWP 空のアプリ (.NET ネイティブ) テンプレートを使用できます。 前に説明したように、 UWP 空のアプリ (.NET ネイティブ) テンプレートは UWP 空のアプリ テンプレートとは少し異なりますが、基本的な構造は同じです。 主な違いは、 UWP 空のアプリ (.NET ネイティブ) テンプレートが .NET Native を使用してアプリをコンパイルすることです。 新しい .NET 9 テンプレートを使用する利点については、「.NET 9 とネイティブ AOT のプレビュー UWP サポートを使用して UWP アプリを最新化 する」を参照してください。

2. MainPage.xaml の <Grid> 要素に次の XAML コードを追加します。 これを入力するか、コピーしてここから貼り付けることができます。

   <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
   

3. この時点で、非常に単純なアプリを作成しました。 これは、アプリをビルド、デプロイ、起動し、その外観を確認するのに適したタイミングです。 アプリは、ローカル コンピューター、シミュレーターまたはエミュレーター、またはリモート デバイスでデバッグできます。 Visual Studio のターゲット デバイス メニューを次に示します。

   

   既定では、アプリはローカル コンピューター上で実行されます。 ターゲット デバイス メニューには、デスクトップ デバイス ファミリのデバイスでアプリをデバッグするためのオプションがいくつか用意されています。

   • HelloWorld (ローカル コンピューターで実行されます)
   • WSL
   • 新しいエミュレーターのダウンロード...

4. アプリを実行して、ボタンの動作を確認します。 ローカル コンピューターでデバッグを開始するには、メニューで デバッグ | デバッグの開始 項目を選択するか、ツールバーの HelloWorld ラベル付きデバッグ開始ボタンをクリックするか、F5キーを押します。

   アプリがウィンドウで開き、最初に既定のスプラッシュ画面が表示されます。 スプラッシュ画面は、イメージ (SplashScreen.png) と背景色 (アプリのマニフェスト ファイルで指定) によって定義されます。

   スプラッシュ画面が消え、アプリが表示されます。 次のようになります。

   

5. Windows キーを押して [スタート ] メニューを開き、[ すべて ] を選択してすべてのアプリを表示します。 アプリをローカルに展開すると、[ スタート ] メニューのプログラムの一覧にアプリが追加されます。 後で (デバッグ モードではなく) アプリを再度実行するには、[ スタート ] メニューでアプリを選択できます。

   まだそれほど多くはありませんが、これで初めての UWP アプリを作成し、ローカル コンピューターに展開できました。

6. デバッグを停止するには:

   ツール バーの [ デバッグの停止 ] ボタン () をクリックします。

   –又は–

   [ デバッグ ] メニューの [ デバッグの停止] をクリックします。

   –又は–

   アプリ ウィンドウを閉じます。

7. Contentの値を Button から Hello, world! に変更して、ボタンのテキストを変更します。

   <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
   

   アプリをもう一度実行すると、ボタンが更新され、新しいテキストが表示されます。

手順 3: イベント ハンドラー

"イベント ハンドラー" は複雑に思われますが、イベントが発生したときに呼び出されるコードの別の名前です (ユーザーがボタンをクリックするなど)。

1. まだ実行していない場合は、アプリの実行を停止します。

2. XAML エディターで Click 入力を開始すると、可能なイベントの一覧が Visual Studio に表示されます。 一覧から [クリック] を選択します。

   

3. 次に、一覧から <New Event Handler> を選択します。 これにより、分離コード ファイル (MainPage.xaml.cs) に新しいイベント ハンドラー メソッドが作成され、XAML コードのボタン要素に Click イベントが追加されます。

   

   XAML エディターは、XAML コード内のボタン要素に Click イベントを自動的に追加します。

   <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>
   

   これにより、分離コード ファイル (MainPage.xaml.cs) にイベント ハンドラーも追加されます。 イベント ハンドラーは、ボタンがクリックされたときに呼び出されるメソッドです。 メソッドの名前は button_Clickであり、 object sender と RoutedEventArgs eの 2 つのパラメーターがあります。

   private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
   {
   
   }
   

   Click イベントは、ボタンの標準的なイベントです。 ユーザーがボタンをクリックすると、 button_Click メソッドが呼び出されます。

4. MainPage.xaml.cs のコードビハインドページでイベント ハンドラー コードを編集します。 ここで興味深いものが得られます。 これを変更してみましょう。次のようになります。

   private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
   {
       var mediaElement = new MediaElement();
       var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
       Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
       mediaElement.SetSource(stream, stream.ContentType);
       mediaElement.Play();
   }
   

   メソッドシグネチャに async キーワードが含まれていることを確認してください。または、アプリを実行しようとするとエラーが発生します。

私たちは何をしましたか?

このコードでは、一部の Windows API を使用して音声合成オブジェクトを作成し、言うテキストを提供します。 ( SpeechSynthesis の使用方法の詳細については、Windows ランタイム (WinRT) API ドキュメントの SpeechSynthesis 名前空間 を参照してください)。

アプリを実行してボタンをクリックすると、コンピューター (または電話) は文字どおり "Hello, World!" と表示されます。

概要

これで、.NET 9 で Windows 用の最初の UWP アプリが作成されました。

アプリで使用するコントロールをレイアウトするために XAML を使用する方法については、 グリッドのチュートリアルを試すか、 次の手順に進んでください。

関連コンテンツ

• UWP アプリの発行。
• UWP アプリの開発に関するハウツー記事
• UWP 開発者向けのコード サンプル