ナチュラル・ユーザー・インターフェイス (NUI) API を利用したデスクトップ向けアプリケーションの開発

この記事は、インテル® デベロッパー・ゾーンに掲載されている「Developing with Desktop Natural User Interface API’s for Developers」の日本語参考訳です。

---

ソースのダウンロード

---

http://software.intel.com/sites/default/files/article/329121/ultrabooktm-ux-demos.zip (1.3MB)

コンピューターとテクノロジーが急激に進化する中、ユーザー体験は主に使用可能な入力デバイスに依存し、制限されてきました。パーソナル・コンピューターの登場以来、キーボードに依存するコマンドライン・インターフェイスに始まり、マウスの登場により生まれたグラフィカル･ユーザー・インターフェイス (GUI)、そしてタッチの登場により生まれた新しいナチュラル・ユーザー・インターフェイス (NUI) へと、ユーザー・インターフェイスは進化してきました。

タッチ/ペンベースの入力は 1990 年代初めに登場しましたが (私が初めてペンベースのコンピューターを使用したのは 1993 年で、Windows* 3.1 マシンでした)、高額で、開発者が選択したターゲットデバイスで一貫性なく提供されてきました。しかし、今日では状況は変わり、スマートフォン、タブレット、そして Ultrabook™ デバイスのようなラップトップ・コンピューターは標準でタッチ入力に対応しています。

現在、開発者と設計者は少なくともこれらの新しい機能を考慮してアプリケーションを開発しなければならず、タッチ優先/タッチのみの環境向けに開発することが望まれています。この記事では、タッチと NUI 対応による設計および開発における意思決定への影響と、既存アプリケーションをタッチ対応環境へ移行する際の考慮事項について説明します。

マルチタッチの考慮事項

---

タッチについて検討する場合、入力デバイスとしてのタッチの制限を理解する必要があります。マウスは、ピクセル単位の選択が可能なデバイスです。ユーザーは、画面上でポインターを移動してピクセルに合わせ、ボタンをクリックして特定のアクションを実行することができます。

タッチは新しい入力方法で、指の大きさやタッチ動作をキャプチャーするスクリーン・テクノロジーの種類など、制限がいくつかあります。タッチ環境では、操作を効率良く行えるように、ターゲットを大きくし、ターゲット間の間隔を広くとる必要があります。画面上の表示領域の制限とデバイス操作を理解し、頻繁に使用されるコントロールをどこに配置すべきかを決定します。

Ultrabook™ では、タッチのほかにキーボードとトラックパッドも利用できるため、ユーザーが通常どのように作業しているのかを考慮する必要があります。タブレットではキーボードを考慮しなくても済むかもしれませんが、Ultrabook™ では、ピンチによるズーム、ストレッチ・ジェスチャーによるコンテンツのサイズ変更、スワイプによるパン、スライドによるコンテンツの移動、タップによるアクションの選択のように、タッチが最適な場合にはタッチを使用します。

ページ上のコントロールの配置は、デバイスで想定される使用パターンを反映していなければなりません。ユーザーがキーボードを使用しなければならないときは、最もよくタッチされる可能性のあるターゲットを画面の上や両端に移動します。これは、コントロールのレイアウトを設計する際に覚えておくと良いでしょう。

タッチ

Windows* ではオペレーティング・システムがタッチイベントを処理し、マウス操作に変換してくれます。これをアプリケーションで利用できます。タップはクリックに、操作はクリックアンドドラッグに、というように変換されます。タッチを考慮したアプリケーションにするには、タッチイベントと操作イベントをサブスクライブして、処理する必要があります。

タッチ向けの設計における課題は、以前のバージョンの Windows* で一般的なリボンやメニューなどのコントロールは、マウスとキーボード向けに設計されており、サイズと配置の面からタッチで利用するのが難しいことです。例えば、メニューでホバーを使用している場合、ユーザーがマウスポインターをコントロールに合わせたときにイベントが発生します。しかし、タッチにはこれに対応するイベントがないため、タッチのみの環境ではメニューが表示されるだけで役に立ちません。

