複合現実の 2D の UWP アプリを更新します。Updating 2D UWP apps for mixed reality

Windows Mixed Reality により、ユーザーを物理またはデジタルの世界では、周囲に適切な場合、ホログラムを参照してください。Windows Mixed Reality enables a user to see holograms as if they are right around you, in your physical or digital world. 基本的には、HoloLens とに、イマーシブ ヘッドセット アクセサリをアタッチするデスクトップ Pc の両方が Windows 10 デバイスです。これは、2D アプリとしてストアにほぼすべてのユニバーサル Windows プラットフォーム (UWP) アプリを実行することであることを意味します。At its core, both HoloLens and the Desktop PCs you attach immersive headset accessories to are Windows 10 devices; this means that you're able to run almost all of the Universal Windows Platform (UWP) apps in the Store as 2D apps.

複合現実の 2D の UWP アプリの作成Creating a 2D UWP app for mixed reality

Mixed reality ヘッドセットを 2D アプリをお届けする最初の手順では、デスクトップ モニターでは、標準的な 2D アプリとして実行されているアプリを取得します。The first step to bringing a 2D app to mixed reality headsets is to get your app running as a standard 2D app on your desktop monitor.

新しい 2D UWP アプリのビルドBuilding a new 2D UWP app

複合現実用の新しい 2D アプリをビルドするには、標準的な 2D のユニバーサル Windows プラットフォーム (UWP) アプリをビルドするだけです。To build a new 2D app for mixed reality, you simply build a standard 2D Universal Windows Platform (UWP) app. その他のアプリの変更は、複合現実でスレート型として実行するには、そのアプリは必要ありません。No other app changes are required for that app to then run as a slate in mixed reality.

2D の UWP アプリの構築を開始、チェック アウト、最初のアプリを作成する記事。To get started building a 2D UWP app, check out the Create your first app article.

UWP への既存の 2D ストア アプリの追加Bringing an existing 2D Store app to UWP

ストアで 2D Windows アプリを既にがある場合、Windows 10 ユニバーサル Windows プラットフォーム (UWP) が対象とする最初ようにする必要があります。If you already have a 2D Windows app in the Store, you must first ensure it is targeting the Windows 10 Universal Windows Platform (UWP). ストア アプリで今すぐ必要がありますすべて、潜在的な開始点を次に示します。Here are all the potential starting points you may have with your Store app today:

開始点Starting Point AppX マニフェストのプラットフォーム ターゲットAppX Manifest Platform Target このユニバーサルにする方法は?How to make this Universal?
Windows Phone (Silverlight)Windows Phone (Silverlight) Silverlight アプリケーションのマニフェストSilverlight App Manifest WinRT に移行します。Migrate to WinRT
Windows Phone 8.1 ユニバーサルWindows Phone 8.1 Universal 8.1 プラットフォーム ターゲットが含まれていない AppX マニフェスト8.1 AppX Manifest that Doesn't Include Platform Target アプリをユニバーサル Windows プラットフォームに移行します。Migrate your app to the Universal Windows Platform
Windows ストア 8Windows Store 8 プラットフォーム ターゲットが含まれていない 8 AppX マニフェスト8 AppX Manifest that Doesn't Include Platform Target アプリをユニバーサル Windows プラットフォームに移行します。Migrate your app to the Universal Windows Platform
Windows ストア 8.1 ユニバーサルWindows Store 8.1 Universal 8.1 プラットフォーム ターゲットが含まれていない AppX マニフェスト8.1 AppX Manifest that Doesn't Include Platform Target アプリをユニバーサル Windows プラットフォームに移行します。Migrate your app to the Universal Windows Platform

今日 (「PC、Mac、Linux のスタンドアロン」ビルド ターゲット) の Win32 アプリとしてビルド 2D Unity アプリがある場合は、Unity を代わりに「ユニバーサル Windows プラットフォーム」ビルドのターゲットに切り替えることで、複合現実を対象ことができます。If you have a 2D Unity app today built as a Win32 app (the "PC, Mac & Linux Standalone" build target), you can target mixed reality by switching Unity to the "Universal Windows Platform" build target instead.

HoloLens Windows.Holographic のデバイス ファミリを使用して具体的には、アプリを制限することができますの方法について説明しますします。We'll talk about ways that you can restrict your app specifically to HoloLens using the Windows.Holographic device family below.

Windows Mixed Reality イマーシブ ヘッドセットで 2D アプリを実行します。Run your 2D app in a Windows Mixed Reality immersive headset

