Windows Summit 2010 2017/3/2 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be.

Presentation on theme: "Windows Summit 2010 2017/3/2 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be."— Presentation transcript:

1 Windows Summit 2010 2017/3/2 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2 トランスクリプト付き日本語翻訳ファイルについて
Windows Summit 2010 2017/3/2 トランスクリプト付き日本語翻訳ファイルについて この PowerPoint ファイルには、「ノート」 セクションにセッションの講師が話している内容を書き起こしたもの (トランスクリプト) を入力しています。 ノートを参照するには、PowerPoint の表示モードを [標準] または [ノート] に設定してください。[標準] の場合は、スライド表示ウィンドウの下 (ノート ペイン) に表示されます。 ノート表示モードで見た際に、ノートが 1 ページに収まりきらない場合は、該当するスライドを複製し、複数ページにわたってノートを入力しています。そのため、オリジナルの英語版ファイルと比較して、スライド番号やスライドの枚数が異なる場合があります。 ノートを印刷するには、[印刷プレビュー] または [印刷] 画面において、[印刷対象] を [ノート] に指定してください。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3 Windows Summit 2010 2017/3/2 Developing Multi-Touch Applications for Natural Experiences (自然なエクスペリエンスの マルチタッチ アプリケーション を開発する) Windows Summit 2010 へようこそ。私の名前は Vineet Sarda です。マイクロソフトでは主にアプ リケーション開発者と協力して、最新技術を活用した、よりリッチな Windows アプリケーション エ クスペリエンスの実現に取り組んでいます。今日は、ユーザー エクスペリエンスを強化する新世代の アプリケーションの構築についてお話しします。とりわけ、マルチタッチ形式を中心に扱います。 Vineet Sarda Senior Consultant Microsoft Corporation © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4 議題 マルチタッチ ハードウェア 主要なタッチ シナリオ Windows 7 でのタッチへの対応状況
Windows Summit 2010 2017/3/2 議題 マルチタッチ ハードウェア 主要なタッチ シナリオ Windows 7 でのタッチへの対応状況 タッチ対応アプリケーションの開発ガイダンス ジェスチャ マニピュレーションと慣性 WPF を使用した .NET 開発 皆様へのお願い リソース こうしたアプリケーションの構築に役立つ内容として、まずマルチタッチ ハードウェア、新しいアプ リケーションで活用できる各種シナリオ、そして Windows の主要なマルチタッチ関連機能の一部に ついてお話します。それに続いて、開発に関するガイダンスを提供します。このガイダンスでは、アプ リケーションの活用方法に加え、ジェスチャ、マニピュレーション、慣性といった API の利用につい て、また、これらの API を新しいアプリケーションで効果的に活用するための、WPF を使用し た .NET アプリケーション開発について説明します。さらに、これらの情報を実践に生かすための皆様 へのお願い、そしてアプリケーションの品質向上に役立つリソースを紹介します。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5 Windows マルチタッチの登場 Windows マルチタッチの定義 : 個別にトレース可能な 2 つ以上のタッチ ポイント
Windows Summit 2010 2017/3/2 Windows マルチタッチの登場 Windows マルチタッチの定義 : 個別にトレース可能な 2 つ以上のタッチ ポイント コンシューマー タッチ インターフェイスは、コンシューマー向け市場でも 好評 マルチタッチは、"あっと言わせる" 高度な機能で 明確な差別化を実現 マルチタッチは、移動中の使用を可能にし、 新しいシナリオを実現 ハードウェア マルチタッチ対応コンピューターは、幅広いフォーム ファ クターで存在 タッチ自体は旧来からある機能ですが、Windows マルチタッチは Windows 7 で初めて導入されまし た。マルチタッチの定義は、Windows プラットフォーム内で個別にトレース可能な 2 つ以上のタッ チ ポイントを備えていることです。タッチ機能に対する最初のアプローチとして、マイクロソフトは 複数のタッチ ポイントを認識する Microsoft Surface を開発しました。そして、Windows 7 では、 オペレーティング システムとして初めてマルチタッチ機能を搭載しました。これは 2 つの側面から評 価できます。まず、コンシューマー向け市場の反応です。タッチ機能はユーザーの間で非常に好評です。 タッチの自然なインターフェイスを通じて、より直観的にアプリケーションを使うことができ、生産性 が向上します。もう 1 つの側面として、ハードウェア メーカーでは、Windows 7 オペレーティング システムでのタッチ操作に対応した、幅広い種類のフォーム ファクターおよびマルチタッチ デバイス が開発されています。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6 Windows マルチタッチ ハードウェア フォーム ファクター テクノロジ クラムシェル型 タブレット ネットブック オールインワン
Windows Summit 2010 2017/3/2 Windows マルチタッチ ハードウェア フォーム ファクター クラムシェル型 タブレット ネットブック オールインワン テクノロジ 光学式 抵抗膜式 静電容量式 ご覧のとおり、ハードウェアについては、さまざまなフォーム ファクターが市場に出回っています。 クラムシェル、タブレット、ネットブック、そしてオールインワンです。クラムシェルはノート型のデ バイスです。タブレットは読書に最適なスクリーンを備えています。ネットブックは非常に小型のデバ イスで、Web の閲覧や電子メールのチェックを主な用途とします。実用に最低限の機能を備えた、き わめて軽量なノート PC です。オールインワンはデスクトップと同様に使用でき、タッチ機能が統合さ れた一体型ユニットです。これらの各フォーム ファクターは、さまざまな種類のテクノロジをサポー トしています。現在、市場で主流のテクノロジは、光学式、抵抗膜式、静電容量式の 3 つです。光学 式テクノロジはオールインワンで採用されています。カメラを使った技術のため、ハードウェアの左上 と右上に 2 台のカメラが設置されます。指がハードウェアの表面に触れると、カメラが指の動きを追 跡します。抵抗膜式テクノロジは、圧力を感知します。ユーザーが画面に触れると、画面のどの部分が 押されているかを追跡し、ハードウェアに対するタッチ操作を認識します。静電容量式テクノロジでは、 画面と指の電位差を利用します。画面のさまざまな箇所に指が触れると、タッチ ポイントの正確な位 置が割り出されます。これら 3 つの中で光学式が最も安価で、大画面になった場合の信頼性にも優れ ています。ディスプレイが大型化する中で、光学式がより経済的な選択肢となっています。静電容量式 は最も高価ですが、画面上のタッチ ポイントの精度という点で最も信頼性の高い技術です。フォーム ファクターと実装されているテクノロジに応じて、2 つまたはそれ以上のタッチ ポイントをサポート するマルチタッチ対応ハードウェアを使用できます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7 主要なタッチ シナリオ Web の利用・閲覧 電子メールの閲覧と並べ替え 写真の表示 音楽とビデオの鑑賞
Windows Summit 2010 2017/3/2 主要なタッチ シナリオ 1 Web の利用・閲覧 2 電子メールの閲覧と並べ替え 3 写真の表示 4 カジュアル (簡単な) ゲーム Windows 7 の設計段階で、Windows の生産性を向上するタッチの主な用途がいくつか提案されまし た。Web の利用、電子メールのチェック、写真の閲覧などです。これらのシナリオを拡張して、 Windows のユーザー エクスペリエンスを強化することを目指しています。他に音楽やビデオ、ファ イル操作、そしてアプリケーションの使用もあります。ここでアプリケーション開発者が重視すべき点 は、アプリケーションを使用するユーザーにとって最も妥当なシナリオを判断することです。そのシナ リオを特定することが、タッチ テクノロジを利用する上での第一歩となります。 5 音楽とビデオの鑑賞 6 ファイル操作とアプリケーションの使用 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8 Windows 7 でのタッチへの対応状況 Windows Internet Explorer® Windows Media Center
Windows Summit 2010 2017/3/2 Windows 7 でのタッチへの対応状況 Windows Internet Explorer® ジェスチャ - パンおよびズーム 、 フリック - 進む / 戻る ジェスチャ - "リンクを新しいタブで開く " アドレス バー ドラッグ メニュー Windows Media Center フォト ギャラリーのパン オンスクリーン キーボード より大きなトランスポート コントロールと シーク 新しいプレイ ビュー ページと詳細ページ Windows Live® フォト ギャラリー マルチタッチ ズームと回転 XPS ビューアー ジェスチャを中心としたストレッチ ズーム スマート ズーム Windows 7 のタッチ パック Windows 7 の機能開発にあたり、私たちは今述べたようにシナリオを特定し、その実現に向けたアプ リケーション開発に取り組みました。Internet Explorer では、ジェスチャによるパンやズーム、フ リックによる移動が可能です。Web サイトを閲覧しながら、指で画面をクリックしてページを前後に 移動できます。Windows Media Center では、フォト ギャラリーのパンが可能です。フォト ギャラ リーの写真を閲覧しながら、指を使って、左右にナビゲートしたり、画面を左右にパンすることができ ます。Windows Media Center では、オンスクリーン キーボードから自由にテキストを入力すること ができます。また、大きいコントロールが表示されます。これはタッチ テクノロジの使用において重 要です。つまり、ユーザーは指で画面を操作するため、タッチを正確に行えるよう、対象の表面積を大 きくする必要があるということです。各アイテムの間隔も重要な要素です。Windows 7 のオペレー ティング システムでは、[スタート] メニューに指で触れる場合とマウスでクリックする場合で、間隔 が異なります。指を使用する場合は間隔が広くなり、マウスを使用する場合はメニュー アイテム間の 間隔がずっと狭くなります。このほかに Windows Live フォト ギャラリーと XPS ビューアーでも タッチへの対応を進め、タッチ用の各種アプリケーションをセットにした Touch Pack for Windows も提供しています。これは、Microsoft Windows Surface 向けに設計されたアプリケーション群をす べて Windows 7 に移植したものです。同じ機能群を Windows 7 でも使用することができます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9 タッチ対応アプリケーションの 開発ガイダンス
Windows Summit 2010 2017/3/2 タッチ対応アプリケーションの 開発ガイダンス ユーザーは、タッチ アプリ ケーションの “見た目” と “操作性" に ついて期待 ダイレクト マニピュレーションによ る、“見た目” と “操作性”への 高い要求 Windows 7 のタッチ パック 地球の表面: 2D および 3D の タッチ操作による実体験のような 世界探検 特定の場所でのズーム ピンポイントで地域を指定 地域情報の取得 マップ ビューの個人用設定 アプリケーション開発のガイダンスを始めます。まず、ユーザーは、"自然な操作はこうである"、"画 面上で指を動かすとこういう反応がある" という一定のイメージを既に持っています。たとえば、画面 上で 2 本の指を近づけたり離したりすると、ズーム イン/ズーム アウトするといった風にです。ユー ザーが期待したとおりの反応をするアプリケーション開発を心がけてください。タッチ操作は、ユー ザーのイメージと一致するような動きを採用してください。操作があまり複雑にならないように努め、 ユーザーが何をすれば良いのか悩まずにアプリケーションのタスクを実行できるようにしてください。 その典型的な例が、Touch Pack for Windows のサンプル アプリケーション、Surface Globe です。 この地図アプリケーションでは、特定の場所を拡大表示してピンを打つことができます。ユーザーが 2 本の指を近づけたり離したりすると、目的の場所にズーム イン/ズーム アウトします。画面をタッチ するだけで、ピンを打ったり、詳しい情報を表示したりできます。自分専用の地図を作りたい場合は、 長く押し続けると、場所をカスタマイズして名前を付けることができます。これらのシナリオは、最高 のテクノロジによってユーザー エクスペリエンスを向上するために考案されたものです。アプリケー ションの開発にあたって、どのようなシナリオが最適であるか、そしてそのシナリオをより直観的かつ クリエイティブにすることで、ユーザーがどのようなメリットを受けられるかを見きわめることが重要 です。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10 開発層 より良い 良い 最良 マニピュレーション / 慣性 API を使用して、 生データ ポイントを処理 WM_TOUCH
Windows Summit 2010 2017/3/2 開発層 最良 より良い 良い マニピュレーション / 慣性 API を使用して、 生データ ポイントを処理 WM_TOUCH マルチタッチのサポートを追加 - ズーム、パン、回転、慣性によるパン、およびマルチ タップ WM_GESTURE 一般的な Windows メッセージへのマップ – パン、ズーム、右クリック、およびダブルクリック タッチ機能の開発では、"良い"、"より良い"、"最良" の 3 つの開発層を区別します。"良い" は、最高 のテクノロジは利用していないものの、既存のアプリケーションをタッチ対応ハードウェアに移植して いる段階です。既存のアプリケーションをタッチ対応アプリケーションに移行するにあたって、まず既 存のアプリケーションで何が可能か、タッチ対応デバイス上ではどのように動作するかを見きわめる必 要があります。まず、アプリケーションをタッチ対応ハードウェアにインストールして、さまざまな ジェスチャを試し、アプリケーションの応答を確認します。この作業が必要なのは、MouseDown の コードを記述しているが、Windows メッセージから取得したタッチ入力によるジェスチャを処理して いない場合、タッチ対応ハードウェア上でのジェスチャがすべて MouseDown と同等に見なされるた めです。こうした点から、アプリケーションを通常の Windows ハードウェアからタッチ対応ハード ウェアに移行する場合は、アプリケーションの機能がすべて維持され、同様に機能することを確認しま す。これが開発層の "良い" になります。タッチ非対応デバイス上とまったく同じようにアプリケー ションが動作するようにします。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11 ジェスチャ ジェスチャは、ダイレクト マニピュレーションの一歩手前の タッチ アクション ショートカットと同様の効率性を実現するために有用
Windows Summit 2010 2017/3/2 ジェスチャ ジェスチャは、ダイレクト マニピュレーションの一歩手前の タッチ アクション マルチ タップ プレス アンド タップ 縮小/拡大 (ズーム) 円を描く動き (回転) 1 本または 2 本の指を使ったパン フリック ショートカットと同様の効率性を実現するために有用 ズームインのような一貫性のある操作、またはナビゲーション コンテンツにフォーカス: 追加情報の表示またはコンテキスト アクション UI の呼 び出し 設計上の考慮事項 一貫性 - ジェスチャは、複数の Windows アプリケーション間で 同じ方法で動作することが必要 シンプル - ユーザーが多くの抽象概念を理解したり覚えたりしなくても済むように することが必要 次の開発層は "より良い" です。ここでは基本的に、Windows メッセージの 1 つである WM_GESTURE を利用します。マイクロソフトでは、マルチタッチへのサポートの追加を進めていま す。現在、ズーム、パン、回転などの操作が可能です。画面上でのユーザーのタッチ入力に応じてこれ らの新しい Windows メッセージがアプリケーションに送信されます。こうしてアプリケーションが 新しいメッセージを受信するので、これらのメッセージを処理し、対応する操作を実行します。一番上 の層が "最良" です。ここでは WM_TOUCH メッセージの処理を開始します。WM_GESTURE メッ セージと WM_TOUCH メッセージの大きな違いは、WM_GESTURE ではメッセージがあらかじめ定 義されている点です。ユーザーが画面に触れるたびに、2 つの処理が行われます。まず、ユーザーが画 面に触れると、タッチ ポイントの位置を取得します。タッチは 2 本以上の指で行われることもありま す。次に、ユーザーが実行しようとしている操作を識別します。たとえばユーザーが画面上で指を動か していれば、ズーム イン/ズーム アウト、回転、または何か特定の操作をしようとしていると考えら れます。WM_GESTURE は、ユーザーの意図する操作を予測し、タッチ ポイントだけでなく、ユー ザーが実行しようとしている操作を通知します。これはあらかじめ定義された処理であり、"ユーザー がズームを実行しようとしている"、"ユーザーが回転を実行しようとしている" といったメッセージを 通知します。開発者はアプリケーションでの適切な呼び出しを記述します。 一番上の "最良" では、タッチ ポイントのみ取得します。TouchDown、TouchMove、TouchUp の 3 種類の WM_TOUCH メッセージが使用されます。画面上の複数のタッチ ポイントを取得できます。た とえば、ユーザーが画面に 5 本の指で触れると、5 つのタッチ ポイントとその座標を取得します。 ユーザーが画面上で指を動かすと、タッチ ポイントの新しい位置を取得します。ズーム、パン、回転 のどれが行われているのかの判断は開発者が行います。そのため、かなりの部分が開発者の自由になり ます。 ジェスチャとタッチの大きな違いは、ジェスチャでは 2つ のタッチ ポイントだけを処理するという点 です。アプリケーションがジェスチャに対応している場合、ハードウェアが 2 つ以上のタッチ ポイン トをサポートしていても、ジェスチャについては最大 2 つのタッチ ポイントしか取得できません。ア プリケーションで 2 つ以上のタッチ ポイントを処理したい場合は、”最良” にレベルアップして、 WM_TOUCH を使用します。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12 ジェスチャ (続き) ジェスチャは、ダイレクト マニピュレーションの一歩手前の タッチ アクション
Windows Summit 2010 2017/3/2 ジェスチャ (続き) ジェスチャは、ダイレクト マニピュレーションの一歩手前の タッチ アクション マルチ タップ プレス アンド タップ 縮小/拡大 (ズーム) 円を描く動き (回転) 1 本または 2 本の指を使ったパン フリック ショートカットと同様の効率性を実現するために有用 ズームインのような一貫性のある操作、またはナビゲーション コンテンツにフォーカス: 追加情報の表示またはコンテキスト アクション UI の呼 び出し 設計上の考慮事項 一貫性 - ジェスチャは、複数の Windows アプリケーション間で 同じ方法で動作することが必要 シンプル - ユーザーが多くの抽象概念を理解したり覚えたりしなくても済むように することが必要 さて、ここでジェスチャについて説明します。まず、アプリケーションを “より良い” ものにする方法 をお話します。ジェスチャの実体について見ていきましょう。ジェスチャは、ダイレクト マニピュ レーションの一歩手前のタッチ操作です。前述の "良い"、"より良い"、"最良" のピラミッドでは、 ジェスチャは、最良の選択肢であるダイレクト マニピュレーションの 1 段階下に位置します。ジェス チャは Windows プラットフォームであらかじめ定義されており、2 本の指を使ったタップ、プレス アンド タップ、縮小/拡大 (ズーム イン/ズーム アウト)、円運動 (回転)、1 本または 2 本の指を使っ たパン、および各種フリックが使用できます。これらはすべて Windows 7 の一部としてあらかじめ 定義されたジェスチャであり、そのまま使用して、これを基にアプリケーションを設計することができ ます。アプリケーションとシナリオについて考える際は、画面上でのすべての動作をシンプルで一貫し たものにすることを重視してください。そうしなければ、ユーザーがアプリケーションで特定のタスク を実行するのにどのような操作をすれば良いのかわからなくなります。直観的で、機能をすぐに思い出 せるものにしてください。たとえば、指を動かすと、この処理が実行されるというようなシンプルなも のにします。2 本の指をある特定の方向に移動するとアプリケーションは別の動作をする、というよう な複雑なものにしてしまうと、ユーザーはアプリケーションを操作しにくくなります。ですので、抽象 化は行わないでください。できるだけシンプルに保ち、ユーザーがアプリケーションをきわめて直観的 に操作できるようにしてください。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13 Windows 7 のタッチ ジェスチャ Windows Summit 2010 2017/3/2
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14 WM_GESTURE Windows メッセージと API WM_GESTURE、WM_GESTURENOTIFY
Windows Summit 2010 2017/3/2 WM_GESTURE Windows メッセージと API WM_GESTURE、WM_GESTURENOTIFY GESTURECONFIG 構造体 Set/GetGestureConfig() GESTUREINFO 構造体 GetGestureinfo() アプリケーションにジェスチャを実装するためにどのような作業が必要かを見ていきましょう。標準の Windows 開発では、C++ でコードを記述する場合、WM_GESTURE と呼ばれる新しいメッセージを 使用できます。ジェスチャが実行されていることを通知する新しいメッセージです。これをアプリケー ション内で追跡して、適切なコードを記述することができます。Windows メッセージの API として、 WM_GESTURE と WM_GESTURENOTIFY があります。両者とも新しい Windows メッセージです。 GESTURECONFIG 構造体には、アプリケーションでサポートしたいジェスチャを格納します。前のス ライドで紹介したように、Windows 7 には幅広い種類のジェスチャが用意されており、どのジェス チャをアプリケーションでサポートするかを定義できます。また、この構造体には、アプリケーション でサポートするジェスチャのビットマップを保存することができます。また、SetGestureConfig およ び GetGestureConfig という Windows API を介して、GESTURECONFIG 構造体を使用したり、こ れを OS に渡して、アプリケーションが特定のジェスチャをサポートすることを通知したりできます。 次に GESTUREINFO 構造体があります。Windows が画面上のジェスチャを検出するたびに、この構 造体がアプリケーションに渡されます。GetGestureinfo API を呼び出すことで、GESTUREINFO 構 造体のパラメーターを取得して、ユーザーがどのようなジェスチャを実行しようとしているのかを特定 できます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15 ジェスチャと WM_GESTURE の設定 case WM_GESTURENOTIFY: Windows Summit 2010
2017/3/2 ジェスチャと WM_GESTURE の設定 case WM_GESTURENOTIFY: { BOOL bResult; GESTURECONFIG gcAll[] = {0,GC_ALLGESTURES,0}; // Enable all gestures bResult = SetGestureConfig(hWnd, 0, 1, gcAll, sizeof(GESTURECONFIG)); } case WM_GESTURE: GESTUREINFO gi; gi.cbSize = sizeof(gi); bResult = GetGestureInfo((HGESTUREINFO)lParam, &gi); switch (gi.dwID) case GID_BEGIN: break; case GID_END: case GID_ZOOM: //GID_PAN, GID_ROTATE, GID_TWOFINGERTAP, GID_PRESSANDTAP Windows メッセージング API のコード スニペットはこちらのようになります。C++ アプリケー ションのメッセージ ループには、GESTURENOTIFY があります。GESTURENOTIFY メッセージは、 主としてアプリケーションがサポートするジェスチャを定義するためのプレースホルダーです。コード のここの部分で、GESTURECONFIG 構造体を作成し、gc_allgestures というパラメーターを指定し ました。これで、アプリケーションですべてのジェスチャが有効になります。次に構造体を API SetGestureConfig に渡します。これにより、すべてのジェスチャをアプリケーションで使用できるよ うになり、受信したメッセージに応じてアプリケーションを操作できます。このコードで作成されてい る 2 番目のメッセージは、WM_GESTURE メッセージです。WM_GESTURE NOTIFY ですべての ジェスチャを有効にすると、それ以降 WM_GESTURE メッセージを受信するようになります。 WM_GESTURE メッセージ内で GESTUREINFO 構造体を取得し、ユーザーが画面上の指の動きに よってどのようなジェスチャを実行しているのかを判断します。ジェスチャはすべて GID_BEGIN で 始まります。この switch 文には、GID_BEGIN、GID_END、そして GID_ZOOM の case 文がありま す。同様に、GID_PAN、GID_ROTATE など、アプリケーション内で処理したいジェスチャの case 文を使用できます。ジェスチャは常に GID_BEGIN で始まります。たとえば画面上でズームを始める と、GID_BEGIN が送信され、ズームの座標を取得して、ズーム イン/ズーム アウトすることができ ます。最後に、GID_END によりジェスチャが完了したことが通知されます。ユーザーが画面上で 2 本の指を閉じていく動きをしながら、同時に回転させようとしているとします。この時点で、最初の ジェスチャであるズームが開始し、GID_BEGIN、GID_ZOOM の座標、GID_END の順に送信されま す。その後で、ユーザーが回転の動きを続けていれば、回転ジェスチャが発生します。2 つのジェス チャが単一の操作に統合されることはありません。常に先に行われた操作が最初に認識されます。たと えばズームしてから突然パンしようとした場合も、パン メッセージではなくズーム メッセージを取得 します。各ジェスチャは互いに独立しており、それぞれ BEGIN と END があります。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

16 デモ ジェスチャのデモ Windows Summit 2010 2017/3/2
ジェスチャのデモを見てみましょう。最初は一番下の “良い” アプリケーションのデモをご覧いただきます。タッチ対応 ハードウェア上で従来のアプリケーションがどのように動作するかを見ていきます。続いて、新しいアプリケーションに ジェスチャを実装する方法とそのコードについて見てきます。ここでデモを見てみましょう。 "良い"、"より良い"、"最良" の 3 つの開発層があることについては既に言及しました。最初のデモとして、"良い" をお 見せします。タッチ対応ノート PC の HP TouchSmart tx2 を使用します。このノート PC は、Windows 7 のベータ版 リリース時に発売された、かなり最近のモデルで、非常に高品質のタッチ機能が備わっています。現時点で、ドライバー は 4 つのタッチ ポイントをサポートしています。最初に、タッチ デバイス上でレガシー アプリケーションがどのように 動作するかをお見せします。ご覧のアプリケーションは、Windows Vista および Windows XP 向けの一般的なアプリ ケーションで、マウスの動作をサポートしています。MouseDown、MouseUp、マウスの右クリックなどです。タッチ対 応デバイス上でのアプリケーションの動作を見てみましょう。このアプリケーションの上で指を動かすと、複数のタッチ ポイントが表示されます。画面に触れると、メッセージ ボックスに MouseDown イベントが表示されます。指で画面を 押したままにすると、指の周りに円が表示され、右マウス クリックと見なされます。2 本の指を閉じたり広げたりすると、 マウス ホイールの動作が発生します。このデモが示す重要な点は、アプリケーションがジェスチャをサポートしていない にもかかわらず、タッチ デバイス上での各ジェスチャがマウス動作に変換され、アプリケーションに渡されるということ です。タッチ デバイス上でアプリケーションのテストを行い、ユーザーが画面上で行うジェスチャに対するアプリケー ションの応答が一貫していることを確認してください。たとえば、ユーザーが指を閉じたり広げたりしている場合に、マ ウス ホイールのコードの中にズーム イン/ズーム アウトとまったく無関係な処理があると、ユーザーは混乱し、エクス ペリエンスが損なわれます。必ず、ジェスチャとアプリケーションの動作が一貫して対応するようにしてください。この ように 2 本の指でタップすると、画面に触れる頻度に応じて MouseDown または右マウス クリックが発生します。これ は非常に重要な作業で、タッチ対応ハードウェアに移行する最初の段階です。既存のアプリケーションがこれまでと同様 に動作するようにします。 このデモで次に示すのはジェスチャです。新しいアプリケーションを開発するにあたって、アプリケーションをジェス チャに対応させる手順をご覧いただきます。その前に、前のスライドで紹介した 2 つのメッセージ WM_GESTURE と WM_GESTURENOTIFY を処理する必要があります。これは C++ で作成した、とてもシンプルなアプリケーションです。 このアプリケーションのコードを見ていくと、WndProc プロシージャでメッセージの処理を行っています。このコード の最下部で、2 種類のメッセージを処理しています。1 つは WM_GESTURENOTIFY で、最初に処理するメッセージで す。もう 1 つはこの WM_GESTURE です。前述のように、WM_NOTIFY はジェスチャが実行されると最初に送信され るメッセージで、アプリケーションでサポートするジェスチャの種類を設定できます。この GESTURECONFIG 構造体で、 ズーム、2 本指でのタップやその他のジェスチャを処理するよう指定できます。また、アプリケーションですべてのジェ スチャを処理するよう指定することもできます。このように、特定のジェスチャまたはすべてのジェスチャを処理対象に することができます。処理するジェスチャを指定したら、SetGestureConfig API を呼び出して、この構造体を渡します。 これ以降、アプリケーションはジェスチャを取得するようになります。つまり、WM_GESTURE メッセージを受信する ようになります。この部分です。画面上でジェスチャが実行されるたびに、WM_GESTURE メッセージを受信し、 GetGestureInfo で GESTUREINFO 構造体を取得します。構造体にはユーザーが触れた場所の座標と、実行されている ジェスチャの種類が格納されています。前述のとおり、ジェスチャはすべて BEGIN と END で始まります。ここには、 GID_BEGIN、GID_END、ズーム、パンなどの case 文があります。アプリケーションで行いたい処理に合わせて、適切 に処理します。この画面に表示されている case 文それぞれについてアプリケーションを実行し、その結果をおご覧いた だきましょう。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17 デモ ジェスチャのデモ (続き) Windows Summit 2010 2017/3/2
このアプリケーションは、ジェスチャ メッセージを処理します。最初にすべてのジェスチャを有効にします。 ご覧のように、GESTURENOTIFY メッセージを受信しました。すべてのジェスチャが有効になっています。 画面上で指を走らせると、さまざまなジェスチャが発生します。ここで、指をつまむとズームが実行されま す。回転させてみると、ご覧のように回転が発生しています。アクションが発生するたびに、Gesture begin が表示され、ジェスチャの x 座標と y 座標が表示され、最後に Gesture End が表示されます。ユー ザーが実行しようとしている操作に対応した case 文が実行されます。先ほどのように回転しようとすると Gesture begin が表示され、回転ジェスチャが発生し、指で回転させた角度が示されています。最後に Gesture End が表示されます。各ジェスチャには、対応するアクションがあります。ズーム、パンなどです。 アプリケーション内でこれらのメッセージを受信し、適切なコードを記述することで、実行すべき処理を判 定できます。 全体を要約すると、ジェスチャ アプリケーションを記述する場合、アプリケーション内で 2 つのメッセー ジを処理する必要があります。1 つ目が WM_GESTURENOTIFY で、アプリケーションが処理するジェス チャを指定するためのものです。2 番目の case 文が WM_GESTURE です。このメッセージは、アプリ ケーション内でさまざまなアクションを実行するためのものです。ユーザーがズームのジェスチャを実行し た場合、適切なコードと case 文を記述して、アプリケーション内でズーム、パン、回転などのアクション を実行します。処理しないジェスチャについては、DefWndProc を呼び出し、Windows にジェスチャを変 換させることが重要です。たとえばパンを処理したくない場合に、通常のマウス動作に戻す処理を Windows に任せることができます。 このようにして、特定のメッセージについてのみ、Windows の既定の動作を適用することができます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

18 WM_TOUCH メッセージの WM_TOUCH* ファミリ 例 タッチ エクスペリエンスの最適化 標準の Win32 メッセージの提供
Windows Summit 2010 2017/3/2 WM_TOUCH メッセージの WM_TOUCH* ファミリ タッチ エクスペリエンスの最適化 標準の Win32 メッセージの提供 WM_TOUCHDOWN、WM_TOUCHMOVE、WM_TOUCHUP 意味はマウス メッセージと同じ 生のタッチ データを Win32 アプリケーションに伝達 例 指で絵を描く、カスタム ジェスチャ、より高レベルの コントロールの提供 スライドに戻りましょう。ジェスチャのデモを見たので、次の開発層についてお話しします。"良い"、 "より良い"、"最良" という層があることについてお話しました。ジェスチャを実装するのは "より良い " という層でした。次は 1 段階上の "より良い" についてお話します。アプリケーションを "より良い" ものにするには、アプリケーション内で WM_TOUCH を処理する必要があります。この WM_TOUCH メッセージ ファミリを使えば、画面上での複雑なタッチの動きを処理できます。 ジェスチャのデモで示したように、同時に複数のジェスチャを実行すると、そのうちの 1 つのジェス チャだけが変換され、アプリケーションに渡されます。つまり、1 回に 1 つのジェスチャしか処理す ることができません。同時に複数のジェスチャを処理したい場合は、WM_TOUCH を使用します。 WM_TOUCH は、アプリケーションでタッチ メッセージを処理するための最善の手段であり、完全に 最適化されたタッチ エクスペリエンスを実現します。ここでは標準 Win32 メッセージの WM_TOUCHDOWN、WM_TOUCHMOVE、WM_TOUCHUP が使用されます。これらは、マウス メッセージにセマンティクス上きわめて類似しており、MouseDown、MouseMove、MouceUp と同 様に、TouchDown、TouchMove、TouchUp があります。前のスライドで、ユーザーが画面に触れる たびに、2 段階の処理が発生すると述べました。最初のステップは、画面上のどのタッチ ポイントが 触れられたかを判定することです。次のステップは、タッチ ポイントが画面上を移動したときに、 ユーザーがどのような操作を実行しようとしているか判定することです。WM_TOUCH では最初のス テップ、すなわちユーザーが画面に触れたタイミングとそのタッチ ポイントが提供されます。ユー ザーが実行しようとしている操作を実装または判定するには、マニピュレーションを使用する必要があ ります。マニピュレーションについては、以降のスライドで説明します。具体的にどのようなときに タッチを実装するかというと、複数のジェスチャや、Windows が提供していないカスタムのジェス チャといった複雑な処理を行う場合が挙げられます。こうした場合には、WM_TOUCH を使用して、 アプリケーションの応答の制御という、より複雑な処理を行います。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

19 マニピュレーション マニピュレーションとは マニピュレーションでは、生データソースが必要: WM_TOUCH または RTS
Windows Summit 2010 2017/3/2 マニピュレーション マニピュレーションとは タッチ エクスペリエンス最適化のための重要な基礎 より高レベルの API の例 2D アフィン変換 (変換、スケール、回転) サポートされているジェスチャのスーパーセット 複数のマニピュレーションの同時実行をサポート IManipulationProcessor および IManipulationEvents イン ターフェイスの実装 マニピュレーションでは、生データソースが必要: WM_TOUCH または RTS Windows Surface API に類似 WM_TOUCH のメッセージ処理を実装したら、次にユーザーが実行しようとしている操作を判定しま す。前のスライドで述べたように、WM_TOUCH では、ユーザーが画面に触れたときのタッチ ポイン トしか取得できません。ユーザーが画面上で指を動かしたら、どのような操作を実行しようとしている のかを判定する必要があります。マニピュレーションは、こうしたエクスペリエンスの基盤となる機能 です。これはバケットをクリアするための高度な API です。ユーザーが画面に触れると、各タッチ ポ イントに ID が割り当てられます。その指を表すすべての座標をまとめて 1 つのバケットに格納しま す。タッチ ポイントを基に、ユーザーが指をただ動かしているだけなのか、または 2 本指でのズーム イン/ズーム アウトなどを実行しようとしているのかを判定します。マニピュレーション処理によって そうした判定が可能になります。マニピュレーションは、複数の同時マニピュレーションをサポートし ています。ユーザーが回転、拡大縮小、平行移動を同時に行った場合、同じコードでそのすべてを処理 することができます。主要なインターフェイスは、IManipulationProcessor と IManipulationEvents の 2 つです。画面上のタッチ ポイントそれぞれについて ID を取得し、マニピュレーション プロセッ サに渡します。マニピュレーション プロセッサにより画面上での操作が追跡されます。これにより、 イベントのマニピュレーションに対し適切に応答することができます。マニピュレーションには、生 データのソースである WM_TOUCH か、リアルタイム ステータスすなわち RTS が必要です。この点 で、Windows Surface API にきわめて類似しています。Windows Surface ハードウェア API はすべ て Windows 7 パラダイムに移植されています。将来的にはスムーズな移行が可能になり、Windows Surface と Windows オペレーティング システム間でほぼ共通の API 呼び出しが行われるようになる でしょう。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

20 マニピュレーションと慣性の一般的なフロー
Windows Summit 2010 2017/3/2 マニピュレーションと慣性の一般的なフロー contact down ターゲットに対するヒット テスト コンタクト ID のマップに追加 MP->ProcessDown() contact move マッピングの検索 MP->ProcessMove() contact up MP->ProcessUp() 慣性用のコードの初期化 イベント インターフェイスで コールバックを取得 ターゲットに変換を適用 マニピュレーションと慣性の一般的な処理のフローについて説明します。前述したように、マニピュ レーションは 2 つあります。慣性はほぼ同じパラダイムに従っており、マニピュレーション プロセッ サ用の IManipulationProcessor と IManipulationEvents があります。典型的なフローは、 ContactDown から始まります。TouchDown メッセージを受け取ったら、ターゲットに対するヒット テストを実行し、画面上のどのオブジェクトがタッチされているのかを検出します。新しいアプリケー ションでは、さまざまな種類のオブジェクトを使用しているかもしれません。ヒット テストによって、 指が触れているオブジェクトをサンプリングすることができます。次に、コンタクト ID のマップを追 加します。画面に触れている指がそれぞれ持っている一意の ID をアプリケーション内でマップして、 状況を追跡できます。これが済んだら、マニピュレーションの ProcessDown メソッドを呼び出しま す。これにより、ContactDown で任意の種類のマニピュレーションを実行できるようになります。右 クリック メニューの表示や、アプリケーションで実行したい任意のアクションを、マニピュレーショ ン プロセッサの ProcessDown メソッドで実行できます。次のステップは、ContactMove です。コ ンタクトが画面上で動き始めると、マッピングを参照して、どの ID が動いているのかを確認します。 たとえば画面上に 4 本の指があっても、動いているのは 1 本だけかもしれないので、どの指が動いて いるのか、アプリケーションのどの項目が対応しているのかを確認します。そしてマニピュレーション プロセッサの ProcessMove を呼び出して、対応する動作を実行します。ユーザーが 2 本の指を近づ けようとしている場合、その指の近辺のオブジェクトにズーム インするコードを記述します。最後の ステップは ContactUp です。これは WM_TOUCHUP です。ここでも、マッピングを参照してタッチ ポイントの場所を確認し、マニピュレーションの ProcessUp を呼び出して、対応するアクションを実 行します。ContactUp のもう 1 つの特徴として、ユーザーが画面から指を離す際に慣性が生じる場合 があります。ユーザーが動かしていた指を画面から離した時点で、指の動きは一定の速度を持っていま す。ここで慣性のコードを初期化します。ContactUp で慣性動作を開始し、慣性運動の減速率を決定 します。オブジェクトが対応する動作をするように設定します。これらのイベント インターフェイス には IManipulator イベントのコールバック関数が用意されており、こうした基準に基づいてターゲッ トに変換を適用することができます。 では、マニピュレーションと慣性のデモを見ていきましょう。このデモでは、アプリケーションにマニ ピュレーションと慣性を実装するために何が必要かを確認します。C++ のコードで実装方法を確認し、 4 つの四角形を移動するデモをご覧いただきます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

21 デモ マニピュレーションと 慣性 Windows Summit 2010 2017/3/2
それでは、マニピュレーションと慣性について実際にご覧いただきましょう。このデモは基本的に Windows SDK のサンプ ルを使用しています。Windows SDK をインストールすると、このサンプル コードが同梱されています。まず、デモを実行 し、その結果をお見せします。続いて、コードをざっとご覧いただきます。このアプリケーションのコードはかなり複雑で すが、このデモの構築において重要な要素を取り上げて見ていきます。ここに 4 つの四角形があります。このデバイスは、4 つのタッチ ポイントに対応しているので、4 本の指を使ってオブジェクトを操作することができます。ご覧のように、2 本 の指でオブジェクトを動かし、さらにもう 2 本の指で残りのオブジェクトを動かすことができます。ご覧のように、マニ ピュレーションを使用すると、処理の粒度や実行可能な操作を完全に制御できるようになります。先にお見せしたジェス チャのデモでは、特定のジェスチャを実行すると、そのジェスチャのみ処理されることを説明しました。つまり、ズームし ようとすると、ズームのみが実行されます。ズームと回転を同時に実行することはできません。しかしこのデモでは、指を 離してズームを実行できるだけでなく、ズームしながら回転させることもできます。それだけでなく、タッチ API を使用す ることで、指 2 本を黄色の正方形に、もう 2 本の指を緑の四角形に置き、同時にズームおよび回転することが可能ですジェ スチャの操作が完全に忠実に処理されています。これが、開発層の "最良" です。アプリケーションの動作に対する複雑な制 御を実現したい場合は、WM_TOUCH API を実装してメッセージを処理し、アプリケーションでの必要に応じて画面上のオ ブジェクトを変換できるようにします。 では、簡単にコードを見ていきましょう。最初は、最も重要なタッチ ウィンドウの登録処理のコードです。下方にスクロー ルすると、このアプリケーションの最初の方で RegisterTouchWindow API を呼び出しています。この API はとても重要で す。WM_TOUCH メッセージの取得を開始するには、この API を呼び出す必要があります。そして、WM_TOUCH メッ セージを取得し始めると、WM_GESTURE メッセージが無効になります。同時に両方のメッセージを取得することはできま せん。ジェスチャを取得するか、タッチを取得するかのいずれかです。RegisterTouchWindow を呼び出すと、タッチをサ ポートするので WM_GESTURE メッセージは不要であると Windows に通知することになります。RegisterTouchWindow を呼び出すと、それ以降ウィンドウは WM_TOUCH メッセージのみ受信し、WM_GESTURE メッセージは受信しません。 では、メインの WndProc メッセージに移動します。ここに WM_TOUCH の case 文があります。ここで実行している主な 処理は、画面上のさまざまなタッチ ポイントの取得です。タッチの 2 つの側面について、先に述べました。1 つは、ユー ザーが画面に触れると、タッチ ポイントを取得するということ。もう 1 つは、タッチ ポイントを変換して、ユーザーが実 行しようとしている操作を判定することです。WM_TOUCH メッセージの場合は、タッチ ポイントとその位置が取得される だけです。画面上での指の動きを特定の操作に変換するには、イベントのマニピュレーションを実装する必要があります。 これには IManipulationProcessor と IManipulationEvents を使用します。コードを見ると、画面の右側に各種イベントに 対応するファイルがあります。これが、マニピュレーション開始後の処理のソース コードです。ユーザーが画面上で手を動 かすと、ManipulationDelta を実行します。ユーザーが画面から指を離し、マニピュレーションが完了すると、 ManipulationCompleted を実行します。コードは複数のセグメントに分割されており、ユーザーが画面にタッチしたり、指 を動かしたり、画面から指を離したりした際に発生するイベントを、それぞれのセグメントで処理しています。右側にプロ ジェクトの一部として表示されている他のファイルは、描画オブジェクトです。これを使用することで、四角形を画面上に 描画できます。ユーザーが 2 本の指でズーム イン/ズーム アウトすると、動きに合わせてオブジェクトを再描画できます。 COM タッチ ドライバーもあります。これは Windows ドライバーとは異なり、描画処理専用のドライバーです。このよう に、読みやすく、すぐ理解できるように、コードを複数のセグメントに分割しています。このサンプルをぜひお試しくださ い。背後で行われる処理をさまざまな角度から見ていくことができ、Windows のタッチ メッセージ処理が完全に再現され ています。タッチ機能を利用して Windows メッセージを処理できるようになれば、操作の実行方法を完全に制御できます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

22 デモ マニピュレーションと 慣性 (続き) Windows Summit 2010 2017/3/2
次に、慣性について説明します。再度デモを実行しましょう。先ほどお見せしたように、オブジェクトを動か して、ズーム イン/ズーム アウト、回転を実行できます。これらはすべてマニピュレーションです。マニピュ レーション プロセッサの一部として、慣性プロセッサがあります。このオブジェクトを動かして、指を離すと、 ご覧のように画面の端で跳ね返ります。これが慣性プロセッサであり、マニュピュレーションと同じく、制御 可能な特性です。タッチ ポイントを取得したら、マニピュレーション プロセッサに渡します。マニピュレー ションが完了したら、同じ座標を慣性プロセッサに渡します。慣性プロセッサはマニピュレーション実行時の 指の移動速度を割り出します。その後、指定された減速率でオブジェクトを減速します。慣性プロセッサの利 用により、アプリケーションのユーザー エクスペリエンスを向上することができます。ここで、4 つすべての オブジェクトを動かすと、画面上のすべてのタッチ ポイントに対して同時に慣性が生じます。このデバイスが 処理するタッチ ポイントの数は 4 個ですが、最大 10 個のタッチ ポイントをサポートするデバイスもありま す。画面上で 10 本すべての指を使ってさまざまなタスクを実行し、状況に応じてアプリケーションで適切な 反応を返すことができます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

23 Surface マルチタッチ API & コントロール
Windows Summit 2010 2017/3/2 .NET タッチの開発ロードマップ NET 4.0/Surface 2.0 リリース Windows 7 リリース ネイティブ Win32 アプリケー ション WinForms アプリケー ション WPF アプリケー ション Surface アプリケーション Surface SDK 1.0 Surface SDK 2.0 Surface マルチタッチ API & コントロール マルチタッチ コントロール マルチタッチ API マネージド ラッパーと相互運用 マネージド ラッパーと 相互運用 WPF 3.5 SP1 WPF 4.0 WPF 3.5 マルチタッチ API とコントロール スライドに戻りましょう。このデモでは、マニピュレーションと慣性の使用例と、IManipulation プロ セッサと慣性プロセッサの基本的なコードについて説明しました。コードについて、細部までは説明し ませんでしたが、既にお伝えしたようにこのコードは Windows SDK のサンプルとして提供されてい ますので、実際にご覧になって、皆様のアプリケーションでどのように利用できるか検討してください。 ここで紹介したコードは、すべてサンプル コードであって本番用のコードではありません。実装方法 をご理解いただくことを目的としています。アプリケーションのシナリオ設計を完了した後、コードを 記述する際に同じ方法を利用することができます。 次は .NET 開発についてです。これまでジェスチャやマニピュレーションなどのネイティブ コード開 発について説明しました。.NET もその 1 つです。このスライドは、Windows のリリースに伴 う .NET タッチ開発のロードマップを示しています。また、先に述べたように、タッチ API を実装し た Surface ハードウェアが既に存在し、Windows Vista を基盤としています。WPF 3.5 プラット フォームをサポートしており、独自の API、独自のコントロール群、および Surface ハードウェア上 で稼働する独自のアプリケーション群を備えています。Windows 7 ではさらに進んで、独自のマルチ タッチ API が実装されています。先のスライドで見た WM_GESTURE、WM_TOUCH、およびその関 連 API について、Windows 7 は独自の API を実装しているため、マネージ アプリケーションを作成 することができます。また、マネージ ラッパーおよび相互運用機能によって、WinForms や WPF ア プリケーションなどの .NET アプリケーションを作成することができます。.NET 4.0 では、Surface と Windows で共通の API を .NET 4.0 Framework に含める予定です。これによって、.NET でアプ リケーションを作成し、Surface ハードウェアの場合と同様、Windows にも簡単に移植できるように なります。WPF 4.0 を使用して作成した同じアプリケーションを、Surface と Windows 7 で実行で きます。ハードウェアを切り替えても完全に動作が再現されます。Surface 2.0 SDK でさらなる機能 強化を行い、WPF 4.0 のコモン コントロールをすべて追加し、Surface 固有のコントロールは少数に とどめる予定です。.NET 4.0 Framework と共にリリースされるこの WPF 4.0 プラットフォームで は、ほとんどのコントロールや API が共通になります。 Windows 7 Surface ハードウェア Windows Vista Surface ハードウェア Windows 7 マルチタッチ API © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24 Windows 7 のマルチタッチ ネイティブ .NET 4 Silverlight ジェスチャ 生のタッチ マニピュレーション 慣性
Windows Summit 2010 2017/3/2 Windows 7 のマルチタッチ ネイティブ Windows SDK .NET 4 WPF Silverlight Silverlight3 ジェスチャ マニピュレーションを通じて使用可能 生のタッチ マニピュレーション 慣性 .NET 3.5 マルチタッチ ライブラリ このスライドでは、各種 .NET Framework におけるマルチタッチを比較しています。ジェスチャのサ ポート、生のタッチのサポート、マニピュレーション、慣性の項目があります。各列は、ネイティブ アプリケーション、.NET 4.0 アプリケーション、Silverlight アプリケーションを表しています。ネイ ティブ SDK ではジェスチャがサポートされており、WM_GESTURE メッセージを使用できま す。.NET 4.0 では、まずマニピュレーションが処理されるようになりました。基本的に、すべての ジェスチャをマニピュレーションを通じて変換することができます。.NET 4.0 と Silverlight では、 生のタッチがサポートされています。ネイティブと .NET 4.0 の両方で、ダイレクト マニピュレー ションがサポートされています。Silverlight 3 はマニピュレーションには直接対応していませんが、 生のタッチには対応しています。類似のコードを実装することもできます。一番右の列は .NET 3.5 で す。.NET 3.5 は Windows 7 のリリース以前から提供されており、現在もライブラリを通じて一定の サポートが提供されています。このライブラリ群は CodePlex で入手できます。このプレゼンテー ションの終わりに、他の資料と共に URL を紹介します。このライブラリ群を使用すると、.NET 3.5 のコードにタッチ、マニピュレーション、慣性を実装することができます。.NET 4.0 では、これらの 機能はフレームワーク固有のクラスであり、コード内のマニピュレーションを直接処理できます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

25 .NET 4.0 におけるマルチタッチと マルチキャプチャ
Windows Summit 2010 2017/3/2 .NET 4.0 におけるマルチタッチと マルチキャプチャ UIElement 上のマルチタッチ マニピュレーションと慣性 (パン、ズーム、回転) イベント UIElement、UIElement3D、および ContentElement 上の生のマ ルチタッチ イベント (上、移動、下) 複数のアクティブ コントロールをサポートする複数の キャプチャ マルチタッチ パンをサポートするための ScrollViewer 拡張機能 タッチ デバイスの機能拡張 マルチタッチとマルチキャプチャについてお話します。マイクロソフトは、生のタッチ イベントに加 え、特定のコントロールに対する複数のタッチと、それに伴う慣性、パン、ズームなどを UIElement の既定のイベントとして使用できるようにしました。.NET 4.0 では、API で何を実行すべきかを考え なくて済むように、これらすべての要素を導入しています。皆様はこれらのイベントに対するアプリ ケーションの特定の UI の処理を記述した独自のコードを作成すればよいだけです。イベントの発生と、 WPF アプリケーションへの公開は直接関係しています。また、マルチキャプチャにより、複数のアク ティブなコントロールをサポートできます。すなわち画面上に複数のタッチ ポイントがある場合、各 コントロールで個別にイベントが発生しますが、これらすべてのタッチ ポイントを処理するコードを 書くことができます。また、拡張機能 ScrollViewer を使用することができます。ScrollViewer から派 生した UI コントロールは、既定でマルチタッチのパンをサポートしています。ユーザーが画面をパン すると、スクロール バーがスクロールのメッセージを取得してスクロールを開始します。.NET Framework で使用できる既定のイベントの他に、拡張機能を実装することができます。独自のイベン トを指定したい場合、たとえば 3 本の指が特定のコントロールに触れ、同じ方向に動いているという イベントを新たに作成し、独自に定義したい場合は、タッチ デバイスの機能を拡張して独自の UI コ ントロール イベントを定義することで、適切にイベントを処理することができます。 これから、非常にシンプルなタッチ対応アプリケーションのデモをお見せします。TouchDown、 TouchUp、TouchMove の各イベントが WPF アプリケーションでどのように処理されるかを見てい きましょう。このアプリケーションで、複数のタッチ ポイントを使って単純な UI 要素をキャンバス に描画する方法を見ていきます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

26 デモ WPF タッチ アプリケーション Windows Summit 2010 2017/3/2
これは、WPF を使用した .NET アプリケーションのデモです。.NET Framework で強化されたマニピュレー ションおよびタッチ機能を使用する方法をご覧いただきます。このデモ用アプリケーションはとてもシンプル です。メイン ウィンドウのキャンバスでマニピュレーションを実行します。このキャンバスのイベントとして、 TouchDown イベント、TouchMove イベント、TouchUp イベントを指定しています。各イベントについて、 必要な処理を実行するコードはほんの数行です。実際にコードを見ていきましょう。 ここに 3 つのイベントがあります。ユーザーが画面を指で触れると、TouchDown イベントが発生します。 ユーザーが画面上で指を動かすと、TouchMove イベントが発生します。そして、ユーザーが画面から指を離 すと、TouchUp イベントが発生します。画面上の各タッチ ポイントについて TouchDown、TouchMove、 TouchUp を取得し、適切なコードを記述することができます。このサンプルを実行してみましょう。続いて コードを見ていきます。 キャンバスをフル スクリーン表示しています。指の軌跡に沿って移動する円が描画されます。ご覧のとおり、 2 本の指を使うと 2 色で表示されます。4 本の指を使うと、4 色で表示されます。これはとても簡単なサンプ ルです。TouchDown で、タッチのウィンドウ座標を判定します。TouchMove で、ユーザーの指の動きを検 出します。そして TouchUp で、画面からオブジェクトを削除します。ご覧のとおり、タッチ ポイントを 3 つ または 4 つに増やしても、それぞれがオブジェクトの動作に対応付けられています。 これを実装するためのコードを見てみましょう。TouchDown では円を描画して、キャンバス上のタッチ ポイ ントを取得し、TranslateTransform を実行して、オブジェクトの x 座標および y 座標を取得しています。そ の後、作成したすべての図形の配列リストを保持します。作成されたタッチ ポイントが 1 つか複数かに応じて、 作成されたこれらすべての図形のコレクションを作成します。そして、このコレクションに図形を追加します。 TouchDown の処理は以上です。指が画面に触れるたび、円を作成し、その円をコレクションに追加します。 TouchMove では、この円をユーザーの指の位置に沿って移動させます。ここでは、TranslateTransform を 呼び出し、図形の新しい位置を設定する RenderTransform を実行します。このたった 1 行のコード、図形の RenderTransform によって図形の変換を実行することができます。次に、新しい位置の x 座標と y 座標を取 得し、図形をその場所に配置します。指が画面に触れると、初期座標を取得します。指を新しい座標に移動す ると、毎回新しい座標を取得し、図形の RenderTransform を実行することができます。ユーザーの指が画面 上を動くのに沿って、図形は滑らかに移動します。ユーザーが画面から指を離すと、TouchUp イベントが発生 します。ここでの処理は、ReleaseTouchCapture を実行後、コレクションから図形を削除するだけです。こ れによってオブジェクトが削除されます。新しいタッチ ポイントが発生したら、コレクションに新しい円を追 加します。タッチ ポイントが失われると、TouchUp が発生するので、コレクションから図形を削除します。 これは、TouchUp、TouchMove、TouchDown というイベントを使用したきわめてシンプルな実装です。こ れらのイベントは、キャンバスの WPF アプリケーション イベントから直接公開されます。必要な作業は、こ れら 3 つのイベントのコードを記述して、アプリケーション内で適切な処理を実行するだけです。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

27 WPF によるマニピュレーション キャンバス ManipulationStarting イベントの 処理 マニピュレーション コンテナー
Windows Summit 2010 2017/3/2 WPF によるマニピュレーション IsManipulationEnabled=true IsManipulationEnabled=true キャンバス ManipulationStarting イベントの 処理 マニピュレーション コンテナーの設 定 マニピュレーション コンテナー ManipulationDelta イベントの処理 マニピュレーション コンテナーに相 対する座標 スライドで .NET Framework のマニピュレーションについて説明した後、マニピュレーションのデモ をもう 1 つご覧いただきます。 デモで示したように、Windows タッチは .NET アプリケーションに簡単に実装できます。数行のコー ドを記述するだけなので、.NET 開発者にとってはたやすい作業です。この新しいユーザー エクスペリ エンスを実現することで、クリエイティブで、より直観的なアプリケーションをユーザーに提供できる ようになります。 アプリケーションの強化方法についてもう少し掘り下げて見ていきましょう。WPF、すなわち Windows Presentation Foundation のマニピュレーションについて説明します。マニピュレーション の第一の特徴は、オブジェクトとコンテナーで有効にする必要があるということです。シンプルなキャ ンバスに画像オブジェクトが配置されています。画像オブジェクトと同様にコンテナーについても IsManipulationEnabled が true であるか確認する必要があります。次に、ManipulationStarting イ ベントを処理し、マニピュレーション コンテナーを設定します。次に、マニピュレーション コンテ ナーを通じて、タッチ ポイントの位置を確かめます。ManipulationStarting イベントが発生した時点 で、初期のタッチ ポイントを取得します。ユーザーが画面上で指を動かすと、ManipulationDelta イ ベントが発生します。ManipulationDelta イベントでは、あらゆる種類の変換を行うことができます。 よってオブジェクトの拡大縮小、平行移動、回転などが ManipulationDelta イベントで実行できます。 ManipulationDelta イベントで取得するパラメーターは、タッチ ポイントの新しい座標と、指の移動 角度または新しい位置です。以上が、マニピュレーション コンテナーに関する処理です。これらの処 理と同時に、UpdateRenderTransform を実行します。すなわち、ManipulationDelta イベントが発 生するたびに、オブジェクトの UpdateRenderTransform を実行します。2 本の指が画面に触れてお り、指が互いに離れたり近づいたりしている場合は、オブジェクトの RenderTransform を実行し、 ManipulationDelta イベントでオブジェクトの拡大縮小を行います。タッチ イベントが発生し、指が 画面上を一定の速度で移動している場合は、慣性を適用します。これらすべてのアクションを WPF に 実装するには、オブジェクトの RenderTransform を呼び出して、マトリックスに適用する新たな変 換を指定し、指が触れているオブジェクトを新しい位置または新しい図形で再表示します。 RenderTranform の更新 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

28 マニピュレーション イベント Touch Down (初期) Touch Move Touch Up (すべて)
Windows Summit 2010 2017/3/2 マニピュレーション イベント Touch Down (初期) Touch Move Touch Up (すべて) 開始中 開始済み 差分 完成の 開始中 完了 初期化: モード コンテナー ピボット マニピュレーション イベントには、TouchDown イベント、TouchMove イベント、TouchUp イベン トがあります。先のデモで見たこれらの 3 つのイベントのほかに、マニピュレーションの開始中 (Starting)、開始済み (Started)、デルタ (Delta)、慣性の開始中、デルタ、そして完了 (Completed) といった新しいイベントが存在します。これらは .NET Framework を通じて提供される新しいイベン ト群で、アプリケーション内で使用することができます。通常は、慣性が開始中になるか、マニピュ レーションのデルタが終了すると、慣性を開始し、適用された慣性の度合いに応じてオブジェクトを新 しい場所に移動します。完了したら、イベントをアプリケーションに返して、イベントを適切に処理で きるようにします。 StartInertia() StartInertia() Completed() © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

29 WPF によるマニピュレーション Windows Summit 2010 2017/3/2
void image_ManipulationStarting(object sender, ManipulationStartingEventArgs e) { e.ManipulationContainer = canvas; } void image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) var element = e.Source as FrameworkElement; if ( element != null ) var deltaManipulation = e.DeltaManipulation; var matrix = ((MatrixTransform)element.RenderTransform).Matrix; Point center = new Point ( element.ActualWidth/2, element.ActualHeight/2) ; center = matrix.Transform(center); matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, center.X, center.Y); matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y); matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y); ((MatrixTransform)element.RenderTransform).Matrix = matrix; これらのさまざまなイベントについて、簡単なサンプル コードを確認し、続いてデモを実行します。 ここでは、WPF でマニピュレーションを実行します。このサンプル コードでは、 ManipulationStarting と ManipulationDelta を処理します。ManipulationStarting は、キャンパス をマニピュレーション コンテナーに設定するだけなので、コードはたった 1 行で済みます。 ManipulationDelta では、マトリックスに対する変換を行っています。matrix.RotateAt、 matrix.Translate、matrix.ScaleAt があります。これらを用いることで、オブジェクトの拡大縮小、 回転、平行移動が可能になります。ユーザーが指と指を近づけると、触れられているオブジェクトを縮 小します。指が一定の角度で回転している場合は、matrix.RotateAt を呼び出します。 ManipulationDelta イベントにこれら 3 つのマトリックスを含めれば、後はどのイベントで処理する かを決めるだけで、ユーザーの操作に応じて、オブジェクトが自動的に回転、拡大縮小、または平行移 動されます。.NET Framework では、この必要最低限のコードを記述すれば、マニピュレーションを 実装できます。これに対し、ネイティブ アプリケーションのデモでは、複数のコンテナーに 5 種類の ファイルと描画オブジェクト ファイル、そして 50 行のコードが必要でした。WPF では、ずっと簡単 にアプリケーション内でマニピュレーションを実行できます。ScaleAt、RotateAt、Translate の 3 行のコードを記述して、アプリケーションでマニピュレーションを実行するだけで済みます。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