以前のバージョンの Windows* 向けに開発されたアプリケーションではタッチへの対応がさまざまでしたが、タッチの普及に伴い、これからは技術進化に合わせて調整および対応していく必要があります。以下に調整が求められるコントロールの例とタッチ対応環境に適応するアプローチを示します。

ボタン

ボタンはクリックイベントに応答するため、開発者が特に何もしなくてもタッチで動作します。しかし、ホバーがサポートされないことを考慮する必要があります。例えば、マウスオーバー・イベントが発生したらボタンをハイライトするというようなレンダリング効果を使用している場合、タッチでは同様の効果が得られません。

最も重要なことは、ボタンをタッチ可能な大きさにすることです。23×23 ピクセル以上にする必要があります。また、タッチしたときに誤って別のアクションを選択しないように、コントロール間の間隔を広くとります。

メニュー

メニューは DOS では選択肢のテキストリストとして表示され、GUI では当初から使用されてきました。メニューの利点は、必要なコマンドを単純な階層にまとめられることです。しかし、アプリケーションの機能が増えるにつれ、メニューに含まれるコマンドの数も増えて煩雑になります。

従来のタッチに対応していないウィンドウでは、一般にメニュー間の間隔があまりありません。しかし、タッチでは、誤って別のコマンドを選択しないように、この間隔を広くする必要があります。

Windows Presentation Foundation (WPF) のようなマークアップ言語では、メニューの ControlTemplate をオーバーライドして、任意の動作を設定できます。

Toolstrip

このコントロールは、アクションを表すアイコンの追加手段として WinForms で導入されました。フォームに ToolStrip コントロールを追加し、そこにコントロールを加えて使用します。ボタン、コンボボックス、テキストコマンドを含むさまざまなコントロールを設定できます。通常、アイコンのサイズは小さく、コントロール間にはわずかな間隔しかありません。

WinForms と WPF では、ToolStrip の ImageScalingSize で Toolstrip 上のコントロールのデフォルトのサイズを指定して、その後コントロール間の間隔を調整することができます。後述の例で、これらの問題の解決方法を示します。

リボン

リボンは Windows Vista* および Office 2007 で導入されて以来、重宝されてきました。メニューベースの環境から、タブを用いた完全にグラフィカルな環境への移行は、多くのユーザーに大きな変化をもたらしました。リボンの利点は、コントロールを追加する優れた構造を提供し、アイコンが 1 行に制限されないことです。アイコンのサイズは小さなものから大きなものまでさまざまで、アイコン間の間隔は柔軟に設定できます。リボンは、Windows* Explorer、ペイントを含む多数のコア・アプリケーションで使用されています。

ドロップダウン・リストとコンボボックス

ドロップダウン・リストは特に何もしなくてもタッチで動作し、ドロップダウン･リストをタップすると、選択リストが表示されます。メニューと同様に、リストのアイテム間の間隔に注意します。

プラットフォームの選択

---

アプリケーションを開発する際、ソフトウェアのライフサイクルを考慮して使用するテクノロジーを決定する必要があります。Windows* ではいくつかの選択肢があり、それぞれに長所と短所があります。そして、使用するテクノロジーにより、利用可能な言語とフレームワークが決まります。

一般に、3 つのクラスのテクノロジーがあります。マークアップ・ベースは、HTML または XAML でインターフェイスを表現し、使用されるツールに依存しません。フォームベースでは、インターフェイスのデザイン・サーフェイスと機能のコードファイルを提供するツールを使用します。ネイティブ・アプリケーションは、実行時にインターフェイスをビルドします。

通常、どのテクノロジーを使用するかは、利用可能なリソースによって決められます。Visual Basic* 開発者は、WinForms を使用する傾向にあります。スピードとパフォーマンスが重要なアプリケーションの場合は、一般的に C/C++ のようなネイティブコードを使用します (ただし、新しい WinRT の登場によりこれは変わりつつあります)。

WinForms

