「タッチ アプリケーション開発ストーリー」のインタビュー記事が公開されました

ブログでも何度か触れた Windows 7 用のタッチアプリケーション開発ですが、先日インタビューを受けました。それを Tech Fielders のサイトで公開していただきました。

http://www.microsoft.com/japan/powerpro/TF/interview/50_1.mspx

同じテーマで他の方のインタビューも掲載されています。

http://msdn.microsoft.com/ja-jp/windows/hh300131

皆さん、かっこいいアプリケーションと思わず唸ってしまうような示唆に富んだインタビューばかりで、一つだけかなりヤバい状態ですが orz、お時間がありましたらちらっと読んでいただけるとうれしいです。
Siverlight でマルチタッチマニピュレーションをがんばってみましたというところは、ちょっとだけアピールポイントですかね。ちっちゃいアピールですが。

要は 「アプリケーション開発ってユーザーのことを第一に考えなきゃいけないんだよね。タッチアプリケーション開発はそれを思い出させてくれたよ」 ということを言ってます。

タッチアプリケーション開発の本質は、多分その辺にあるのかもしれません。掲載されているインタビューで、それぞれ作ったアプリケーションは当然違っているわけですが、まとめのところまで読むと皆さん同じような結論になっています。

タッチアプリケーション開発って面白いですよ。ぜひ試してみてください！

タッチ対応アプリケーションショーケース

ブログでたびたび取り上げている 「Windows 7 マルチタッチ対応アプリケーション開発者会議」。

参加者が求められたのがタッチアプリケーションの公開です。その成果が MS のサイトでまとめられています。

タッチ対応アプリケーション ショーケース

スレートPC、タッチスクリーンなどお持ちの方は、面白そうなアプリを見つけて使ってみるのがよろしいかと。

覗いてみると、皆さんきっちり作ってるんですね。誰かさんのように「4日で作りました（うち、アイコン探しで1日ｗ）」と威張ってる場合じゃないです。
ま、一応 Silverlight で作ったということと参考情報としてソースコード公開をページ上で謳っている唯一のアプリということで、そこは大目に見てくださいな。

---

ところで、一つ上の階層の タッチ対応アプリケーション技術情報 を見ても、ネイティブ、MFC、.NET (WPF と思われる) というキーワードは並んでいるものの、やっぱり Silverlight は見当たらない。

ネイティブはともかくとして、スレートPC のスペックを考えると（今後、スペックが上がっていくとしても）、生産性とパフォーマンスとのバランスを考えると Silverlight はタッチアップリケーション開発には有効な技術だと思うんですけどね。
MS さんにはもっと情報提供をお願いしたいところでもあるんですが、さしあたっては この辺の情報 とか こんなソースコード とかを参考にしていただければ。

 

 

---

余談ですが、開発者会議には100名の方が参加したはず。私の数え方が悪いのか、公開されているアプリケーションはどうもその数には大幅に満たないような気が・・・（笑）。

[Silverlight] Tips : マルチタッチ対応の定石

Silverlight でマルチタッチな操作を実現するには Touch.FrameReported イベントを処理する必要があります。

※逆に言うと、シングルタッチの対応だけでよく、かつマウスとタッチとを区別する必要がなければ、ランタイムがタッチイベントをマウスイベントに自動的に昇格してくれるので、マウスイベントを処理するだけでいいということ。

処理の内容はもちろんアプリケーションごとに異なるわけですが、構造はかなり定型的です。
以下のコードがそれ。

