"Hello, world" アプリを作成する (XAML)Create a "Hello, world" app (XAML)

このチュートリアルでは、Windows 10 のユニバーサル Windows プラットフォーム (UWP) 向けの単純な "Hello, world" アプリを XAML と C# で作る方法について説明します。This tutorial teaches you how to use XAML and C# to create a simple "Hello, world" app for the Universal Windows Platform (UWP) on Windows 10. Microsoft Visual Studio プロジェクトを 1 つ開発すれば、あらゆる Windows 10 デバイスで動作するアプリを構築できます。With a single project in Microsoft Visual Studio, you can build an app that runs on any Windows 10 device.

ここでは、次の方法について説明します。Here you'll learn how to:

  • Windows 10UWP を対象とする新しい Visual Studio 2017 プロジェクトを作る。Create a new Visual Studio 2017 project that targets Windows 10 and the UWP.
  • スタート ページの UI を変更するように XAML を記述する。Write XAML to change the UI on your start page.
  • Visual Studio のローカル デスクトップでプロジェクトを実行する。Run the project on the local desktop in Visual Studio.
  • SpeechSynthesizer を使って、ボタンが押されたときにアプリがコンテンツを読み上げるようにする。Use a SpeechSynthesizer to make the app talk when you press a button.

はじめに...Before you start...

注意

このチュートリアルでは、Visual Studio Community 2017 を使います。This tutorial is using Visual Studio Community 2017. 異なるバージョンの Visual Studio を使っている場合には、見た目が多少異なることがあります。If you are using a different version of Visual Studio, it may look a little different for you.

ビデオの概要Video summary

