"Hello world" アプリを C++ で作成するCreate a "Hello world" app in C++

Microsoft Visual Studio 2017 では、Extensible Application Markup Language (XAML) で定義されている UI を使い、Windows 10 で動作するアプリを C++ で開発できます。With Microsoft Visual Studio 2017, you can use C++ to develop an app that runs on Windows 10 with a UI that's defined in Extensible Application Markup Language (XAML).

注意

このチュートリアルでは、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.

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

  • このチュートリアルでは、Windows 10 が実行されているコンピューターで、Visual Studio Community 2017 か、Community バージョン以外のいずれかの Visual Studio 2017 を使います。To complete this tutorial, you must use Visual Studio Community 2017, or one of the non-Community versions of Visual Studio 2017, on a computer that's running Windows 10. ツールをダウンロードするには、ツールの入手に関するページをご覧ください。To download, see Get the tools.
  • このトピックは、標準 C++、XAML、「XAML の概要」で説明されている概念のいずれについても基本的な知識があることを前提としています。We assume you have a basic understanding of standard C++, XAML, and the concepts in the XAML overview.
  • Visual Studio の既定のウィンドウ レイアウトを使用することを前提としています。We assume you're using the default window layout in Visual Studio. 既定のレイアウトに戻すには、メニュー バーで [ウィンドウ][ウィンドウ レイアウトのリセット] の順にクリックします。To reset to the default layout, on the menu bar, choose Window > Reset Window Layout.

C++ デスクトップ アプリと Windows アプリの比較Comparing C++ desktop apps to Windows apps

C++ を使った Windows デスクトップのプログラミングに関する経験がある場合、UWP 用アプリのプログラミングには、通常の C++ プログラミングと同じ部分もありますが、新しい知識が必要になる部分もあります。If you're coming from a background in Windows desktop programming in C++, you'll probably find that some aspects of writing apps for the UWP are familiar, but other aspects require some learning.

同じ部分What's the same?

  • Windows ランタイム環境からアクセスできない Windows 関数をコードから呼び出さない限り、STL と CRT (一部例外あり)、さらに他のあらゆる C++ ライブラリを使うことができます。You can use the STL, the CRT (with some exceptions), and any other C++ library as long as the code does not attempt to call Windows functions that are not accessible from the Windows Runtime environment.

  • 使い慣れたビジュアル デザイナーがある場合は、Microsoft Visual Studio に組み込まれたデザイナーを引き続き使うことができます。また、より多機能な Blend for Visual Studio を使うこともできます。If you're accustomed to visual designers, you can still use the designer built into Microsoft Visual Studio, or you can use the more full-featured Blend for Visual Studio. 手動で UI のコーディングを行うことに慣れている場合は、XAML を手動で記述できます。If you're accustomed to coding UI by hand, you can hand-code your XAML.

  • Windows オペレーティング システムの型と独自のカスタム型を使うアプリをこれまでどおり作成します。You're still creating apps that use Windows operating system types and your own custom types.

  • Visual Studio のデバッガー、プロファイラー、その他開発ツールをこれまでどおり使います。You're still using the Visual Studio debugger, profiler, and other development tools.

  • Visual C++ コンパイラでネイティブ マシン コードにコンパイルされるアプリを引き続き作成します。You're still creating apps that are compiled to native machine code by the Visual C++ compiler. C++ で作成された UWP アプリは、マネージ ランタイム環境では実行されません。UWP apps in C++ don't execute in a managed runtime environment.

