Windows Phoneで始める拡張現実の世界

2013.03.23初音玲

はじめに

初音玲

Microsoft MVP for Visual Basic

(2008～)

Oracle ACE

(2008～)

最近は

「開発が分かる」

クラウドインフラ屋

書籍でました

•VB2012本

Agenda

•拡張現実とは

•Windows Phone 8について

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

•開発環境について

•サンプルコード

拡張現実とは

Wikipediaによれば•英語の Augmented Realityの日本語訳であ

るため、それを日本語発音した「オーグメンテッド・リアリティ」や、省略形のARも用いられる。また、拡張現実感とも言う。

•拡張現実はバーチャルリアリティ(VR)の変種であり、その時周囲を取り巻く現実環境に情報を付加・削除・強調・減衰させ、文字通り人間から見た現実世界を拡張するものを指す。 バーチャルリアリティが人工的に構築された現実感と現実を差し替えるのに対し、拡張現実は現実の一部を改変する技術である。

そこで

•Windows Phoneのカメラビューで

•現実世界を映し

•そこに情報を付与する

Windows Phone 8について

WP8対応機種

•Nokia:Lumiaシリーズ

•HTC:8X、8S

•Smsung:ATIV S

3つの画面解像度

WVGA 800 x 480 15:9

WXGA 1280 x 768 15:9

720p 1280 x 720 16:9

Windows 8とコア共有(非完全)

共通部分

•カーネル、ネットワーク、グラフィック、ファイルシステム、マルチメディア

•ドライバモデル

• Windowsと同等のマルチコア対応

非共通部分

•同じAPIで開発できる×

•今後の新機能は基本的に共通化を考慮

Windows Phone 8 API

.NET API forWindows

Phone(managed)

WindowsPhone

Runtime(managed/native)

Win32 &COM

(native)

WP 7.1XAML & VB/C#

WP 7.1XNA & VB/C#

WP 8.0XAML & VB/C#

WP 8.0XAML & C++

WP 8.0XAML & VB/C# & Direct 3D

WP 8.0XAML & C++

WP 8.0 GamesDirect X/Direct 3D & C++

WP7.1= Windows Phone OS 7.1 = Windows Phone 7.1/7.8

• .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

など

.NET API forWindows

Phone

WindowsPhone

Runtime

Win32 &COM

•Windows Phone Runtime (WinPRT)

•WinRTのサブセット + Phone関連の追加

.NET API forWindows

Phone

WindowsPhone

Runtime

Win32 &COM

• Phone関連の追加

• 音声合成と音声認識

• カスタム連絡先ストア

• ロックスクリーン

など

Win RT(約11,000メンバ)

サブセット(約2,800)

追加(約600)

.NET APIとWinPRTで同等APIが存在

•WP7.1とWP8.0をターゲットにするなら.NET API

•WP8とW8でコード共有するならWinPRT

.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アプリとの互換性

WP7.1アプリとWindows Phone 8

•WP7.1アプリはリコンパイルなしでWP8で動作可能

•完全コンパチではないので多少の違いはある

•Quirksモードで動作 WP8.0rumtime

WP7.1App

WP7.1App

WP8.0App

WP8.0Appリコンパイル

Quirks

WP7.1アプリをWP8.0用に変換する

•WP7.1依存のコードがないか注意

•Quirksモードでの互換性維持の対象外

•ソースコード非互換

•バイナリ非互換

ソースコード非互換の例Item Windows Phone OS 8.0 Windows Phone OS 7.1

IsolatedStorageFile.FileExistsメソッド

null が渡された場合、ArgumentNullException

false

Mutexクラス Mutex名には¥は使用不可 Mutex名に¥が指定されると実行時に別文字に変換されて正常動作

BeginRead , BeginWrite, EndRead, EndWrite,

非同期実行 同期実行

Thread.CurrentCultureThread.CurrentUICulture

カルチャ変更は該当スレッドのみ影響

カルチャ変更は全スレッドに影響

XmlSerializerクラス シリアル化された型には、既定のコンストラクターが必要です。

シリアル化された型の既定のコンストラクターは必須ではありません。

その他の非互換についてはhttp://msdn.microsoft.com/ja-jp/library/windowsphone/develop/jj206947.aspx

