2015年12月19日に開催されました.NETラボ勉強会のセッションスライドです。

1. UWPハンズオン参加レポート
UWPハンズオンを有効に活用するポイント紹介！！
古代魚庵（フリーランス）
西村誠

2. 最初に
• このセッションはUniversal Windows Platform（UWP）アプリ開発を学
べるハンズオンに参加したレポートです。
• 資料は以下のURLから誰でもダウンロード可能なので触りながら進
めると今日のセッションもよりわかりやすいかも？
http://1drv.ms/1NXXWme

3. 最初に
• このセッションはUniversal Windows Platform（UWP）アプリ開発を学
べるハンズオンに参加したレポートです。
• 充実した資料&エヴァさん沢山登壇という力の入ったイベント
http://1drv.ms/1NXXWme

4. 最初に
• このセッションはUniversal Windows Platform（UWP）アプリ開発を学
べるハンズオンに参加したレポートです。
• 充実した資料&エヴァさん沢山登壇という力の入ったイベント
• 資料は公開されているので、うまく活用しよう&イベント参加するなら
うまく事前準備しよう！！ というのが本セッションの趣旨。
http://1drv.ms/1NXXWme

5. アジェンダ
• 自己紹介
• ハンズオンとは？
• UWPハンズオンの各内容紹介
• まとめ
http://1drv.ms/1NXXWme

6. 自己紹介
• 西村 誠
• 古代魚庵（フリーランス）
• Microsoft MVP for Windows Development
• EC-CUBE公式エヴァンジェリスト
http://1drv.ms/1NXXWme

7. 自己紹介
• ブログ：眠るシーラカンスと水底のプログラマー
http://coelacanth.jp.net/
• Twitter：coelacanth
• Facebook:西村 誠
http://1drv.ms/1NXXWme

8. ハンズオンとは？

9. ハンズオンとは？
• Wiki：ハンズオンとは、体験学習を意味する教育用語
• もともとは科学や工学に親しんでもらうためのイベントだった
• 手を動かして、自分で体験しながら学ぶ形式のイベント
• 聞くだけのセッションより学習効果が高い

10. ハンズオンとは？
• かつて広島で「Windows Phoneハンズオン」というイベントを3年ほど
続けていました（現在も継続中）。
• IS12Tしかない時代に何年も参加してくれるメンバーなので、酔狂&あ
る程度熟練していたのでハンズオンの敷居は低かったかもしれませ
ん。
• 個人的には視聴するだけより、手を動かすイベントが有効だと思って
いるので始めました（講師は大変なんですが）

11. ハンズオンの難点
• IT系の場合、手を動かしてもらうための端末が必要
• 視聴型のセッションより参加者を集めるのが難しい
• 講師の準備も手間（資料を用意したり、プログラミングしたり）
• 当日の環境に左右される

12. ハンズオンの難易度があがるポイント
• 当日ネットワーク接続が必要か？
• 参加者の事前準備が必要か？
• 要求する端末のスペックは低いか？
• 技術的なレベルは高いか？

13. UWPハンズオンはどうか？
• 当日ネットワーク接続が必要か？
Azureのセッションなどがあるので必要
• 参加者の事前準備が必要か？
Visual StudioやUWPのSDKを事前にインストールする必要がある
• 要求する端末のスペックは低いか？
Windows PhoneのエミュレーターやVisual Studioは重い
• 技術的なレベルは高いか？
前述のAzureなども組み合わせるためレベルは高い

14. UWPハンズオンはやりごたえがある
そんな難しいイベントをMicrosoftのエヴァンジェリストが高いリソース
を割いて準備してくれたイベント！！
参加者も事前準備しつつ、有意義に成功させよう！！
もしくはイベントに行けなくても、有意義に自習しよう！！

15. UWPハンズオンはやりごたえがある
Q.参加するのに事前に知ってたら行く意味ないよね？
A.ということはなくて、ある程度知って参加すると余裕をもって、当日お
こる様々なトラブルや人が躓くポイントを確認することができます。
（これはトラブルシュートの良い経験になる）

16. UWPハンズオンはやりごたえがある
そういえば色々もらえました
登録から30日間100$分のAzure利用が可能になるコード
16GBのUSBメモリー（地味にうれしい）

17. ハンズオンの概要

18. 概要の概要
• ここからは、ハンズオンのセッションを紹介しつつ、テーマや躓きポイ
ントを紹介していきます（紹介する順番はハンズオンとは異なります）。
• 時間があったらデモとかします。
• 私が受けた日から東京と大阪で各一回同イベントが開催されている
ので、内容は変わっている可能性大です。

19. １．UWPデバイスでのHello World
• 最初はお馴染みHello World
• ここに重要なエッセンスがたっぷり
• 事前にこれだけやっておくだけでも当日の失敗をかなり回避できま
す。