異なる部分What's new?

  • UWP アプリとユニバーサル Windows アプリの設計原則は、デスクトップ アプリの設計原則とは大きく異なります。The design principles for UWP apps and Universal Windows apps are very different from those for desktop apps. ウィンドウの境界線、ラベル、ダイアログ ボックスなどの強調は解除され、Window borders, labels, dialog boxes, and so on, are de-emphasized. コンテンツが最も目立つように表示されます。Content is foremost. 優れたユニバーサル Windows アプリには、こうした原則が計画段階の初期から活かされています。Great Universal Windows apps incorporate these principles from the very beginning of the planning stage.

  • XAML を使って UI 全体を定義します。You're using XAML to define the entire UI. Windows ユニバーサル アプリでは、MFC アプリや Win32 アプリよりもはるかに明確に UI と基本的なプログラム ロジックが分離されます。The separation between UI and core program logic is much clearer in a Windows Universal app than in an MFC or Win32 app. XAML を使った UI の見た目の調整と、コード ファイルでの動作のプログラミングを、異なる担当者が並行して行うことができます。Other people can work on the appearance of the UI in the XAML file while you're working on the behavior in the code file.

  • プログラミングの対象は主に Windows ランタイム (操作しやすい、オブジェクト指向の新しい API) ですが、Windowsデバイス上で一部の機能にこれまでどおり Win32 を使うこともできます。You're primarily programming against a new, easy-to-navigate, object-oriented API, the Windows Runtime, although on Windows devices Win32 is still available for some functionality.

  • Windows ランタイムのオブジェクトを利用したり作成したりするには C++/CX を使います。You use C++/CX to consume and create Windows Runtime objects. C++/CX は、C++ の例外処理、デリゲート、イベントのほか、動的に作成されるオブジェクトの自動参照カウントに対応しています。C++/CX enables C++ exception handling, delegates, events, and automatic reference counting of dynamically created objects. C++/CX を使うとき、ベースの COM と Windows アーキテクチャの詳細は、アプリ コードからは見えません。When you use C++/CX, the details of the underlying COM and Windows architecture are hidden from your app code. 詳しくは、「C++/CX 言語のリファレンス」をご覧ください。For more information, see C++/CX Language Reference.

  • アプリは、そのアプリ自体に含まれる型、アプリで使うリソース、必要な機能 (ファイル アクセス、インターネット アクセス、カメラ アクセスなど) に関するメタデータも含むパッケージにコンパイルされます。Your app is compiled into a package that also contains metadata about the types that your app contains, the resources that it uses, and the capabilities that it requires (file access, internet access, camera access, and so forth).

  • Microsoft Store と Windows Phone ストアでは、認定プロセスを通じてアプリの安全性が検証され、何百万ものユーザーに公開されます。In the Microsoft Store and Windows Phone Store your app is verified as safe by a certification process and made discoverable to millions of potential customers.

C++ を使った Hello World ストア アプリHello World Store app in C++

初めてのアプリは "Hello World" という名前です。このアプリでは、インタラクティビティ、レイアウト、スタイルに関する基本的な機能の使い方を学びます。Our first app is a "Hello World" that demonstrates some basic features of interactivity, layout, and styles. アプリは、Windows ユニバーサル アプリ プロジェクト テンプレートを使って作成します。We'll create an app from the Windows Universal app project template. Windows 8.1 や Windows Phone 8.1 用のアプリを開発したことがあれば、Visual Studio で 3 つのプロジェクト (Windows アプリ用、Windows Phone アプリ用、共有コード用) を使った経験があるでしょう。If you've developed apps for Windows 8.1 and Windows Phone 8.1 before, you might remember that you had to have three projects in Visual Studio, one for the Windows app, one for the phone app, and another with shared code. Windows 10 ユニバーサル Windows プラットフォーム (UWP) を使うと、プロジェクトを 1 つ開発すれば、すべてのデバイス (Windows 10 が実行されているデスクトップ コンピューターやノート PC、タブレット、携帯電話、VR デバイスなどのデバイス) で動作させることができます。The Windows 10 Universal Windows Platform (UWP) makes it possible to have just one project, which runs on all devices, including desktop and laptop computers running Windows 10, devices such as tablets, mobile phones, VR devices and so on.

それでは、次に示す基礎から始めましょう。We'll start with the basics:

  • Visual Studio 2017 でユニバーサル Windows プロジェクトを作成する方法。How to create a Universal Windows project in Visual Studio 2017.

  • 作成されるプロジェクトとファイルを把握する方法。How to understand the projects and files that are created.

  • Visual C++ コンポーネント拡張機能 (C++/CX) の拡張機能を把握する方法と、それを使うタイミング。How to understand the extensions in Visual C++ component extensions (C++/CX), and when to use them.

