Android アプリを Surface Duo に対応させるBring your Android apps to Surface Duo

重要

この記事では、パブリック プレビュー段階であり、一般公開前に大幅に変更される可能性がある機能とガイダンスについて説明します。This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. 本書に記載された情報について、Microsoft は明示または黙示を問わずいかなる保証をするものでもありません。Microsoft makes no warranties, express or implied, with respect to the information provided here.

このセクションでは、デュアルスクリーンでアプリをテストし、その後、Surface Duo によって提供される画面やポスチャを最大限に活用できるように拡張するいくつかの方法について説明します。In this section, we'll discuss some ways to test your app on dual-screens, and then enhance it to take full advantage of the screens and postures provided by the Surface Duo.

既定では、Android アプリは、Surface Duo 上では Android デバイスの場合と同じようにシングル スクリーンで実行されます。By default, your Android app will run on the Surface Duo on a single screen, just as it would on any Android device. しかし、デュアルスクリーンと柔軟なポスチャによって、アプリを目立たせる新しいチャンスが生まれます。また、予想していなかったような新しい方法で、お客様にアプリを使ってもらうこともできます。However, the dual-screens and flexible postures create new opportunities for your app to stand out. They also let your customers use your app in new ways that you might not have anticipated.

アプリを Surface Duo に対応させるためには、次の 3 つの主要な手順を行う必要があります。There are three main steps to follow in order to bring your app to the Surface Duo:

  1. アプリをテストする - Duo エミュレーターを使用して動作することを確認します。Test your app - use the Duo Emulator to ensure it works.
  2. 段階的に変更する - Android ネイティブの API とライブラリを使用して、アプリの動作が、シングルスクリーン モードで並べて実行している場合よりも、デュアルスクリーン デバイスでの方が向上するようにします。Make incremental changes - use Android Native APIs and Libraries so your app works better on dual-screen devices even when running side-by-side in single-screen mode.
  3. 新機能を活用する - Microsft の Surface Duo Preview SDK とデュアルスクリーン アプリのパターンを使用して、Surface Duo によって提供される新機能を活用します。Embrace new features - use our Surface Duo Preview SDK and dual-screen app patterns to take advantage of new capabilities provided by the Surface Duo.

手順 1:アプリのテストStep 1: Test your app

Surface Duo エミュレーターを使用してアプリをテストします。Use the Surface Duo emulator to test your app. 既定では、シングルスクリーン エクスペリエンスとして実行されます。By default, it will run as a single-screen experience.

エミュレーターの [設定] で自動回転を有効にします。In the emulator, enable auto-rotation in Settings. エミュレーターでデバイスを回転させながら、左側の画面から右の画面に移動して、アプリのテストを続行します。Continue testing your app by moving it from the left screen to the right screen while rotating the device in the emulator.

問題が発生した場合は、サイズ変更可能な画面に関する Android のガイダンスに従っていることを確認し、android:resizeableActivity="true" が設定されていることを確認します。If you experience any issues, make sure you follow the Android guidance on resizable screens and make sure you've set android:resizeableActivity="true". 詳細については、developer.android.com の「折りたたみ式端末に対応したアプリの作成」を参照してください。For more info, see Building apps for foldables on developer.android.com.

手順 2:段階的に変更するStep 2: Make incremental changes

アプリをデュアルスクリーン デバイスで実行する場合に価値を追加できるいくつかの変更を次に示します。Here are a few changes that can add value to your app when it's running on a dual-screen device. これらの変更では Android のネイティブ API とライブラリを使用するため、他のデバイスのフォーム ファクターでもアプリはこれらの変更の利点を得られます。And since these changes use Android Native APIs and Libraries, they benefit your app on other device form factors, too.

アプリにこれらの機能がまだない場合は、追加することを検討してください。Consider adding these features to your app if it doesn't have them already.

すべてのデバイスの向きとポスチャを処理するHandle all device orientations and postures

特定の UX の向きの "ロック" を削除し、すべてのデバイスのポスチャをサポートします。Remove a specific UX orientation "lock" and support all device postures.

