前回の記事では、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 です。この [無償ダウンロード] をクリックすると、ダウンロードが開始されます。
インストーラーを実行すると、ワークロードの選択画面が表示されます。この中から [ユニバーサル 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 が開きますので、以下の様に編集します。
<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] を開き、以下の様に編集します。
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