まず Visual Studio でソリューションを作成するFirst, create a solution in Visual Studio

  1. Visual Studio のメニュー バーから [ファイル][新規作成][プロジェクト] の順にクリックします。In Visual Studio, on the menu bar, choose File > New > Project.

  2. [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで、[インストール済み] > [Visual C++] > [Windows ユニバーサル] の順に展開します。In the New Project dialog box, in the left pane, expand Installed > Visual C++ > Windows Universal.

注意

C++ での開発用に Windowsユニバーサル ツールをインストールするように求められることもあります。You may be prompted to install the Windows Universal tools for C++ development.

  1. 中央のウィンドウで、[空のアプリ (Windows ユニバーサル)] テンプレートを選びます。In the center pane, select Blank App (Universal Windows).

    これらのオプションが見つからない場合は、ユニバーサル Windows アプリ開発ツールがインストールされていることを確認します。(If you don't see these options, make sure you have the Universal Windows App Development Tools installed. 詳しくは、「準備」をご覧ください。See Get set up for more info.)

  2. プロジェクトの名前を入力します。Enter a name for the project. ここでは、名前を "HelloWorld" とします。We'll name it HelloWorld.

    <span data-ttu-id="b4bea-158">[新しいプロジェクト] ダイアログ ボックスの C++ プロジェクト テンプレート</span><span class="sxs-lookup"><span data-stu-id="b4bea-158">C++ project templates in the New Project dialog box</span></span>

  3. [OK] を選択します。Choose the OK button.

注意

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.

プロジェクト ファイルが作られます。Your project files are created.

先に進む前に、ソリューションの構成内容を調べてみましょう。Before we go on, let’s look at what's in the solution.

ユニバーサル アプリ ソリューション (ノードを折りたたんだところ)

プロジェクト ファイルについてAbout the project files

プロジェクト フォルダー内のすべての .xaml ファイルには、対応する .xaml.h ファイルと .xaml.cpp ファイルが同じフォルダーに、.g ファイルと .g.hpp ファイルが [生成されたファイル] フォルダーにそれぞれ存在します。このフォルダーはプロジェクト内ではなく、ディスク上にあります。Every .xaml file in a project folder has a corresponding .xaml.h file and .xaml.cpp file in the same folder and a .g file and a .g.hpp file in the Generated Files folder, which is on disk but not part of the project. UI 要素を作成してデータ ソースに接続 (DataBinding) するには、XAML ファイルに変更を加えます。You modify the XAML files to create UI elements and connect them to data sources (DataBinding). イベント ハンドラーにカスタム ロジックを追加するには、.h ファイルと .cpp ファイルに変更を加えます。You modify the .h and .cpp files to add custom logic for event handlers. 自動生成ファイルは、XAML マークアップから C++ への変換を表します。The auto-generated files represent the transformation of the XAML markup into C++. これらのファイルは変更しないでください。ただし、ファイルを観察すると、分離コードの働きをより深く理解できます。Don't modify these files, but you can study them to better understand how the code-behind works. 基本的に、生成されたファイルには、XAML ルート要素の部分クラスの定義が記述されています。これは、*.xaml.h ファイルや .cpp ファイルで変更するクラスと同じです。Basically, the generated file contains a partial class definition for a XAML root element; this class is the same class that you modify in the *.xaml.h and .cpp files. 生成されたファイルには、XAML UI の子要素がクラスのメンバーとして宣言されており、開発者がコードの中で参照することができます。The generated files declare the XAML UI child elements as class members so that you can reference them in the code you write. ビルド時には、生成されたコードと自分で記述したコードとがマージされてクラス定義が完成し、コンパイルされます。At build time, the generated code and your code are merged into a complete class definition and then compiled.

まずプロジェクト ファイルを見てみましょう。Let's look first at the project files.

  • App.xaml、App.xaml.h、App.xaml.cpp: アプリのエントリ ポイントとなる Application オブジェクトを表します。App.xaml, App.xaml.h, App.xaml.cpp: Represent the Application object, which is an app's entry point. App.xaml に、ページ固有の UI マークアップは含まれませんが、UI のスタイルなどの要素を追加して任意のページからアクセスすることができます。App.xaml contains no page-specific UI markup, but you can add UI styles and other elements that you want to be accessible from any page. 分離コード ファイルには、OnLaunched イベントと OnSuspending イベントのハンドラーが含まれます。The code-behind files contain handlers for the OnLaunched and OnSuspending events. 通常、ここには、起動時にアプリを初期化したり、中断または終了時にクリーンアップ処理を実行したりするためのカスタム コードを追加します。Typically, you add custom code here to initialize your app when it starts and perform cleanup when it's suspended or terminated.
  • MainPage.xaml、MainPage.xaml.h、MainPage.xaml.cpp: アプリの既定の "スタート" ページに使う XAML マークアップと分離コードが記述されます。MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: Contain the XAML markup and code-behind for the default "start" page in an app. ナビゲーション サポートやビルトイン コントロールはありません。It has no navigation support or built-in controls.
  • pch.h、pch.cpp: プリコンパイル済みヘッダー ファイルと、それをプロジェクトにインクルードするファイルです。pch.h, pch.cpp: A precompiled header file and the file that includes it in your project. pch.h には、変更頻度が低く、ソリューション内の他のファイルにインクルードされるヘッダーを含めることができます。In pch.h, you can include any headers that do not change often and are included in other files in the solution.
  • Package.appxmanifest: アプリが必要とするデバイスの機能や、アプリのバージョン情報などのメタデータを表す XML ファイルです。Package.appxmanifest: An XML file that describes the device capabilities that your app requires, and the app version info and other metadata. このファイルをダブルクリックすると、マニフェスト デザイナーで開くことができます。To open this file in the Manifest Designer, just double-click it.
  • HelloWorld_TemporaryKey.pfx: Visual Studio から対象のコンピューター上にアプリを展開するためのキーです。HelloWorld_TemporaryKey.pfx: A key that enables deployment of the app on this machine, from Visual Studio.

初めてのコードA first look at the code

共有プロジェクト内の App.xaml.h と App.xaml.cpp のコードをよく見ると、ほとんどが、見覚えのある ISO C++ コードであることがわかります。If you examine the code in App.xaml.h, App.xaml.cpp in the shared project, you'll notice that it's mostly C++ code that looks familiar. ただし、Windows ランタイム アプリの開発が初めての場合や、これまで C++/CLI で作業を行ってきた場合は、あまり馴染みのない構文要素も中には存在します。However, some syntax elements might not be as familiar if you are new to Windows Runtime apps, or you've worked with C++/CLI. C++/CX でよく使われる標準的ではない構文要素を以下に示します。Here are the most common non-standard syntax elements you'll see in C++/CX:

ref クラスRef classes

Windows ランタイムのほぼすべてのクラスは、Windows API のすべての型 (XAML コントロール、アプリ内のページ、App クラス自体、すべてのデバイス オブジェクトとネットワーク オブジェクト、すべてのコンテナー型) を含んでおり、ref クラス として宣言されます Almost all Windows Runtime classes, which includes all the types in the Windows API--XAML controls, the pages in your app, the App class itself, all device and network objects, all container types--are declared as a ref class. (value class または value struct の Windows 型もわずかに存在します)。(A few Windows types are value class or value struct). ref クラスはすべての言語から利用できます。A ref class is consumable from any language. C++ では、これらの型の有効期間が (ガベージ コレクションではなく) 自動参照カウントによって制御されるため、それらのオブジェクトを明示的に削除することはできません。In C++, the lifetime of these types is governed by automatic reference counting (not garbage collection) so that you never explicitly delete these objects. ref クラスは独自に作成することもできます。You can create your own ref classes as well.

namespace HelloWorld
{
   /// <summary>
   /// An empty page that can be used on its own or navigated to within a Frame.
   /// </summary>
   public ref class MainPage sealed
   {
      public:
      MainPage();
   };
}

Windows ランタイムのすべての型は名前空間内で宣言する必要があり、ISO C++ の場合は異なり、型そのものがアクセシビリティ修飾子を持ちます。All Windows Runtime types must be declared within a namespace and unlike in ISO C++ the types themselves have an accessibility modifier. public 修飾子を持つクラスは、その名前空間の外の Windows ランタイム コンポーネントから参照することができます。The public modifier makes the class visible to Windows Runtime components outside the namespace. sealed キーワードは、基底クラスとして使うことができないことを意味します。The sealed keyword means the class cannot serve as a base class. ほとんどの ref クラスは sealed です。クラスの継承は、JavaScript が認識しないため、あまり広くは使われません。Almost all ref classes are sealed; class inheritance is not broadly used because Javascript does not understand it.

ref new^ (ハット)ref new and ^ (hats)

ref クラスの変数は ^ (ハット) 演算子を使って宣言します。ref new キーワードでオブジェクトをインスタンス化することができます。You declare a variable of a ref class by using the ^ (hat) operator, and you instantiate the object with the ref new keyword. それ以降、オブジェクトのインスタンス メソッドにアクセスする際は、C++ のポインターと同様の -> 演算子を使います。Thereafter you access the object's instance methods with the -> operator just like a C++ pointer. 静的メソッドにアクセスする場合は、ISO C++ と同様、:: 演算子を使います。Static methods are accessed with the :: operator just as in ISO C++.

次のコードは、完全修飾名を使ってオブジェクトをインスタンス化し、-> 演算子を使ってインスタンス メソッドを呼び出しています。In the following code, we use the fully qualified name to instantiate an object, and use the -> operator to call an instance method.

Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =
     ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();

bitmapImage->SetSource(fileStream);

このコードは、.cpp ファイルで、using namespace Windows::UI::Xaml::Media::Imaging ディレクティブと auto キーワードを追加し、次のように記述するのが一般的です。Typically, in a .cpp file we would add a using namespace Windows::UI::Xaml::Media::Imaging directive and the auto keyword, so that the same code would look like this:

auto bitmapImage = ref new BitmapImage();
bitmapImage->SetSource(fileStream);

プロパティProperties

ref クラスにはプロパティを与えることができます。プロパティは、マネージ言語のプロパティと同様、それを利用する側のコードからはフィールドとして見える特殊なメンバー関数です。A ref class can have properties, which, just as in managed languages, are special member functions that appear as fields to consuming code.

public ref class SaveStateEventArgs sealed
{
   public:
   // Declare the property
   property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
   {
      Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
   }
   ...
};

   ...
   // consume the property like a public field
   void PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {    
      if (mruToken != nullptr && !mruToken->IsEmpty())
   {
      e->PageState->Insert("mruToken", mruToken);
   }
}

デリゲートDelegates

マネージ言語と同様、デリゲートは、特定のシグニチャの関数をカプセル化する参照型です。Just as in managed languages, a delegate is a reference type that encapsulates a function with a specific signature. ほとんどの場合、イベントとそのハンドラーに使われます。They are most often used with events and event handlers

// Delegate declaration (within namespace scope)
public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);

// Event declaration (class scope)
public ref class NavigationHelper sealed
{
   public:
   event LoadStateEventHandler^ LoadState;
};

// Create the event handler in consuming class
MainPage::MainPage()
{
   auto navigationHelper = ref new Common::NavigationHelper(this);
   navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
}

アプリへのコンテンツの追加Adding content to the app

それでは、アプリにコンテンツを追加しましょう。Let's add some content to the app.

手順 1: スタート ページの変更Step 1: Modify your start page

  1. ソリューション エクスプローラーで、MainPage.xaml を開きます。In Solution Explorer, open MainPage.xaml.
  2. ルート Grid の終了タグの直前に次の XAML を追加して、UI に使うコントロールを作成します。Create controls for the UI by adding the following XAML to the root Grid, immediately before its closing tag. この XAML には、ユーザーの名前をたずねる TextBlock、ユーザーの名前を受け取る TextBox 要素、Button、別の TextBlock 要素を持つ StackPanel が含まれます。It contains a StackPanel that has a TextBlock that asks the user's name, a TextBox element that accepts the user's name, a Button, and another TextBlock element.

    <StackPanel x:Name="contentPanel" Margin="120,30,0,0">
        <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
        <TextBlock Text="What's your name?"/>
        <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput"/>
    </StackPanel>
    
  3. ここまでの作業で、ごく基本的なユニバーサル Windows アプリが作成されました。At this point, you have created a very basic Universal Windows app. UWP アプリの動作や外観を確かめるには、F5 キーを押してデバッグ モードでアプリをビルド、展開、起動します。To see what the UWP app looks like, press F5 to build, deploy, and run the app in debugging mode.

最初に、既定のスプラッシュ画面が表示されます。The default splash screen appears first. この画面には、アプリのマニフェスト ファイルに指定された画像 (Assets\SplashScreen.scale-100.png) と背景色があります。It has an image—Assets\SplashScreen.scale-100.png—and a background color that are specified in the app's manifest file. スプラッシュ画面をカスタマイズする方法については、「スプラッシュ画面の追加」をご覧ください。To learn how to customize the splash screen, see Adding a splash screen.

スプラッシュ画面が消えると、アプリが表示されます。When the splash screen disappears, your app appears. アプリのメイン ページが表示されます。It displays the main page of the App.

コントロールがある UWP アプリ画面

特別な機能はありませんが、ともかくこれで、初めてのユニバーサル Windows プラットフォーム アプリの作成は完了です。It doesn't do much—yet—but congratulations, you've built your first Universal Windows Platform app!

アプリのデバッグを停止して閉じるには、Visual Studio に戻り、Shift キーを押しながら F5 キーを押します。To stop debugging and close the app, return to Visual Studio and press Shift+F5.

詳しくは、「Visual Studio からのストア アプリの実行」をご覧ください。For more information, see Run a Store app from Visual Studio.

アプリの TextBox に文字を入力することはできますが、この時点では Button をクリックしても何も起こりません。In the app, you can type in the TextBox, but clicking the Button doesn't do anything. この後の手順で、ユーザーに合わせたあいさつを表示する、ボタンの Click イベント用のイベント ハンドラーを作成します。In later steps, you create an event handler for the button's Click event, which displays a personalized greeting.

手順 2: イベント ハンドラーの作成Step 2: Create an event handler

  1. MainPage.xaml (XAML ビューまたはデザイン ビュー) で、先に追加した StackPanel の "Say Hello" Button を選びます。In MainPage.xaml, in either XAML or design view, select the "Say Hello" Button in the StackPanel you added earlier.
  2. F4 キーを押してプロパティ ウィンドウを開き、[イベント] ボタン ([イベント] ボタン) を選択します。Open the Properties Window by pressing F4, and then choose the Events button (Events button).
  3. Click イベントを探します。Find the Click event. このテキスト ボックスに、Click イベントを処理する関数の名前を入力します。In its text box, type the name of the function that handles the Click event. この例では、「Button_Click」と入力します。For this example, type "Button_Click".

    プロパティ ウィンドウのイベント ビュー

  4. Enter キーを押します。Press Enter. MainPage.xaml.cpp にイベント ハンドラー メソッドが作成され、イベントの発生時に実行されるコードを追加できるように開きます。The event handler method is created in MainPage.xaml.cpp and opened so that you can add the code that's executed when the event occurs.

    同時に、MainPage.xaml で、Button の XAML が更新されて、次のように Click イベント ハンドラーが宣言されます。At the same time, in MainPage.xaml, the XAML for the Button is updated to declare the Click event handler, like this:

    <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    

    これを XAML コードに手動で入力することもできます。これは、デザイナーが読み込みに失敗する場合に役立つことがあります。You could also have simply added this to the xaml code manually, which can be helpful if the designer doesn't load. 手動で入力する場合は、「Click」と入力すると、IntelliSense によって新しいイベント ハンドラーを追加するオプションがポップアップされます。If you enter this manually, type "Click" and then let IntelliSense pop up the option to add a new event handler. このように、Visual Studio によって必要なメソッド宣言とスタブが作成されます。That way, Visual Studio creates the necessary method declaration and stub.

    デザイナーは、レンダリング中にハンドルされない例外が発生すると、読み込みに失敗します。The designer fails to load if an unhandled exception occurs during rendering. デザイナーでのレンダリングでは、ページの設計時のバージョンが実行されます。Rendering in the designer involves running a design-time version of the page. これは、ユーザー コードの実行を無効にする場合に便利です。It can be helpful to disable running user code. そのためには、[ツール]、[オプション] の順にクリックして、開いたダイアログ ボックスで設定を変更します。You can do this by changing the setting in the Tools, Options dialog box. [XAML デザイナー] で、[プロジェクト コードを XAML デザイナーで実行する (サポートされている場合)] チェック ボックスをオフにします。Under XAML Designer, uncheck Run project code in XAML designer (if supported).

  5. MainPage.xaml.cpp で、作成した Button_Click イベント ハンドラーに次のコードを追加します。In MainPage.xaml.cpp, add the following code to the Button_Click event handler that you just created. このコードは、nameInput TextBox コントロールからユーザー名を取得し、それを使ってあいさつを作ります。This code retrieves the user's name from the nameInput TextBox control and uses it to create a greeting. 結果は、greetingOutput TextBlock に表示されます。The greetingOutput TextBlock displays the result.

    void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
        greetingOutput->Text = "Hello, " + nameInput->Text + "!";
    }
    
  6. プロジェクトをスタートアップ プロジェクトとして設定し、F5 キーを押してアプリをビルド、実行します。Set the project as the startup, and then press F5 to build and run the app. テキスト ボックスに名前を入力してボタンをクリックすると、ユーザーに合わせたあいさつが表示されます。When you type a name in the text box and click the button, the app displays a personalized greeting.