Visual Basic* 3.0 のリリース以来、Microsoft* のツールはフォームベースのプログラミングの開発パラダイムをサポートしており、開発者はフォームにコントロールを追加し、必要な動作を行うコードを記述します。WinForms と呼ばれるこのアプローチは、ユーザー・インターフェイスのバイナリー表現を利用しますが、迅速な開発を可能にする生産性機能をサポートしています。

WinForms は Windows* 8 でもサポートされています。タッチと Ultrabook™ に関して、アプリケーションをタッチ対応にする上で重要なことは、コントロールを最小サイズ以上にし、コントロール間の間隔を十分にとることです。

「過ぎたるは及ばざるがごとし」という格言のとおり、設計/開発チームがユーザー・インターフェイスを見直し、不要なものを排除し、複雑な設計にならないようにすべきでしょう。

サンプル – WinForms から最適化されたタッチへの LOB の移行

---

ここでは、以前のバージョンの Windows* 向けに開発された一般的な基幹業務 (LOB) アプリケーションを、タッチを考慮した Windows* 8 デスクトップ・アプリケーションに移行します。Northwind サンプル (http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=23654 (英語) からデータベース・スキーマをダウンロード可能) を使用して、写真を含む従業員情報を提供する人事アプリケーションを作成します。このアプリケーションを、.NET 2.0 から現在のバージョンに移行し、その課程でさまざまな問題に対応していきます。

スタート – .NET 2.0 を使用する WinForms アプリケーション

以下は、オリジナル・アプリケーションのスクリーンショットです。このインターフェイスからどのような問題を見つけられますか? 最低でも、アプリケーションをタッチ可能にし、タッチのみの環境で動作するように変更する必要があります。この時点では、次のような問題があります。

• ツールバーのボタンのサイズが小さすぎる
• コントロール間の間隔が狭すぎる
• [2012 bonus] フィールドでスピン・コントロールが使用されている
• 写真にホバーすると写真へのパスが表示される
• 写真の更新がドラッグ・アンド・ドロップで行われている

ステップ 1 – タッチ可能

---

最初のステップでは、アプリケーションがタッチのみの環境で動作するように必要最低限の作業である、一部のコード変更と UI の微調整を行います。アプリケーションが OS のタッチ認識とジェスチャー対応機能を利用できるように、最新の .NET Framework 4.5 にアップグレードします。これにより、ジェスチャーとタッチ操作がマウスイベントに変換されるだけでなく、新しいデータ・アクセス・パターン、LINQ、新しい非同期コード機能、スレッドなど、アプリケーションの最終更新後に追加されたプログラミング機能を利用できるようになります。

次に、タッチ可能な 23×23 ピクセル (6mm) よりも小さいコントロールのプロパティーを調整します。ツールバーに表示されるイメージのサイズを大きくし、ボタン間の間隔を広げます。

Toolstrip のプロパティーで、ImageScalingSize を “23, 23″ に変更し、各メニュー項目の Padding を “2, 2, 2, 2″ にします。

次に、スピン・コントロールをタッチで動作するものに置換します。サードパーティのコントロールを使用することもできますが、少しコーディングするだけで標準のボタンを使用できます。

最後に、イメージをホバーした際に表示されるイメージのパスがタッチでも表示されるようにします。いくつかのアプローチがありますが、どれもマウス・ダウン・イベントにコードを追加します (タッチイベントまたはタップイベントがマウス・ダウン・イベントに変換されます)。最も簡単なアプローチは、イメージ・コントロールに MouseDown イベントハンドラーを追加し、photoTextBox を表示するコードを加えるだけです。

        private void photoPictureBox_MouseDown(object sender, MouseEventArgs e)
        {
            photoPathTextBox.Visible = true;
        }

これでアプリケーションがタッチ可能になりました。Ultrabook™ で実行して、タッチ可能かどうかを確認してください。ツールバー上のアイコンが大きくなり、Award ボタンが緑色になっていることを確認してください。また、イメージをタッチすると、イメージのパスが表示されます。