ドラッグ アンド ドロップのサポートを追加するAdd drag and drop support

ドラッグ アンド ドロップによって、ユーザーはアプリのパーツ間、または 2 つの画面の異なるアプリ間でデータを簡単に共有できます。Drag-and-drop lets a user easily share data between parts of an app, or between different apps on two screens.

アプリにドラッグ アンド ドロップを実装するには、develop.android.com の「ドラッグ & ドロップ」のガイダンスに従います。Follow the Drag and drop guidance on develop.android.com to implement drag-and drop in your app. 実行方法を確認するには、ドラッグ アンド ドロップのサンプルを使用します。Use our Drag-and-drop sample to see how it's done.

マルチインスタンスのサポートを追加するAdd multi-instance support

マルチインスタンスのサポートを追加して、ユーザーが、2 つのインスタンス (各画面に 1 つずつ) があるアプリを実行できるようにします。Add multi-instance support so a user can run your app with two instances, one on each screen.

ピクチャ イン ピクチャのサポートを追加するAdd picture-in-picture support

アプリにピクチャ イン ピクチャのサポートを実装するには、develop.android.com のガイダンスに従います。Follow the guidance on develop.android.com to implement Picture-in-picture Support in your app.

他のウィンドウで新しいアクティビティを起動するLaunch new activities in the other window

デュアルスクリーン デバイスでは、2 番目の画面で新しいアクティビティを起動するのは自然なことです。On a dual-screen device, it's natural to launch a new activity on the second screen. インテント フラグ FLAG_ACTIVITY_LAUNCH_ADJACENT を使用して、システムにこれを行うためのヒントを提供します。Use the intent flag FLAG_ACTIVITY_LAUNCH_ADJACENT to provide a hint to the system to do this.

フラグの詳細については、developer.android.com の「マルチウィンドウ モードで新しいアクティビティを起動する」を参照してください。See Launch New Activities in Multi-Window Mode on developer.android.com for more info about the flag. 実行方法を確認するには、「2 番目の画面へのインテントを起動するサンプル」を使用します。Use our Launch Intent to second screen sample to see how it's done.

手順 3:新機能を活用するStep 3: Embrace new features

魔法が起きるのはここです。アプリを見せる画面領域が広がりました。This is where the magic happens; you now have more screen real-estate to showcase your app. デュアルスクリーン API は、エミュレーターの Surface Duo イメージに組み込まれているので、独自のアプリや Microsoft のサンプルのいずれかを使用して試すことができます。The dual-screen APIs are built into the Surface Duo image in the emulator so you can try them out with your own app or with one of our samples.

アプリで、まず、アプリがデュアルスクリーン デバイスで実行されているかどうかを判断しますIn your app, first determine if the app is running on a dual-screen device. これにより、デバイス間で同じコードを使用することができます。Surface Duo 用の別のバージョンのアプリは存在しません。This lets you use the same code across devices--there's not a separate version of your app for Surface Duo. アプリがデュアルスクリーン デバイスで実行されている場合は、SDK のデュアルスクリーン API を使用してアプリを強化できます。When your app is running on a dual-screen device, you can use the dual-screen APIs from the SDK to enhance your app.

アプリをスパンするSpan your app

両方の画面にアプリをスパンして、エンドツーエンドのユーザー エクスペリエンスを確認します。Span your app across both screens to check the end-to-end user experience.

  • 継ぎ目が重要なアプリ コンテンツを覆っていますか?Is the seam covering critical app content?
  • 中央にボタンがありますか?Do you have buttons in the middle?
  • レイアウト内でコンテンツを再配置する必要がありますか?Do you need to reposition content in your layout?

アプリが継ぎ目で動作するようにするには、Display Mask API を使用します。Use the Display Mask API to make your app work with the seam.

ヒンジの角度を検討するConsider the hinge angle