30 デモ WPF マニピュレーション Windows Summit 2010 2017/3/2
では、WPF のマニピュレーションの簡単なデモを見ていきましょう。ScaleAt、RotateAt、Translate につ いて見ていきます。画像を表示し、回転させたり平行移動させたりできる WPF アプリケーションの作成がい かに簡単かをご覧に入れましょう。また、慣性を実装する方法についても見ていきます。では、デモを見てみ ましょう。 このデモでは、.NET Framework での、WPF を使用したマニピュレーションを見ていきます。前回同様、シ ンプルなキャンバスがあります。このキャンバスで、ManipulationStarting、ManipulationDelta、 ManipulationInertiaStarting の 3 つのイベントを処理します。ユーザーが画面に触れると、これらのイベン トが処理されます。複数の指でズームイン/ズームアウト、パンなどをする場合も基本的にこれらのイベント が処理されます。 コードを詳しく見ていく前に、まずはこのアプリケーションを実行してみましょう。キャンバス上に画像が表 示されています。指を使って画像をドラッグすることができます。複数のタッチ ポイントを使用できます。 ご覧のように、同時に 2 枚の画像を指で移動できます。また、ユーザーは画像にズーム イン/ズーム アウト できます。ズーム イン/ズーム アウト効果はこのとおりです。ズーム イン/ズーム アウトしながら画像を回 転することもできます。このように、指を使って簡単に回転できます。このデバイスは 4 つのタッチ ポイン トに対応しているので、複数の画像に対して同時にこのような操作を実行できます。また、慣性効果も実装さ れています。画像を動かして指を離すと、画像は同じ動きを続けます。ご覧のように画像を動かすと、若干の 慣性が働き、指が離れても同じ方向に動いていきます。これらを .NET コードで実装することができます。先 ほどお見せしたように、C++ を使用したネイティブ コードでは、少なくともファイルは 5 つあり、それぞ れに数セグメントのコードが記述されていました。 同じのコードの .NET 実装について見てみましょう。先に述べたように、ManipulationStarting、 ManipulationDelta、ManipulationInertiaStarting という 3 つの異なるイベントのコードを作成します。各 イベントのコード ビューに移動しましょう。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

