そこで打開策として注目しているのが、グレープシティの新製品である「MultiTouch for Windows Forms 1.0J」です。この製品はすでに出来上がっているWindowsフォームアプリに対し、最小限のソースコード変更によりタッチに適した操作性を提供する製品です。どれくらい最小限なのか、そしてどこまで実用的なタッチ対応ができるのか確認してみたいと思います。
入力欄をタッチしやすく
(※サンプルファイルの「CZ1308GcMagnifier」に対応)
スマートフォンなどでは、入力欄の文字列を選択するときに指で文字列をなぞって範囲指定します。しかしながら、この操作は指で文字が隠れてしまうという問題があり、それをどう解決するかが重要です。
簡単なデザインですが、図1のようなWindowsフォームの入力欄で文字列を選択するときも同じような問題が発生します。
そこで「MultiTouch for Windows Forms 1.0J」を使って、文字列選択をしやすい形に変更します。
拡大鏡の追加
ツールボックスにMultiTouchを登録したら、「GcMagnifier」コンポーネントをWindowsフォームにドラッグ&ドロップして配置します。GcMagnifierコンポーネントは表示スタイルを持たないので、コンポーネントトレイにアイコンがおかれます。
EnableMagnifierプロパティの変更
GcMagnifierコンポーネントをフォームに追加すると、フォーム上のコントロールが拡張され、 各コントロールのプロパティウィンドウにEnableMagnifierプロパティが追加されます。 。拡大鏡を有効にするには、入力欄のEnableMagnifierを「True」に変更します。
この設定を行ったコントロールだけに、拡大鏡が適用されます。
拡大鏡の実行結果確認
拡大鏡を追加したWindowsフォームアプリをビルドし、EXEファイルに対するショートカットをタスクバーにピンしておいてから、Windowsストアアプリのシミュレータを起動します。
拡大鏡を追加したWindowsフォームアプリを実行して表示しても、表面上は変化ありません。試しにシミュレータを起動した直後のマウスモードで入力欄をクリックしても、従来どおりの動きになります。この点も重要で、タッチ操作ができないPCであれば従来と同じ操作性が維持されます。
次に、シミュレータの右にあるタッチモード切替ボタンをクリックし、タッチモードに切り替えます。入力欄でホールド(指を触れたまましばらく保つ)すると、丸い拡大鏡が表示されて指の位置辺りの表示を拡大します。
位置的にも指先の位置に表示されるので、指で文字列が隠れることもありません。これであれば、文字列の選択もやりやすいのではないでしょうか。
すべてのコントロールに拡大鏡を適用する方法
Windowsフォーム上のコントロールのEnableMagnifierプロパティにTrueを設定する方法は、ホールドにより拡大鏡を表示したいコントロールが少ないときには良いのですが、多数のコントロールを対象にしたいときには不便です。
そこでお勧めしたいのが、コントロールのEnableMagnifierプロパティを設定するのではなく、WindowsフォームのEnableMagnifierプロパティをTrueにする方法です。
サンプルでは左下のチェックボックスをチェックすると、フォームのEnableMagnifierプロパティにTrueを設定していますので、チェックの有無によってWindowsフォームに対して指をホールドしたときの違いを確認してみましょう。
チェックをつけなかったときは、個別設定している入力欄以外をホールドしても拡大鏡は表示されません。チェック後であれば、Windowsフォームのどこをホールドしても拡大鏡が表示されるようになります。
まずはWindowsフォームのプロパティで設定をし、試験運用します。そこで個別に設定した方が良いところを見極め、コントロール個別にプロパティ設定するように調整するという手順を踏むと、効率が良さそうです。
拡大鏡を適用するときの考慮点
GcMagnifierコンポーネントの有効範囲は、1フォームごとになります。よって、拡大鏡が必要なWindowsフォームを事前に選定しておけば、そこに対してGcMagnifierコンポーネントを貼り付けてプロパティを変更するという作業を、機械的に行うことができるでしょう。
また、あくまでもWindowsフォームに対してになるので、ダイアログボックスには適用されない点も注意してください。色の選定ダイアログを呼び出してホールドしたときの動きは、次のようになります。
このように、ダイアログでは拡大鏡が出ないということを把握しておく必要があります。業務アプリで使いそうなダイアログとしては、OpenFileDialogやSaveFileDialogが考えられますし、そのダイアログでファイル名の欄があるので、拡大鏡が使えないと不便な可能性があります。その点は注意が必要でしょう。
タッチしやすい大きさにする
(※サンプルファイルの「CZ1308Zoom」に対応)
GcMagnifierコンポーネントでは、マウス&キーボード前提の細々した画面レイアウトに対して、指先に拡大鏡を表示してタッチしやすいインターフェースへの変更を簡単に行えました。
入力欄にはこの方法でもいいのですが、チェックボックスやラジオボタン、コマンドボタンをタップしようと思うと、タップするターゲットが全体的に小さくて押しづらいときもあります。そのようなときに便利なのが、MultiTouch for WindowsのZoom系のコンポーネント(GcZoom、GcApplicationZoom)です。
GcZoomコンポーネントはWindowsフォーム単位、GcApplicationZoomコンポーネントはWindowsフォームアプリケーション全体にスマートフォンアプリなどにある2本指でタップしてから指の間を広げると画面が拡大されるズーム機能を提供します。
GcApplicationZoomの追加
GcApplicationZoomコンポーネントを使うには、ツールボックスにあるアイコンをWindowsフォームにドラッグ&ドロップして配置します。GcApplicationZoomコンポーネントも表示スタイルを持たないので、コンポーネントトレイにアイコンがおかれます。
GcApplicationZoom実行結果の確認
GcApplicationZoomを追加したWindowsフォームアプリをビルドし、EXEファイルに対するショートカットをタスクバーにピンしておいてからWindowsストアアプリのシミュレータを起動します。
Windowsフォームに2本指で触れて指の間隔を広げると、Windwosフォームのサイズが変わることなく、中のコントロールが拡大されます。また、指をパンすれば表示領域を移動できます。
GcApplicationZoomを適用するときの考慮点
GcApplicationZoomコンポーネントの対象はWindowsフォームのみなので、ダイアログボックスには適用されません。例えば、色の選定ダイアログを呼び出してホールドしたときの動きは次のようになります。
リサイズで大きくする
(※サンプルファイルの「CZ1308Resize」に対応)
CZ1308Zoomサンプルでは、Windowsフォームの大きさを変えずに中だけズームしてスクロールしやすくして、スマホ感覚でWindowsフォームのコントロールの大きさをタッチしやすい大きさに変更しました。この手法は全画面表示が多いWindowsフォームによる業務アプリに適した方法です。
しかし全画面表示ではなく、Windowsフォームの大きさを大きくできる余地が残っている時には、Windowsフォームの大きさを変えずに中を拡大するのは少々もったいないような気がします。そのようなときは、GcApplicationZoomやGcZoomのInnerPanelLayoutModeプロパティの値をMiddleCenterにすることで、Windowsフォームの大きさに応じて中のコントロールが自動的に拡大縮小できるようになります。
もちろん自動拡大した状態でさらに2本指でタッチしてから指を広げることで、中のコントロールだけ拡大することも可能です。このアプローチは実際に使ってみると非常に快適で、タッチパネル対応に伴って高解像度の端末に変わったときにも重宝します。
まとめ
MultiTouchを使って、いかに少ない手数でタッチ対応にするかを確認してみました。多少の考慮は必要ですが、基本的にはかなり手間いらずで効果的な対応がとれるという印象を持ちました。
今回取り上げたコンポーネント以外にも、MultiTouchにはGcZoomPanelコンポーネント、GcMultiScaleImageコントロール、GcTouchEventProviderコンポーネントなどがあります。これらを使うことでさらに細かな制御ができますし、よりタッチで使いやすいWindowsフォームアプリに作り替えることも可能です。もし今回紹介した方法を使うことで、タッチ対応に許された工数に余裕ができたら、GcTouchEventProviderコンポーネントを使った拡張も検討してみてください。このコンポーネントを使うことでタップ、ダブルタップ、ホールドなどをイベントとして取得でき、タッチ専用の処理への分岐が可能になります。これまで以上にきめ細やかなタッチ用ロジックを呼び出せるようになるので、ぜひお試しください。