高度なタッチペン機能

Android と ChromeOS には、優れたタッチペン エクスペリエンスを提供するアプリの作成に役立つさまざまな API が用意されています。MotionEvent クラスは、タッチペンの圧力、向き、傾斜、ホバー、手のひら検出など、タッチペンによる画面の操作に関する情報を公開します。低レイテンシのグラフィックスとモーション予測ライブラリにより、画面上のタッチペン レンダリングが強化され、ペンと紙のように自然に操作できます。

MotionEvent

MotionEvent クラスは、画面上のタッチポインタの位置や移動など、ユーザー入力操作を表します。タッチペン入力の場合、MotionEvent は圧力、向き、傾斜、ホバーのデータも表します。

イベントデータ

MotionEvent データにアクセスするには、コンポーネントに pointerInput 修飾子を追加します。

@Composable
fun Greeting() {
    Text(
        text = "Hello, Android!", textAlign = TextAlign.Center, style = TextStyle(fontSize = 5.em),
        modifier = Modifier
            .pointerInput(Unit) {
                awaitEachGesture {
                    while (true) {
                        val event = awaitPointerEvent()
                        event.changes.forEach { println(it) }
                    }
                }
            },
    )
}

MotionEvent オブジェクトは、UI イベントの次の要素に関連するデータを提供します。

• アクション: デバイスの物理的な操作 - 画面をタップする、画面上でポインタを移動する、画面上でホバーする
• ポインタ: 画面を操作するオブジェクトの識別子（指、タッチペン、マウス）
• 軸: データの種類 - x 座標、y 座標、圧力、傾斜、向き、ホバー（距離）

アクション

タッチペン サポートを実装するには、ユーザーが実行しているアクションを把握する必要があります。

MotionEvent には、モーション イベントを定義するさまざまな ACTION 定数が用意されています。タッチペンで最も重要なアクションには次のようなものがあります。

アプリは、ACTION_DOWN が発生したときに新しいストロークを開始する、ACTION_MOVE, でストロークを描画する、ACTION_UP がトリガーされたときにストロークを終了するなどのタスクを実行できます。

特定のポインタに対する ACTION_DOWN から ACTION_UP までの MotionEvent アクションのセットは、モーション セットと呼ばれます。

ポインタ

ほとんどの画面はマルチタッチです。システムは、画面を操作する各指、タッチペン、マウス、その他のポインティング オブジェクトにポインタを割り当てます。ポインタ インデックスを使用すると、1 本目の指の画面に接触する指や 2 本目の指の位置など、特定のポインタの軸情報を取得できます。

ポインタ インデックスの範囲は、0 から MotionEvent#pointerCount() によって返されるポインタの数から 1 を引いた値です。

ポインタの軸値にアクセスするには、getAxisValue(axis, pointerIndex) メソッドを使用します。ポインタ インデックスを省略すると、最初のポインタであるポインタ 0（0）の値が返されます。

MotionEvent オブジェクトには、使用中のポインタの種類に関する情報が含まれています。ポインタの種類を取得するには、ポインタ インデックスに対して反復処理を行い、getToolType(pointerIndex) メソッドを呼び出します。

ポインタについて詳しくは、マルチタッチ ジェスチャーの処理をご覧ください。

タッチペン入力

TOOL_TYPE_STYLUS を使用すると、タッチペン入力をフィルタできます。

val isStylus = TOOL_TYPE_STYLUS == event.getToolType(pointerIndex)

boolean isStylus = TOOL_TYPE_STYLUS == event.getToolType(pointerIndex);

TOOL_TYPE_ERASER を使用すると、タッチペンが消しゴムとして使用されていることも報告できます。

val isEraser = TOOL_TYPE_ERASER == event.getToolType(pointerIndex)

boolean isEraser = TOOL_TYPE_ERASER == event.getToolType(pointerIndex);

タッチペンの軸データ

ACTION_DOWN と ACTION_MOVE は、タッチペンに関する軸データ（x 座標と y 座標、圧力、向き、傾斜、ホバー）を提供します。

このデータへのアクセスを可能にするために、MotionEvent API には getAxisValue(int) が用意されています。ここで、パラメータは次のいずれかの軸 ID です。

たとえば、MotionEvent.getAxisValue(AXIS_X) は最初のポインタの x 座標を返します。