2D アプリは、場所を開発し、モニターで試して、デスクトップ コンピューターに配置した、没入型のデスクトップ ヘッドセットで試す準備ができている既に!If you've deployed your 2D app to the desktop machine where you are developing and tried it out on your monitor, you're already ready to try it out in an immersive desktop headset!

Mixed reality ヘッドセット内で [スタート] メニューに移動し、そこからアプリを起動するだけです。Just go to the Start menu within the mixed reality headset and launch the app from there. デスクトップ シェルおよび holographic シェルは、UWP アプリの同じセットを共有するので、アプリが既に存在している Visual Studio からデプロイすると、.The desktop shell and the holographic shell both share the same set of UWP apps, and so the app should already be present once you've deployed from Visual Studio.

イマーシブ ヘッドセットと HoloLens の両方を対象とします。Targeting both immersive headsets and HoloLens

これで終了です。Congratulations! アプリは、Windows 10 ユニバーサル Windows プラットフォーム (UWP) を使用しています。Your app is now using the Windows 10 Universal Windows Platform (UWP).

アプリは、デスクトップ、モバイル、Xbox、Windows Mixed Reality イマーシブ ヘッドセット、HoloLens も、将来の Windows デバイスなど、今日の Windows デバイスで実行できるようになりました。Your app is now capable of running on today's Windows devices like Desktop, Mobile, Xbox, Windows Mixed Reality immersive headsets, and HoloLens, as well as future Windows devices. ただし、実際にこれらのデバイスのすべてを対象とするアプリでは Windows.Universal デバイス ファミリをターゲットとすることを確認する必要があります。However, to actually target all of those devices, you will need to ensure your app is targeting the Windows.Universal device family.

Windows.Universal をデバイス ファミリに変更します。Change your device family to Windows.Universal

これで、Windows 10 UWP アプリは HoloLens で実行できるようにする、AppX マニフェストに進みましょう。Now let's jump into your AppX manifest to ensure your Windows 10 UWP app can run on HoloLens:

  • アプリのソリューション ファイルを開くVisual Studioアプリ パッケージのマニフェストに移動しますOpen your app's solution file with Visual Studio and navigate to the app package manifest
  • 右クリックして、 Package.appxmanifestソリューション内のファイルしに移動コードの表示Right click the Package.appxmanifest file in your Solution and go to View Code
    ソリューション エクスプ ローラーで package.appxmanifestpackage.appxmanifest in Solution Explorer
  • ターゲット プラットフォームが依存関係セクション Windows.Universal であることを確認します。Ensure your Target Platform is Windows.Universal in the dependencies section
    <Dependencies>
      <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.10240.0" MaxVersionTested="10.0.10586.0" />
    </Dependencies>
    
  • 保存してください。Save!

開発環境 Visual Studio を使用しない場合は、開くAppXManifest.xml対象にしていることを確認する任意のテキスト エディターで、 Windows.Universal TargetDeviceFamilyします。If you do not use Visual Studio for your development environment, you can open AppXManifest.xml in the text editor of your choice to ensure you're targeting the Windows.Universal TargetDeviceFamily.

HoloLens のエミュレーターで実行します。Run in the HoloLens Emulator

UWP アプリが"Windows.Universal"を対象となったみましょうアプリのビルドし、で実行、 HoloLens のエミュレーターします。Now that your UWP app targets "Windows.Universal", let's build your app and run it in the HoloLens Emulator.

  • 必ず確保HoloLens のエミュレーターがインストールされているします。Make sure you have installed the HoloLens Emulator.

  • Visual Studio で、選択、 x86ビルド アプリの構成In Visual Studio, select the x86 build configuration for your app

    x86 ビルドの Visual Studio での構成

  • 選択HoloLens のエミュレーターで、デプロイ ターゲット ドロップダウン メニューSelect HoloLens Emulator in the deployment target drop-down menu

    配置ターゲット リスト HoloLens のエミュレーター

  • 選択デバッグ > [デバッグ開始] アプリを展開およびデバッグを開始します。Select Debug > Start Debugging to deploy your app and start debugging.

  • エミュレーターが起動し、アプリを実行します。The emulator will start and run your app.

  • キーボード、マウス、または Xbox コント ローラーを使用して起動する世界では、アプリを配置します。With a keyboard, mouse, and/or an Xbox controller, place your app in the world to launch it.

    HoloLens のエミュレーターが UWP サンプルの読み込み

次のステップNext steps

この時点では、次の 2 つのいずれかが発生することができます。At this point, one of two things can happen:

  1. アプリはそのスプラッシュを表示して、エミュレーターに配置されて後の実行を開始!Your app will show its splash and start running after it is placed in the Emulator! すごい!Awesome!
  2. または、2D ホログラムの読み込みアニメーションを確認した後は読み込みを停止し、アプリのスプラッシュ スクリーンにだけ表示されます。Or after you see a loading animation for a 2D hologram, loading will stop and you will just see your app at its splash screen. つまり、何らかの問題を複合現実でのアプリを実現方法を理解するのには追加の調査がかかります。This means that something went wrong and it will take more investigation to understand how to bring your app to life in Mixed Reality.

HoloLens で開始する UWP アプリの原因の下部に取得する、デバッグする必要があります。To get to the bottom of what may be causing your UWP app not to start on HoloLens, you'll have to debug.

デバッガーでの UWP アプリを実行します。Running your UWP app in the debugger

次の手順で、Visual Studio デバッガーを使用して、UWP アプリのデバッグを説明します。These steps will walk you through debugging your UWP app using the Visual Studio debugger.

  • これをいない場合は、Visual Studio でソリューションを開きます。If you haven't already done so, open your solution in Visual Studio. ターゲットへの変更、 HoloLens のエミュレーターし、ビルド構成をx86します。Change the target to the HoloLens Emulator and the build configuration to x86.
  • 選択デバッグ > [デバッグ開始] アプリを展開およびデバッグを開始します。Select Debug > Start Debugging to deploy your app and start debugging.
  • 世界、マウス、キーボード、または Xbox コント ローラーで、アプリを配置します。Place the app in the world with your mouse, keyboard, or Xbox controller.
  • ここで、アプリ コードでどこかに visual Studio が分割する必要があります。Visual Studio should now break somewhere in your app code.
    • アプリのクラッシュまたはハンドルされないエラーのため、デバッガーを中断しないすぐは、すべてが実行されていることを確認および機能へのアプリのコア機能のテスト パスを移動します。If your app doesn't immediately crash or break into the debugger because of an unhandled error, then go through a test pass of the core features of your app to make sure everything is running and functional. (内部例外が処理されている) 下図のようにエラーが発生する可能性があります。You may see errors like pictured below (internal exceptions that are being handled). アプリのエクスペリエンスに影響する内部エラーを見逃すことはないことを確認するには、すべてが期待どおりに動作を確認する単体テスト、自動テストを実行します。To ensure you don't miss internal errors that impact the experience of your app, run through your automated tests and unit tests to make sure everything behaves as expected.

HoloLens のエミュレーターは、システムの例外を示す UWP サンプルと共に読み込まれる

UI を更新します。Update your UI

これで、UWP アプリは、イマーシブ ヘッドセットまたは 2D ホログラムとして HoloLens で実行されているが、次にしましょう美しい見た目を確認します。Now that your UWP app is running on immersive headsets and/or HoloLens as a 2D hologram, next we'll make sure it looks beautiful. 考慮事項を次に示します。Here are some things to consider:

  • 853 x 480 有効ピクセルに固定の解像度とは、相当 DPI で、Windows Mixed Reality は 2D のすべてのアプリを実行します。Windows Mixed Reality will run all 2D apps at a fixed resolution and DPI that equates to 853x480 effective pixels. 設計にこのスケールの微調整が必要なかどうかを考慮し、HoloLens、イマーシブ ヘッドセットを改善するために以下の設計ガイダンスを確認します。Consider if your design needs refinement at this scale and review the design guidance below to improve your experience on HoloLens and immersive headsets.
  • Windows Mixed Realityはサポートしていません2D のライブ タイルです。Windows Mixed Reality does not support 2D live tiles. その情報をアプリに戻すを検討してください、コア機能には、ライブ タイルに情報が表示されている場合、または探索3D アプリ ランチャーします。If your core functionality is showing information on a live tile, consider moving that information back into your app or explore 3D app launchers.

2D アプリの表示解像度とスケール係数2D app view resolution and scale factor

レスポンシブ デザインから

Windows 10 では、すべてのビジュアル デ ザインを移動する実際の画面のピクセルから有効ピクセルします。Windows 10 moves all visual design from real screen pixels to effective pixels. 開発者は、次の Windows 10 ヒューマン インターフェイス ガイドラインの有効ピクセルは、その UI を設計し、Windows スケーリングにより、その有効ピクセルは適切なサイズ、つまり複数のデバイス、解像度、DPI、使いやすさなどです。これを参照してくださいmsdn 優れた読み取りこれと詳細については、ビルド プレゼンテーションします。That means, developers design their UI following the Windows 10 Human Interface Guidelines for effective pixels, and Windows scaling ensures those effective pixels are the right size for usability across devices, resolutions, DPI, etc. See this great read on MSDN to learn more as well as this BUILD presentation.