OSバイナリ非互換の例Item Windows Phone OS 8.0 Windows Phone OS 7.1

Background File Transfers 同時転送ファイル数の制限が25

同時転送ファイル数の制限が5

Networking Vary ヘッダーを処理して応答をキャッシュすることが可能

ダウンロードが 1 秒以上かかる前提は不可

Access to private nested classes

private入れ子クラスは未サポート

private入れ子クラスをサポート

その他の非互換についてはhttp://msdn.microsoft.com/ja-jp/library/windowsphone/develop/jj206947.aspx

開発環境について

開発環境の入手•Windows Phone Developer Center

•旧→ http://create.msdn.com

•新→ http://dev.windowsphone.com

• SDKは無料

• SDKの動作環境

•Windows 8 64bit版

•最低4GBのメモリ

•エミュレータ要件

•Windows 8 Pro以上

• SLAT対応ハード(Core iとか)

SLAT対応しているかを確認する

•SysInternalsツール

• http://technet.microsoft.com/en-us/sysinternals/cc835722

•coreinfo –v

•サポート

EPT *

•サポート外

EPT -

デベロッパーセンターアカウント• http://msdn.microsoft.com/ja-

jp/library/windowsphone/help/jj206719.aspx

• SDKを使うだけでは不要

• 実機転送、ストア公開には必須

• Microsoftアカウントに紐付け

• 年間$99

• 有料アプリは無制限に登録可能

• 無料アプリは100個まで登録可能

• 会社アカウント or 個人アカウント

• 会社アカウントは登録が面倒

• 会社アカウントじゃないと使えない機能あり

Windows Phone エミュレータ

•Win 8 Pro以上のHyper-Vで動作

•実機と同じ環境

•Windows Phone SDKに同封

•位置情報や端末向きもエミュレート

•エミュレータ環境設定

•ロックスクリーン

•ネットワーク接続のシミュレーション

エミュレータを使う上での注意点

•実機よりも動作が速い可能性がある

•性能チェックは実機で要確認

•エミュレータは機能テスト用

•プロファイリングツールを活用

•実機とエミュレータに使用できる

• http://wptools.codeplex.com/

エミュレータへのデプロイ

•デプロイ先として選択

•最初にデプロイされると自動起動

•停止するとローカルストレージの内容は消える

•エミュレータの論理スペック

•WVGAで512MBメモリ

•解像度:720P、WVGA、WXGA

エミュレータの操作方法• ハードウェアボタンの操作

• F1:戻るボタン

• F2:ホームボタン

• F3:検索ボタン

• F6:カメラボタン(半押し)

• F7:カメラボタン(長押し)

• F9:ボリュームアップ

• F10:ボリュームダウン

• F12:電源ボタン

• マルチタッチ対応(要タッチ対応PC)

• PgUp/PgDnでエミュレータキーボードとPC側キーボードの切替

向きのエミュレート

左回転

右回転

カメラ動作のエミュレート

•赤い四角が動き回る

位置情報のエミュレート

① 検索

② ズーム

③ ライブ操作On/Off

④ ピンモードOn/Off

⑤ すべてのポイントをクリア

⑥ マップのポイントを保存

⑦ 位置移動間隔(秒)

⑧ すべてのポイントを再生

Additional Tools-Locationでのテスト• [ライブ]ボタンでライブモードOn

1. 検索ボックスで地名入力で検索

2. ピンモードをOn

3. マップをクリックしてピン追加

• PositiionChangedイベント発生

• [ライブ]ボタンでライブモードOff

1. ピンモードをOn

2. マップをクリックしてピン追加

3. マップのポイントを保存

4. すべてのポイントを再生

• PositiionChangedイベント発生

ロックスクリーンのエミュレート

•ロックスクリーン表示

•シミュレーションダッシュボードで設定

• F12を2回押す

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

スクリーンショットの保存

• [キャプチャ]でキャプチャ

• [保存]でPCのマイピクチャに保存

Visual Studioでのデバッグ

•Windowsアプリと同じようデバッグ

•ブレークポイント

•ステップ実行

•変数参照や値変更

Windows Phoneとの接続

•Windows Phone OS 7.1

• Zune必須

•Windows Phone 8.0

• Zune不要

端末を開発用に登録する

•登録手順

1. WiFi接続/USBでPCと接続