01: public MainPage()
02: {
03:     InitializeComponent();
04:
05:     // マルチタッチのイベントハンドラ
06:     Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
07: }
08:
09: // 前回のタッチイベントの時の座標
10: private Dictionary prevPoints = new Dictionary();
11:
12: void Touch_FrameReported(object sender, TouchFrameEventArgs e)
13: {
14:     // プライマリポイント（＝1点目のタッチ）でマウスイベントへの自動昇格を止める
15:     TouchPoint primaryPoint = e.GetPrimaryTouchPoint(LayoutRoot);
16:     if (primaryPoint != null &&
17:             primaryPoint.Action == TouchAction.Down)
18:         e.SuspendMousePromotionUntilTouchUp();
19:
20:     // 今回のイベントでのすべてのタッチポイントの情報
21:     TouchPointCollection touchPoints = e.GetTouchPoints(LayoutRoot);
22:
23:     // 1点ごとに処理
24:     foreach (var touchPoint in touchPoints)
25:     {
26:         TouchDevice dev = touchPoint.TouchDevice;
27:         TouchAction action = touchPoint.Action;
28:
29:         if (action == TouchAction.Down)
30:         {
31:             // タッチ開始
32:
33:             prevPoints.Add(dev.Id, touchPoint.Position);
34:         }
35:         else if (action == TouchAction.Move)
36:         {
37:             // タッチポイントの移動
38:         }
39:         else if (action == TouchAction.Up)
40:         {
41:             // タッチ終了（指が離れた）
42:
43:             prevPoints.Remove(dev.Id);
44:         }
45:     }
46: }

---

 

• 6行目 ・・・ Silverlight でタッチイベントを処理するには必ずこの行が必要。Silvelight では、タッチイベントはアプリケーションの中の1カ所で処理しなければならないので（マウスイベントはコントロールごとにイベントハンドラが存在しますよね）、MainPage のコンストラクタで FrameReported イベントにハンドラを結びつけます。

• 10行目 ・・・ 単に「タッチされた」だけでいいのであれば不要ですが、前回のタッチポイント（座標）との差が必要になることがあるでしょう。回転や拡大、移動などでは必須ですよね。このために前回のタッチポイントを保持する変数を用意します。ここで Dictionary のキーを int にしているのは、タッチが始まってから指を離すまでの間、各ポイントは同一の ID を持っているから。この ID を見ることでどの指がどこに移動したかを追いかけることができます。

• 12行目～ ・・・ タッチイベントハンドラの本体

• 15～18行目 ・・・ 何もタッチされていない状態から最初のタッチが始まると、ランタイムはその点をプライマリポイントとして返してくれます。マウスイベントの自動昇格されるのはこの点の情報。 自動昇格が都合が悪い時には SuspendMousePromotionUntilTouchUp で昇格を止めます。昇格が止まるのは文字通りタッチアップまでの期間だけなので、大抵の場合はプライマリポイントに対して毎回昇格を止めることになるはず。

• 21行目 ・・・ GetTouchPoints で今回のイベントでのすべての点（1点でも2点でもそれ以上でもまとめて）を返してくれます。

• 24行目～ ・・・ GetTouchPoints で得られた各点について順番に必要な処理をしていきます。

• 26, 27行目 ・・・ 後のコードを見やすくするために。ちなみに上で触れたタッチポイントの ID は TouchDevice.Id プロパティで得られます。

• 29行目～, 35行目～, 39行目～ ・・・ 今回のイベントで、タッチポイントがタッチされ始めたか、指が移動したか、タッチが終わったかを判断しています。あとはそれぞれのブロックの中に必要な処理を入れていけばマルチタッチ対応なアプリケーションになります。33行目、43行目のように、タッチポイントのトラッキングを始めたり止めたりするのもお忘れなく。

---

Silverlight でタッチ対応しようとすると、まず例外なくこの構造になるはず。 こうして見ると、マルチタッチ対応は（コード上では）それほど難しくないことがわかると思います。

マルチタッチアプリケーション（MemoBoard）のソースコードを公開しました

先日公開した マルチタッチアプリケーション MemoBoard ですが、ソースコードもあわせて公開します。ヘボいコードなので結構恥ずかしいんですが、マルチタッチアプリケーションを開発する上での参考になれば。

 

http://www.seosoft.net/files/MemoBoard/MemoBoard_src.zip

一応、各クラスについて簡単な説明をしておくと：