マルチタッチ ジェスチャーの処理もご覧ください。

職位

次の呼び出しを使用して、ポインタの x 座標と y 座標を取得できます。

• MotionEvent#getAxisValue(AXIS_X) または MotionEvent#getX()
• MotionEvent#getAxisValue(AXIS_Y) または MotionEvent#getY()

気圧

ポインタの圧力を取得するには、MotionEvent#getAxisValue(AXIS_PRESSURE) を使用するか、最初のポインタの場合は MotionEvent#getPressure() を使用します。

タッチスクリーンまたはタッチパッドの圧力値は 0（圧力なし）～ 1 の値ですが、画面の調整によってはより高い値が返されることがあります。

向き

方向とは、タッチペンが向いている方向を示します。

ポインタの向きは、getAxisValue(AXIS_ORIENTATION) または getOrientation()（最初のポインタの場合）を使用して取得できます。

タッチペンの場合、向きは、時計回りに 0 ～ pi（pi）または反時計回り 0 ～-pi のラジアン値として返されます。

向きを使用すると、実際のブラシを実装できます。たとえば、タッチペンがフラットブラシを表す場合、フラットブラシの幅はタッチペンの向きによって異なります。

傾斜

傾斜は、画面に対するタッチペンの傾きを測定したものです。

tilt は、タッチペンの正の角度をラジアン単位で返します。ゼロは画面に対して垂直で、pi/2 は画面上で水平です。

傾斜角は getAxisValue(AXIS_TILT) を使用して取得できます（最初のポインタのショートカットはありません）。

傾斜を使用すると、実物にできるだけ近いツールを再現できます。たとえば、傾けた鉛筆で陰影を付けることができます。

カーソルを合わせる

画面からタッチペンまでの距離は getAxisValue(AXIS_DISTANCE) で取得できます。このメソッドは、タッチペンが画面から離れるにつれて、0.0（画面に接触）からより大きな値を返します。画面とタッチペンのペン先（先端）間のホバー距離は、画面とタッチペンの両方のメーカーによって異なります。実装はさまざまな場合があるため、アプリに不可欠な機能については正確な値に依存しないでください。

タッチペンのホバーを使用すると、ブラシのサイズをプレビューしたり、ボタンが選択されることを通知したりできます。

パーム リジェクション、ナビゲーション、不要な入力

マルチタッチ スクリーンでは、手書き入力中にサポートのためにユーザーが自然に手を画面に置いた場合など、不要なタップが登録されることがあります。パーム リジェクションは、この動作を検出し、最後の MotionEvent セットをキャンセルする必要があることを通知するメカニズムです。

そのため、不要なタップを画面から削除し、正当なユーザー入力を再レンダリングできるように、ユーザー入力の履歴を保持する必要があります。

ACTION_CANCELED と FLAG_CANCELED

ACTION_CANCEL と FLAG_CANCELED はどちらも、前の MotionEvent セットを最後の ACTION_DOWN からキャンセルする必要があることを通知するためのものです。たとえば、描画アプリで特定のポインタの最後のストロークを元に戻すことができます。

ACTION_CANCEL

Android 1.0（API レベル 1）で追加

ACTION_CANCEL は、前のモーション イベントのセットをキャンセルする必要があることを示します。

ACTION_CANCEL は、次のいずれかが検出されるとトリガーされます。

• ナビゲーション ジェスチャー
• パーム リジェクション

ACTION_CANCEL がトリガーされたら、getPointerId(getActionIndex()) でアクティブなポインタを特定する必要があります。次に、そのポインタで作成したストロークを入力履歴から削除し、シーンを再レンダリングします。

FLAG_CANCELED

Android 13（API レベル 33）で追加

FLAG_CANCELED は、ポインタの上移動が意図しないユーザータップであることを示します。このフラグは通常、ユーザーが誤って画面に触れた場合（デバイスを握ったり、手のひらを画面に置いたときなど）に設定されます。

フラグの値には、次の方法でアクセスできます。

val cancel = (event.flags and FLAG_CANCELED) == FLAG_CANCELED

boolean cancel = (event.getFlags() & FLAG_CANCELED) == FLAG_CANCELED;

このフラグが設定されている場合、このポインタの最後の ACTION_DOWN から、最後の MotionEvent セットを元に戻す必要があります。

ACTION_CANCEL と同様に、ポインタは getPointerId(actionIndex) で見つけることができます。