2. Windows Phone Developer Registrationを起動

3. 「Click the Register button to unlock the phone」と表示されたら[Register]ボタンをクリック

4. デベロッパセンターアカウントに紐付けたMicrosoftアカウントに[サインイン]

•登録できる端末は３台まで

実機へデプロイ！

•ターゲットを[Device]

•実行で実機にデプロイされて実行

•エミュレータと同様のデバッグ可能

•VSからデプロイできるのは10個まで

•開発が終わったアプリはストアから

実機デバッグ

•エミュレータと同じようデバッグ

•ブレークポイント

•ステップ実行

•変数参照や値変更

実機でのスクリーンショット保存

•Windows Phone 8から可能

•電源とホームボタンの同時押し

•実機の[albums]-[screenshots]に保存

国際化対応• 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

実行環境

開発環境

ストア

MDIL: Machine Dependent Intermediate Language

ソースコード

MSILコンパイラ

MDILコンパイラ

MSILMDIL

MDILNative Image

Generetor

NativeDLL

サンプルコード

カメラをコードで操作• レンズピッカー

• ID_CAP_ISV_CAMERA

• 標準カメラアプリのファインダーより入力して随時の操作結果をファインダーに表示可能

• Picture.GetPreviewImageメソッドでサムネイル画像を取得可能

• リッチメディアレンズ

• ID_CAP_MEDIALIB_PHOTO

• Photosハブにある写真に対するエフェクト機能を追加可能

• バックグラウンドでの写真アップロード

• バックグラウンドエージェントで自動アップロード可能

• CameraAPI

• PhotoCaptureDeviceクラスで、ISO、ホワイトバランス、露出、ピントを制御

• AudioVideoCaptureDeviceクラスは、ビデオと録音に対して同等の制御を提供

カメラビューの表示

<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)

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 PhotoCaptureDeviceGet

Return Me.VmLiveModel.LiveEnd Get

End Property

コンパス機能の追加Private WithEvents CompassWatcher As Compass

Me.CompassWatcher = Compass.GetDefault

Private Sub ReadingChanged(sender As Compass,e As CompassReadingChangedEventArgs) _

Handles CompassWatcher.ReadingChangedMe.MagneticHeading = e.Reading.HeadingMagneticNorth

End Sub

Imports Windows.Devices.Sensors

Public ReadOnly Property MagneticHeading As DoubleGet

Return Me.VmCompassModel.MagneticHeadingEnd Get

End Property

コンパス機能の追加<Grid x:Name="Compass_Grid" RenderTransformOrigin="0.5,0.5">

<es:RegularPolygonStroke="{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.PropertyChangedDispatcher.BeginInvoke(

Sub()Dim g As New TransformGroupg.Children.Add(New RotateTransform With {

.Angle = Me.ViewModel.MagneticHeading})Me.Compass_Grid.RenderTransform = g

End Sub)End Sub

拡張現実っぽく見える演出

•端末を傾けると…

•見えている映像も視点が変わる

•コンパスと映像の傾きが合わない

•コンパスも傾くようにすると…

傾きを反映Private WithEvents MotionWatcher As Inclinometer

Me.MotionWatcher = Inclinometer.GetDefault

Private Sub ReadingChanged(sender As Inclinometer,e As InclinometerReadingChangedEventArgs) _

Handles MotionWatcher.ReadingChangedMe.Pitch = e.Reading.PitchDegreesMe.Yaw = e.Reading.YawDegreesMe.Roll = e.Reading.RollDegrees

End Sub

Public ReadOnly Property Pitch As SingleGet

Return Me.VmMotionModel.PitchEnd Get

End PropertyPublic ReadOnly Property Yaw As Single

GetReturn Me.VmMotionModel.Yaw

End GetEnd Property

；；

傾きを反映<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.PropertyChangedDispatcher.BeginInvoke(

Sub()Dim g As New TransformGroupg.Children.Add(New RotateTransform With {

.Angle = Me.ViewModel.MagneticHeading})Me.Compass_Grid.RenderTransform = gMe.D3D_Grid.Projection = New PlaneProjection With {

.RotationX = Me.ViewModel.Pitch,

.RotationY = Me.ViewModel.Roll}End Sub)

End Sub

DemoPhotoARSample