App.xaml / App.xaml.cs	アプリケーション	アプリケーションのバージョン確認、データ保存のための MainWindow の Closing イベントのフックを行う
MainPage.xaml / MainPage.xaml.cs	メインウィンドウ	メモ領域の名前は “MemoArea” (Canvas) タッチイベントはここで一元的に処理する
Memo.xaml / Memo.xaml.cs	メモ用紙クラス	Memo クラスのインスタンスは動的に生成して、MemoArea の Childlen に Add している メモの移動や拡大も Memo クラス自体がイベント処理を行う マウスイベントはこのクラスで処理している
TouchFunctionType.cs	ステータス（実行中の機能）	ツールバーボタンの選択状態に応じた、アプリケーションの実行中機能を表す

 

ソースを見ていただければ、コード量の少なさがわかっていただけるかと思います。マルチタッチマニピュレーションは考え方さえわかれば、コードはそれほど難しくないということです。

 

少しずつでも説明も進めないといけないな＞自分

マルチタッチアプリケーションを公開してみた

去年（2010年）の12月に 「Windows 7 マルチタッチ対応アプリケーション開発者会議」というイベントがありまして、運よく参加させていただきました。その時にスレートPCをいただいたんですが、引き替えに「おらおら、タッチアプリケーション作れよ～」と言われたわけです。

そこで作ってみました。
タッチ操作用のメモアプリケーションです。付箋紙をボードにペタペタ貼り付けるイメージで使うアプリです。2本指でピンチ操作やマウスホイールでメモ用紙を拡大できるので、指でも細かいメモを取れると思います。
Out of Browser な Silverlight アプリなのでインストールして使うこともできます。
興味のある方（勇気のある方？）はちらっと覗いてみてください。

http://www.seosoft.net/files/MemoBoard/

実際に操作した結果は、こんな感じ。

www
※権利関係は大目に見てください

マウスでも操作できますが、こんなに上手な絵を描くことは難しいと思うのでｗ、ぜひスレートPCとかタッチスクリーン付きのPCでお試しください。

---

コミュニティー活動をしているということから参加させていただけたイベントなので、売り物を作ろうということではなくて、話のネタ（＝セッション、ブログ） になるような利用をしようと考えました。それでデブサミで5分間いただいてマルチタッチマニピュレーションの話をしたり、勉強会の資料を作ったり（都合によりセッションはまだ実現してないけど）しました。

開発者会議の宿題のアプリケーションも同じ目的で作ったので、アプリでやってること、苦労したことなどを共有していきたいなと思います。恥を忍んでソースコードも公開します（って、まだソースの整理してないことに今気づいた orz）。
ちなみに諸々の事情によりアプリ開発の時間が満足に取れなかったので、4日ほどででっち上げたｗ アプリです。そのあたりで作りは甘いかもしれませんが、幸いデブサミ LT の準備でざっとマルチタッチの要点は見ていたので、マルチタッチのコーディング自体はそれほど苦労しませんでした（ウソです）。

Silverlight のマルチタッチなネタについて、As Is の状態ですがひとまず出すことができました。これからテクニックや Tips として整理していきたいと思います。

 

技術ひろば.net の5月の勉強会は 21日（土） の開催（予定） です。Silverlight やらマルチタッチやらについて直接情報共有することもできると思います。これを書いている時点ではまだ受付をしていませんが、興味のある方はぜひ情報の更新を少しだけ気にかけてもらえるとうれしいです。

Silverlightで作るマルチタッチアプリケーション (技術ひろば.net 版)

技術ひろば.net の2011年3月の勉強会で話そうと思っていた内容です。
代わりというのもなんですが、5月のミニ勉強会でやりたいと思います。Developers Summit 2011 のライトニングトークで話しした内容のロングバージョンです。

Silverlight 4 （4 に特化した API は使っていないですが）でマルチタッチマニピュレーションを実現する方法の紹介です。
※マルチタッチマニピュレーション ＝ 画面上のオブジェクトを指で移動したり、2本指で拡大／回転したりのこと

※pptx 版 はこちら（アニメーション付きなので、こちらの方がわかりやすいかも）、ソースコードはこちら

---