全画面表示、エッジ ツー エッジ、ナビゲーション ジェスチャー

アプリが全画面表示で、描画アプリやメモ作成アプリのキャンバスなど、操作可能な要素が端付近にある場合、画面の下からスワイプしてナビゲーションを表示したり、アプリをバックグラウンドに移動したりすると、キャンバスが不必要にタッチされる可能性があります。

アプリでの操作により不要なタップがトリガーされないようにするには、インセットと ACTION_CANCEL を使用します。

パーム リジェクション、ナビゲーション、不要な入力のセクションもご覧ください。

WindowInsetsController の setSystemBarsBehavior() メソッドと BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE を使用して、ナビゲーション操作による不要なタッチイベントの発生を防ぎます。

// Configure the behavior of the hidden system bars.
windowInsetsController.systemBarsBehavior =
    WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

// Configure the behavior of the hidden system bars.
windowInsetsController.setSystemBarsBehavior(
    WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
);

インセットとジェスチャー管理について詳しくは、以下をご覧ください。

• 没入モードのシステムバーを非表示にする
• ジェスチャー ナビゲーションとの互換性を確保する
• アプリ内でコンテンツをエッジ ツー エッジで表示する

低遅延

レイテンシとは、ハードウェア、システム、アプリがユーザー入力を処理してレンダリングするために必要な時間です。

レイテンシ = ハードウェアと OS の入力処理 + アプリ処理 + システム合成

• ハードウェア レンダリング

レイテンシの原因

• タッチスクリーン（ハードウェア）へのタッチペンの登録: タッチペンと OS が通信して登録および同期する際の最初のワイヤレス接続。
• タップのサンプリング レート（ハードウェア）: タッチスクリーンがポインタが表面に接触しているかどうかをチェックする 1 秒あたりの回数（60 ～ 1, 000 Hz）。
• 入力処理（アプリ）: ユーザー入力への色、グラフィック エフェクト、変換の適用。
• グラフィック レンダリング（OS + ハードウェア）: バッファ スワップ、ハードウェア処理。

低レイテンシのグラフィックス

Jetpack 低レイテンシ グラフィック ライブラリを使用すると、ユーザー入力から画面上のレンダリングまでの処理時間を短縮できます。

このライブラリは、マルチバッファ レンダリングを回避し、画面に直接書き込むフロント バッファ レンダリング手法を利用することで、処理時間を短縮します。

フロント バッファ レンダリング

フロント バッファは、画面がレンダリングに使用するメモリです。最も近いアプリが画面に直接描画できます。低レイテンシのライブラリにより、アプリはフロント バッファに直接レンダリングできます。これにより、通常のマルチバッファ レンダリングやダブルバッファ レンダリング（最も一般的なケース）でバッファ スワップが防止され、パフォーマンスが向上します。

フロント バッファ レンダリングは画面の小さな領域をレンダリングする優れた手法ですが、画面全体を更新するために使用するものではありません。フロント バッファ レンダリングでは、アプリはディスプレイが読み取っているバッファにコンテンツをレンダリングします。その結果、アーティファクトのレンダリングやテアリング が発生する可能性があります（下記参照）。

低レイテンシ ライブラリは、Android 10（API レベル 29）以降と、Android 10（API レベル 29）以降を搭載した ChromeOS デバイスで利用できます。

依存関係

低レイテンシ ライブラリは、フロント バッファ レンダリングを実装するためのコンポーネントを提供します。このライブラリは、アプリのモジュール build.gradle ファイルに依存関係として追加されます。

dependencies {
    implementation "androidx.graphics:graphics-core:1.0.0-alpha03"
}

GLFrontBufferRenderer のコールバック

低レイテンシ ライブラリには、次のメソッドを定義する GLFrontBufferRenderer.Callback インターフェースが含まれています。

• onDrawFrontBufferedLayer()
  • onDrawDoubleBufferedLayer()

低レイテンシ ライブラリは、GLFrontBufferRenderer で使用するデータの種類に依存しません。

ただし、ライブラリはデータを数百のデータポイントのストリームとして処理します。そのため、メモリの使用量と割り当てを最適化するようにデータを設計します。

コールバック