31 デモ WPF マニピュレーション (続き) Windows Summit 2010 2017/3/2
ManipulationStarting、ManipulationDelta、ManipulationInertiaStarting の 3 つのイベントがあります。 これら 3 つの主要イベントのコードを作成します。ManipulationStarting イベントは、ユーザーが画面に触 れると開始します。画面へのタッチをキャプチャし、そのタッチ用のマニピュレーション コンテナーを設定 します。コードでは、マニピュレーション コンテナーに this を設定して、マニピュレーション コンテナー の実体を指定し、またその処理を行うことを明示します。ManipulationStarting での作業はこれで以上です。 次は ManipulationDelta です。ManipulationDelta は、画面上で特定の操作が行われると開始します。たと えば、ユーザーが指を画面に付けて動かすと ManipulationDelta イベントが発生します。指が動くたびに新 しい座標位置を取得します。ここに 3 種類の変換処理、ScaleAt、RoateAt、そして Translate が記述されて います。これら 3 つの変換処理を実行します。このような変換用のマトリックスを作成すると、ユーザーが 指を広げているのか、回転しているのか、自然に動かしているだけなのかに応じて、コードは適切な座標を実 行します。ユーザーが指を閉じていて、かつ両方の指を同じオブジェクトの上に置いている場合は、ScaleAt を実行します。指が一定の角度で回転している場合は、RotateAt です。この場合も、正しく機能するには、 両方の指が同じオブジェクトの上に置かれている必要があります。指がそれぞれ別のオブジェクトの上に置か れている場合は、拡大縮小は行われず、平行移動だけが行われます。ご覧のように、3 行のコードで拡大縮小、 回転、平行移動を実行できます。Windows .NET Framework により適切なイベントが開始され、処理され ます。コードについて、ManipulationDelta では ScaleAt、RotateAt、Translate を記述するだけで終わり です。その結果、指の動きに沿って画像を回転、ズーム イン/ズーム アウト、または移動することができま す。慣性は、ManipulationInertiaStarting によって生成されます。ユーザーが画面から指を離すと、慣性が 生成されます。ここで必要な作業は、DesiredDeceleration を指定することです。ここでは、慣性による速 度の低下率を指定しています。ユーザーが画面から指を離すと、オブジェクトはそのままの方向に移動し、減 速してある点で停止します。境界に達した場合は、跳ね返ります。この特別なコードで、画面の端に到達した かどうかを判定します。画面の端に到達したら、bounce を適用します。つまり、オブジェクトが端に到達し たら正反対の方向へ動かします。ただし、この処理は任意です。このコードでの主な処理は、拡大縮小、回転、 平行移動です。どのアプリケーションでも 3 行の簡単なコードを記述するだけで、これを実行できます。こ のプレゼンテーションの 2 つ目のデモで見た C++ コードのような面倒な作業は必要ありません。 もう一度デモを実行した後、スライドに戻ります。指を動かすと、シンプルな平行移動が行われます。 matrix.Translate が実行されています。特定のオブジェクトに乗せた 2 本の指を動かすと、ズーム イン/ ズーム アウトを実行します。ご覧のようにズーム イン/ズーム アウトが実行されます。そして回転です。角 度をつけて指を動かすと、オブジェクトが回転します。これは .NET Framework のかなりシンプルな実装で す。.NET Framework は Win32 API をカプセル化しており、バックグラウンドで多くの処理を実行するの で、とても簡単にイベントを処理でき、何をすればよいか悩まずに済みます。では、スライドに戻りましょう。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