Silverlight はマルチタッチがちょっとだけ苦手

Silverlight はマルチタッチの処理がちょっとだけ苦手です。
Windows ネイティブや WPF はマルチタッチマニピュレーションの API を持っていますが、Silverlight はそれを持っていません。取れるのはタッチポイントの情報まで。
ならば自前で計算するとどうなるのか？というのがテーマです。

結論から言うと「楽勝！」とは決して言えないまでも、想像していたほどには難しくはなかったなという感想を持っています。

---

Touch.FrameReported イベントを使う

Silverlight では、プライマリポイント（＝1点目のタッチ）をデフォルトでマウスイベントに自動的に昇格してくれます。つまり、何もしなくてもすべてのアプリケーションはタッチ対応と言えます。もちろん UX 面での使いやすさという問題はありえますが、タッチ対応であることは事実。
ただし、マウスイベントに自動昇格されては都合が悪いこともあります。マルチタッチでの操作がその一つ。
ではどうするかというと、Touch クラスを使います。これの FrameReported イベントを処理することで自動昇格に頼らずにアプリケーション固有のタッチ操作の処理を行うことができます。

Touch クラスがわかりにくい点は、マウスイベントは UIElement ごとに発生するのに対して（そして開発者はそれに慣れている）、アプリケーションのレベルでイベント処理しなければならないという点。イベントハンドラ内で「じゃあ、実際どのUIElement上で発生したのよ？」というのを判断しなければなりません。

---

高校時代の行列を思い出す (または勉強し直す w)

マルチタッチマニピュレーションを実現するためにもう一つ必要なのが行列演算。
高校時代に数学の時間にやったアレです。Silverlight ではタッチポイントの情報は取れると書きましたが、この座標情報からオブジェクトを移動／回転／拡大させた座標を求めるのに行列を使います。

これを Silvelight の側から見ると、Matrix 構造体 を使うということになります。

長くなってきたのでこの投稿は一旦ここで区切ります。ライトニングトークのレベルなので続きは改めて書こうかと思います。
今回は：

• Silverlight ではタッチ操作については座標が取れるのみ
• タッチイベントはアプリケーションレベルで処理する
• マニピュレーションには行列演算が必要

という3点を抑えておけばいいかと思います。

技術ひろば.net の5月の勉強会は 21日（土） の開催（予定） です。これを書いている時点ではまだ受付をしていませんが、興味のある方はぜひ情報の更新を少しだけ気にかけてもらえるとうれしいです。

Silverlight で作るマルチタッチアプリケーション （Developers Summit 2011 17-D-3 LT セッション）

Developers Summit 2011 の MVP & .NET Community Members Lightning Talks に登壇させていただきました。

テーマは「Silverlight で作るマルチタッチアプリケーション」です。
Silverlight でマルチタッチマニピュレーション（2点タッチで拡大とか回転）をする方法の紹介です。

スマートフォンでも iPad でも普通にできて、Windows ネイティブでも WFP でも普通にできて、Windows Phone 7 でも風通にできる、マルチタッチマニピュレーションですが、デスクトップ用 Silverlight ではちょっとだけ苦労します。
というのも、タッチポイントの情報は取れるもののマニピューレーション対応の API を持っていないから。

それではと言うことで、Matrix クラスを使って座標変換してしまいます。

その際に必要になるのが、高校時代の数学でやった行列の計算。
覚えてます？行列？
私はすっかり忘れてましたｗ
今回のネタのために久しぶりに勉強しました。

思ったよりはコードもシンプルで、サクサク動いてくれますが、さすがに5分でちゃんと説明するのは難しい。
ということで、ブログと 技術ひろばの勉強会（多分？） でフォローしたいと思ってます。興味のある方はチェックを。

USB マルチタッチパッド

おっ、これはよさそう。USB マルチタッチパッド！

http://item.rakuten.co.jp/donya/88418/#cat

