開発者コンソール

WSAアプリのUX: Android™️用Windowsサブシステムによるデバイス入力のマッピング

Giovanni Laquidara Mar 02, 2023
Share:
How to Appstore on Windows 11
Blog_Header_Post_Img

 重要: Windows 11向けAmazonアプリストアは、2025年3月5日をもってサービスを終了します。詳しくは、ブログをご参照ください

 

Android開発者であれば、モバイルアプリやモバイルゲームを複数のデバイス向けにリリースしたことがあるかと思いますが、Android™️用Windowsサブシステムを利用したことはありますか。 このシステムを利用することで、より大きな画面、キーボード、トラックパッド、ゲームコントローラーを備えたデスクトップのユーザーにまでアプリの利用者を広げることができます。

この記事では、デバイスの入力をマッピングし、Windows 11で動作するAndroidアプリですべての機能を利用できるようにする方法を説明します。 以下のおすすめ機能については、最適なユーザーエクスペリエンスを提供できるように、必ず実際のデバイスでテストしてください。

キーボード入力

アプリやゲームの入力は、どのUIツールキットを使用しているかで決まります。このガイドでは、Androidアプリで最も一般的に使用されているインターフェイスについて説明します。EditTextのような仮想キーボードによるテキスト入力は、物理キーボードとシームレスに連動します。

「WASD」キーに対応
「WASD」キーと矢印キー
「WASD」キーと矢印キー

PCゲームの多くは、キーボードのWASDキーによる操作に対応しています。次のコードスニペットは、どのようにWASDキーの押下を検出してサブルーチンを開始するかを示しています。

Copied to clipboard
// WASDコントロールのKotlinスニペット

override fun onKeyUp(keyCode: Int, event: KeyEvent): Boolean {
  return when(keyCode) {
    KeyEvent.KEYCODE_W-> {
        goForward() // Wが押下された場合
        true
      }
    }
    KeyEvent.KEYCODE_A-> {
        turnLeft() // Aが押下された場合
        true
      }
    }
     KeyEvent.KEYCODE_S-> {
        if (event.isShiftPressed) {
            crouch() // Shift+Sが押下された場合
            true
        }
        else {
            goBack() // Sが押下された場合
            true
        }
      }
    }
     KeyEvent.KEYCODE_D-> {
        turnRight() // Dが押下された場合
        true
      }
    }
    else -> super.onKeyUp(keyCode, event)
  }
}
キーボードナビゲーション

UIウィジェット間のキーボードナビゲーションは、Androidフレームワークで処理します。カスタムビューを作成する場合は、必ずフォーカス可能でナビゲーションを処理できるビューにしてください。詳細については、AndroidドキュメントのFocus Handling(英語のみ)を参照してください。

example of keyboard navigation GIF

編集不可のテキストについては、選択可能にするかどうかを検討します。UI用Android XMLを使用している場合、textIsSelectable="true"をTextViewに追加して選択可能にします。

Copied to clipboard
<TextView
    android:id="@+id/imselectable"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textIsSelectable="true" />

Jetpack Composeを使用してアプリを開発している場合は、容易にコントロールできるように、必ずSelectionContainer機能を追加してください。

Copied to clipboard
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Text
import androidx.compose.foundation.text.selection.SelectionContainer

SelectionContainer {
    Column {
        Text("Text 1")
        Text("Text 2")
        Text("טקסט 3")
    }
}
ショートカット

ユーザーはほかの入力方法よりもキーボードショートカットをよく利用する可能性があるため、アプリでは必ずキーボードショートカットを提供してください。

ショートカットはdispatchKeyShortcutEvent()を使用して実装できます。このメソッドは、Alt、Ctrl、Shiftのようなメタキーの組み合わせをすべてインターセプトします。

特定のメタキーの押下を確認するには、次のKeyEventメソッドを使用します。

