SHOEISHA iD

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

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

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

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

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

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

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

 そこで打開策として注目しているのが、グレープシティの新製品である「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 拡大表示

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

次のページ
タッチしやすい大きさにする

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(MultiTouch)連載記事一覧
この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング