SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(MultiTouch)

「MultiTouch for Windows Forms 1.0J」で学ぶ、タッチ対応Windowsフォームアプリの作り方

  • このエントリーをはてなブックマークに追加

 タブレットタイプやタッチ対応PCのWindows 8であれば、デスクトップモードでもタッチ操作が可能です。しかし、Windowsフォームで作成された既存アプリをタッチ操作で使おうとすると、どうしても使いづらさが目立ってしまいます。従来通りマウスとキーボードでアプリを使えば良いのですが、タブレット端末などでWindowsフォームアプリを使いたい場合は、タッチ対応を考えなければなりません。もちろん、UIを再設計してタッチ操作に適したものに作り替えるのが最良ですが、少ない工数でタッチ操作のストレスを軽減できるのであれば、「作り替えられないのでタッチ対応しない」「タッチ対応が終わるまでは使いづらい」という状況を打破できるのではないでしょうか。

  • このエントリーをはてなブックマークに追加

 そこで打開策として注目しているのが、グレープシティの新製品である「MultiTouch for Windows Forms 1.0J」です。この製品はすでに出来上がっているWindowsフォームアプリに対し、最小限のソースコード変更によりタッチに適した操作性を提供する製品です。どれくらい最小限なのか、そしてどこまで実用的なタッチ対応ができるのか確認してみたいと思います。

入力欄をタッチしやすく

(※サンプルファイルの「CZ1308GcMagnifier」に対応)

 スマートフォンなどでは、入力欄の文字列を選択するときに指で文字列をなぞって範囲指定します。しかしながら、この操作は指で文字が隠れてしまうという問題があり、それをどう解決するかが重要です。

図1 画面構成
図1 画面構成

 簡単なデザインですが、図1のようなWindowsフォームの入力欄で文字列を選択するときも同じような問題が発生します。

 そこで「MultiTouch for Windows Forms 1.0J」を使って、文字列選択をしやすい形に変更します。

拡大鏡の追加

 ツールボックスにMultiTouchを登録したら、「GcMagnifier」コンポーネントをWindowsフォームにドラッグ&ドロップして配置します。GcMagnifierコンポーネントは表示スタイルを持たないので、コンポーネントトレイにアイコンがおかれます。

図2 GcMagnifierコンポーネントの追加
図2 GcMagnifierコンポーネントの追加

EnableMagnifierプロパティの変更

 GcMagnifierコンポーネントをフォームに追加すると、フォーム上のコントロールが拡張され、 各コントロールのプロパティウィンドウにEnableMagnifierプロパティが追加されます。 。拡大鏡を有効にするには、入力欄のEnableMagnifierを「True」に変更します。

図3 プロパティの変更
図3 プロパティの変更

 この設定を行ったコントロールだけに、拡大鏡が適用されます。

拡大鏡の実行結果確認

 拡大鏡を追加したWindowsフォームアプリをビルドし、EXEファイルに対するショートカットをタスクバーにピンしておいてから、Windowsストアアプリのシミュレータを起動します。

図4 シミュレータによるWindowsフォームアプリの実行
図4 シミュレータによるWindowsフォームアプリの実行

 拡大鏡を追加したWindowsフォームアプリを実行して表示しても、表面上は変化ありません。試しにシミュレータを起動した直後のマウスモードで入力欄をクリックしても、従来どおりの動きになります。この点も重要で、タッチ操作ができないPCであれば従来と同じ操作性が維持されます。

 次に、シミュレータの右にあるタッチモード切替ボタンをクリックし、タッチモードに切り替えます。入力欄でホールド(指を触れたまましばらく保つ)すると、丸い拡大鏡が表示されて指の位置辺りの表示を拡大します。

図5 拡大表示
図5 拡大表示

 位置的にも指先の位置に表示されるので、指で文字列が隠れることもありません。これであれば、文字列の選択もやりやすいのではないでしょうか。

すべてのコントロールに拡大鏡を適用する方法

 Windowsフォーム上のコントロールのEnableMagnifierプロパティにTrueを設定する方法は、ホールドにより拡大鏡を表示したいコントロールが少ないときには良いのですが、多数のコントロールを対象にしたいときには不便です。

 そこでお勧めしたいのが、コントロールのEnableMagnifierプロパティを設定するのではなく、WindowsフォームのEnableMagnifierプロパティをTrueにする方法です。

 サンプルでは左下のチェックボックスをチェックすると、フォームのEnableMagnifierプロパティにTrueを設定していますので、チェックの有無によってWindowsフォームに対して指をホールドしたときの違いを確認してみましょう。

図6 Windowsフォームのプロパティに設定
図6 Windowsフォームのプロパティに設定

 チェックをつけなかったときは、個別設定している入力欄以外をホールドしても拡大鏡は表示されません。チェック後であれば、Windowsフォームのどこをホールドしても拡大鏡が表示されるようになります。

 まずはWindowsフォームのプロパティで設定をし、試験運用します。そこで個別に設定した方が良いところを見極め、コントロール個別にプロパティ設定するように調整するという手順を踏むと、効率が良さそうです。

