LoginSignup
2
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-08-08

前回の記事では、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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 が配置された簡単なページです。
image.png

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

image.png

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

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

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

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

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

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

確認が終了したら、ツールバーの [デバッグの停止] をクリックします。
image.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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1