32 皆様へのお願い ご紹介した設計方針を実装してください。 直観的で、複雑でないタッチ エクスペリエンスを 実装してください。
Windows Summit 2010 2017/3/2 皆様へのお願い ご紹介した設計方針を実装してください。 直観的で、複雑でないタッチ エクスペリエンスを 実装してください。 アプリケーションの生産性と使いやすさを向上させる シナリオを設計してください。 『リソース』セクションに掲載されている資料を活用 してください。 このセッションの発表について、 評価フォームへの記入をお願いいたします。 タッチ テクノロジの利用によって、ネイティブ アプリケーションおよび .NET アプリケーションで何 が可能になるかをご理解いただけたことと思います。ここまでのデモとプレゼンテーションを通じて、 アプリケーションのシナリオの検討方法や、ネイティブ コードと .NET コードのどちらを使うかと いった実装方法について、何らかの感触がつかめたのではないでしょうか。 皆様へのお願いとして、このプレゼンテーションで説明した設計原則を実践していただきたいと思いま す。今回、アプリケーションの機能を活かすためのさまざまなシナリオについてお話しました。アプリ ケーションのこうした新しい使用法がユーザーに与える影響について検討してください。直観的で複雑 でない、一貫したタッチ エクスペリエンスを提供するよう心がけてください。複雑な操作が必要にな ると、ユーザーは使い方がわからず、先に進めません。ですから、できるだけシンプルなものに留めて ください。アプリケーションの生産性と使いやすさが向上するようなタッチ エクスペリエンスを提供 してください。自然な操作で、快適にアプリケーションを使用できるようにしてください。タッチは、 ユーザーにとって非常にパーソナルな機能です。画面に触れて操作を実行したら、アプリケーションが 思い通りに応答することをユーザーは望んでいます。ユーザーがどのようにアプリケーションを使うだ ろうか、ということを常に念頭に置いてください。また、次のスライドに記載されている資料およびリ ソースを活用して、UI ガイダンス、タッチの用途、タッチ インターフェイスの実装方法を検討してく ださい。シナリオの策定やコード作成に役立つリソースが豊富に用意されています。また、このプレゼ ンテーションの評価フォームへの記入もよろしくお願いします。このプレゼンテーションの内容に対す る皆様のご意見をお聞かせください。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