20. １．UWPデバイスでのHello World
DEMO

21. １．UWPデバイスでのHello World
ここで学べること
• プロジェクトの作成
• 様々な端末でのビルド&デバッグ
• 画面(xaml)とコードビハインド(xaml.cs)の修正
• デバイスタイプの取得

22. １．UWPデバイスでのHello World
• ここで学べること(2)
• 画面サイズの取得
• イベントハンドラー
• Bind

23. １．UWPデバイスでのHello World
このハンズオンを参加事前にやることで回避できるもの
• UWPのSDKが入っていない=プロジェクトが作成できない
• スペック不足=Windows Phoneのシミュレーターが起動しない
• 実機(Windows Mobileなど)でデバッグできない

24. 2.音声コマンドによるアプリの起動
ここで学べること
• 音声アシスト「コルタナ」を利用する方法

25. 2.音声コマンドによるアプリの起動
DEMO

26. 2.音声コマンドによるアプリの起動
注意点は一つ
• 初期のWindows 10 日本語にはコルタナが搭載されていない
• Windows 10 Mobileは未検証(Lumia 1320ではダメでした・・・)

27. 2.音声コマンドによるアプリの起動
コルタナを利用する際のポイント
• 呼び出すコマンドの定義はアプリから登録する
• アプリを起動せずにデバッグができる
起動時のOnLunchedにブレークポイントがはれる

28. 3.Azure Mobile Appsとの接続
ここで学べること
• クラウド(Azure)を利用したアプリが作れる
• ローカルで動かして、本番(Azure)に接続という流れを学べる
• 環境が厳しいハンズオン会場では一番の難関

29. 3.Azure Mobile Appsとの接続
• まずはAzure Mobile ServicesのクイックスタートのサンプルのUWP版
• 続いてSNS認証（SNS側でトークンなどを取る必要があるんで、すでに
用意されているUWPハンズオンで学習するのが楽）
• 最後はSQLiteを利用したオフラインサポート

30. 3.Azure Mobile Appsとの接続
注意点
• SQLiteの導入は当日のネット環境次第で厳しいので、事前にプロジェクトを作成して導
入しておくと良いかな。
（2回目以降で先に導入したものを用意しているかも？）
• 上同様、MobileServicesをNuGetから導入
Install-Package WindowsAzure.MobileServices -Version 1.3.2

31. 4.ライブタイルと通知
• ベースはWindows 8.1の頃と大きく変わっていない
• 自由度の高いアダプティブタイルが追加された
• 注意点は特になし

32. 5.アダプティブUIのビルド
• 画面幅などに合わせたレイアウトについて学べる
• 新しいRelativePanel
• これも注意点は特になし

33. 6.ホスト型のWebアプリ
• WebサイトをUWP化（Bridge for Web的な）
• CodePenをUWP化するという面白いデモ（これは自分でやってみるこ
とをオススメします）
• これも特に注意点はないです。当日気軽にハンズオンしましょう。

34. 7.広告の組み込み
• アプリに広告を出す方法
• Microsoft Universal Ad Client SDK
https://visualstudiogallery.msdn.microsoft.com/401703a0-263e-4949-8f0f-738305d6ef4b
• 事前にSDKをインストールしておくと良い

35. 8.ページナビゲーションと「戻る」の処理
• 複数ページに遷移する方法
• Hello Worldと並び押さえておきたい基礎知識
• 特に注意する点は無し

36. 9.手書き入力
• InkCanvasを利用した手書き対応
• Windows 8と同様
• 特に注意点はなし

37. やっておくと良いこと
• Windows 10 Mobileの実機を使いたい場合は事前に開発者アンロッ
クしておくと良い
• アンロックに必要なWindows Phone Developer RegistrationはVisual
Studioと一緒にインストールされているはず

38. やっておくと良いこと
• Windows 10 MobileはUSB接続で実機に画面を出せるよ
（家のメインPCはダメでした・・・ドライバーの相性？）

39. 時間があまれば
• 気になるテーマを解説
UWPデバイスでのHello World
ページナビゲーションと「戻る」の処理
広告の組み込み
音声コマンドによるアプリの起動
ホスト型のWebアプリ
Azure Mobile Appsとの接続
手書き入力（ごめんなさいこれサンプルなかった・・・興味があれば次回でも！！）
アダプティブUIのビルド
ライブタイルと通知

40. まとめ
• ハンズオンイベントは難しいが、ためになる点も多いのでぜひ参加し
よう
• UWPハンズオンはUWPの第一歩に最適（一日でやる分量かというの
はおいておいて）
• ちょっとだけ予習することで、効率的に学べる！！