メッセージが表示されたアプリ画面

手順 3: スタート ページのスタイルを設定するStep 3: Style the start page

テーマを選ぶChoosing a theme

アプリの外観は簡単にカスタマイズできます。It's easy to customize the look and feel of your app. 既定では、アプリは淡色スタイルのリソースを使います。By default, your app uses resources that have a light style. システム リソースには、淡色テーマも含まれています。The system resources also include a light theme. 試しにそれを使って、どのように表示されるか見てみましょう。Let's try it out and see what it looks like.

濃色テーマに切り替えるにはTo switch to the dark theme

  1. App.xaml を開きます。Open App.xaml.
  2. 開始 Application タグで、RequestedTheme プロパティを編集し、その値を Dark に設定します。In the opening Application tag, edit the RequestedTheme property and set its value to Dark:

    RequestedTheme="Dark"
    

    濃色テーマを追加した Application タグ全体を次に示します。Here's the full Application tag with the dark theme :

        <Application
        x:Class="HelloWorld.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:HelloWorld"
        RequestedTheme="Dark">
    
  3. F5 キーを押して、アプリをビルドし、実行します。Press F5 to build and run it. 濃色テーマが使われていることに注目してください。Notice that it uses the dark theme.

濃色テーマのアプリ画面

どちらを使えばいいでしょうか。Which theme should you use? どちらでも好きなほうを使用できます。Whichever one you want. お勧めするとすれば、主に画像やビデオを表示するアプリには濃色テーマ、テキストが大量に含まれるアプリには淡色テーマです。Here's our take: for apps that mostly display images or video, we recommend the dark theme; for apps that contain a lot of text, we recommend the light theme. カスタム配色を使う場合は、アプリの外観に最もよく合ったテーマを使ってください。If you're using a custom color scheme, use the theme that goes best with your app's look and feel. このチュートリアルの残りの部分では、スクリーンショットで淡色テーマを使います。In the rest of this tutorial, we use the Light theme in screenshots.

注: テーマは、アプリの起動時に適用されます。アプリの実行中にテーマを変更することはできません。Note The theme is applied when the app is started and can't be changed while the app is running.

システム スタイルの使用Using system styles

現時点では、Windows アプリ内のテキストが小さすぎて判読困難です。Right now, in the Windows app the text is very small and difficult to read. システム スタイルを適用してこの点を修正してみましょう。Let's fix that by applying a system style.

要素のスタイルを変更するにはTo change the style of an element

  1. Windows プロジェクトで、MainPage.xaml を開きます。In the Windows project, open MainPage.xaml.
  2. XAML ビューまたはデザイン ビューで、前に追加した "What's your name?"TextBlock を選びます。In either XAML or design view, select the "What's your name?"TextBlock that you added earlier.
  3. [プロパティ] ウィンドウ (F4) の右上にある [プロパティ] ボタン (Properties button) をクリックします。In the Properties window (F4), choose the Properties button (Properties button) in the upper right.
  4. [Text] グループを展開し、フォント サイズを 18px に設定します。Expand the Text group and set the font size to 18 px.
  5. [その他] グループを展開し、Style プロパティを探します。Expand the Miscellaneous group and find the Style property.
  6. プロパティ マーカー (Style プロパティの右にある緑色のボックス) をクリックし、メニューから [システム リソース][BaseTextBlockStyle] の順にクリックします。Click the property marker (the green box to the right of the Style property), and then, on the menu, choose System Resource > BaseTextBlockStyle.

    BaseTextBlockStyle は、\Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml の ResourceDictionary で定義されているリソースです。BaseTextBlockStyle is a resource that's defined in the ResourceDictionary in \Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.

    プロパティ ウィンドウのプロパティ ビュー

    XAML デザイン サーフェイスで、テキストの外観が変化します。On the XAML design surface, the appearance of the text changes. XAML エディターで、TextBlock の XAML が更新されます。In the XAML editor, the XAML for the TextBlock is updated:

    <TextBlock Text="What's your name?" Style="{StaticResource BaseTextStyle}"/>
    
  7. このプロセスを繰り返してフォント サイズを設定し、BaseTextBlockStylegreetingOutput TextBlock 要素に割り当てます。Repeat the process to set the font size and assign the BaseTextBlockStyle to the greetingOutputTextBlock element.

    ヒント: この TextBlock にはテキストはありませんが、マウス ポインターを XAML デザイン サーフェイスの上に移動すると、対応する位置に青色の輪郭が表示されて、選択できます。Tip Although there's no text in this TextBlock, when you move the pointer over the XAML design surface, a blue outline shows where it is so that you can select it.

    XAML は次のようになります。Your XAML now looks like this:

    <StackPanel x:Name="contentPanel" Margin="120,30,0,0">
        <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" Text="What's your name?"/>
        <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>
        </StackPanel>
        <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" x:Name="greetingOutput"/>
    </StackPanel>
    
  8. F5 キーを押して、アプリをビルドし、実行します。Press F5 to build and run the app. 次のように表示されます。It now looks like this:

アプリ画面のテキストが大きくなった

手順 4: 異なるウィンドウ サイズに合わせて UI を調整するStep 4: Adapt the UI to different window sizes

次に、モバイル デバイスで適切に表示されるように、さまざまな画面サイズに合わせて UI を調整します。Now we'll make the UI adapt to different screen sizes so it looks good on mobile devices. これを行うには、VisualStateManager を追加して、さまざまな表示状態に適用されるプロパティを設定します。To do this, you add a VisualStateManager and set properties that are applied for different visual states.

UI レイアウトを調整するにはTo adjust the UI layout

  1. XAML エディターで、ルートの Grid 要素の開始タグの後に、この XAML ブロックを追加します。In the XAML editor, add this block of XAML after the opening tag of the root Grid element.

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="641" />
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="narrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="contentPanel.Margin" Value="20,30,0,0"/>
                    <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                    <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    
  2. ローカル コンピューターでアプリをデバッグします。Debug the app on the local machine. UI は、ウィンドウが 641 DIP (デバイスに依存しないピクセル) より狭くならない限り、前と同じように表示されることに注意してください。Notice that the UI looks the same as before unless the window gets narrower than 641 device-independent pixels (DIPs).

  3. モバイル デバイス エミュレーターでアプリをデバッグします。Debug the app on the mobile device emulator. narrowState で定義したプロパティが UI に使用され、小さい画面で適切に表示されていることに注意してください。Notice that the UI uses the properties you defined in the narrowState and appears correctly on the small screen.