example of keyboard shortcuts
Kotlinを使用したキーボードショートカットの実装
Copied to clipboard
override fun dispatchKeyShortcutEvent(event: KeyEvent): Boolean {
  return when (event.keyCode) {
    KeyEvent.KEYCODE_F -> {
        if (event.isCtrlPressed) {
            findAction() // Ctrl+Fでファイルダイアログを開く
            true
        }
    }
    else -> {
      return super.dispatchKeyShortcutEvent(event)
    }
  }
}
Jetpack Composeを使用したキーボードショートカットの実装

Jetpack Composeを使用すると、修飾子を定義できます。

Copied to clipboard
fun Modifier.interceptKey(key: Key, onKeyEvent: () -> Unit): Modifier {
    return this.onPreviewKeyEvent {
        if (it.isCtrlPressed && it.key == key && it.type == KeyUp) {
            onKeyEvent()
            true
        } else it.key == key
    }
}

...

MyWidget(
    ... ,
    modifier = Modifier
        .interceptKey(Key.F) {
            findAction() // Ctrl+Fでファイルダイアログを開く
        }
)

マウス入力とトラックパッド入力

Android™️用WindowsサブシステムのAndroidアプリは、画面にポインターが表示されるマウスやトラックパッドの入力を組み込むことができます。ユーザーエクスペリエンス向上のため、アプリのUIをホバーイベントに対応させることをお勧めします。たとえば、ポインターを動かしてアクティブになったホバー状態のウィジェットが視覚的に強調されるようにします。ボタンなど、頻繁に使用するウィジェットの多くには、既にホバーサポートが組み込まれています。

 右の画像は、Windows 11で動作しているAndroidアプリのUI要素がアクティブでホバー状態になっているところを示した例です。

カスタムビューでのホバーイベントの処理
カスタムビューでのホバーイベントの処理

イベントを処理するコード

Copied to clipboard
// Kotlin
yourView.setOnHoverListener { view, event ->
    val action = event.actionMasked
    when (action) {
        ACTION_HOVER_ENTER -> {
            // ホバー開始 
            return@OnHoverListener true
        }
        ACTION_HOVER_EXIT -> {
            // ホバー終了 
            return@OnHoverListener false
        }
    }
    false
}

Jetpack Composeの場合、これらのイベントは「hoverable」修飾子を使用して処理できます。

Copied to clipboard
val interactionSource = remember { MutableInteractionSource() }
val isHovered by interactionSource.collectIsHoveredAsState()
val borderColor = if (isHovered) AmazonOrange else Color.White

Text(
    text = "ホバー可能", 
    modifier = Modifier
        .hoverable(interactionSource = interactionSource)
        .background(borderColor, RectangleShape)
        .padding(10.dp)
)

マウスやトラックパッドのユーザーは、マウスボタンのサポートが組み込まれていることを期待しています。 「コンテキストメニュー」を使用すると、副ボタンのクリックで完全なメニューを表示できます。アプリで副ボタンのクリックをサポートするには、showContextMenuを使用します。

Copied to clipboard
yourView.setOnContextClickListener {
  showContextMenu()
  true
}

Jetpack Composeで副ボタンのクリックを検出する場合は、Stack Overflowでデベロッパーアドボケイトが公開しているサンプルコードや公式のAndroidドキュメント(英語のみ)を参照し、アプリでこのUIパターンを作成する方法を確認してください。

ゲーム開発の場合の入力

ゲーム開発者の場合、シームレスなゲームエクスペリエンスを提供するには、Android™️用Windowsサブシステムでのコントローラー入力処理が不可欠です。公式ドキュメントのHandle controller actions(英語のみ)を参照し、コントローラーアクションの処理方法を確認してください。

Unityでゲームを開発した場合は、入力システムのマッピングを使用して、ユーザーが選択する入力システムに合わせて各アクションをカスタマイズできます。

example of input system mapping to customize each action to the user's preferred input system
関連リソース

 

関連記事

最近の投稿

日本語版ブログの一覧は、こちらからご覧ください。

日本語の投稿の中には、英語版から翻訳されたものが含まれます。翻訳元のブログを参照したい方は、ページ下部の言語切替バーから [英語] を選択してください。