レンダリング コールバックを有効にするには、GLFrontBufferedRenderer.Callback を実装し、onDrawFrontBufferedLayer() と onDrawDoubleBufferedLayer() をオーバーライドします。GLFrontBufferedRenderer はコールバックを使用して、可能な限り最適化された方法でデータをレンダリングします。

val callback = object: GLFrontBufferedRenderer.Callback<DATA_TYPE> {

   override fun onDrawFrontBufferedLayer(
       eglManager: EGLManager,
       bufferInfo: BufferInfo,
       transform: FloatArray,
       param: DATA_TYPE
   ) {
       // OpenGL for front buffer, short, affecting small area of the screen.
   }

   override fun onDrawMultiDoubleBufferedLayer(
       eglManager: EGLManager,
       bufferInfo: BufferInfo,
       transform: FloatArray,
       params: Collection<DATA_TYPE>
   ) {
       // OpenGL full scene rendering.
   }
}

GLFrontBufferedRenderer.Callback<DATA_TYPE> callbacks =
    new GLFrontBufferedRenderer.Callback<DATA_TYPE>() {
        @Override
        public void onDrawFrontBufferedLayer(@NonNull EGLManager eglManager,
            @NonNull BufferInfo bufferInfo,
            @NonNull float[] transform,
            DATA_TYPE data_type) {
                // OpenGL for front buffer, short, affecting small area of the screen.
        }

    @Override
    public void onDrawDoubleBufferedLayer(@NonNull EGLManager eglManager,
        @NonNull BufferInfo bufferInfo,
        @NonNull float[] transform,
        @NonNull Collection<? extends DATA_TYPE> collection) {
            // OpenGL full scene rendering.
    }
};

GLFrontBufferedRenderer のインスタンスを宣言する

先ほど作成した SurfaceView とコールバックを指定して、GLFrontBufferedRenderer を準備します。GLFrontBufferedRenderer は、コールバックを使用してフロント バッファとダブルバッファへのレンダリングを最適化します。

var glFrontBufferRenderer = GLFrontBufferedRenderer<DATA_TYPE>(surfaceView, callbacks)

GLFrontBufferedRenderer<DATA_TYPE> glFrontBufferRenderer =
    new GLFrontBufferedRenderer<DATA_TYPE>(surfaceView, callbacks);

レンダリング

フロントバッファ レンダリングは、renderFrontBufferedLayer() メソッドを呼び出すと開始され、onDrawFrontBufferedLayer() コールバックがトリガーされます。

commit() 関数を呼び出すと、ダブルバッファ レンダリングが再開されます。これにより onDrawMultiDoubleBufferedLayer() コールバックがトリガーされます。

以下の例では、ユーザーが画面上で描画を開始し（ACTION_DOWN）、ポインタを動かすと（ACTION_MOVE）、プロセスがフロント バッファにレンダリングされます（高速レンダリング）。ポインタが画面の表面を離れると、プロセスはダブルバッファにレンダリングされます（ACTION_UP）。

requestUnbufferedDispatch() を使用すると、入力システムでモーション イベントをバッチ処理せずに、利用可能になり次第配信するようにリクエストできます。

when (motionEvent.action) {
   MotionEvent.ACTION_DOWN -> {
       // Deliver input events as soon as they arrive.
       view.requestUnbufferedDispatch(motionEvent)
       // Pointer is in contact with the screen.
       glFrontBufferRenderer.renderFrontBufferedLayer(DATA_TYPE)
   }
   MotionEvent.ACTION_MOVE -> {
       // Pointer is moving.
       glFrontBufferRenderer.renderFrontBufferedLayer(DATA_TYPE)
   }
   MotionEvent.ACTION_UP -> {
       // Pointer is not in contact in the screen.
       glFrontBufferRenderer.commit()
   }
   MotionEvent.CANCEL -> {
       // Cancel front buffer; remove last motion set from the screen.
       glFrontBufferRenderer.cancel()
   }
}

switch (motionEvent.getAction()) {
   case MotionEvent.ACTION_DOWN: {
       // Deliver input events as soon as they arrive.
       surfaceView.requestUnbufferedDispatch(motionEvent);

       // Pointer is in contact with the screen.
       glFrontBufferRenderer.renderFrontBufferedLayer(DATA_TYPE);
   }
   break;
   case MotionEvent.ACTION_MOVE: {
       // Pointer is moving.
       glFrontBufferRenderer.renderFrontBufferedLayer(DATA_TYPE);
   }
   break;
   case MotionEvent.ACTION_UP: {
       // Pointer is not in contact in the screen.
       glFrontBufferRenderer.commit();
   }
   break;
   case MotionEvent.ACTION_CANCEL: {
       // Cancel front buffer; remove last motion set from the screen.
       glFrontBufferRenderer.cancel();
   }
   break;
}