ヒンジの角度センサーを使用すると、ヒンジの角度に関する情報を取得できます。You can use the Hinge Angle Sensor to get information about the angle of the hinge. アプリ (ゲームやユーティリティまたは電源アプリ) で、ヒンジの角度を使用してユーザーに価値を提供できるかどうかを検討します。Consider whether your app (maybe a game or utility/power app) can use the hinge angle to provide value to the user.

デュアルスクリーン アプリのパターンを使用するUse dual-screen app patterns

画面が 2 つあることを利用できるデュアルスクリーン アプリのパターンをいくつか特定しました。We've identified several dual-screen app patterns that let you take advantage of the fact there are two screens. ご自分のアプリとユーザーに適合するアプリのパターンについて考えてみましょう。Think about which app pattern fits your app and users. Microsoft では、これらの各パターンのデモを行うためのサンプルを用意しています。We have samples to demonstrate each of these patterns. エミュレーターでこれらを試してみてください。コードを使用して、それぞれをどのように実装できるかを確認してください。Try them in the emulator, and use the code to see how you can implement each one.

デュアルスクリーン アプリのパターン

これらのアプリのパターンの設計上の考慮事項とヒントをいくつか次に示します。Here are some design considerations and tips for these app patterns.

拡張キャンバスExtended Canvas

マスター - 詳細Master-Detail

  • 既定で選択されている項目を指定します。指定しない場合、右側の画面が空になります。Provide a default selected item, otherwise the right screen will appear empty.
  • また、デバイスをデュアル (横) に回転した場合に、どのようになるかについても考慮します。Also consider what happens when you rotate the device to dual-landscape. マスター - 詳細フローは上下の画面に保持されますか。Does it keep the master-details flow in the top-bottom screen? コンテンツを読むための画面領域が広がるため、両方の画面を詳細ビューに使用することをお勧めします。We suggest both screens be used for the details view because there's more real-estate to read content.
  • マスター - 詳細のサンプルMaster-Detail Sample

2 ページTwo Page

  • ページ割り当てに対してスワイプをどのように構成するかを検討します。Consider how the swipes are configured for pagination. カードをスライドするように、1 と 2 ページから 2 と 3 ページに移動しますか、それとも本を読むように、1 と 2 ページから 3 と 4 ページに移動しますか。Do you move from page 1-and-2 to page 2-and-3 like slide cards, or from page 1-and-2 to 3-and-4 like reading a book?
  • 2 ページのサンプルTwo Page Sample

デュアル ビューDual View

  • このパターンでは、同じデータが 2 つの異なるビューで表示されるため、1 つの画面で項目を変更すると、もう一方の画面にその変更が反映され、コンテンツの同期が維持されることを確認してください。This pattern shows the same data with two different views, so make sure that when you change items on one screen, the other screen reflects that change and keeps the content in sync.
  • デュアル ビューのサンプルDual View Sample

コンパニオン ペインCompanion Pane

  • コントロールのレイアウトは、デバイスの向きに応じて変更することができます。また、コントロールがデュアル (縦) ポスチャで右側の画面に表示されている場合と、デュアル (横) で下の画面に表示されている場合では、ビューが異なります。You can change the control's layout depending on the device orientation and have a different view when the controls are on the right screen in dual-portrait posture vs. on the bottom screen in dual-landscape.
  • コンパニオン ペインのサンプルCompanion Pane Sample

作業を強調表示するHighlight your work

アプリがデュアルスクリーン デバイス向けに拡張されていることを顧客に知らせたい場合があります。You'll want to let customers know that your app is enhanced for dual-screen devices. 検討すべきいくつかのアイデアを次に示します。Here are a few ideas to consider.

  • デュアルスクリーン エクスペリエンスを反映するように、Web サイトやオンライン ストアのページを更新する。Update your website or online store page to reflect the dual-screen experience.
  • アプリでの最初の実行エクスペリエンスと、デュアルスクリーン機能用に UX の検出を提供する。Provide a First Run Experience in your app and discovery UX for dual-screen features.
  • ユーザーの分析情報のため、Microsoft Graph などの Microsoft サービスに接続することを検討する。Consider connecting to Microsoft services such as Microsoft Graph for user insights.