silverlightで作るマルチタッチアプリケーション 2
DESCRIPTION
Silverlight でマルチタッチマニピュレーションを実現する方法。 技術ひろば.net 2011年3月 でのセッションを予定していた資料 （3月12日開催予定だったが急遽中止したため未実施）TRANSCRIPT
瀬尾 佳隆 （せお よしたか） ◦ MVP for Visual C# (Jan 2009 – Dec 2011)
◦ 最近は Silverlight と SharePoint がお友達 ◦ でも、とってもよくハマる (泣)
◦ メール ・・・ [email protected] ◦ Blog ・・・ http://yseosoft.wordpress.com/ ◦ Twitter ・・・ http://twitter.com/seosoft ◦ Facebook ・・・ http://www.facebook.com/seosoft
◦ 個人事業主です（屋号は瀬尾ソフト）
2
Silverlight でマルチタッチなアプリケーションを 作る勘所を共有します ◦ Silverlight でのマルチタッチアプリケーション開発で ほんのちょっとだけ苦労する理由
◦ タッチ対応なしからマルチタッチマニピュレーションまで 順を追って進めていきます
◦ 高校時代の数学をちょっとだけ思い出していただきます
Developers Summit 2011 の MVP LT のネタを 具体的なコードの紹介まで踏み込んでみます
3
プロローグ
Step 0 : タッチ対応なし
Step 1 : シングルタッチに対応してみる
Step 2 : マルチタッチ対応の前に
Step 3 : 座標変換クラスを用意する
Step 4 : マルチタッチマニピュレーション
まとめ
4
Silverlight はマルチタッチが ちょっとだけ苦手
5
マルチタッチマニピュレーション ◦ スマートフォンや iPad でお馴染みの 「2本指で画面上のものを回したり拡大したりする」 アレのこと
ということで、本題に戻ります
6
Silverlight ではマルチタッチサポートが少なめ ◦ タッチポイントは取れるが、 マニピュレーションの API は持っていない
ちなみに同じ Silverlight でも Windows Phone 7 は リッチな API を持ってます
7
WM_TOUCH WM_GESTURE Manipulation & Inertia
Win 32 〇 ◎ 〇
Silverlight 〇 × ×
WPF 〇 〇
http://msdn.microsoft.com/ja-jp/ff604678.aspx より
API がないなら自前で座標演算すればいい ◦ タッチポイントは取れるし
◦ Matrix クラスがあるし （これは後述）
やってみると、想像したよりは難しくなかった！ ◦ 「簡単だ」とは一言も言ってません
8
タッチイベントは自動的に マウスイベントに昇格される
9
Windows アプリは、シングルタッチの範囲ならば、 何もしなくても “タッチ対応” アプリでもある ◦ マウス操作できることはタッチ操作でもできる
◦ 1点目のタッチは OS 内部でマウスイベントに昇格される
昇格が都合が悪ければ、アプリで止めることもできる
実際、マニピュレーションには昇格は不都合
◦ ただし、マウス操作を前提としたアプリはポイントの領域が 狭いことが多い
タッチ操作できることと、タッチに最適化されているかどうかは 別の話
10
写真を画面上に表示するアプリ ◦ マウス操作、タッチ操作で写真を移動します
◦ 最後には回したり大きくしたりするのが今日のゴール
まずは実装しているのはマウスイベントだけのデモ ◦ タッチでも操作できることを一応確認しておきます
◦ この後のためにソースコードも簡単に見ておきます
11
12
13
積極的にタッチイベントを処理 まずはオブジェクトの移動から
14
タッチ操作の意味は、アプリケーションごとに異なる ◦ フリック操作で、大きな領域の移動やページ移動の意味
◦ 原点の表示位置が固定されたグラフでは、 シングルタッチを拡大率の変更と考えてもよい
◦ シングルタッチ＝オブジェクトの移動 が一般的（？）
今回の Step 0 のデモではオブジェクトの移動と 考えるのが自然 ◦ 今回は、「シングルタッチはオブジェクト移動」として続けます
15
1点目のタッチイベントを自前でハンドリング ◦ 自動的にマウスイベントに昇格されるのを止める
◦ コードは定型的
16
OS からのタッチ入力は Static な Touch クラスが受け取る （FrameReported イベント）
マウスイベントへの昇格を止めるには SuspentMousePromotionUntilTouchUp メソッド
タッチポイントは：
◦ プライマリ（1点目のポイント）・・・GetPrimaryTouchPoint
◦ すべてのポイント（プライマリも含む）・・・GetTouchPoints
17
18
Matrix クラスと高校時代の “行列”
19
いよいよ回転と拡大
Silverlight はマニピュレーション用 API を 持っていない（前述）
が、座標変換に使う Matrix クラスがある ◦ これを使ってみましょう
Matrix と言うくらいなので、行列 です ◦ 高校時代の数学でやったアレ
20
System.Windows.Media.Matrix クラス ◦ public Matrix(double m11, double m12,double
m21, double m22, double offsetX, double offsetY)
◦ これを UIElement.RenderTransform.MatrixTransform
に代入します
m11, m22 ・・・ X, Y 方向の拡大率
m12, m21 ・・・ 傾斜
※第3列は (0, 0, 1) 固定なので、
Matrix クラスでは指定しない
（アフィン変換行列）
行列の積
行列の積
例えば、1行1列の値は、 1つめの行列の1行目 と 2つめの行列の1列目 の各要素ごとの積を足したもの
平行移動
拡大（縮小）
回転
こんなものだと思って、覚えて（覚えたふりして）ください
Matrix クラスを実際に利用して 座標変換メソッド群
25
例 ◦ 北東に (約) 1.4km 進むのは、東に 1km、北に 1km 進むのと同じ
◦ 自動車のドリフトは、移動の座標変換と回転の座標変換の 掛け合わせ
回転の行列、拡大の行列、移動の行列を用意して、 順に掛け合わせれば任意の座標変換ができる ◦ 厳密には、任意の「平面上の」座標変換と言うべき（？）
数学的にはこれを満たす行列のことを「アフィン変換行列」と 言うそうです
26
27
A
A’
B
B’
A が A’ に、B が B’ に、それぞれ移動したとする
28
A
A’
B
B’
B に対する A と A’ の角度の差が回転角、 距離の比が拡大率と考える A に対する B と B’ についても同様
29
中心
見た目に似ていても、 どこを中心にするかで座標変換は異なる
Static な座標変換クラス （Manipulation クラス） ◦ メソッドは 5つ
拡大、回転、平行移動、行列の積、点の座標変換
30
31
32
行列の積 ABC の表現、どちらが読みやすい？
◦Multiply(C, Multiply(A, B));
◦A.Multiply(B).Multiply(C);
拡張メソッドを使うと・・・ ◦ public static Matrix Multiply(this Matrix m, …);
本当にちょっとした内容ですみません
33
こう 書ける
34
35
36
座標変換を駆使（？）して オブジェクトを操作する
37
38
39
40
41
42
実は、この部分にはバグがあります。 割り算の分母が 0 になると・・・
今回はコードの単純化のためにあえてこのままで
43
Silverlight はマルチタッチがちょっとだけ苦手
Matrix クラスを使うと、Silverlight でも マルチタッチマニピュレーションを実現できる ◦ MSDN Magazine 2010年3月号で詳しく解説 されています http://msdn.microsoft.com/ja-jp/magazine/ee336121.aspx
ちょっとだけ高校時代の数学の復習が必要かも
44
Silverlight でのマルチタッチ サポートの詳細 ◦ http://msdn.microsoft.com/ja-
jp/magazine/ee336026.aspx
理系なら知っておきたい 数学の基本ノート [線形代数編] ◦ 佐々木 隆宏 著、中経出版
タッチデバイスを持っていないけど試してみたい人 ◦ MultiTouchVista をどうぞ
http://multitouchvista.codeplex.com/
PC にマウスを2個繋げてマルチタッチをエミュレート
名前に Vista と付いていますが、Windows 7 対応
45
46