UWPアプリ開発・はじめの一歩

UWPアプリ開発をはじめました。
まとまった情報はまだまだ少ないけど、WPFなどのXAML系の開発経験があれば、以下のあたりを見ながらなんとなく作れそうな気がします。

参考情報

HowTo

英語ですが、以下のページでいろんなHowToガイドがあります。
何かやりたいことをどうコーディングしていけばいいかを探すにはこの辺もいいかも。
https://msdn.microsoft.com/library/windows/apps/xaml/mt244352.aspx

Microsoft Virtual Academyの動画

現時点では、msdnとかのページよりもMVAの動画とかのほうが情報が充実してる感じがします。
http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10?prid=mvp-5001048
ちょっと動画をすべて見るのはつらそうですが、パワーポイントのスライドがダウンロードできるので、スライドにざっと目を通すだけでもだいぶ勉強になりそうです。

この中でも、特に以下のあたりのスライドは最初に目を通しておいたほうがよさそう

コントロール類	03 XAML Controls
データバインディングについて	04 XAML Data binding
アダプティブなUIについて	06 Adaptive design, 07 Adaptive UI, 08 Adaptive Code

サンプルコード

githubの以下のリポジトリに、UWPのサンプルコードがいっぱいあります。
チュートリアル的な情報はまだあまりないので、こういうサンプルコードをいろいろ眺めるのが一番手っ取り早い学習方法かもしれません。
https://github.com/Microsoft/Windows-universal-samples

Template10

UWP向けのプロジェクトのテンプレートが以下のリポジトリにあります。
https://github.com/Windows-XAML/Template10

参考になるブログ

以下のブログのUWPについての一連の記事もとても参考になります。
http://okazuki.hatenablog.com/archive/category/UWP
http://coelacanth.jp.net/category/windows8/universal-windows-platform/
日本語の情報まだ少ないので、この辺のブログの情報がとても助かります。

作ってみる

開発者モードを有効にする

アプリを作成する前にまずはOSの開発者モードを有効にしておきましょう。
以下のように、設定⇒更新とセキュリティ⇒開発者向けで表示される画面のラジオボタンで開発者モードを選びます。
f:id:minami_SC:20150823021044p:plain:w400

この設定を開発者モードにしていないと、UWPアプリをローカルPCで実行しようとしたときに、以下のようなエラーが出て実行できません。
f:id:minami_SC:20150823021054p:plain:w300

プロジェクト作成

まずはプロジェクトの新規作成ウィザードで、以下の「空白のアプリ(ユニバーサル Windows)」というテンプレートを選びプロジェクトを作成します。
f:id:minami_SC:20150823021101p:plain:w350

するとこんな感じのプロジェクトが作成されます。
f:id:minami_SC:20150823021111p:plain:w200
主なコードはApp.xaml/xaml.csと、MainPage.xaml/xaml.csだけのシンプルなプロジェクトが作られます。
(他のファイルは、Nugetの依存関係やらApplicationInsightやらの設定ファイルなど。)

コードの編集

ここでは、ごくシンプルなHello Worldアプリを作ってみたいと思います。
画面にはボタンを一個だけ用意し、クリックするとHello Worldとダイアログ表示を行います。

以下の二つのファイルを以下のように編集しました。

MainPage.xaml

Buttonを追加し、クリック時のイベントハンドラの設定をしています。

<Page x:Class="App1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:App1"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Margin="10"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Click="button_Click"
                Content="メッセージを表示" />
    </Grid>
</Page>

MainPage.xaml.cs

ボタンがクリックされたときのイベントハンドラを定義してます。
UWPでのダイアログ表示は、以下のようにMessageDialogクラスのインスタンスを作りShowAsyncメソッドを呼び出すことで行います。

namespace App1
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void button_Click(object sender, RoutedEventArgs e)
        {
            var messageDialog = new Windows.UI.Popups.MessageDialog("Hello, World!");
            await messageDialog.ShowAsync();
        }
    }
}

実行

まずは、普通にローカルPC上で実行してみます。
IDEのデバッグターゲットがローカルコンピューターになっていることを確認してから、Ctrl+F5で実行します。
f:id:minami_SC:20150823024339p:plain
f:id:minami_SC:20150823024350p:plain
このようにウィンドウ表示で実行されます。
ボタンをクリックすると、モダンなデザインのダイアログが表示されます。
f:id:minami_SC:20150823024404p:plain

いろんな環境で実行してみる

IDEでデバイスを切り替えてもう一回実行してみます。
f:id:minami_SC:20150823024501p:plain
Windows10 Modileのエミュレータを指定し、スマホ上での実行結果を確認してみます。
f:id:minami_SC:20150823024413p:plain
f:id:minami_SC:20150823024419p:plain