33 リソース MSDN に掲載されている Windows タッチの情報
Windows Summit 2010 2017/3/2 リソース MSDN に掲載されている Windows タッチの情報 Windows ユーザー エクスペリエンス インタラクションの ガイドライン 開発者向け Windows タッチと Tablet PC 用拡張機能 Windows タッチの開発者向けリソース タブレットとタッチ SDK Windows 7 の Microsoft タッチ パック for-windows-7 入手可能なリソースの一部をこちらに示しました。MSDN に Windows タッチ関連の記事があります。 API が網羅されており、アプリケーションへのタッチ機能の実装方法を学習できます。また、ユーザー エクスペリエンス インタラクションのガイドラインでは、ユーザーがアプリケーションに何を期待す るか、また、より直観的で生産性が高いアプリケーションを実現するために何が必要かを説明していま す。マイクロソフトのサイト内の『開発者向け Windows タッチと Tablet PC 用拡張機能』には、ア プリケーション開発に役立つ機能強化に関する記事があります。マイクロソフトの Web サイトには、 他にも開発者向け資料が用意されています。また、最後の Microsoft Touch Pack for Windows 7 に は、Microsoft Surface から Windows 7 へ移植されたアプリケーション群がすべて収められています。 これらのアプリケーションにおける、さまざまなタッチの実装をチェックしてみてください。アプリ ケーションに実装するシナリオについて、良いヒントが得られるはずです。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

34 Windows Summit 2010 2017/3/2 ご視聴いただき、誠にありがとうございました。引き続き、このイベントをお楽しみください。ありが とうございました。 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.