Windows Phoneのセンサーを使ったプログラミングの基礎をお話しし、実用例としての仮想現実アプリの動作原理を分かりやすくご紹介します。

1. Windows Phoneで始める
拡張現実の世界
2013.03.23
初音玲

2. はじめに
Microsoft MVP for
初音玲 Visual Basic
(2008～)
最近は
Oracle ACE
「開発が分かる」
(2008～)
クラウドインフラ屋

3. 書籍でました
• VB2012本

4. Agenda
• 拡張現実とは
• Windows Phone 8について
• WP7.1アプリとの互換性
• 開発環境について
• サンプルコード

5. 拡張現実とは

6. Wikipediaによれば
• 英語の Augmented Realityの日本語訳であ
るため、それを日本語発音した「オーグ
メンテッド・リアリティ」や、省略形の
ARも用いられる。また、拡張現実感とも
言う。
• 拡張現実はバーチャルリアリティ(VR)の変
種であり、その時周囲を取り巻く現実環
境に情報を付加・削除・強調・減衰させ、
文字通り人間から見た現実世界を拡張す
るものを指す。 バーチャルリアリティが
人工的に構築された現実感と現実を差し
替えるのに対し、拡張現実は現実の一部
を改変する技術である。

7. そこで
• Windows Phoneのカメラビューで
• 現実世界を映し
• そこに情報を付与する

8. Windows Phone 8について

9. WP8対応機種
• Nokia:Lumiaシリーズ
• HTC:8X、8S
• Smsung:ATIV S

10. 3つの画面解像度
WVGA 800 x 480 15:9
WXGA 1280 x 768 15:9
720p 1280 x 720 16:9

11. Windows 8とコア共有(非完全)
共通部分
• カーネル、ネットワーク、グラフィック、
ファイルシステム、マルチメディア
• ドライバモデル
• Windowsと同等のマルチコア対応
非共通部分
• 同じAPIで開発できる×
• 今後の新機能は基本的に共通化を考慮

12. Windows Phone 8 API
WP 8.0 Games
Direct X/Direct 3D & C++
WP 8.0 WP 8.0
XAML & VB/C# & Direct 3D XAML & C++
WP 8.0 WP 8.0
XAML & VB/C# XAML & C++
WP 7.1
XNA & VB/C#
WP7.1= Windows Phone OS 7.1 = Windows Phone 7.1/7.8
WP 7.1
XAML & VB/C#
.NET API for Windows
Win32 &
Windows Phone
COM
Phone Runtime
(native)
(managed) (managed/native)

13. .NET API for Windows
Win32 &
Windows Phone
COM
Phone Runtime
• .NET API for Windows Phone
• WP7.1にあるすべてのtypeとAPIを含む
• System名前空間とMicrosoft.Phone名前空間
• WP8.0追加API
•Microsoft.Phone.Wallet
•Microsoft.Phone.Tasks.ShareMediaTask
•Microsoft.Phone.Tasks.MapsTask
•Microsoft.Phone.Storage.ExternalStorage
•Microsoft.Phone.Networking.Voip
など

14. .NET API for Windows
Win32 &
Windows Phone
COM
Phone Runtime
• Windows Phone Runtime (WinPRT)
• WinRTのサブセット + Phone関連の追加
Win RT • Phone関連の追加
(約11,000メンバ) •音声合成と音声認識
•カスタム連絡先ストア
•ロックスクリーン
サブセット 追加 など
(約2,800) (約600)

15. .NET APIとWinPRTで同等APIが存在
.NET API Windows Phone Runtime API
System.IO.IsolatedStorage Windows.Storate
System.Net.Sockets Windows.Networking.Sockets
System.Threading.ThreadPool Windows.System.Threading.ThreadPool
Microsoft.Devices.Sensors Windows.Devices.Sensors
• WP7.1とWP8.0をターゲットにする
なら.NET API
• WP8とW8でコード共有するなら
WinPRT

16. WP7.1アプリとの互換性