この時点で、ツールバー上のアイコンが大きくなり、アイコン間の間隔が広くなり、スピン・コントロールがタッチ可能なコントロールに置換されました。まだ画面に表示される情報量について検討する必要がありますが、少なくともタッチ環境でアプリケーションを利用できます。

次のステップでは、画面に表示されるコンテンツを見直し、優先度の低いフィールドを削除して、単純化していきます。次のフェーズの目的は、リボンを追加し、マークアップ・ベースのソリューション (ここでは、XAML を使用する WPF) に移行することです。

タッチ対応

---

次に、アプリケーションを「タッチ対応」にする作業を行います。前述したように、タッチ対応にするには、標準のジェスチャーと基本的なマルチタッチ操作を処理するため、頻繁に使用されるコントロールを 40×40 ピクセル (10mm) 以上にします。

このサンプルでは、リボンを統合します。アプリケーションを WPF に移行し、マークアップ言語機能を利用することで、より簡単にタッチ対応の要件をサポートできます。例えば、スタイルを使用して、特定のコントロールの種類を適切なサイズと間隔に設定することができます。

データベースに接続するためのデータセットを追加し、Employee ページ上にコントロールを配置すると、インターフェイスは次のようになります。

Windows* 8 と WPF 4.5 で、リボンはファースト・クラス・コントロールとして含まれていますが、ツールボックスにツールを追加するには、[アイテムの選択] で関連するリボン項目を追加する必要があります。

マークアップ・ベースのアプリケーション – XAML

.NET 4.0 の登場以来、タッチイベントをマウス動作へ変換するタッチ認識のコントロールとイベントにより、アプリケーションのタッチ対応が簡単になりました。例えば、スクロール付きの ListBox はパン・ジェスチャーを受け取り、処理します。

IsManipulationEnabled プロパティーを True に設定して、コントロールが操作を認識できるようにします。そして、ウィンドウに ManipulationStarted および ManipulationDelta 用のイベントハンドラーを追加します。よりリアルにするには、ManipulationInertiaStarting 用のイベントハンドラーを追加し、それに摩擦と重力のシミュレーションを実行するコードを追加して、慣性効果を有効にします。

例えば、基本的な WPF アプリケーションでは、次のような XAML マークアップを利用します。

この単純な WPF アプリケーションのマークアップには、グリッド内にイメージが配置されたグリッド・コントロールが含まれています。アプリケーションをレンダリングすると、次のようになります (myImage.png は Intel ロゴで、アプリケーション・ソース・コードのルートに配置されていると仮定します)。

ウィンドウの宣言で XAML を使用して 3 つの操作および慣性イベントを登録します。ManipulationStarting で影響を受けるコントロールを指定し、ManipulationDelta はジェスチャー操作中に発生し、ManipulationInertiaStarting にユーザーがジェスチャーを終了したときの減衰性を含む、摩擦と重力のシミュレーションを実行するロジックを追加します。次に基本的な実装方法を示します。

    private void Window_ManipulationStarting_1(object sender, ManipulationStartingEventArgs e)
    {
        e.ManipulationContainer = this;
        e.Handled = true;
    }

    private void Window_ManipulationDelta_1(object sender, ManipulationDeltaEventArgs e)
    {
        Image imgToMove = e.OriginalSource as Image;
        Matrix myMatrix = ((MatrixTransform)imgToMove.RenderTransform).Matrix;

        myMatrix.RotateAt(e.DeltaManipulation.Rotation, e.ManipulationOrigin.X, 
  e.ManipulationOrigin.Y);
        myMatrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.Y, 
 e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
        myMatrix.Translate(e.DeltaManipulation.Translation.X, 
 e.DeltaManipulation.Translation.Y);

        imgToMove.RenderTransform = new MatrixTransform(myMatrix);
        Rect myRec = new Rect(((FrameworkElement)e.ManipulationContainer).RenderSize);
        Rect myBounds = imgToMove.RenderTransform.TransformBounds ( 
                            new Rect(imgToMove.RenderSize));
        if (e.IsInertial && !myRec.Contains(myBounds))
            e.Complete();
        e.Handled = true;
    }

    private void Window_ManipulationInertiaStarting_1(object sender, 
ManipulationInertiaStartingEventArgs e)
    {
        e.TranslationBehavior.DesiredDeceleration = 1.0 * 96.0 / (1000.0 * 1000.0);
        e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0);
        e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0);

        e.Handled = true;
    }

