Hokuriku.NET Vol.9のスライド ~Windows Touch~

マイクロソフトの田中達彦です。Hokuriku.NETの勉強会で使用したスライドを公開します。勉強会は2012年3月10日(土)に開催され、Windows Touchについての話をしました。 Hokuriku.NET Vol.9については、こちらをご覧ください。http://atnd.org/events/24756 会場となった石川高専(石川県津幡町)を訪れるのは、5回目か6回目くらいです。昔アカデミックの仕事をしていたときに高専に力を入れていて、そのときに何度かセミナーを開催させてもらいました。高専キャラバンでも訪問しています。その後も、高専の先生方の集まりに呼んでいただいたこともありました。 Hokuriku.NETに呼んでいただいたのは2回目で、約1年ぶりです。前回はWindows 7のタスクバーの話をしました。今回は初の試みとして、着物を着て参加しました。 夜の親睦会も含め、コミュニティの勉強会への参加は楽しみな仕事の1つです。 マイクロソフト田中達彦 Hokuriku.NET_120310.zip


Hokuriku.NET Vol9 でWindowsタッチについて話します

マイクロソフトの田中達彦です。2012/3/10(土)に開催されるHokuriku.NET Vol9で、Windowsタッチについて話します。 日時: 2012/3/10 13:00-17:30場所: 石川高専 (石川県津幡町)詳細: http://atnd.org/events/24756 Windowsタッチ以外にも、面白いセッションがいろいろあります。興味がある方は、ぜひご参加ください。 マイクロソフト田中達彦


日経ソフトウエアのWindows Phoneの記事 (2011年12月号)

マイクロソフトの田中達彦です。本日(2011/10/24)発売の日経ソフトウエア12月号に、Windows Phoneの記事を寄稿しました。コンパス、GPS、加速度計の各センサーと、カメラ、地図の機能を使用したアプリを10ページの記事の中で作っています。38ページから記事が始まっていますので、ぜひご覧ください。 作成したアプリケーションは、このようなアプリです。 上半分にカメラの映像を表示し、下には現在地の地図を掲載しています。カメラには向いている方角を表示し、地図は自分が向いている方向が上になります。Windows Phoneに搭載されているいろいろな機能を、コンパクトにまとめたデモアプリです。 日経ソフトウエアの今月売り号(2011年12月号)はWindows Phoneの特集をしています。第2特集としてタッチ系アプリの特集もあり、こちらも取材に協力して、いくつかサンプルプログラムを提供しました。 日経ソフトウエアは書店で購入できますので、ぜひ覗いてみてください。 マイクロソフト田中達彦


The Microsoft Conference 2011 [T1-202] タッチで変える! これからのアプリケーション

