チュートリアル: Visual Studio で XAML と C# を使用して最初のユニバーサル Windows プラットフォーム アプリを作成する

ここでは、Visual Studio 統合開発環境 (IDE) の概要を示し、任意の Windows 10 デバイスで実行できる "Hello World" アプリケーションを作成します。 これの実行には、ユニバーサル Windows プラットフォーム (UWP) のプロジェクト テンプレート、Extensible Application Markup Language (XAML) および C# のプログラミング言語を使用します。

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。

プロジェクトを作成する

まず、ユニバーサル Windows プラットフォーム プロジェクトを作成します。 この種類のプロジェクトには、必要となるすべてのテンプレート ファイルが付属していますので、何も追加する必要はありません。

  1. Visual Studio を開きます。

  2. 上部のメニュー バーから、 [ファイル][新規][プロジェクト] の順に選択します。

  3. [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで [Visual C#] を展開し、 [Windows ユニバーサル] を選択します。 中央のペインで [空のアプリ (ユニバーサル Windows)] を選択します。 次いで、プロジェクトに「HelloWorld」という名前を付け、 [OK] を選択します。

    注意

    ソース プロジェクトの場所が New Technology File System (NTFS) でフォーマットされたドライブ (オペレーティング システム (OS) ドライブなど) にあることを確認します。 そうしないと、プロジェクトのビルドと実行で問題が発生する可能性があります。

    Visual Studio IDE の [新しいプロジェクト] ダイアログ ボックスに示されている Windows ユニバーサル プロジェクト テンプレート

    注意

    [空のアプリ (ユニバーサル Windows)] プロジェクト テンプレートが表示されない場合は、 [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで [Visual Studio インストーラーを開く] リンクをクリックします。

    [新しいプロジェクト] ダイアログ ボックスで [Visual Studio インストーラーを開く] リンクをクリックする

    Visual Studio インストーラーが起動します。 [ユニバーサル Windows プラットフォーム開発] ワークロードを選択し、 [変更] を選択します。

    Visual Studio インストーラーの [ユニバーサル Windows プラットフォーム開発] ワークロード

  4. [新しいユニバーサル Windows プラットフォーム プロジェクト] ダイアログ ボックスで、 [ターゲット バージョン][最小バージョン] の既定の設定をそのまま使用します。

    [新しいユニバーサル Windows プラットフォーム プロジェクト] の既定のターゲット バージョンと最小バージョンの設定をそのまま使用します。

  1. Visual Studio を開き、[スタート] ウィンドウで [新しいプロジェクトの作成] を選択します。

  2. [新しいプロジェクトの作成] 画面で、検索ボックスに「ユニバーサル Windows」と入力し、 [空のアプリ (ユニバーサル Windows)] 用の C# テンプレートを選択して、 [次へ] を選択します。

    [新しいプロジェクトの作成] 画面のスクリーンショット

    注意

    [空のアプリ (ユニバーサル Windows)] プロジェクト テンプレートが表示されない場合は、 [さらにツールと機能をインストールする] リンクをクリックします。

    [さらにツールと機能をインストールする] リンクをクリックする

    Visual Studio インストーラーが起動します。 [ユニバーサル Windows プラットフォーム開発] ワークロードを選択し、 [変更] を選択します。

    Visual Studio インストーラーの [ユニバーサル Windows プラットフォーム開発] ワークロード

  3. プロジェクトに「HelloWorld」という名前を付け、 [作成] を選択します。

    プロジェクト画面を構成する

  4. [新しいユニバーサル Windows プラットフォーム プロジェクト] ダイアログ ボックスで、 [ターゲット バージョン][最小バージョン] の既定の設定をそのまま使用します。

    [新しいユニバーサル Windows プラットフォーム プロジェクト] ダイアログ ボックスで、[ターゲット バージョン] と [最小バージョン] の既定の設定をそのまま使用します

注意

UWP アプリを作成するために Visual Studio を初めて使用する場合、 [設定] ダイアログ ボックスが表示されます。 [開発者モード][はい] の順に選択します。

UWP 設定ダイアログ ボックスで開発者モードを有効にする

Visual Studio では、開発者モード パッケージが追加でインストールされます。 パッケージのインストールが完了したら、 [設定] ダイアログ ボックスを閉じます。

アプリケーションを作成する

開発を始めるときがきました。 これから、ボタン コントロールを追加し、ボタンにアクションを追加し、"Hello World" アプリを起動してどのように動作するか確認します。

デザイン キャンバスにボタンを追加する

  1. ソリューション エクスプローラー で、MainPage.xaml をダブルクリックして分割ビューを開きます。

    ソリューション エクスプローラーで MainPage.xaml を開く

    ソリューション エクスプローラーで MainPage.xaml を開く

    デザイン キャンバスを含む XAML デザイナー と、コードを追加または変更できる XAML エディター の 2 つのウィンドウがあります。

    XAML エディターの XAML デザイナー ウィンドウ

  2. [ツールボックス] を選択して、ツールボックスのスライド アウト ウィンドウを開きます。

    [ツールボックス] をクリックしてツールボックスのスライド アウト ウィンドウを開く

    (ツールボックス のオプションが表示されない場合は、メニュー バーから開くことができます。 これを行うには、 [ビュー] > [ツールバー] の順に選択します。 または、Ctrl+Alt+X キーを押します)。

  3. [ピン設定] アイコンをクリックして、[ツールボックス] ウィンドウをドッキングします。

    [ピン設定] アイコンをクリックして [ツールボックス] ウィンドウをドッキングする

  4. [ボタン] コントロールをクリックし、デザイン キャンバスまでドラッグします。

    [ボタン] コントロールをクリックしデザイン キャンバスまでドラッグする

    XAML エディター でコードを参照すると、そこにもボタンが追加されていることを確認できます。

    XAML エディターでボタンを表示する

ボタンにラベルを追加する

  1. XAML エディター で、ボタンのコンテンツ値を "Button" から "Hello World!" に変更します。

    ボタンのコンテンツ値を Hello World に変更する

  2. XAML デザイナー のボタンも変更されることに注目してください。

    デザイン キャンバスでボタンが Hello World に変更する

イベント ハンドラーを追加する

「イベント ハンドラー」とは、難しそうに聞こえますが、イベントが発生したときに呼び出されるコードの単なる別名です。 この場合、"Hello World!" ボタンにアクション を追加します。

  1. デザイン キャンパスでボタン コントロールをダブルクリックします。

  2. 分離コード ページの MainPage.xaml.cs でイベント ハンドラー コードを編集します。

    ポイントはここからです。 既定のイベント ハンドラーは次のようになります。

    既定の Button_Click イベント ハンドラー

    これを次のように変更してみます。

    新しい非同期の Button_Click イベント ハンドラー

    コピーして貼り付けるコードは次のとおりです。

    private async void Button_Click(object sender, RoutedEventArgs e)
          {
              MediaElement 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();
          }
    

行った処理

コードでいくつかの Windows API が使用され、いくつかのテキストを読み上げられる、音声合成オブジェクトが作成されました。 (SpeechSynthesis の使用に関する詳細は、「System.Speech.Synthesis」をご覧ください)。

アプリケーションの実行

"Hello World" UWP アプリを、ビルド、配置、および起動して、どのように表示および読み上げがあるか確認してみましょう。 ここではその方法を説明します。

  1. 再生ボタン (表示は [ローカル コンピューター] ) を使用して、ローカル コンピューターでアプリケーションを起動します。

    [ローカル マシン] をクリックし、UWP アプリを起動してデバッグする

    (または、メニュー バーから [デバッグ] > [デバッグの開始] を選択するか、F5 キーを押してアプリを開始します)。

  2. スプラッシュ スクリーンが消えるとすぐ表示されるアプリを確認します。 アプリは次のように表示されるはずです。

    UWP "Hello World" アプリ

  3. [Hello World] ボタンをクリックします。

    Windows 10 デバイスにより、"Hello, World!" と文字通り読み上げられます。

  4. アプリを閉じるには、ツール バーで [デバッグの停止] ボタンをクリックします。 (または、メニュー バーから [デバッグ] > [デバッグの停止] を選択するか、Shift + F5 キーを押します。)

"Hello World" UWP アプリを、ビルド、配置、および起動して、どのように表示および読み上げがあるか確認してみましょう。 ここではその方法を説明します。

  1. 再生ボタン (表示は [ローカル コンピューター] ) を使用して、ローカル コンピューターでアプリケーションを起動します。

    [ローカル マシン] をクリックし、UWP アプリを起動してデバッグする

    (または、メニュー バーから [デバッグ] > [デバッグの開始] を選択するか、F5 キーを押してアプリを開始します)。

  2. スプラッシュ スクリーンが消えるとすぐ表示されるアプリを確認します。 アプリは次のように表示されるはずです。

    UWP "Hello World" アプリ

  3. [Hello World] ボタンをクリックします。

    Windows 10 デバイスにより、"Hello, World!" と文字通り読み上げられます。

  4. アプリを閉じるには、ツール バーで [デバッグの停止] ボタンをクリックします。 (または、メニュー バーから [デバッグ] > [デバッグの停止] を選択するか、Shift + F5 キーを押します。)

次の手順

これでこのチュートリアルは完了です。 これで UWP および Visual Studio IDE の基本を学習できたはずです。 詳細については、引き続き以下のチュートリアルをご覧ください。

関連項目