これで、タッチしてドラッグ、ピンチしてズームのようなタッチ・ジェスチャーにより、画面上のイメージを操作できるようになります。サンプルコードは、http://bit.ly/bqtwpfst (英語) からダウンロードできます。

ネイティブ・アプリケーション

ソフトウェアのネイティブ・アプリケーション・クラスでは、一般に C/C++ のような言語を使用し、低レベルで発生するイベントを考慮したコードを記述します。タッチを考慮したアプリケーションにするには、Windows* の Touch メッセージを受け取れるようにアプリケーションを登録し、そのメッセージを処理するコードを追加します。デフォルトでは、アプリケーションは WM_GESTURE メッセージを受け取りますが、RegisterTouchWindow を呼び出すと、低レベルの入力を処理することができます。

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
	HWND hWnd;

	...
	RegisterTouchWindow(hWnd, 0);

       ...
}

アプリケーションは直接 WM_TOUCH メッセージを処理しますが、マウスと異なり、タッチは WM_TOUCH メッセージを 1 つだけ生成します。WM_TOUCH_DOWN、WM_TOUCH_MOVE、WM_TOUCH_UP は利用できません。ロー・タッチイベントを組み合わせてマウスイベントをシミュレーションするため、マネージドコードとは異なります。WM_TOUCH メッセージは、WndProc メソッドで処理します。ここで、タッチポイントの状態を取得するため、GetTouchInputInfo を呼び出すことができます。この呼び出しは、各指のタッチポイントを表す TOUCHINPUT 構造体配列を返します。

ジェスチャーも同様に処理されます。WM_GESTURENOTIFY メッセージを処理して、プログラムで有効にするジェスチャーをオペレーティング・システムに知らせる必要があります。デフォルトでは、回転と単純な 1 本指によるパン以外のジェスチャーが有効です。サポートするジェスチャーを登録した後に WM_GESTURE メッセージを処理します。

MSDN* のサンプル (http://msdn.microsoft.com/ja-jp/library/dd562174(VS.85).aspx) では、タッチおよびジェスチャーを登録する方法とタッチ環境の動作に慣性を追加する方法を紹介しています。

まとめ

---

タッチ認識のアプリケーション開発は単純なタスクであり、そのために開発者が習得しなければならないことは多くはありません。最低でも、アプリケーションを新しいフレームワークにアップグレードし (可能な場合)、コントロールのサイズと間隔を調整し、タッチイベントを登録および処理して Ultrabook™ の新しい機能を使用できるようにします。

ここで紹介したWindows* 8 デスクトップ・アプリケーションの UX 実装ソースコードは次のリンクからダウンロードできます: http://software.intel.com/sites/default/files/article/329121/ultrabooktm-ux-demos.zip (1.3MB)

参考文献 (英語)

---

• Blend + SketchFlow Preview for Microsoft Visual Studio 2012 (英語): http://msdn.microsoft.com/en-us/expression/jj154135.aspx
• 初めてのタッチ・アプリケーションの作成: http://msdn.microsoft.com/ja-jp/library/ee649090.aspx
• Windows* 8 デスクトップ・デベロッパー・センター: http://msdn.microsoft.com/ja-JP/windows/desktop/
• Building Windows* 8 – タッチ・ハードウェアと Windows* 8 (英語): https://blogs.msdn.microsoft.com/b8/2012/03/28/touch-hardware-and-windows-8/
• Manish Pansiniya – Blend & WPF の概要 (英語): http://www.codeproject.com/Articles/20922/Quick-Overview-of-Expression-Blend-WPF

コンパイラーの最適化に関する詳細は、最適化に関する注意事項を参照してください。