マイクロソフトの田中達彦です。The Microsoft Conference 2011(MSC)というイベントで、Windowsのタッチについてのセッションを担当しました。先ほどセッションが終わったので、ポイントとスライドを紹介します。PDF化されたスライドとストリーミングは、後日以下のMSCのサイトより提供する予定です。http://www.microsoft.com/japan/events/msc/2011/ [セッションについて]セッション番号: T1-202セッション名: タッチで変える! これからのアプリケーション [セッションのポイント]- 入力方法は、CLI(Command Line Interface)からGUI(Graphical User Interface)と進化し、最近はTUI(Touch User Interface)と呼ばれるように、タッチを使ったユーザーインターフェイスへと進化している。- キーボード、マウス、タッチはそれぞれの得意分野がある。多くの文字を入力するアプリケーションであればキーボードが適していて、グラフィックツールのような細かい作業を行うアプリケーションにはマウスが適している。タッチが適しているアプリケーションは、多くのコンテンツを扱うようなアプリケーションである。- タッチに対応したPCとしてスレート型PCが挙げられ、最近は各メーカーからさまざまなスレート型PCが発売されている。- スレート型PCの用途としては、営業の方が持ち運んでプレゼンに使用したり、外出先からのコミュニケーションにも使うことができる。倉庫の在庫管理や建築現場、医療の場でも威力を発揮する。最近の子供はNintendo DSなどタッチ対応デバイスに慣れているので、教育用途の使用も考えられる。- スレート型PCの中でも、Windowsを搭載しているPCは、ソフトウェア、ハードウェア、管理、セキュリティの面でメリットがある。ソフトウェアは業務で使用しているWindows用のアプリがそのまま使える。ハードウェアもWindowsに対応したものであれば使用できる。管理の面でも、WindowsのエディションによってはActive Directoryも使用でき、管理者から見れば通常のWindowsPCと全く同じに扱える。セキュリティ面も、通常のWindowsのセキュリティと同じ。- アプリケーションをユーザーインターフェイスの面でタッチに対応させるポイントは大きく5つ。タッチはマウスより接触面積が大きいので、UIに余裕を持たせること。タッチするときに画面を手で隠すので、必要な情報が手で隠れないように設計すること。マウスにあってタッチにないホバーのような機能に頼らないこと。タッチしたとき、形が変わったり音が出るなどのフィードバックをつけること。スレート型PCの場合は、どのように持って使うかを考えたUIにすること。- アプリケーションが使用される場所により、UIの大きさを変える必要が生じる場合がある。例えば、アパレルのお店で使用されるアプリケーションの場合、爪が長い人は指の先ではなく指の腹でタッチすることを考慮して、垂直方向の高さを大きめにしておくなどの工夫も。- UIに説明文を入れるときには、説明文が手で隠れないような位置に表示させる。UIの各要素の配置も、手で隠れることを考慮して配置する。- マウスのホバーや右クリックに頼るUIを極力避ける。ホバーはタッチでは再現できない。右クリックはタッチで再現可能だが、少し手間がかかる。- アプリケーションをタッチに対応するいちばん簡単な方法は、そのまま何もせずに使うことである。タッチすると、マウスのクリックと同じ反応を返すので、既存のアプリケーションがそのまま使用できる。- タッチの情報は、触っている指の情報や座標、状態をそのまま取得できる。- マニピュレーションという方法を使うと、タッチの移動距離や、マルチタッチ時の拡大率/縮小率を取得できる。マニピュレーションはWPFでサポートしている。Silverlightではサポートしていないが、Windows Phoneに搭載されているSilverlightはマニピュレーションを使うことができる。 [スライド] マイクロソフト田中達彦


The Microsoft Conference (MSC) というイベントでWindowsのタッチについて話します

マイクロソフトの田中達彦です。2011年9月28日(水)、29日(木)に、The Microsoft Conference 2011というイベントを、東京の新高輪で開催します。http://www.microsoft.com/japan/events/msc/2011/ マイクロソフトが開催するイベントの中で最大規模のイベントで、テクノロジや製品、サービスについて紹介します。その中で、以下のWindowsのタッチ系のセッションを担当しました。 タッチで変える! これからのアプリケーションセッション番号:T1-202概要:スレート型 PC などタッチに対応したデバイスが次々と発売されています。時流を考慮すると、アプリケーションのタッチへの対応はもはや必然であると言えます。本セッションではアプリケーションの開発担当者の方を対象に、既存アプリケーションをタッチに対応させるときのコツから、タッチ対応アプリケーションが拓く未来像までご紹介します。 The Microsoft Conference 2011では、もちろんWindows Phone 7.5のセッションも多数用意しています。参加費は無償です。お時間が合えば、ぜひご参加ください。 マイクロソフト田中達彦


Windows タッチ&ジェスチャ研究室 Vol.04 ~Windows Phoneのタッチ#2~

