Visual Studio 2017 のダウンロードとインストール

まずは、以下のページから Visual Studio 2017 (以後、VS2017) をダウンロードします。
https://www.visualstudio.com/ja/downloads/

ダウンロードするのは、無償の Visual Studio Community です。この [無償ダウンロード] をクリックすると、ダウンロードが開始されます。

インストーラーを実行すると、ワークロードの選択画面が表示されます。この中から [ユニバーサル Windows プラットフォーム開発] をチェックします。

[個別のコンポーネント] をクリックし、Windows 10 SDK の一番新しいビルド番号のものをチェックします。以下の画像では 14393 です。
※筆者の環境では、[UWP 用 Windows 10 SDK] だけインストールした状態では、プロジェクト作成時になぜか「ターゲットに適したSDKが見つかりません」というエラーが表示されました。

これで [インストール] をクリックすると、インストールが開始されます。以下の画面が表示されたら完了です。

VS2017 の起動とプロジェクトの作成

インストール完了後、VS2017 を起動します。初回起動時はサインインの画面が表示されますので、[後で行う。] をクリックします。

続いて、開発環境の設定画面が表示されるので、[開発環境] は「Visual C#」を選択、[配色テーマの選択] は好きなテーマを選択し、[Visual Studio の開始] をクリックします。

VS2017 が起動したら、ツールバーから [新しいプロジェクト] をクリックします。

新しいプロジェクトのダイアログから、[空白のアプリ (ユニバーサル Windows)] を選択し、[OK] をクリックします。

バージョンの選択は特に変更せず [OK] をクリックします。

これで、UWP (ユニバーサル Windows プラットフォーム) アプリの新しいプロジェクトが作成され、コーディングできる状態になりました。

ストップウォッチアプリの作成

アプリをビルドして Raspberry Pi 3 の Windows 10 IoT Core に配置する流れを掴むために、まずは簡単なストップウォッチを作成してみます。

まず、Raspberry Pi 3 は ARM プロセッサで動作するので、[ソリューションプラットフォーム] を「ARM」に変更します。

続いて、ソリューションエクスプローラーから [MainPage.xaml] をダブルクリックします。これはアプリのメインページになります。

MainPage.xaml が開きますので、以下の様に編集します。

MainPage.xaml

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="640" Height="360">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="textBlock1" Text="00:00:00.000" Margin="10,74,10,192" Height="94" Width="620" FontSize="72" TextAlignment="Center"/>
        <Button x:Name="button1" Content="Start/Stop" Margin="240,234,0,66" Height="60" Width="160" FontSize="22"/>
    </Grid>
</Page>

ストップウォッチ表示用の TextBlock と、スタート/ストップ用の Button が配置された簡単なページです。

次に、[MainPage.xaml.cs] を開き、以下の様に編集します。

MainPage.xaml.cs

using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App1 {

    public sealed partial class MainPage : Page {

        private static readonly string TimeFormat = @"hh\:mm\:ss\.fff";

        private Stopwatch _stopWatch = new Stopwatch();
        private DispatcherTimer _timer = new DispatcherTimer();

        public MainPage() {

            this.InitializeComponent();

            _timer.Interval = TimeSpan.FromMilliseconds(100);
            _timer.Tick += (sender, e) => {
                this.textBlock1.Text = _stopWatch.Elapsed.ToString(MainPage.TimeFormat);
            };

            this.button1.Click += (sender, e) => {
                if (_stopWatch.IsRunning) {
                    _stopWatch.Stop();
                    _timer.Stop();
                    this.textBlock1.Text = _stopWatch.Elapsed.ToString(MainPage.TimeFormat);
                }
                else {
                    _stopWatch.Restart();
                    _timer.Start();
                }
            };
        }
    }
}

ボタンをクリックすると、現在のストップウォッチの状態を見て、スタートまたはストップを行います。
ストップウォッチの経過タイムを定期的に描画するため、DispacherTimer オブジェクトの Tick
イベントを使用しています。100ms 毎に経過タイムが更新されます。

これでコーディングは完了です。

ビルドと配置

続いて、このアプリをビルドして、Raspberry Pi 3 に配置します。メニューバーから [プロジェクト] - [App1 のプロパティ] をクリックします。
[デバッグ] - [開始オプション] の各パラメーターを以下の様に設定します。

パラメーター	値
ターゲットデバイス	リモートコンピューター
リモートコンピューター	minwinpc (IPアドレスでも可)
認証モード	ユニバーサル (暗号化されていないプロトコル)

ツールバーの [すべて保存] をクリックして、すべてのファイルの編集を保存します。

同じくツールバーから [リモートコンピューター] をクリックします。デバッグが開始され、アプリのビルドと配置が行われます。

Windows IoT Remote Client で画面を表示させたまましばらく待ちます。初めて配置をする場合は時間がかかりますが、配置が完了するとアプリが起動します。

Start/Stop ボタンをクリックすると、ストップウォッチが動作することを確認します。

ブレークポイントを付ければ、デバッガーの実行を一時停止し、コードの変数の状態などを確認することができます。

確認が終了したら、ツールバーの [デバッグの停止] をクリックします。

これで、ビルドと配置は完了です。

今回作成したストップウォッチアプリはボタンでスタート/ストップを操作しましたが、最終的な完成品は、Android アプリから遠隔でスタートし、測距センサーの判定で自動ストップするような仕組みを目指します。

まとめ

Raspberry Pi 3 に配置するアプリの開発準備が完了しました。今回作成した UWP アプリで、VS2017 での開発と配置の流れも確認できたと思います。
次回は測距センサーを使用した電子回路を組み立てて、Raspberry Pi 3 に接続します。

参考文献

DispacherTimer クラス
https://msdn.microsoft.com/ja-jp/library/windows/apps/windows.ui.xaml.dispatchertimer

Deploying an App with Visual Studio
https://developer.microsoft.com/en-us/windows/iot/docs/appdeployment

連載記事

陸上短距離走用自動タイム測定器を作ろう(1)
http://qiita.com/IKETA/items/a32ada0053673264a6fb

陸上短距離走用自動タイム測定器を作ろう(2)
http://qiita.com/IKETA/items/7750ef533aa455340dae