レンダリングですべきこと、すべきでないこと

画面の小さな部分、手書き、描画、スケッチ。

全画面表示の更新、パン、ズーム。テアリングが発生する場合があります。

テアリング

テアリングは、画面の更新と画面バッファの変更が同時に行われると発生します。画面の一部に新しいデータが表示され、別の部分には古いデータが表示されます。

モーション予測

Jetpack モーション予測ライブラリは、ユーザーのストロークパスを推定し、レンダラに一時的な人為的なポイントを提供することで、認識されるレイテンシを短縮します。

モーション予測ライブラリは、実際のユーザー入力を MotionEvent オブジェクトとして取得します。オブジェクトには、x 座標と y 座標、圧力、時間に関する情報が含まれています。モーション プレディクタは、これらの情報を使用して将来の MotionEvent オブジェクトを予測します。

予測された MotionEvent オブジェクトはあくまで推定です。予測イベントを使用すると、認識されるレイテンシを短縮できますが、受信後に予測データを実際の MotionEvent データに置き換える必要があります。

モーション予測ライブラリは、Android 4.4（API レベル 19）以降と、Android 9（API レベル 28）以降を搭載した ChromeOS デバイスで利用できます。

依存関係

モーション予測ライブラリにより、予測の実装が提供されます。このライブラリは、アプリのモジュール build.gradle ファイルに依存関係として追加されています。

dependencies {
    implementation "androidx.input:input-motionprediction:1.0.0-beta01"
}

実装

モーション予測ライブラリには、次のメソッドを定義する MotionEventPredictor インターフェースが含まれています。

• record(): MotionEvent オブジェクトをユーザーのアクションの記録として格納します。
• predict(): 予測される MotionEvent を返します。

MotionEventPredictor インスタンスを宣言する

var motionEventPredictor = MotionEventPredictor.newInstance(view)

MotionEventPredictor motionEventPredictor = MotionEventPredictor.newInstance(surfaceView);

予測子にデータをフィードする

motionEventPredictor.record(motionEvent)

motionEventPredictor.record(motionEvent);

予測

when (motionEvent.action) {
   MotionEvent.ACTION_MOVE -> {
       val predictedMotionEvent = motionEventPredictor?.predict()
       if(predictedMotionEvent != null) {
            // use predicted MotionEvent to inject a new artificial point
       }
   }
}

switch (motionEvent.getAction()) {
   case MotionEvent.ACTION_MOVE: {
       MotionEvent predictedMotionEvent = motionEventPredictor.predict();
       if(predictedMotionEvent != null) {
           // use predicted MotionEvent to inject a new artificial point
       }
   }
   break;
}

モーション予測ですべきこととすべきでないこと

新しい予測ポイントが追加された時点で、予測ポイントを削除する。

最終的なレンダリングに予測ポイントを使用しない。

メモ作成アプリ

ChromeOS では、アプリでのメモ作成アクションを宣言できます。

ChromeOS でアプリをメモ作成アプリとして登録するには、入力の互換性をご覧ください。

Android でアプリをメモ作成アプリとして登録するには、メモ作成アプリを作成するをご覧ください。

Android 14（API レベル 34）では、アプリがロック画面でメモ作成アクティビティを開始できる ACTION_CREATE_NOTE インテントが導入されました。

ML Kit によるデジタルインク認識

ML Kit のデジタルインク認識機能により、アプリは数百もの言語でデジタル サーフェス上の手書き文字を認識できます。スケッチを分類することもできます。

ML Kit には、ML モデルで処理して手書き入力をテキストに変換できる Ink オブジェクトを作成するための Ink.Stroke.Builder クラスが用意されています。

このモデルは、手書き入力の認識に加えて、削除や円などの操作を認識できます。

詳しくは、デジタルインク認識をご覧ください。

参考情報

デベロッパー ガイド

• メモ作成アプリを作成する
• Android で ML Kit を使用してデジタルインクを認識する

Codelab

• Android アプリでのタッチペン サポートの強化