タッチ キーボードのガイドライン

Applies to Windows and Windows Phone

タッチ キーボードを使うと、タッチをサポートしていて組み込みまたは外付けのキーボードを持たないデバイス上の Windows ストア アプリでもテキストを入力できます。 タッチ キーボードは、編集できる入力フィールドをユーザーがタップすると表示され、入力フィールドからフォーカスが移動すると消えます。タッチ キーボードはテキスト入力のみに使われ、Alt キーやファンクション キーなどのコマンド キーは用意されていません。

タッチ キーボードの画像

この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください:  ユーザー操作: タッチ入力、その他

推奨と非推奨

  • タッチ キーボードは、テキスト入力にのみ表示します。 タッチ キーボードは、ハードウェア キーボードにあるようなアクセラレータやコマンド キー (Alt キー、ファンクション キー、Windows ロゴ キーなど) の多くを備えていないことに注意してください。
  • タッチ キーボードからの入力をコマンドやショートカットに定義し直さないでください。
  • ユーザーがタッチ キーボードを使ってアプリを操作しないようにしてください。

タッチ キーボードとカスタム UI

これらの推奨事項は、アプリでカスタム コントロールを使う場合にのみ関係します。Windows に用意されているテキスト入力コントロールは、既定で、タッチ キーボードを正しく操作します。C#/VB/C++ と XAML を使ってカスタム UI を作成する場合は、AutomationPeer classを使って UI オートメーションのコントロールにアクセスしてください。入力: タッチ キーボードのサンプルに関するページでは、XAML を使ったアプリのカスタム コントロールを利用してタッチ キーボードを起動する方法について説明します。

JavaScript と HTML を使っている場合、UI オートメーションにアクセスするには、カスタム コントロールの Accessible Rich Internet Applications (ARIA) プロパティを設定する必要があります。詳しくは、「UI オートメーションへの ARIA ロールのマッピング」をご覧ください。

  • フォームに対する操作が行われている間はキーボードを表示します。

    テキスト入力のコンテキストでフォーカスがテキスト入力フィールドから移動したときにキーボードの表示を持続させるには、カスタム コントロールに適切な UI オートメーションの ControlType を使います。たとえば、テキスト入力シナリオの半ばでメニューを開くときに、キーボードを表示したままにするには、このメニューに ControlType Menu が必要です。C#/VB/C++ と XAML を使ったアプリについては、「AutomationControlType enumeration」をご覧ください。JavaScript と HTML については、ARIA ロールを適切なコントロール型に設定します。

  • 入力しているフィールドをユーザーが常に見られるようにします。

    タッチ キーボードを表示すると画面の半分が見えなくなります。Windows ストア アプリでは、タッチ キーボードが表示されたときに、フォーカスのある入力フィールドをビュー内にスクロールすることで UI を管理する既定のエクスペリエンスが用意されています。UI をカスタマイズする場合は、InputPane オブジェクトで公開される Showing イベントと Hiding イベントを処理して、キーボードの表示に対するアプリの反応をカスタマイズします。

  • UI オートメーション プロパティを操作してタッチ キーボードを制御しない。UI オートメーション プロパティの正確さに依存する他のアクセシビリティ ツールがあります。

  • テキスト入力できるカスタム コントロールの UI オートメーション プロパティを実装します。別のコントロールにフォーカスが移動したときに、コンテキストに応じてキーボードの表示を持続させるには、カスタム コントロールに次のいずれかのプロパティが必要です。

    • ボタン
    • チェック ボックス
    • コンボ ボックス
    • ラジオ ボタン
    • スクロール バー
    • ツリー項目
    • メニュー
    • メニュー項目

    C#/VB/C++ と XAML を使ったアプリについては、「AutomationControlType enumeration」をご覧ください。JavaScript と HTML については、ARIA ロールを適切なコントロール型に設定します。

その他の使い方のガイダンス

Showing イベントと Hiding イベントの処理

タッチ キーボードの showinghiding イベントのイベント ハンドラーをアタッチする例を次に示します。



<SCRIPT type=”text/javascript”>
    Windows.UI.Immersive.InputPane.getForCurrentView().addEventListener("showing",           onInputPaneShowing);
    Windows.UI.Immersive.InputPane.getForCurrentView().addEventListener("hiding", onInputPaneHiding);

// Handle the showing event.
function onInputPaneShowing(e)
{
    var occludedRect = e.occludedRect;

    // For this hypothetical application, the developer decided that 400 pixels is
    // the minimum height that will work for the current layout. When the
    // app gets the InputPaneShowing message, the pane is beginning to animate in.

    if (occludedRect.Top < 400)
    {
        // In this scenario, the developer decides to remove some elements (perhaps
        // a fixed navbar) and dim the screen to give focus to the text element.
        var elementsToRemove = document.getElementsByName("extraneousElements");

        // The app developer is not using default framework animation.
        _StartElementRemovalAnimations(elementsToRemove);
        _StartScreenDimAnimation();
    } 

    // This developer doesn't want the framework’s focused element visibility
    // code/animation to override the custom logic.
    e.ensuredFocusedElementInView = true;
}

// Handle the hiding event.
function onInputPaneHiding(e)
{
    // In this case, the Input Pane is dismissing. The developer can use 
    // this message to start animations.
    if (_ExtraElementsWereRemoved())
    {
        _StartElementAdditionAnimations();
    }

    // Don't use framework scroll- or visibility-related 
    // animations that might conflict with the app's logic.
    e.ensuredFocusedElementInView = true; 
}

関連トピック

開発者向け (HTML)
キーボード操作への反応
タッチ キーボードの概要
input type=text element
textarea element
Showing
Hiding
InputPane
開発者向け (XAML)
キーボード操作への反応
タッチ キーボードの概要
TextBox class
TextBlock class
Showing
Hiding
InputPane
サンプル
入力: タッチ キーボードのテキスト入力のサンプルに関するページ
スクリーン キーボード (OSK) への反応のサンプルに関するページ
入力: タッチ キーボードのサンプルに関するページ (C#/C++ のみ)

 

 

表示:
© 2014 Microsoft