2011年4月15日に、Windows Phone 7 アプリケーション開発 Deep Diveというセミナーを開催しました。そのセミナーのタッチ&ジェスチャーのセッションをもとに説明します。今回は、そのセッションをもとにした記事の第2回目です。使用したスライドは、セミナーのWebサイトからダウンロードできます。 前回の記事 : Windows Phoneのタッチ#1Windows Phoneでタッチやジェスチャに対応する場合、大きく4つの方法があります。1つは前回説明したScrollViewerコントロールを使う方法です。今回は難易度1のマウスイベントを使う方法と、難易度2のマニピュレーションを使う方法を紹介します。 マウスイベントを使う方法は、従来のWindows用のアプリケーションを作る時の方法と同じです。タップした時になにかさせたいコントロールのマウスイベントを使うだけです。Windows Phoneにはマウスはありませんが、Windows Phoneに搭載されているSilverlightにはマウス関係のイベントがあり、タップをマウス関連のイベントに変換してくれます。例えば画面をタップした時に何かさせたいときは、MouseLeftButtonUpイベントに対応するイベントハンドラーを作成し、その中にプログラムを記述します。ただ、この方法は2つの指を使うジェスチャーを検知できません。2つの指を使うときは、マニピュレーション(Manipulation)を使います。 マニピュレーションには、2つのふるまいがあります。1つは、1本指でさわっているときのふるまいです。もう1つは、2本指でさわっているときのふるまいです。1本指と2本指で、取得できる情報に差があります。これについては後ほど説明します。 画面をさわったときにManipulationStartedというイベントが発生します。このイベントで、さわった位置を取得できます。さわったまま指を動かすと、ManipulationDeltaというイベントが発生します。指の移動に伴い、画面の描画をおこなうときはこのイベントを使用します。そして指を画面から離すと、ManipurationCompletedというイベントが発生します。 1本指でタッチしているときはパンとみなし、Transrationという情報を取得できます。2本指でタッチしているときはピンチまたはストレッチとみなし、Scaleという情報を取得できます。1本指でタッチしているときはScaleの情報はなく、2本指でタッチしているときにはTranslationの情報はありません。 以下のソースコードは、マニピュレーションのテスト用のプログラムです。画面にテキストブロックを10個貼り付け、PhoneApplicationPageのManipulationStarted、ManipulatiponDelta、ManipulationCompletedイベントに対応したイベントハンドラーにそれぞれ以下のコードを追加します。 private void PhoneApplicationPage_ManipulationStarted(object sender, ManipulationStartedEventArgs e){  textBlock1.Text = “StartX = ” + e.ManipulationOrigin.X;  textBlock2.Text = “SrartY = ” + e.ManipulationOrigin.Y;} private void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e){  textBlock3.Text = “ScaleX = ” + e.DeltaManipulation.Scale.X.ToString();  textBlock4.Text = “ScaleY =…


高校生が開発したWindows 7タッチ対応アプリ (Imagine Cup 2011 世界3位作品)

マイクロソフトの田中達彦です。Imagine Cupという世界の学生を対象にした技術コンテストが毎年開催されています。Imagine Cupにはいくつかの部門があり、その「Windows 7 Touch Challenge部門」で、日本の高校生が開発した作品が世界3位に入賞しました。Youtubeにビデオが掲載されています。凄いです。Team IUVOのScribooプロジェクトという作品です。https://www.youtube.com/watch?v=LYH6UbBgLt0ナレーションの英語も、自分たちで話しているそうです。 Windows Phone 7で採用しているメトロデザインを使用しています。 机に置いて使用することを想定し、向かい合って座る人のどちらからでも見られるような工夫をしています。 Imagine Cup 2011の世界大会は、7/8からニューヨークで開催されます。ぜひ、以下のサイトをご覧ください。http://www.microsoft.com/japan/academic/imaginecup/2011/default.mspxhttp://www.facebook.com/ImagineCupJapan?sk=app_139615609448792マイクロソフト田中達彦  


Windows タッチ&ジェスチャ研究室 Vol.03 ~Windows Phoneのタッチ#1~