手順 1. Visual Studio で新しいプロジェクトを作るStep 1: Create a new project in Visual Studio.

  1. Visual Studio 2017 を起動します。Launch Visual Studio 2017.

  2. [ファイル] メニューの [新規作成] > [プロジェクト] を選択し、[新しいプロジェクト] ダイアログを開きます。From the File menu, select New > Project... to open the New Project dialog.

  3. 左側のテンプレートの一覧で、[インストール済み]、[テンプレート]、[Visual C#]、[Windows] の順に開いた後、[ユニバーサル] を選択して UWP プロジェクト テンプレートの一覧を表示します。From the list of templates on the left, open Installed > Templates > Visual C# > Windows, and then choose Universal to see the list of UWP project templates.

    ユニバーサル テンプレートが表示されない場合は、UWP アプリを作成するためのコンポーネントがない可能性があります。(If you don't see any Universal templates, you might be missing the components for creating UWP apps. インストール プロセスを繰り返して UWP サポートを追加することもできます ([新しいプロジェクト] ダイアログで [Visual Studio インストーラーを開く] をクリック)。You can repeat the installation process and add UWP support by clicking Open Visual Studio installer on the New Project dialog. 準備」をご覧ください。See Get set up

    インストール プロセスを繰り返す方法

  4. [空白のアプリ (ユニバーサル Windows)] テンプレートを選択し、[名前] に「HelloWorld」と入力します。Choose the Blank App (Universal Windows) template, and enter "HelloWorld" as the Name. [OK] を選択します。Select OK.

    [新しいプロジェクト] ウィンドウ

注意

Visual Studio を初めて使う場合は、[設定] ダイアログ ボックスが表示され、開発者モードを有効にするよう求められることがあります。If this is the first time you have used Visual Studio, you might see a Settings dialog asking you to enable Developer mode. 開発者モードは、アプリをストアからだけではなく、直接実行するためのアクセス許可など、特定の機能を有効にする特別な設定です。Developer mode is a special setting that enables certain features, such as permission to run apps directly, rather than only from the Store. 詳しくは、「デバイスを開発用に有効にする」をご覧ください。For more information, please read Enable your device for development. 先に進むには、[開発者モード] を選択し、[はい] をクリックしてダイアログ ボックスを閉じます。To continue with this guide, select Developer mode, click Yes, and close the dialog.

開発者モードのアクティブ化ダイアログ

  1. ターゲット バージョンと最小バージョンのダイアログが表示されます。The target version/minimum version dialog appears. このチュートリアルでは既定の設定で問題ないため、[OK] を選択してプロジェクトを作成します。The default settings are fine for this tutorial, so select OK to create the project.

    ソリューション エクスプローラーのウィンドウ

  2. 新しいプロジェクトが開き、そのプロジェクトのファイルが右側のソリューション エクスプローラーのウィンドウに表示されます。When your new project opens, its files are displayed in the Solution Explorer pane on the right. 場合によっては、ファイルを表示するために [ソリューション エクスプローラー] タブを選択する必要があります ([プロパティ] タブではありません)。You may need to choose the Solution Explorer tab instead of the Properties tab to see your files.

    ソリューション エクスプローラーのウィンドウ

[空白のアプリ (ユニバーサル Windows)] は最小限のテンプレートですが、多くのファイルが含まれています。Although the Blank App (Universal Window) is a minimal template, it still contains a lot of files. これらのファイルは、C# を使うすべての UWP アプリに必要です。These files are essential to all UWP apps using C#. Visual Studio で作るすべてのプロジェクトには、これらのファイルが必ず含まれます。Every project that you create in Visual Studio contains them.

ファイルの内容What's in the files?

プロジェクトのファイルを表示して編集するには、ソリューション エクスプローラーでファイルをダブルクリックします。To view and edit a file in your project, double-click the file in the Solution Explorer. フォルダーと同様、XAML ファイルを展開して、関連するコード ファイルを表示します。Expand a XAML file just like a folder to see its associated code file. XAML ファイルは、デザイン サーフェスと XAML エディターの両方を表示する分割ビューで開きます。XAML files open in a split view that shows both the design surface and the XAML editor.

注意

XAML とはWhat is XAML? Extensible Application Markup Language (XAML) は、アプリのユーザー インターフェイスを定義するための言語です。Extensible Application Markup Language (XAML) is the language used to define your app's user interface. XAML は、手動で入力することも、Visual Studio のデザイン ツールを使って作成することもできます。It can be entered manually, or created using the Visual Studio design tools. .xaml ファイルには、ロジックが格納される .xaml.cs 分離コード ファイルがあります。A .xaml file has a .xaml.cs code-behind file which contains the logic. XAML と分離コードがまとまって、完全なクラスが作成されます。Together, the XAML and code-behind make a complete class. 詳しくは、「XAML の概要」をご覧ください。For more information, see XAML overview.

App.xaml と App.xaml.csApp.xaml and App.xaml.cs

  • App.xaml は、アプリ全体で使われるリソースを宣言するファイルです。App.xaml is where you declare resources that are used across the app.
  • App.xaml.cs は、App.xaml の分離コード ファイルです。App.xaml.cs is the code-behind file for App.xaml. すべての分離コード ページと同じように、InitializeComponent メソッドを呼び出すコンストラクターが含まれています。Like all code-behind pages, it contains a constructor that calls the InitializeComponent method. InitializeComponent メソッドは自分で記述する必要はありません。You don't write the InitializeComponent method. Visual Studio によって生成されるこのメソッドの主な目的は、XAML ファイルに宣言された要素を初期化することです。It's generated by Visual Studio, and its main purpose is to initialize the elements declared in the XAML file.
  • App.xaml.cs は、アプリのエントリ ポイントです。App.xaml.cs is the entry point for your app.
  • App.xaml.cs には、アプリのアクティブ化と中断を処理するためのメソッドも含まれています。App.xaml.cs also contains methods to handle activation and suspension of the app.

MainPage.xamlMainPage.xaml

  • MainPage.xaml は、アプリの UI を定義する場所です。MainPage.xaml is where you define the UI for your app. 要素の追加は、XAML マークアップを使って直接行うことも、Visual Studio のデザイン ツールを使って行うこともできます。You can add elements directly using XAML markup, or you can use the design tools provided by Visual Studio.
  • MainPage.xaml.cs は、MainPage.xaml のコード ビハインド ページです。MainPage.xaml.cs is the code-behind page for MainPage.xaml. ここには、アプリのロジックとイベント ハンドラーを追加します。It's where you add your app logic and event handlers.
  • これら 2 つのファイルで、Page から継承される MainPage という新しいクラスを HelloWorld 名前空間に定義します。Together these two files define a new class called MainPage, which inherits from Page, in the HelloWorld namespace.

Package.appxmanifestPackage.appxmanifest

  • 名前、説明、タイル、開始ページなど、アプリを説明するマニフェスト ファイルです。A manifest file that describes your app: its name, description, tile, start page, etc.
  • アプリに含まれるファイルの一覧が含まれています。Includes a list of the files that your app contains.

一連のロゴ イメージA set of logo images

  • Assets/Square150x150Logo.scale-200.png は、スタート メニュー内のアプリを表します。Assets/Square150x150Logo.scale-200.png represents your app in the start menu.
  • Assets/StoreLogo.png は、Microsoft Store 内のアプリを表します。Assets/StoreLogo.png represents your app in the Microsoft Store.
  • Assets/SplashScreen.scale-200.png は、アプリが起動したときに表示するスプラッシュ画面です。Assets/SplashScreen.scale-200.png is the splash screen that appears when your app starts.

手順 2. ボタンを追加するStep 2: Adding a button

デザイナー ビューの使用Using the designer view

ページにボタンを追加しましょう。Let's add a button to our page. このチュートリアルでは、前に示した複数のファイルの一部 (App.xaml、MainPage.xaml、および MainPage.xaml.cs) のみを操作します。In this tutorial, you work with just a few of the files listed previously: App.xaml, MainPage.xaml, and MainPage.xaml.cs.

  1. MainPage.xaml をダブルクリックしてデザイン ビューで開きます。Double-click on MainPage.xaml to open it in the Design view.

    画面の上部にグラフィック ビュー、その下部に XAML コード ビューがあります。You'll notice there is a graphical view on the top part of the screen, and the XAML code view underneath. どちらのビューでも変更を加えることができますが、ここではグラフィック ビューを使います。You can make changes to either, but for now we'll use the graphical view.

    ソリューション エクスプローラーのウィンドウ

  2. 左側の縦方向に配置された [ツールボックス] タブをクリックして UI コントロールの一覧を開きます Click on the vertical Toolbox tab on the left to open the list of UI controls. (タイトル バーのピン アイコンをクリックすると、このウィンドウを表示したままにすることができます)。(You can click the pin icon in its title bar to keep it visible.)

    ソリューション エクスプローラーのウィンドウ

  3. [コモン XAML コントロール] を展開し、Button をドラッグしてデザイン キャンバスの中央に配置します。Expand Common XAML Controls, and drag the Button out to the middle of the design canvas.

    ソリューション エクスプローラーのウィンドウ

    XAML コード ウィンドウを見ると、そこにも Button が追加されたことがわかります。If you look at the XAML code window, you'll see that the Button has been added there too:

    <Button x:name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
    
  4. ボタンのテキストを変更します。Change the button's text.

    XAML コード ビュー内をクリックし、Content の値を "Button" から "Hello, world!" に変更します。Click in the XAML code view, and change the Content from "Button" to "Hello, world!".

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

デザイン キャンバスに表示されたボタンが更新され、新しいテキストが表示されることがわかります。Notice how the button displayed in the design canvas updates to display the new text.

ソリューション エクスプローラーのウィンドウ

手順 3. アプリを起動するStep 3: Start the app

ここまでの操作で、非常に単純なアプリが作成されました。At this point, you've created a very simple app. ここで、アプリをビルド、デプロイ、起動してどうなるかを見てみましょう。This is a good time to build, deploy, and launch your app and see what it looks like. アプリは、ローカル コンピューター、シミュレーターかエミュレーター、またはリモート デバイスでデバッグできます。You can debug your app on the local machine, in a simulator or emulator, or on a remote device. Visual Studio の [ターゲット デバイス] メニューを示します。Here's the target device menu in Visual Studio.

アプリをデバッグするデバイス ターゲットのドロップダウン リスト

デスクトップ デバイスでアプリを起動するStart the app on a Desktop device

既定では、アプリはローカル コンピューターで実行されます。By default, the app runs on the local machine. [ターゲット デバイス] メニューには、デスクトップ デバイス ファミリのデバイスでアプリをデバッグするためのいくつかのオプションが用意されています。The target device menu provides several options for debugging your app on devices from the desktop device family.

  • シミュレーターSimulator
  • ローカル コンピューターLocal Machine
  • リモート コンピューターRemote Machine

ローカル コンピューターでデバッグを開始するにはTo start debugging on the local machine

  1. [標準] ツール バーの [ターゲット デバイス] メニュー ([デバッグの開始] メニュー) で、[ローカル コンピューター] が選択されていることを確認します In the target device menu (Start debugging menu) on the Standard toolbar, make sure that Local Machine is selected. (既定で選択されています)。(It's the default selection.)
  2. ツール バーの [デバッグの開始] ボタン ([デバッグの開始] ボタン) をクリックします。Click the Start Debugging button (Start debugging button) on the toolbar.

    または–or–

    [デバッグ] メニューの [デバッグの開始] をクリックします。From the Debug menu, click Start Debugging.

    または–or–

    F5 キーを押します。Press F5.

アプリがウィンドウで開かれ、最初に既定のスプラッシュ画面が表示されます。The app opens in a window, and a default splash screen appears first. スプラッシュ画面は、画像 (SplashScreen.png) と背景色によって定義されます (背景色はアプリのマニフェスト ファイルに指定します)。The splash screen is defined by an image (SplashScreen.png) and a background color (specified in your app's manifest file).

スプラッシュ画面が消えた後、アプリが表示されます。The splash screen disappears, and then your app appears. 次のようになります。It looks like this.

アプリの初期画面

Windows キーを押して [スタート] メニューを開き、すべてのアプリを表示します。Press the Windows key to open the Start menu, then show all apps. ローカルに配置したアプリのタイルが [スタート] メニューに追加されています。Notice that deploying the app locally adds its tile to the Start menu. 後でもう一度 (デバッグ モード以外で) アプリを実行するときは、[スタート] メニューでこのタイルをタップまたはクリックします。To run the app again later (not in debugging mode), tap or click its tile in the Start menu.

お疲れさまでした。これで、初めての UWP アプリの作成は完了です。It doesn't do much—yet—but congratulations, you've built your first UWP app!

デバッグを停止するにはTo stop debugging

ツール バーの [デバッグの停止] ボタン ([デバッグの停止] ボタン) をクリックします。Click the Stop Debugging button (Stop debugging button) in the toolbar.

または–or–

[デバッグ] メニューの [デバッグの停止] をクリックします。From the Debug menu, click Stop debugging.

- または -–or–

アプリ ウィンドウを閉じます。Close the app window.

手順 4. イベント ハンドラーStep 4: Event handlers

"イベント ハンドラー" は複雑なもののように聞こえますが、イベント (ユーザーによるボタンのクリックなど) が発生したときに呼び出されるコードの別名にすぎません。An "event handler" sounds complicated, but it's just another name for the code that is called when an event happens (such as the user clicking on your button).

  1. アプリの実行を停止します (まだ停止していない場合)。Stop the app from running, if you haven't already.

  2. デザイン キャンバス上のボタン コントロールをダブルクリックします。Visual Studio によってボタンのイベント ハンドラーが作成されます。Double-click on the button control on the design canvas to make Visual Studio create an event handler for your button.

    もちろん、すべてのコードを手動で作成することもできます。You can of course, create all the code manually too. または、ボタンをクリックして選択し、右下の [プロパティ] ウィンドウを確認します。Or you can click on the button to select it, and look in the Properties pane on the lower right. [イベント] (小さな稲妻) に切り替えると、イベント ハンドラーの名前を追加することができます。If you switch to Events (the little lightning bolt) you can add the name of your event handler.

  3. MainPage.xaml.cs (分離コード ページ) でイベント ハンドラーを編集します。Edit the event handler code in MainPage.xaml.cs, the code-behind page. ここから面白くなります。This is where things get interesting. 既定のイベント ハンドラーは次のようになります。The default event handler looks like this:

private void Button_Click(object sender, RouteEventArgs e)
{

}

これを変更して次のようにします。Let's change it, so it looks like this:

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();
        }

async キーワードも含めるようにしてください。そうしないと、アプリを実行しようとしたときにエラーが表示されます。Make sure you include the async keyword as well, or you'll get an error when you try to run the app.

ここで実行したことWhat did we just do?

このコードでは、いくつか Windows API を使用して音声合成オブジェクトを作成し、読み上げるテキストを指定します This code uses some Windows APIs to create a speech synthesis object, and then gives it some text to say. (SpeechSynthesis の使い方について詳しくは、SpeechSynthesis 名前空間のドキュメントをご覧ください)。(For more information on using SpeechSynthesis, see the SpeechSynthesis namespace docs.)

アプリを実行し、ボタンをクリックすると、コンピューター (または電話) が "Hello, World!" を文字どおりにしゃべります。When you run the app and click on the button, your computer (or phone) will literally say "Hello, World!".

まとめSummary

これで、Windows 10 と UWP 用の初めてのアプリを作成しました。Congratulations, you've created your first app for Windows 10 and the UWP!

アプリで使うコントロールを XAML によってレイアウトする方法については、グリッドに関するチュートリアルで学習するか、直接次のステップに進んでください。To learn how to use XAML for laying out the controls your app will use, try the grid tutorial, or jump straight to next steps?

関連項目See Also