17. WP7.1アプリとWindows Phone 8
• WP7.1アプリはリコンパイルなしで
WP8で動作可能
• 完全コンパチではないので多少の違
いはある
WP7.1 WP8.0 WP8.0 WP7.1
App リコンパイル App App App
Quirks
• Quirksモードで動作 WP8.0
rumtime

18. WP7.1アプリをWP8.0用に変換する
• WP7.1依存のコードがないか注意
• Quirksモードでの互換性維持の対象外
• ソースコード非互換
• バイナリ非互換

19. ソースコード非互換の例
Item Windows Phone OS 8.0 Windows Phone OS 7.1
IsolatedStorageFile.FileExi null が渡された場合、 false
stsメソッド ArgumentNullException
Mutexクラス Mutex名には¥は使用不可 Mutex名に¥が指定される
と実行時に別文字に変換
されて正常動作
BeginRead , BeginWrite, 非同期実行 同期実行
EndRead, EndWrite,
Thread.CurrentCulture カルチャ変更は カルチャ変更は
Thread.CurrentUICulture 該当スレッドのみ影響 全スレッドに影響
XmlSerializerクラス シリアル化された型には、 シリアル化された型の既
既定のコンストラクター 定のコンストラクターは
が必要です。 必須ではありません。
その他の非互換については
http://msdn.microsoft.com/ja-jp/library/windowsphone/develop/jj206947.aspx

20. OSバイナリ非互換の例
Item Windows Phone OS 8.0 Windows Phone OS 7.1
Background File Transfers 同時転送ファイル数の制 同時転送ファイル数の制
限が25 限が5
Networking Vary ヘッダーを処理して ダウンロードが 1 秒以上
応答をキャッシュするこ かかる前提は不可
とが可能
Access to private nested private入れ子クラスは private入れ子クラスを
classes 未サポート サポート
その他の非互換については
http://msdn.microsoft.com/ja-jp/library/windowsphone/develop/jj206947.aspx

21. 開発環境について

22. 開発環境の入手
• Windows Phone Developer Center
• 旧→ http://create.msdn.com
• 新→ http://dev.windowsphone.com
• SDKは無料
• SDKの動作環境
• Windows 8 64bit版
• 最低4GBのメモリ
• エミュレータ要件
• Windows 8 Pro以上
• SLAT対応ハード(Core iとか)

23. SLAT対応しているかを確認する
• SysInternalsツール
• http://technet.microsoft.com/en-
us/sysinternals/cc835722
• coreinfo –v
• サポート
EPT *
• サポート外
EPT -

24. デベロッパーセンターアカウント
• http://msdn.microsoft.com/ja-
jp/library/windowsphone/help/jj206719.aspx
• SDKを使うだけでは不要
• 実機転送、ストア公開には必須
• Microsoftアカウントに紐付け
• 年間$99
• 有料アプリは無制限に登録可能
• 無料アプリは100個まで登録可能
• 会社アカウント or 個人アカウント
• 会社アカウントは登録が面倒
• 会社アカウントじゃないと使えない機能あり

25. Windows Phone エミュレータ
• Win 8 Pro以上のHyper-Vで動作
• 実機と同じ環境
• Windows Phone SDKに同封
• 位置情報や端末向きもエミュレート
• エミュレータ環境設定
• ロックスクリーン
• ネットワーク接続のシミュレーション

26. エミュレータを使う上での注意点
• 実機よりも動作が速い可能性がある
• 性能チェックは実機で要確認
• エミュレータは機能テスト用
• プロファイリングツールを活用
• 実機とエミュレータに使用できる
• http://wptools.codeplex.com/

27. エミュレータへのデプロイ
• デプロイ先として選択
• 最初にデプロイされると自動起動
• 停止するとローカルストレージの内容
は消える
• エミュレータの論理スペック
• WVGAで512MBメモリ
• 解像度:720P、WVGA、WXGA