今回から数回にわたり、Windows Phoneでのタッチとジェスチャーの話をします。Windows Phoneだから何か特別ということはあまりなく、基本はSilverlightプラスアルファと考えれば良いので、SilverlightやWPFのアプリケーションに応用できるものもあります。本文中でも、Windows向けのSilverlightやWPFを意識した説明を入れています。 2011年4月15日に、Windows Phone 7 アプリケーション開発 Deep Diveというセミナーを開催しました。そのセミナーのタッチ&ジェスチャーのセッションをもとに説明します。使用したスライドは、セミナーのWebサイトからダウンロードできます。 Windows PhoneでSilverlightを使用したアプリケーションを作成する場合、どのようにしてタッチやジェスチャーに対応させるかは、大きく上記の4つの方法があります。まずScrollviewerを使用する方法で、これがいちばん簡単です。次にマウスイベントを使用する方法があります。この方法は、Windows用のアプリを開発されたことがある方であれば、すぐに実装できます。そして、マニピュレーションを使う方法があります。マニピュレーションとは、指がどれくらい動いたのかという情報を簡単に取得できる方法です。マニピュレーションは、Windows版のSilverlightにはない機能で、Windows Phone用のSilverlightではサポートされます。WPFにもあります。最後に、Touchクラスを使う方法があります。Touchクラスを使うと、指の動きを生のデータとして取得できます。 今回はこの中で、難易度0のScrollviewerコントロールを使用する方法を説明します。 上の図は、複数のボタンを縦に並べて貼り付けたアプリケーションです。ボタンの数が少ないときは画面に全てのボタンが表示されますが、ボタンの数が増えてくると画面からはみ出してしまいます。この例では、いちばん外側にGridがあり、その中にさらにGridが入っていて、その中にStackパネルが入っています。そのStackパネルの中に、ボタンが並んでいます。このようなアプリケーションを作成して実行しても、画面からはみ出した部分にあるボタンを表示させることはできません。画面からはみ出していても、スクロールできないからです。 このような場合には、スクロールさせたいパネルをScrollviewerコントロールで囲みます。以下の図は、StackパネルをScrollviewerで囲った例です。Scrollviewerコントロールで囲うと、その部分をパン(指で画面上をなぞる)またはフリック(指で触り、はじくようにして移動させながら離す)でスクロールできるようになります。Windows Phone用のアプリケーションを作る場合、表示させたいものが画面より大きくなる可能性があれば、それをScrollviewerで囲えばよいのです。なお、Scrollviewerコントロールのすぐ内側には1つのコントロールしか含むことができないため、GridやStackなどのパネルをScrollviewerの中に用意し、そのパネルの中にコントロールを貼り付けることで複数のコントロールに対応させられます。 Windows用のSilverlightまたはWPFにもScrollviewerコントロールがあります。Windows Phone用のScrollviewerは画面からはみ出しているときに、ジェスチャによって表示位置を変えることができます。Windows Phone用Silverlightが、そのような機能を持っているからです。しかし、Windows用のSilverlightまたはWPFのScrollviewerコントロールを使用しても、ジェスチャには対応していません。Windows用SilverlightまたはWPFのScrollviewerを使用してスクロールさせるには、指で動いた距離を計測し、その距離をもとにScrollviewerコントロールの表示位置を変えます。以下のサンプルコードは、WPFでScrollviewerを使用し、その中の表示位置を変えるサンプルです。 void ScrollIconImage(double value){    IconPanelOffset += value;     if (IconPanelOffset < 0)  // 左端を超えた場合        IconPanelOffset = 0;    else if (IconPanel.ActualWidth – iconPanelScroll.ActualWidth < IconPanelOffset)  // 右端を超えた場合        IconPanelOffset = IconPanel.ActualWidth – iconPanelScroll.ActualWidth;     iconPanelScroll.ScrollToHorizontalOffset(IconPanelOffset);} Scrollviewerコントロールには、ScrollToHorizontalOffsetとScrollToVerticalOffsetというメソッドがあり、表示位置を引数として指定してメソッドを呼び出すことにより、表示位置を変えることができます。サンプルでは、IconPanelOffsetフィールドという、Scrollviewerの表示位置を示すフィールドがあり、そこにどれだけ移動するかの情報を足す/引くことにより、表示位置を変えています。 マイクロソフト田中達彦


Windows タッチ&ジェスチャ研究室 Vol.02 ~Silverlightでのストレッチ/ピンチ~

前回の記事で、Sliverlightでマルチタッチを実装するには、Touchクラスを使用することを説明しました。Touchクラスは、タッチされた座標等の生のデータを取得するクラスなので、ジェスチャーに対応したアプリを開発するには、生のデータを加工する必要があります。今回は、Silverlightで2本の指を使用したストレッチ(2本の指の間隔を広げて拡大する)と、ピンチ(2本の指の間隔を狭めて縮小する)のサンプル アプリケーションを紹介します。充分なテストをしている訳ではありませんので、実装時に参考する程度にしてください。 =======================public partial class MainPage : UserControl{    private Point FirstFingerOrigin = new Point();    private Point FirstFingerStart = new Point();    private Point FirstFingerEnd = new Point();    private Point FirstFingerFinish = new Point();    private int FirstFingerID = -1;     private Point SecondFingerOrigin = new Point();    private Point SecondFingerStart = new Point();    private Point SecondFingerEnd = new…


Windows タッチ&ジェスチャ研究室 Vol.01 ~Silverlightのマルチタッチ検出~

Windows 7は、マルチタッチをサポートしているOSです。ここ数か月で、タッチをサポートしたPCが各社から発売され、タッチやジェスチャに対応したアプリケーションのニーズが高まってきています。この連載では、Windowsのタッチやジェスチャを使うためのテクニカルな情報をお伝えします。今までの連載は、長い文章を数回に分けて連載することにより、続きものとして掲載していました。本連載は続き物ではなく、毎回何かしらのトピックに沿って情報を提供していきます。 一言にタッチ&ジェスチャと言っても、開発時にどのプラットフォームを使っているかによって、実装方法が異なります。例えば、WPFはタッチやジェスチャに対応していますが、Silverlightでは純粋なタッチの情報しか取得できません。連載は、どのプラットフォームを使用したかを明記し、それに対応したソースコード等を紹介します。 今回は、Silverlightのマルチタッチについて紹介します。Silverlightでマルチタッチを検出するときには、Touchクラスというクラスを使用します。このTouchクラスにはFrameReportedというイベントがあり、タッチを検出するたびにFrameReportedイベントが発生します。 FrameReportedのイベントハンドラーを作成するには、MainPage()の中のInitializeComponent()を呼び足した後に、以下のプログラムを記述して、[tab]キーを2回押します。  Touch.FrameReported += すると、以下のようにイベントハンドラーを登録する部分と、イベントハンドラーそのものが自動的に作成されます。  Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported); 以下のソースコードは、FrameReportedイベントハンドラーの記述例です。この例では、listBox1という名前のListBoxコントロールを1つ貼り付けていることが前提です。void Touch_FrameReported(object sender, TouchFrameEventArgs e){    TouchPointCollection touchPoints = e.GetTouchPoints(null);     foreach (var touchPoint in touchPoints)    {        string str = String.Format(            “ID = {0}, Action = {1}, X = {2:##}, Y = {3:##}”,            touchPoint.TouchDevice.Id, touchPoint.Action.ToString(),             touchPoint.Position.X, touchPoint.Position.Y);         listBox1.Items.Insert(0,str);    }    listBox1.Items.Insert(0, “===========”);} このプログラムを実行すると、タッチするたびにその情報がリストボックスに追加されます。touchPointsには、タッチされた情報が入ります。シングルタッチの場合にはこの中に1つの情報しか入っていませんが、マルチタッチをしたときは、この中にタッチのポイント数分の情報が入ってきます。4点タッチしていれば、4点分の情報が含まれます。foreach文を使用し、含まれているタッチポイント数分の情報を解析します。ここでは、TouchDevice.Id、Action、Positionという情報を文字列に書き込んでいます。TouchDevice.Idは、タッチしたときに自動的に割り振られる一意のIDです。例えば人差し指でタッチしたときは、その人差し指を離すまで、人差し指によってもたらされる情報を1つのIDで管理します。人差し指でタッチしている間に中指で別の場所をタッチすると、人差し指に割り振られたIDとは別のIDが中指のタッチに割り振られます。タッチの状態であるActionには、Down、Move、Upという情報が入ります。一つの指で画面を触るとDown、動かすとMove、離すとUpという情報が伝えられるのです。DownからUpまでは、同じIDが使われます。 このテストプログラムは、Windows…