距離の範囲で、世界中のアプリを配置する独自の機能を使用しても、テレビのような表示距離は、最善の読みやすさと視線の先/ジェスチャとの対話を生成するためにお勧めします。Even with the unique ability to place apps in your world at a range of distances, TV-like viewing distances are recommended to produce the best readability and interaction with gaze/gesture. そのため、Mixed Reality 自宅で仮想スレートでフラットな UWP ビューが表示されます。Because of that, a virtual slate in the Mixed Reality Home will display your flat UWP view at:

1280 x 720、150 %dpi (853 x 480 有効ピクセル数)1280x720, 150%DPI (853x480 effective pixels)

この解決方法には、いくつかの利点があります。This resolution has several advantages:

  • この有効ピクセル レイアウトは、タブレットや小規模のデスクトップと同じ情報密度について必要があります。This effective pixel layout will have about the same information density as a tablet or small desktop.
  • これは、固定 DPI とデバイス間でシームレスなエクスペリエンスを有効にする Xbox One で実行されている UWP アプリの有効ピクセルと一致します。It matches the fixed DPI and effective pixels for UWP apps running on Xbox One, enabling seamless experiences across devices.
  • 動作して、世界中のアプリの距離の範囲の間でスケールするとき、このサイズは大丈夫です。This size looks good when scaled across our range of operating distances for apps in the world.

2D アプリ ビュー インターフェイス設計のベスト プラクティス2D app view interface design best practices

操作を行います。Do:

  • に従って、 Windows 10 ヒューマン インターフェイス ガイドライン (HIG)スタイル、フォント サイズ、およびボタンのサイズ。Follow the Windows 10 Human Interface Guidelines (HIG) for styles, font sizes and button sizes. HoloLens では、互換性のあるアプリのパターン、判読できるテキストのサイズ、および適切なヒット ターゲットのサイズ変更、アプリを設定するために処理を行います。HoloLens will do the work to ensure your app will have compatible app patterns, readable text sizes, and appropriate hit target sizing.
  • UI 次の手順のためのベスト プラクティスを確認しますレスポンシブ デザインHoloLen の一意の解像度と DPI で最適に表示します。Ensure your UI follows best practices for responsive design to look best at HoloLen's unique resolution and DPI.
  • Windows の"light"の色のテーマの推奨事項を使用します。Use the "light" color theme recommendations from Windows.

できません:Don't:

  • ユーザーが使い慣れたヘッドセットとの間に、複合現実で UI をも大幅に変更します。Change your UI too drastically when in mixed reality, to ensure users have a familiar experience in and out of the headset.

アプリ モデルを理解します。Understand the app model

アプリ モデルの多くのアプリがまとめて live、Mixed Reality ホームを使用する複合現実は設計されています。The app model for mixed reality is designed to use the Mixed Reality Home, where many apps live together. これと考える複合現実と同等のデスクトップで、一度にで多くの 2D アプリを実行します。Think of this as the mixed reality equivalent of the desktop, where you run many 2D apps at once. これは、アプリのライフ サイクル、タイル、およびその他のアプリの主な機能に影響を与えます。This has implications on app life cycle, Tiles, and other key features of your app.

アプリ バーと [戻る] ボタンApp bar and back button

2D のビューは、そのコンテンツの上にアプリ バーで装飾されます。2D views are decorated with a app bar above their content. アプリ バーでは、アプリ固有のパーソナル化の 2 つの点があります。The app bar has two points of app-specific personalization:

タイトル: が表示されます、 displaynameのアプリ インスタンスに関連付けられたタイルTitle: displays the displayname of the Tile associated with the app instance

: [戻る] ボタン発生させる、 BackRequested 押されたときにイベント。Back Button: raises the BackRequested event when pressed. 戻るボタンの可視性がによって制御される SystemNavigationManager.AppViewBackButtonVisibility します。Back Button visibility is controlled by SystemNavigationManager.AppViewBackButtonVisibility.

アプリ バーの 2D アプリ ビューでの UIApp bar UI in 2D app view
アプリ バーの 2D アプリ ビューでの UIApp bar UI in 2D app view

