C# Programming

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

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

 

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

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

マルチタッチ・アプリケーション.wmv  801MB

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

  1. プロジェクトの作成

  2. 移動、ズーム、回転をサポートする画像の追加

  3. メニューの追加

  4. ステータスバーの追加

  5. メニュー選択時の動作を実装

 

Image1.プロジェクトの作成

プロジェクトの作成

  1. Expression Blend 4 で、新規プロジェクトを選択します。

  2. 適当な名前で、WPFアプリケーションを作成します。

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

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

  1. Image コントロールをドラッグ&ドロップします。

  2. Image のソースプロパティに、表示する画像のURLをセットします。

  3. Imageにアセットより、TranslateZoomRotateBehavior を追加します。

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

<Image Source="http://www.jartic.or.jp/traffic/highway/kousoku/rhp0001.gif" HorizontalAlignment="Left" x:Name="image1" Stretch="UniformToFill" VerticalAlignment="Top" >
<i:Interaction.Behaviors>
<ei:TranslateZoomRotateBehavior />
</i:Interaction.Behaviors>
</Image>

Web画面3.メニューの追加

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

  1. Expresison Blend より、メニューをドラッグ&ドロップします。

  2. メニューのフォントを、タッチパネルに合わせて大きめにします。

  3. メニューアイテムを追加します。CommandParameterには、表示する画像をセットしておきます。

 <Menu FontSize="32">
<MenuItem Header="メニュー">
<MenuItem Header="更新" Click="MenuItem_Refresh"/>
</MenuItem>
<MenuItem Header="高速道路">
<MenuItem Header="首都高速" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/highway/kousoku/rhp0001.gif"/>
<MenuItem Header="東京・埼玉・神奈川・千葉" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/highway/kousoku/rhp0006.gif"/>
</MenuItem>
<MenuItem Header="一般道">
<MenuItem Header="東京都">
<MenuItem Header="西部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/tokyo/rsp1302.gif" />
<MenuItem Header="23区" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/tokyo/rsp1301.gif"/>
<MenuItem Header="都心部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/tokyo/rsp1303.gif"/>
</MenuItem>
<MenuItem Header="神奈川県">
<MenuItem Header="西部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/kanagawa/rsp1403.gif"/>
<MenuItem Header="横浜・川崎" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/kanagawa/rsp1401.gif"/>
<MenuItem Header="湘南・三浦" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/kanagawa/rsp1402.gif"/>
</MenuItem>
<MenuItem Header="千葉県">
<MenuItem Header="西部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/chiba/rsp1202.gif"/>
<MenuItem Header="北東部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/chiba/rsp1203.gif"/>
<MenuItem Header="南部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/chiba/rsp1204.gif"/>
</MenuItem>
<MenuItem Header="埼玉県">
<MenuItem Header="西部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/saitama/rsp1102.gif"/>
<MenuItem Header="北部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/saitama/rsp1101.gif"/>
<MenuItem Header="東部" Click="MenuItem_Click" CommandParameter="http://www.jartic.or.jp/traffic/ippan/saitama/rsp1103.gif"/>
</MenuItem>
</MenuItem>
</Menu>

Web画面4.ステータスバーの追加

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

  1. Expresison Blend より、StatusBar をドラッグ&ドロップします。

  2. StatusBar のフォントは、タッチパネルに合わせて十分大きな大きさに設定します。

  3. 場所を表示するためのStatusBarItemと、時間を表示するための StatusBarItem の2つ追加します。

 <StatusBar Name="statusBar1" Width="640" Canvas.Left="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="26.667">
<StatusBarItem Name="Place" />
<StatusBarItem Name="Time" />
</StatusBar>

Web画面5.メニューの実装

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

  1. メニューが選択された場合、CommandParameterより、表示すべきURLを取得する。

  2. 画像に表示すべきURLをセットする。

  3. 表示位置をリセットする。

  4. CompleteManipulationを呼び、イナーシャをリセットする。

  5. ステータス(場所、時間)を表示する。

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();
}
}
}

Web画面6.ダウンロード

shutokou.zip 114KB

デモ用です。

Web画面7.まとめ

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

 

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

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