28. エミュレータの操作方法
• ハードウェアボタンの操作
• F1:戻るボタン
• F2:ホームボタン
• F3:検索ボタン
• F6:カメラボタン(半押し)
• F7:カメラボタン(長押し)
• F9:ボリュームアップ
• F10:ボリュームダウン
• F12:電源ボタン
• マルチタッチ対応(要タッチ対応PC)
• PgUp/PgDnでエミュレータキーボードとPC側
キーボードの切替

29. 向きのエミュレート
左回転
右回転

30. カメラ動作のエミュレート
• 赤い四角が動き回る

31. 位置情報のエミュレート
① 検索
② ズーム
③ ライブ操作On/Off
④ ピンモードOn/Off
⑤ すべてのポイントをクリア
⑥ マップのポイントを保存
⑦ 位置移動間隔(秒)
⑧ すべてのポイントを再生

32. Additional Tools-Locationでのテスト
• [ライブ]ボタンでライブモードOn
1. 検索ボックスで地名入力で検索
2. ピンモードをOn
3. マップをクリックしてピン追加
• PositiionChangedイベント発生
• [ライブ]ボタンでライブモードOff
1. ピンモードをOn
2. マップをクリックしてピン追加
3. マップのポイントを保存
4. すべてのポイントを再生
• PositiionChangedイベント発生

33. ロックスクリーンのエミュレート
• ロックスクリーン表示
• シミュレーションダッシュボードで設
定
• F12を2回押す

34. ネットワークのシミュレーション

35. スクリーンショットの保存
• [キャプチャ]でキャプチャ
• [保存]でPCのマイピクチャに保存

36. Visual Studioでのデバッグ
• Windowsアプリと同じようデバッグ
• ブレークポイント
• ステップ実行
• 変数参照や値変更

37. Windows Phoneとの接続
• Windows Phone OS 7.1
• Zune必須
• Windows Phone 8.0
• Zune不要

38. 端末を開発用に登録する
• 登録手順
1. WiFi接続/USBでPCと接続
2. Windows Phone Developer
Registrationを起動
3. 「Click the Register button to unlock
the phone」と表示されたら[Register]
ボタンをクリック
4. デベロッパセンターアカウントに紐付
けたMicrosoftアカウントに[サインイ
ン]
• 登録できる端末は３台まで

39. 実機へデプロイ！
• ターゲットを[Device]
• 実行で実機にデプロイされて実行
• エミュレータと同様のデバッグ可能
• VSからデプロイできるのは10個まで
• 開発が終わったアプリはストアから

40. 実機デバッグ
• エミュレータと同じようデバッグ
• ブレークポイント
• ステップ実行
• 変数参照や値変更

41. 実機でのスクリーンショット保存
• Windows Phone 8から可能
• 電源とホームボタンの同時押し
• 実機の[albums]-[screenshots]に保存

42. 国際化対応
• WP8SDKで楽になった
• 規定言語用にAppResources.resx
• サポート言語追加
• AppResources.xx-xx.resxを自動生成
• XAML上で
• {Binding Path=LocalizedResources.[Key],
Source={StaticResource LocalizedStrings}}
• コード上で
• AppResources.[key]
http://msdn.microsoft.com/ja-jp/library/windowsphone/develop/ff637522.aspx

43. MDIL: Machine Dependent Intermediate Language
ソース
コンパイラ MSIL
コード 開発環境
MDIL MDIL MSIL ストア
コンパイラ
Native Native
MDIL Image DLL 実行環境
Generetor

44. サンプルコード

45. カメラをコードで操作
• レンズピッカー
• ID_CAP_ISV_CAMERA
• 標準カメラアプリのファインダーより入力して随時の操作結
果をファインダーに表示可能
• Picture.GetPreviewImageメソッドでサムネイル画像を取
得可能
• リッチメディアレンズ
• ID_CAP_MEDIALIB_PHOTO
• Photosハブにある写真に対するエフェクト機能を追加可能
• バックグラウンドでの写真アップロード
• バックグラウンドエージェントで自動アップロード可能
• CameraAPI
• PhotoCaptureDeviceクラスで、ISO、ホワイトバランス、露
出、ピントを制御
• AudioVideoCaptureDeviceクラスは、ビデオと録音に対して
同等の制御を提供