テストの 2D アプリの設計Test your 2D app's design

テキストを読み取ることが、ボタンが不要、およびアプリ全体が正しく思わかどうかを確認するアプリのテストは重要です。It is important to test your app to make sure the text is readable, the buttons are targetable, and the overall app looks correct. できますテストデスクトップ ヘッドセット、HoloLens、エミュレーター、または解像度が 1280 x 720 に設定を使用したタッチ デバイスで@150%。You can test on a desktop headset, a HoloLens, an emulator, or a touch device with resolution set to 1280x720 @150%.

新しい入力可能性New input possibilities

HoloLens では、高度な深さセンサーを使用して、世界中のユーザーを参照しています。HoloLens uses advanced depth sensors to see the world and see users. これによりなどの高度な手のジェスチャブルームエア タップします。This enables advanced hand gestures like bloom and air-tap. 強力なマイクも有効にするエクスペリエンスを音声します。Powerful microphones also enable voice experiences.

デスクトップ ヘッドセットは、ユーザーがアプリをポイントし、アクションを実行するアニメーション コント ローラーを使用できます。With Desktop headsets, users can use motion controllers to point at apps and take action. 自分の視線の先を持つオブジェクトを対象とする、ゲーム パッドを使用することもできます。They can also use a gamepad, targeting objects with their gaze.

変換する UWP アプリでは、このような複雑さのすべての処理は、Windows、視線、ジェスチャ、音声およびモーションをコント ローラーの入力ポインター イベント入力メカニズムを抽象化します。Windows takes care of all of this complexity for UWP apps, translating your gaze, gestures, voice and motion controller input to pointer events that abstract away the input mechanism. たとえば、ユーザーが自分の手でエア タップの完了またはアニメーション コント ローラーで、トリガーのプルが 2D のアプリケーションは、入力の取得元、タッチ スクリーンでとしてを押すと、2 D touch だけ表示そこを知る必要はありません。For example, a user may have done an air-tap with their hand or pulled the Select trigger on a motion controller, but 2D applications don't need to know where the input came from - they just see a 2D touch press, as if on a touchscreen.

HoloLens を UWP アプリを移行することと、入力を理解する必要が高レベルの概念やシナリオを次に示します。Here are the high level concepts/scenarios you should understand for input when bringing your UWP app to HoloLens:

  • 視線ホバー イベントは、メニューのフライアウトまたはアプリの周囲 gazing するだけでポップアップ表示するその他のユーザー インターフェイス要素をトリガーできますが予期せずに変わります。Gaze turns into hover events, which can unexpectedly trigger menus, flyouts or other user interface elements to pop up just by gazing around your app.
  • 視線の先が正確に表すマウス入力ではありません。Gaze is not as precise as mouse input. 使用は、HoloLens、タッチ対応のモバイル アプリケーションと同様のヒット ターゲットを適切にサイズ。Use appropriately sized hit targets for HoloLens, similar to touch-friendly mobile applications. アプリの端の小さな要素は、非常に困難と対話します。Small elements near the edges of the app are especially hard to interact with.
  • ユーザーは、2 本の指のパンにドラッグするスクロールから移動する入力モードを切り替える必要があります。Users must switch input modes to go from scrolling to dragging to two finger panning. アプリは、タッチ入力用に設計された、2 本の指のパンの背後にある主要な機能がロックされていないことを確認を検討してください。If your app was designed for touch input, consider ensuring that no major functionality is locked behind two finger panning. そうである場合は、2 本の指のパンを開始できるボタンのような代替入力手段のことを検討します。If so, consider having alternative input mechanisms like buttons that can initiate two finger panning. やなどのマップ アプリ 2 本の指のパンとズームできますが、マイナス、プラス記号がシングル クリックで同じズーム相互作用をシミュレートするためにボタンを回転します。For example, the Maps app can zoom with two finger panning but has a plus, minus, and rotate button to simulate the same zoom interactions with single clicks.

音声入力複合現実エクスペリエンスの重要な部分です。Voice input is a critical part of the mixed reality experience. 音声ヘッドセットを使用する場合は、Cortana を強化する Windows 10 では、Api を設けました。We've enabled all of the speech APIs that are in Windows 10 powering Cortana when using a headset.

発行し、ユニバーサル アプリの管理Publish and Maintain your Universal app

アプリが稼働するいると、アプリのパッケージ化するMicrosoft Store に提出します。Once your app is up and running, package your app to submit it to the Microsoft Store.

関連項目See also