はじめてのマルチタッチ・アプリケーション

最近、スレートPCという、タッチパネルを搭載したPCが発売されています。特徴は、キーボードやマウスが無いかわりに、マルチ・タッチ入力が可能になっています。このようなマルチタッチ・アプリケーションの簡単な作り方について説明します。

マルチタッチ・アプリケーションの概要

次のビデオは、マルチタッチ・アプリケーションの例として、WEBページの画像を移動・拡大・縮小・ローテーションをマルチタッチで行うアプリケーションを作ってみます。使用するソフトウェアは、Expression Blend 4と、Visual Studio 2010 です。画像としては、首都高速道路株式会社の http://www.shutoko.jp/map/realtime_tokyo.html のような道路状況を表示しています。

マルチタッチ・アプリケーション.wmv　　８０１ＭＢ

全体の流れは次の通りです。

プロジェクトの作成
移動、ズーム、回転をサポートする画像の追加
メニューの追加
ステータスバーの追加
メニュー選択時の動作を実装

１．プロジェクトの作成

プロジェクトの作成

Expression Blend 4 で、新規プロジェクトを選択します。
適当な名前で、WPFアプリケーションを作成します。

２．移動、ズーム、回転可能な画像の作成手順

移動、ズーム、回転可能な画像を追加します。

Image コントロールをドラッグ＆ドロップします。
Image のソースプロパティに、表示する画像のURLをセットします。
Imageにアセットより、TranslateZoomRotateBehavior を追加します。

生成されるコートは、次の通りです。

３．メニューの追加

次のようなメニューを追加します。

Expresison Blend より、メニューをドラッグ＆ドロップします。
メニューのフォントを、タッチパネルに合わせて大きめにします。
メニューアイテムを追加します。CommandParameterには、表示する画像をセットしておきます。

４．ステータスバーの追加

いつ、どのような画像を表示したのか、情報を表示するためのステータスバーを追加します。

Expresison Blend より、StatusBar をドラッグ＆ドロップします。
StatusBar のフォントは、タッチパネルに合わせて十分大きな大きさに設定します。
場所を表示するためのStatusBarItemと、時間を表示するための StatusBarItem の２つ追加します。

５．メニューの実装

メニューが選択された場合の動作を実装します。

メニューが選択された場合、CommandParameterより、表示すべきURLを取得する。
画像に表示すべきURLをセットする。
表示位置をリセットする。
CompleteManipulationを呼び、イナーシャをリセットする。
ステータス（場所、時間）を表示する。

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Text.RegularExpressions;
using System.Net;

namespace WpfApplication1
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();

// オブジェクト作成に必要なコードをこの点の下に挿入します。
}

string currentUrl = "http://www.jartic.or.jp/traffic/highway/kousoku/rhp0001.gif";

Regex regExTime = new Regex(@"[0-9]+月[0-9]+日[0-9]+時[0-9]+分現在");
Regex regExPlace = new Regex(@"(?<=>)[\w・]+(?=[\s]+この情報は)");

private void MenuItem_Click(object sender, RoutedEventArgs e)
{
currentUrl = (string)((MenuItem)sender).CommandParameter;
this.image1.Source = new BitmapImage(new Uri(currentUrl));
this.image1.RenderTransform = new ScaleTransform(1d, 1d);
Manipulation.CompleteManipulation(this.image1);

ShowStatus();
}

private void ShowStatus()
{
string htmlUrl = currentUrl.Replace("gif", "html");
WebClient wc = new WebClient();
string webString = wc.DownloadString(htmlUrl);

Match mc = regExPlace.Match(webString);
if (mc.Success)
this.statusBar1.Items[0] = mc.Value;

mc = regExTime.Match(webString);
if (mc.Success)
this.statusBar1.Items[1] = mc.Value;
}

private void MenuItem_Refresh(object sender, RoutedEventArgs e)
{
this.image1.Source = new BitmapImage(new Uri(currentUrl));
}

private void Window_Loaded(object sender, RoutedEventArgs e)
{
this.image1.Source = new BitmapImage(new Uri(currentUrl));
this.image1.RenderTransform = new ScaleTransform(1d, 1d);

ShowStatus();
}
}
}

６．ダウンロード

shutokou.zip 114KB

デモ用です。

７．まとめ

以上のように、非常に簡単にマルチタッチ・アプリケーションを実装することができます。ぜひ、試してみてはいかがでしょうか。

ソースファイル一式は、こちらに置いておきます。

注意：　この例では、WEBページの画像に依存していますので、当然ホームページが変更されてしまうと、動作しなくなってしまいますのでお勧めできません。一つの例として、参考にしていただければ幸いです。

C# Programming