スタイル付きテキストを表示するモバイル アプリ画面

以前のバージョンの XAML で VisualStateManager を使ったことがある場合は、この XAML では簡素化された構文が使用されていることに気付くかもしれません。If you've used a VisualStateManager in previous versions of XAML, you might notice that the XAML here uses a simplified syntax.

wideState という名前の VisualState で、AdaptiveTriggerMinWindowWidth プロパティが 641 に設定されています。The VisualState named wideState has an AdaptiveTrigger with its MinWindowWidth property set to 641. これは、ウィンドウの幅が 641 DIP という最小値以上である場合に限って、状態が適用されることを意味します。This means that the state is to be applied only when the window width is not less than the minimum of 641 DIPs. この状態には Setter オブジェクトを定義していないため、XAML でページのコンテンツに対して定義したレイアウト プロパティが使用されます。You don't define any Setter objects for this state, so it uses the layout properties you defined in the XAML for the page content.

2 つ目の VisualState である narrowState で、AdaptiveTriggerMinWindowWidth プロパティが 0 に設定されています。The second VisualState, narrowState, has an AdaptiveTrigger with its MinWindowWidth property set to 0. この状態は、ウィンドウの幅が 0 より大きく 641 DIP より小さい場合に適用されます This state is applied when the window width is greater than 0, but less than 641 DIPs. (641 DIP では、wideState が適用されます)。この状態では、いくつかの Setter オブジェクトを設定して、UI のコントロールのレイアウト プロパティを変更します。(At 641 DIPs, the wideState is applied.) In this state, you do define some Setter objects to change the layout properties of controls in the UI:

  • contentPanel の左側の余白を 120 から 20 に減らします。You reduce the left margin of the contentPanel element from 120 to 20.
  • inputPanel 要素の OrientationHorizontal から Vertical に変更します。You change the Orientation of the inputPanel element from Horizontal to Vertical.
  • 4 DIP の上余白を inputButton 要素に追加します。You add a top margin of 4 DIPs to the inputButton element.

