混合現実向けに 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 デバイスとして接続します。これは、ストア内のほぼすべてのユニバーサル Windows プラットフォーム (UWP) アプリを2D アプリとして実行できることを意味します。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

2D アプリを mixed reality ヘッドセットにするための最初の手順は、アプリを標準の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.

既存の2D ストアアプリを UWP に導入する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 UniversalWindows 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 UniversalWindows 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

現在、Win32 アプリ ("PC, Mac & Linux スタンドアロン" ビルドターゲット) としてビルドされた 2D Unity アプリがある場合は、Unity を "ユニバーサル Windows プラットフォーム" ビルドターゲットに切り替えることによって、mixed reality をターゲットにすることができます。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.

ここでは、以下の Holographic デバイスファミリを使用して、アプリを HoloLens に限定する方法について説明します。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).

これで、アプリは現在の windows デバイス (デスクトップ、モバイル、Xbox、Windows Mixed Reality イマーシブヘッドセット、HoloLens など) で実行できるようになり、今後の 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 のユニバーサルデバイスファミリを対象としていることを確認する必要があります。However, to actually target all of those devices, you will need to ensure your app is targeting the Windows.Universal device family.

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

次に、AppX マニフェストに移動して、Windows 10 UWP アプリが HoloLens で実行できることを確認します。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 を使用しない場合は、任意のテキストエディターでpackage.appxmanifestを開いて、 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

    Visual Studio での x86 ビルド構成

  • [配置ターゲット] ドロップダウンメニューで [HoloLens Emulator] を選択します。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.

    UWP サンプルで読み込まれた HoloLens エミュレーター

次の手順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. これは、何らかの問題が発生したことを意味します。これは、アプリを Mixed Reality で利用する方法を理解するために、より多くの調査を受けます。This means that something went wrong and it will take more investigation to understand how to bring your app to life in Mixed Reality.

UWP アプリが HoloLens で開始されない原因の概要を把握するには、デバッグする必要があります。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.

システム例外を示す UWP サンプルが読み込まれた HoloLens エミュレーター

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:

  • Windows Mixed Reality は、853x480 有効ピクセルに相当する固定解像度および DPI ですべての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 などにおける使いやすさに適したサイズになります。詳細については、このビルドプレゼンテーションをご覧ください。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:

1280x720、150% DPI(853x480 有効ピクセル)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.
  • これは、Xbox One で実行されている UWP アプリの固定 DPI と有効ピクセルに一致し、デバイス間でシームレスなエクスペリエンスを実現します。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 の "明るい" 色のテーマに関する推奨事項を使用します。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

混合現実のアプリモデルは、多くのアプリが一緒に存在する Mixed reality ホームを使用するように設計されています。The app model for mixed reality is designed to use the Mixed Reality Home, where many apps live together. これは、多数の2D アプリを一度に実行するデスクトップに相当する mixed reality と考えることができます。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

戻るボタン: 押されたときに、 バック要求さ れたイベントを発生させます。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

アプリケーションをテストして、テキストが読み取り可能であること、ボタンが targetable であること、アプリ全体が正しいことを確認することが重要です。It is important to test your app to make sure the text is readable, the buttons are targetable, and the overall app looks correct. 解像度が 1280 x 720 @150% に設定されているデスクトップヘッドセット、HoloLens、エミュレーター、またはタッチデバイスでテストすることができます。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.

Windows では、入力メカニズムを抽象化するポインターイベントに対して、宝石、ジェスチャ、音声、およびモーションコントローラーの入力を変換することによって、UWP アプリのこのような複雑さをすべて処理します。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 アプリケーションは、タッチスクリーンの場合と同様に、2D タッチの押下を認識しているだけではありません。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.

UWP アプリを HoloLens に持ち込むときの入力について理解しておく必要がある概要の概念とシナリオを次に示します。Here are the high level concepts/scenarios you should understand for input when bringing your UWP app to HoloLens:

  • マウスをポイントすると、メニュー、flyouts、またはその他のユーザーインターフェイス要素が予期せずに起動し、アプリに関する情報が表示されるようになります。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. たとえば、Maps アプリでは、2つの指パンでズームできますが、1回のクリックで同じズーム操作をシミュレートするには、プラス、マイナス、および回転ボタンがあります。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.

音声入力は、mixed reality エクスペリエンスの重要な部分です。Voice input is a critical part of the mixed reality experience. ヘッドセットを使用すると、Cortana の電源をオンにしている Windows 10 のすべての speech 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