Windows 7 や Windows Phone 7 のマルチタッチ対応アプリケーションを開発しようと思うと、意外と苦労するもの。
技術的なところは仕方ないとしても、そもそもマルチタッチなマシンがなかったり、たとえばスレート PC やタブレット PC があったとしても、開発するにはスペックが心許なかったり。
高スペックな開発機でマルチタッチができれば効率よくデバッグ、テストできるはず。そんな時に使えそうなデバイスです。

ということで、とりあえずポチってしまいました。
届いて使ってみたら、レポートでも書くかも、です。

 

 

---

追記（12月26日）
ブツは早々に届き、早速つないでみたところ、初期不良なのかパネルが無反応。マウスモードにしたときのボタンはちゃんと動いているし、Windows 7 側ではちゃんとマルチタッチなデバイスとして認識している。
とりあえず問い合わせ中。

追記（12月30日）
結局、残念ながら対応の悪さにタッチパッド自体を使わない（というか、すでに捨てた）ということに。残念。
「迅速対応・誠実対応」が売りのはずなのに、回答期限を過ぎても何もなし、こちらからの催促でやっと返ってきたものの、形式的でさえ謝罪も一切なし（メール用テンプレートをコピペしただけ）、内容は「確認するから物を送れ、その際こういう書類にこれこれこう書け、同封物はこれとこれ、忘れたら確認しない。確認は到着後1週間、こちらからは到着も結果も発送も連絡しない」（物言いはそうじゃないけどね）とか。なんじゃそりゃ。
本題とは関係ないですが、コスト削減といい加減な対応とは別だということは、自分を含めて、きちんと考えておくべきです。

Windows 7 マルチタッチ対応アプリケーション開発者会議

先週のことですが、「Windows 7 マルチタッチ対応アプリケーション開発者会議」というイベントに参加させていただきました。
招待制のイベントなので広く一般にはアナウンスされていないものなのですが、ありがたいことに参加させていただけたわけです。

文字通りなんですが、Windows 7 用のマルチタッチアプリケーションを開発するための勘所を共有したり、MS からスレート／タブレットをもっと盛り上げるためにぜひ協力を！みたいな話を聞いたりといった内容。

会場でスレートPCをいただきました。タダですw
ONKYO 製の TW217A5 という機種。

まあ代わりにマルチタッチなアプリケーションを公開しないといけないんですが、UX とか 3スクリーンとかデバイスとか（キーワードの並びはアレですが）を実感して自分のものにするには、こういうデバイスをいただけたというのはすごくうれしいことです。ガジェット好きだし、喜んで協力しますよ。

---

ネットにネガティブな意見なんかも見つかる機種ですが、実際に触ってみるとなかなかどうして、立派に使える PC です。
おまけに（こっそり）メモリ増設をしてみたら、これは完全に実用的なマシン。
※ネットを探すとメモリ増設の方法が見つかったりしますが、危険なのでよい子はマネしないでねっ！

さすがにこいつで開発しようとか大容量のデータを扱おうというのはやめたほうがいいし無理な話です。
でも、メールや Web のチェック、ドキュメントビューワーとしては便利だし、なによりこれから、こういうデバイスならではの使い方を考えていかなければならない。 従来のマウスとキーボードを前提としたアプリケーションから一歩進んで、指で操作できるアプリを作っていかなければならないと思います。

その意味で、早々にこういうデバイスに触る機会を得たのはうれしいことです。
これからマルチタッチとかスレートPCとかについて考えていこうと思います。
（と言いながら、忙しくてブログも満足に書いてないし、そもそも最近あまり勉強してない orz）

あと、そのうち、そうですね、2月くらいですかね、マルチタッチなアプリケーションについてちょこっとだけどこかで喋るかもしれません。
それまでにちゃんとしたネタを仕込んでおかねば。

---

余談。スレートPCと言いながら、実は・・・

こんな感じで、ネットブック代わりとして使ってますw
Bluetoothのキーボードとマウスがあれば、これはもう普通に Windows 7 マシンです。
ちなみにスレートが乗っかっているスタンドは iPad 専用w の折りたたみ式スタンドです。
iPad 以外を乗せても今のところ爆発したりしてません。