まとめSummary

これで、最初のチュートリアルは終わりです。Congratulations, you've completed the first tutorial! このチュートリアルでは、Windows ユニバーサル アプリにコンテンツを追加する方法、そのコンテンツで対話式操作を実現する方法、見た目を変更する方法の 3 点について説明しました。It taught how to add content to Windows Universal apps, how to add interactivity to them, and how to change their appearance.

次の手順Next steps

Windows 8.1 や Windows Phone 8.1 を対象とする Windows ユニバーサル アプリ プロジェクトがある場合は、そのプロジェクトを Windows 10 に移植できます。If you have a Windows Universal app project that targets Windows 8.1 and/or Windows Phone 8.1, you can port it to Windows 10. この移植を自動的に行うプロセスはありませんが、手動で実行することができます。There is no automatic process for this, but you can do it manually. 新しい Windows ユニバーサル プロジェクトを使って開発を始めることで、最新のプロジェクト システム構造を入手し、お使いのコード ファイルをプロジェクトのディレクトリ構造にコピーしたり、項目をプロジェクトに追加したりすることができます。また、このトピックのガイダンスに従い、VisualStateManager を使って XAML を書き換えることもできます。Start with a new Windows Universal project to get the latest project system structure and manifest files, copy your code files into the project's directory structure, add the items to your project, and rewrite your XAML using the VisualStateManager according to the guidance in this topic. 詳しくは、「Windows ランタイム 8 プロジェクトのユニバーサル Windows プラットフォーム (UWP) プロジェクトへの移植」と「ユニバーサル Windows プラットフォームへの移植 (C++)」をご覧ください。For more information, see Porting a Windows Runtime 8 project to a Universal Windows Platform (UWP) project and Porting to the Universal Windows Platform (C++).

UWP アプリと統合する既存の C++ コードがある場合、たとえば、既存のアプリケーションに新しい UWP UI を作成する場合は、「方法: ユニバーサル Windows プロジェクトで既存の C++ コードを使う」をご覧ください。If you have existing C++ code that you want to integrate with a UWP app, such as to create a new UWP UI for an existing application, see How to: Use existing C++ code in a Universal Windows project.