Windows 10 IoT Core MVA 2015 August Windows 10 IoT Core ハンズオントレーニング Building and running Github MS IoT Samples on Windows 10 IoT Core 3 章 UWP アプリの開発 L

Transcription

1 Windows 10 IoT Core ハンズオントレーニング Building and running Github MS IoT Samples on Windows 10 IoT Core 3 章 UWP アプリの開発 Lab version: Last updated: 9/24/2015 Building and running Github MS IoT Samples on Windows 10 IoT Core Page 1 of 12

2 目次 開発環境 PC のセットアップ... 3 HELLO,WORLD!(UWP アプリ ) の実行... 4 Building and running Github MS IoT Samples on Windows 10 IoT Core Page 2 of 12

3 開発環境 PC のセットアップ 参照 < Windows 10 IoT Core 開発環境 PC をセットアップする 1. 開発環境 PC 上で (Windows Insider Program 等でリリースされた早期リリース版で はなく) 正式にリリースされた Windows 10 (Build もしくはそれ以降) が動作 している事を確認します Build 番号は スタートボタンを押して winver と入力して Enter キーを押すと確認する事ができます 2. Visual Studio Community 2015 を こちら からインストールします もしくは Visual Studio Professional 2015 または Visual Studio Enterprise 2015 を こちら からダウンロードしてインストールします NOTE: Visual Studio をインストールする際 インストールオプションは カスタ ム を選択して 次に 2 つの項目を選択してインストールします Windows 開発と Web 開発 Microsoft Web Developer Tools ユニバーサル Windows アプリ開発ツール ツールおよび Windows SDK Visual Studio のインストールが完了したら Visual Studio を起動して メニューの [ヘルプ] > [Microsoft Visual Studio のバージョン情報] を選択して 以下の Windows 10 IoT Core 開発要件を満たしたバージョンである事を確認します Visual Studio 本体 D14REL ユニバーサル Windows アプリ用の Visual Studio ツール D14OOB 4. Windows IoT Core Project Templates を こちら よりインストールするか 同じ Windows IoT Core Project Templates を Visual Studio Gallery の中から探してイン ストールします もしくは Visual Studio を起動して メニューの [ツール] > [拡張機 能と更新プログラム] > [オンライン] から直接見つけてインストールします Building and running Github MS IoT Samples on Windows 10 IoT Core Page 3 of 12

4 Hello,World!(UWP アプリ ) の実行 参照 < Windows 10 IoT Core デバイス向けに UWP アプリケーションを開発するために まず構成 しておくべき設定を 2 点紹介します Windows 10 を開発者モードに設定する 今回が初めての Visual Studio 2015 におけるプロジェクト作成の場合 Visual Studio は Windows 10 を開発者モードにするよう案内が表示されるので それに従って設定してください Windows 10 のスタートボタンを押して表示されるメニューから [ 設定 ] > [ 更新とセキュリティ ] > [ 開発者向け ] > [ 開発者モード ] を選択します 開発者モードについてはこちらにより詳細な説明があります Building and running Github MS IoT Samples on Windows 10 IoT Core Page 4 of 12

5 Windows IoT Extension の追加 Windows IoT Extension はデフォルトではプロジェクトに追加されないため 別途 参照先 を追加する必要があります これによって Windows.Devices.Gpio のようなネームスペース がプロジェクト内で有効になります 作成された [プロジェクト] の [参照] を右クリックして [参照の追加] で Universal Windows > 拡張 > Windows IoT Extensions for the UWP を選択してください C# プロジェクトの作成 今回紹介する Hello World アプリをはじめ Windows 10 IoT Core 向けの様々なサンプルコ ードが纏まったものを こちら から１つのファイル (samples-develop.zip) として入手する事 ができます Building and running Github MS IoT Samples on Windows 10 IoT Core Page 5 of 12

6 1. 開発環境 PC 上の任意の場所に samples-develop.zip をコピーして解凍します 2. 解凍したフォルダーの中にある HelloWorld\CS が HelloWorld アプリの C# プロジェクトサンプルコード一式です その中にある HelloWorld.sln をダブルクリックすると HelloWorld アプリの C# プロジェクトが開かれた状態で Visual Studio が起動します NOTE: ここまでの手順で HelloWorld アプリのサンプルを開いたら ここから先は少し手順をスキップして ローカルでアプリケーションをビルドする 以降の手順を実施します ただし こちらの資料では ( 演習のため ) 上述のようなサンプルコードをダウンロードせずに Hello World アプリを新規に作成するために必要なすべてのステップをここから記載しています 参考 : サンプルを使わずに Hello World アプリを作成する手順 Visual Studio 2015 を起動 新しいプロジェクトを作成 ( ファイル > 新規作成 > プロジェクト ). 新しいプロジェクトダイアログにおいて ユニバーサルを選択 ( ダイアログの左側ペイン : テンプレート > Visual C# > Windows > ユニバーサル ) 空白のアプリ ( ユニバーサル Windows) を選択初めてのアプリケーションに名前をつけましょう こちらの例では HelloWorld と名付けています Building and running Github MS IoT Samples on Windows 10 IoT Core Page 6 of 12

7 MainPage.xaml にコンテンツを追加 まずはメインページにコンテンツを追加しましょう ソリューションエクスプローラーか ら MainPage.xaml ファイルを選択します 双方向性を持たせるために テキストボック ス とボタン を追加しましょう まずは これらの要素を追加するために XAML ファイル を編集します デザイナーの XAML セクションに <Grid> タグを配置し 以下のコードを 追加します <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBox x:name="hellomessage" Text="Hello, World!" Margin="10" IsReadOnly="True"/> <Button x:name="clickme" Content="Click Me!" Margin="10" HorizontalAlignment="Center"/> </StackPanel> </Grid> テキストボックス とボタン が作成されました 次に ボタンが押された時に実行され るコードを追加しましょう デザイン画面におけるボタンをダブルクリックします : Building and running Github MS IoT Samples on Windows 10 IoT Core Page 7 of 12

8 XAML タグに Click プロパティ が追加され MainPage.xaml.cs に ClickMe_Click メ ソッドが作成されますので メソッドに簡単なコードを追加してみましょう MainPage.xaml: <Button x:name="clickme" Content="Click Me!" ClickMe_Click"/> Margin="10" HorizontalAlignment="Center" Click=" MainPage.xaml.cs: private void ClickMe_Click(object sender, RoutedEventArgs e) { this.hellomessage.text = "Hello, Windows IoT Core!"; } ローカルでアプリケーションをビルドする Visual Studio から HelloWorld アプリのプロジェクトを開いている状態である事を確認して ビルドを行います 1. Visual Studio のメニューから [ビルド] > [ソリューションのビルド] を選択してアプ リケーションのビルドを行います ビルドが問題なく完了する事を確認します 2. ユニバーサル Windows アプリは Windows 10 が動作するあらゆるマシン上で動作す るため Windows 10 IoT Core 上で実行する前に 開発環境 PC 上でも テスト用に実 行する事ができます F5 キーを押すと 以下のようにその場でアプリケーションが実 Building and running Github MS IoT Samples on Windows 10 IoT Core Page 8 of 12

9 行されます アプリケーションの実行を確認したら このアプリケーションを閉じて終了させます Windows 10 IoT Core デバイスにアプリケーションをデプロイ(配置)する ではこれから作成した UWP アプリケーションを Windows 10 IoT Core デバイスにネットワ ーク経由で送りこんでデプロイ 配置 します 1. Raspberry Pi 2 で実行するアプリを作成する場合 Visual Studio ツールバーの アー キテクチャー ドロップダウンから ARM を選択します Building and running Github MS IoT Samples on Windows 10 IoT Core Page 9 of 12

10 2. アーキテクチャーを ARM に変更した場合は もう一度あらためて Visual Studio のメニューから [ ビルド ] > [ ソリューションのビルド ] を選択してアプリケーションのビルドを行い ビルドが問題なく完了する事を確認します 3. Visual Studio ツールバーのアーキテクチャーの右隣のドロップダウンをクリックしてリモートコンピューターを選択します 4. リモート接続ダイアログが表示されますので アドレスには Windows 10 IoT Core デバイスの IP アドレス またはコンピューター名 ( サンプルでは minwinpc を使用 ) を入力します 認証モードはなしを選択し [ 選択 ] をクリックします Building and running Github MS IoT Samples on Windows 10 IoT Core Page 10 of 12

11 NOTE: 1. Windows 10 IoT Core デバイスのコンピューター名の代わりに IP アドレス を使用することも可能です 2. これらの設定は プロジェクトのプロパティ (ソリューションエクスプローラー にて プロパティ - 左側の デバッグ タブを選択 ) からも実施することも可能で す 5. リモートの Windows 10 IoT Core デバイスへデプロイ(配置)する準備が整いました F5 キー (または ツールバーの [デバッグ]) をクリックすると HelloWorld アプリケー ションが Windows 10 IoT Core デバイス上で実行します Windows 10 IoT Core デ バイスのスクリーンにアプリケーション実行画面が表示され ボタンが表れます 6. この状態で アプリケーションをリモートデバッグできますので Visual Studio からブ レークポイントを設定したり 変数の値を参照したりする事ができます アプリケーシ ョンを終了させるには Visual Studio のメニューから [デバッグ] > [デバッグの停止] を選択します 7. アプリのデプロイ(配置) および デバッグが成功したら ツールバーのドロップダウン リストの[デバッグ] を [リリース] に変更して リリースバージョンを作成します Building and running Github MS IoT Samples on Windows 10 IoT Core Page 11 of 12

12 8. リリースに設定変更後 Visual Studio のメニューから [ ビルド ] > [ ソリューションのリビルド ] および [ ビルド ] > [ ソリューションの配置 ] を選択し ビルドおよびデプロイ ( 配置 ) を行います 9. おめでとうございます! これでめでたく Windows 10 IoT Core デバイスに UWP アプリケーションをデプロイ ( 配置 ) することができました! - 以上 - Building and running Github MS IoT Samples on Windows 10 IoT Core Page 12 of 12