46. カメラビューの表示
Dim res As Windows.Foundation.Size = SupportedResolutions(0)
Me.Live = Await PhotoCaptureDevice.OpenAsync(CameraSensorLocation.Back, res)
RaiseEvent Initialized(Nothing, Nothing)
Imports Windows.Phone.Media.Capture
Public ReadOnly Property Live As PhotoCaptureDevice
Get
Return Me.VmLiveModel.Live
End Get
End Property
<Rectangle Grid.Row="0" Stroke="Black" Margin="0,100,0,100">
<Rectangle.Fill>
<VideoBrush x:Name="ViewfinderBrush"/>
</Rectangle.Fill>
</Rectangle>
Me.ViewfinderBrush.SetSource(Me.ViewModel.Live)

47. コンパス機能の追加
Private WithEvents CompassWatcher As Compass
Me.CompassWatcher = Compass.GetDefault
Private Sub ReadingChanged(sender As Compass,
e As CompassReadingChangedEventArgs) _
Handles CompassWatcher.ReadingChanged
Me.MagneticHeading = e.Reading.HeadingMagneticNorth
End Sub
Imports Windows.Devices.Sensors
Public ReadOnly Property MagneticHeading As Double
Get
Return Me.VmCompassModel.MagneticHeading
End Get
End Property

48. コンパス機能の追加
<Grid x:Name="Compass_Grid" RenderTransformOrigin="0.5,0.5">
<es:RegularPolygon
Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="3"
InnerRadius="1" PointCount="3" Stretch="Fill"
UseLayoutRounding="False" Width="160" Height="160"
Margin="127.015,240,127.015,392.478"/>
<Ellipse Width="320" Height="320"
Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="3" />
</Grid>
Private Sub Compass_PropertyChanged(sender As Object,
e As PropertyChangedEventArgs) _
Handles ViewModel.PropertyChanged
Dispatcher.BeginInvoke(
Sub()
Dim g As New TransformGroup
g.Children.Add(New RotateTransform With {
.Angle = Me.ViewModel.MagneticHeading})
Me.Compass_Grid.RenderTransform = g
End Sub)
End Sub

49. 拡張現実っぽく見える演出
• 端末を傾けると…
• 見えている映像も視点が変わる
• コンパスと映像の傾きが合わない
• コンパスも傾くようにすると…

50. 傾きを反映
Private WithEvents MotionWatcher As Inclinometer
Me.MotionWatcher = Inclinometer.GetDefault
Private Sub ReadingChanged(sender As Inclinometer,
e As InclinometerReadingChangedEventArgs) _
Handles MotionWatcher.ReadingChanged
Me.Pitch = e.Reading.PitchDegrees
Me.Yaw = e.Reading.YawDegrees
Me.Roll = e.Reading.RollDegrees
End Sub
Public ReadOnly Property Pitch As Single
Get
Return Me.VmMotionModel.Pitch
End Get
End Property
Public ReadOnly Property Yaw As Single
Get
Return Me.VmMotionModel.Yaw
End Get
End Property
；
；

51. 傾きを反映
<Grid x:Name="D3D_Grid" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
<Grid x:Name="Compass_Grid" RenderTransformOrigin="0.5,0.5">
:
</Grid>
</Grid>
Private Sub Compass_PropertyChanged(sender As Object,
e As PropertyChangedEventArgs) _
Handles ViewModel.PropertyChanged
Dispatcher.BeginInvoke(
Sub()
Dim g As New TransformGroup
g.Children.Add(New RotateTransform With {
.Angle = Me.ViewModel.MagneticHeading})
Me.Compass_Grid.RenderTransform = g
Me.D3D_Grid.Projection = New PlaneProjection With {
.RotationX = Me.ViewModel.Pitch,
.RotationY = Me.ViewModel.Roll}
End Sub)
End Sub

52. Demo
PhotoARSample