拡大鏡を適用するときの考慮点

 GcMagnifierコンポーネントの有効範囲は、1フォームごとになります。よって、拡大鏡が必要なWindowsフォームを事前に選定しておけば、そこに対してGcMagnifierコンポーネントを貼り付けてプロパティを変更するという作業を、機械的に行うことができるでしょう。

 また、あくまでもWindowsフォームに対してになるので、ダイアログボックスには適用されない点も注意してください。色の選定ダイアログを呼び出してホールドしたときの動きは、次のようになります。

図7 ダイアログ表示
図7 ダイアログ表示

 このように、ダイアログでは拡大鏡が出ないということを把握しておく必要があります。業務アプリで使いそうなダイアログとしては、OpenFileDialogやSaveFileDialogが考えられますし、そのダイアログでファイル名の欄があるので、拡大鏡が使えないと不便な可能性があります。その点は注意が必要でしょう。

タッチしやすい大きさにする

(※サンプルファイルの「CZ1308Zoom」に対応)

 GcMagnifierコンポーネントでは、マウス&キーボード前提の細々した画面レイアウトに対して、指先に拡大鏡を表示してタッチしやすいインターフェースへの変更を簡単に行えました。

 入力欄にはこの方法でもいいのですが、チェックボックスやラジオボタン、コマンドボタンをタップしようと思うと、タップするターゲットが全体的に小さくて押しづらいときもあります。そのようなときに便利なのが、MultiTouch for WindowsのZoom系のコンポーネント(GcZoom、GcApplicationZoom)です。

 GcZoomコンポーネントはWindowsフォーム単位、GcApplicationZoomコンポーネントはWindowsフォームアプリケーション全体にスマートフォンアプリなどにある2本指でタップしてから指の間を広げると画面が拡大されるズーム機能を提供します。

GcApplicationZoomの追加

 GcApplicationZoomコンポーネントを使うには、ツールボックスにあるアイコンをWindowsフォームにドラッグ&ドロップして配置します。GcApplicationZoomコンポーネントも表示スタイルを持たないので、コンポーネントトレイにアイコンがおかれます。

図8 GcApplicationZoomの追加
図8 GcApplicationZoomの追加

GcApplicationZoom実行結果の確認

 GcApplicationZoomを追加したWindowsフォームアプリをビルドし、EXEファイルに対するショートカットをタスクバーにピンしておいてからWindowsストアアプリのシミュレータを起動します。

図9 シミュレータによるWindowsフォームアプリの実行
図9 シミュレータによるWindowsフォームアプリの実行

 Windowsフォームに2本指で触れて指の間隔を広げると、Windwosフォームのサイズが変わることなく、中のコントロールが拡大されます。また、指をパンすれば表示領域を移動できます。

GcApplicationZoomを適用するときの考慮点

 GcApplicationZoomコンポーネントの対象はWindowsフォームのみなので、ダイアログボックスには適用されません。例えば、色の選定ダイアログを呼び出してホールドしたときの動きは次のようになります。

図10 ダイアログ表示
図10 ダイアログ表示

リサイズで大きくする

(※サンプルファイルの「CZ1308Resize」に対応)

 CZ1308Zoomサンプルでは、Windowsフォームの大きさを変えずに中だけズームしてスクロールしやすくして、スマホ感覚でWindowsフォームのコントロールの大きさをタッチしやすい大きさに変更しました。この手法は全画面表示が多いWindowsフォームによる業務アプリに適した方法です。

 しかし全画面表示ではなく、Windowsフォームの大きさを大きくできる余地が残っている時には、Windowsフォームの大きさを変えずに中を拡大するのは少々もったいないような気がします。そのようなときは、GcApplicationZoomやGcZoomのInnerPanelLayoutModeプロパティの値をMiddleCenterにすることで、Windowsフォームの大きさに応じて中のコントロールが自動的に拡大縮小できるようになります。

図11 InnerPanelLayoutModeプロパティを設定して実行
図11 InnerPanelLayoutModeプロパティを設定して実行

 もちろん自動拡大した状態でさらに2本指でタッチしてから指を広げることで、中のコントロールだけ拡大することも可能です。このアプローチは実際に使ってみると非常に快適で、タッチパネル対応に伴って高解像度の端末に変わったときにも重宝します。

まとめ

 MultiTouchを使って、いかに少ない手数でタッチ対応にするかを確認してみました。多少の考慮は必要ですが、基本的にはかなり手間いらずで効果的な対応がとれるという印象を持ちました。

 今回取り上げたコンポーネント以外にも、MultiTouchにはGcZoomPanelコンポーネント、GcMultiScaleImageコントロール、GcTouchEventProviderコンポーネントなどがあります。これらを使うことでさらに細かな制御ができますし、よりタッチで使いやすいWindowsフォームアプリに作り替えることも可能です。もし今回紹介した方法を使うことで、タッチ対応に許された工数に余裕ができたら、GcTouchEventProviderコンポーネントを使った拡張も検討してみてください。このコンポーネントを使うことでタップ、ダブルタップ、ホールドなどをイベントとして取得でき、タッチ専用の処理への分岐が可能になります。これまで以上にきめ細やかなタッチ用ロジックを呼び出せるようになるので、ぜひお試しください。

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7337 2016/03/29 17:35

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング