こんにちは！このシリーズでは、C#を使ってUWP(Universal Windows Platform)デスクトップアプリを作成する方法を段階的に紹介します。 このシリーズは、C#やデスクトップアプリの開発に慣れていない方のためのガイドで、基本的なアプリを作成するプロセスから始めて、徐々に複雑な機能を実装できるようにします。
最初の記事では、UWPアプリ開発環境を設定し、最も簡単なアプリである「Hello World！」を作ってみます。 この過程で、C#とUWPプロジェクトの基本的な構造を身につけることができるでしょう。
1. UWPとC#の紹介
UWPはMicrosoftが提供するアプリ開発プラットフォームで、Windows 10以上で実行される様々なデバイス（PC、タブレット、Xboxなど）で動作するアプリケーションを作成することができます。これにより、一つのコードベースで複数の環境で動作するアプリを開発することができます。C#は.NETプラットフォームで最も多く使用されているプログラミング言語で、強力な機能と簡単な文法を備えています。
このシリーズでは、C#とXAML(UWPで使用するマークアップ言語)を利用してUIと機能を実装する方法を学びます。
2. 開発環境設定
まず、UWPアプリを開発するため必要なツールをインストールする必要があります。Visual StudioはUWPアプリ開発に最適なIDE(統合開発環境)で、無料版のVisual Studio Communityをインストールすることができます。
1) Visual Studioのインストール
1.
Visual Studioのダウンロードページに移動します。
2.
「Visual Studio Community」をダウンロードしてインストールします。
3.
インストール中にユニバーサルWindowsプラットフォーム開発ワークロードを選択します。
4.
Windows 10 SDKと.NETの最新バージョンも一緒にインストールしてください。
2) 開発者モードを有効にする
UWPアプリをテストするには、Windows 10で開発者モードを有効にする必要があります。
1.
設定 > アップデートとセキュリティ > 開発者用に移動します。
2.
開発者モードを有効にします。
3. 新しいUWPプロジェクトの作成
それでは、Visual Studioで最初のUWPプロジェクトを作成してみましょう。
1) プロジェクトの作成
1.
Visual Studioを実行し、新規プロジェクトの作成を選択します。
2.
ユニバーサルWindowsプラットフォームを検索し、空のアプリ(ユニバーサルWindows)テンプレートを選択します。
3.
プロジェクト名とパスを設定し、作成をクリックします。
4.
対象および最小バージョン選択画面で、Windows 10(最新バージョン)を選択します。
2) プロジェクト構造を理解する
UWPプロジェクトは複数のフォルダとファイルで構成されます。主なファイルとフォルダは下記の通りです：
•
MainPage.xaml: アプリの基本画面を定義するファイル。
•
App.xaml: アプリのグローバル設定とリソースを管理するファイル。
•
Package.appxmanifest: アプリのメタデータ(名前、アイコン、権限など)を設定するファイル。
4. Hello World！の実装
次は一番簡単な機能である「Hello World！」を画面に出力してみます。
1) XAMLでUI作成
MainPage.xamlファイルを開いて次のコードを追加してテキストを画面に出力してみましょう。
<Page
x:Class="PhotoBooth.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhotoBooth"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30">
Hello World!
</TextBlock>
</Grid>
</Page>
XML
복사
上のコードは簡単なテキストを画面中央に表示する内容です。TextBlockタグはテキストを出力するUI要素です。
2) コード実行
コードを書いた後、デバッグ > デバッグ開始(F5)を押してアプリを実行してみます。アプリが実行されたら「Hello World！」というテキストが中央に出力された画面が見えます。
5. まとめ
これで最初のUWPアプリが完成しました！今回はUWPアプリを作るため開発環境を設定して、簡単なUIを出力する方法をみてみました。 次回の記事ではカメラプレビュー機能を実装して写真を撮る機能を追加する予定ですので、続きは続きましょう！
このシリーズを通じて皆さんはC#とUWPの基本的な概念を理解し、実際のアプリを作ってみる機会を得ることができるでしょう。
次回予告：
C#でUWPデスクトップアプリを作る2/5：カメラプレビューを実装する
他の言語で読む:
著者をサポートする:
私の記事を楽しんでいただけたら、一杯のコーヒーで応援してください！