陸上短距離走用 自動タイム測定器を作ろう(3)

前回の記事では、Raspberry Pi 3 に Windows 10 IoT Core をインストールしました。
http://qiita.com/IKETA/items/7750ef533aa455340dae

今回は、作業 PC に Visual Studio 2017 をインストールし、開発環境の整備を行います。

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

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

ダウンロードするのは、無償の Visual Studio Community です。この [無償ダウンロード] をクリックすると、ダウンロードが開始されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/1b71774a-a20d-5688-258f-bb16aeb20e79.png)

インストーラーを実行すると、ワークロードの選択画面が表示されます。この中から [ユニバーサル Windows プラットフォーム開発] をチェックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/4c728fb4-835a-1a83-7da5-26153cf5e84e.png)

[個別のコンポーネント] をクリックし、Windows 10 SDK の一番新しいビルド番号のものをチェックします。以下の画像では 14393 です。
※筆者の環境では、[UWP 用 Windows 10 SDK] だけインストールした状態では、プロジェクト作成時になぜか「ターゲットに適したSDKが見つかりません」というエラーが表示されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/ae7ffb2e-1513-5302-2c36-2cf91a791937.png)

これで [インストール] をクリックすると、インストールが開始されます。以下の画面が表示されたら完了です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/1b4da944-b4d8-0a12-3507-da0e76d4d659.png)


# VS2017 の起動とプロジェクトの作成
インストール完了後、VS2017 を起動します。初回起動時はサインインの画面が表示されますので、[後で行う。] をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/2b416479-8706-82aa-5097-f33ebdf8be7f.png)

続いて、開発環境の設定画面が表示されるので、[開発環境] は「Visual C#」を選択、[配色テーマの選択] は好きなテーマを選択し、[Visual Studio の開始] をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/f8c7a4c8-2efd-e894-5bbe-6fd9ca053b8b.png)

VS2017 が起動したら、ツールバーから [新しいプロジェクト] をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/25aa8132-3f32-b05b-4005-77036bc7bcca.png)

新しいプロジェクトのダイアログから、[空白のアプリ (ユニバーサル Windows)] を選択し、[OK] をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/276279dd-bc24-08f1-201a-8d7c553da3cd.png)

バージョンの選択は特に変更せず [OK] をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/35debf3f-87d5-c392-c1cf-16493b99172a.png)

これで、UWP (ユニバーサル Windows プラットフォーム) アプリの新しいプロジェクトが作成され、コーディングできる状態になりました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/e0fea860-e13d-d888-102e-e1ecc516a18c.png)


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

まず、Raspberry Pi 3 は ARM プロセッサで動作するので、[ソリューションプラットフォーム] を「ARM」に変更します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/adcf2d9c-b883-7f92-739d-e2e225e6de68.png)

続いて、ソリューションエクスプローラーから [MainPage.xaml] をダブルクリックします。これはアプリのメインページになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/4854b821-0ef8-19e1-bd7c-09dafee39295.png)

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

```xml: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 が配置された簡単なページです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/be2772b0-00e7-c786-851b-d7c81e8f5aee.png)

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

```csharp: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 のプロパティ] をクリックします。
[デバッグ] - [開始オプション] の各パラメーターを以下の様に設定します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/4c93b59a-0811-937f-f9b9-1ab3afde755f.png)

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

ツールバーの [すべて保存] をクリックして、すべてのファイルの編集を保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/fa98bad7-ffcc-b2d7-77de-4f76657f9a7d.png)

同じくツールバーから [リモートコンピューター] をクリックします。デバッグが開始され、アプリのビルドと配置が行われます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/355fc51e-638f-8120-e714-5195e4493e50.png)

Windows IoT Remote Client で画面を表示させたまましばらく待ちます。初めて配置をする場合は時間がかかりますが、配置が完了するとアプリが起動します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/f6ff34e9-0232-f30a-4232-e8602abed6db.png)

Start/Stop ボタンをクリックすると、ストップウォッチが動作することを確認します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/4fe9e8d2-3dfd-035d-12ef-28f6241ee977.png)

ブレークポイントを付ければ、デバッガーの実行を一時停止し、コードの変数の状態などを確認することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/85c7a457-0d34-9d1f-c9f9-3a1397849a30.png)

確認が終了したら、ツールバーの [デバッグの停止] をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/153436/56e781d1-73ee-6abf-c71d-8985d8e455ba.png)

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

今回作成したストップウォッチアプリはボタンでスタート/ストップを操作しましたが、最終的な完成品は、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