連載
» 2011年10月03日 00時00分 UPDATE

Silverlightベースで作るWP7アプリ開発入門(4):Windows PhoneのMetro UIをタッチでジェスチャ操作 (1/3)

[泉本優輝,WP Arch]

Windows PhoneのWeb Marketplaceが開設!

 先日、PCのWebから見られるWindows Phoneのアプリストアの名称が「Windows Phone Marketplace」から「Web Marketplace」に変わり、デザインが一新され日本語で分かりやすくなりました。

 また、Android Marketと同様にPCのWebでアプリを購入/入手すると、自動的に使っているWindows Phone端末にアプリがインストールされるようになりました。Windows Phoneユーザーが手軽にアプリを検索・入手てきるようになり、ますます、アプリ開発者にはうれしい状況になってきています(参考:Microsoft、Mangoのテザリング機能とアプリストアの新機能を発表 - ITmedia ニュース)。

r13kni_bor_rou_sha_w400.jpg

 前回の「PanoramaでWindows Phoneならではの横スクロール」では、開発環境のアップデートとMetro UIのPanoramaとPivotについて紹介しました。今回はタッチパネルによるWindows Phoneのジェスチャについて紹介します。

Windows Phoneでできる6種類のジェスチャ

 Windows Phoneはハードウェア仕様で4点以上のマルチタッチができるように定められています。またUI Design Guidelineではジェスチャの動作が図解されています。

 まずはジェスチャをおさらいしましょう。

【1】Tap(タップ)

r1301.gif

 タップは、有効な領域で画面上に指を置き、離します。いわゆるマウスクリックと同じ位置付けですね。ジェスチャの中で最も一般的でシンプルなものが、このタップです。

【2】Double Tap(ダブルタップ)

r1302.gif

 タップを素早く2回続ける動作がダブルタップです。マウスではダブルクリックと同じ位置付けになりますが、モバイル端末ではタップで選択・決定を行うからか、明示的にダブルタップを利用すると書かれている場合以外は、あまり使われていないように思います。

【3】Tap&Hold(タップ&ホールド)

r1303.gif

 タップ&ホールドは名前のように画面を一定時間押したままにするジェスチャです。Windows Phone OSでは、コンテクストメニューの表示やホーム画面で並べ替えるタイルの選択などに使われています。

【4】Pan(パン)

r1304.gif

 パンはタッチパネルを指で“なぞる”ように操作するジェスチャです。主にオブジェクトを直接選択し、移動させたり並べ替えたりするときに使われます。パンは指がタッチパネルに触れ、移動させたときに始まり、タッチパネルから指を離したときに終了するジェスチャです。タップ&ホールドと組み合わせて、ホーム画面のタイルの並べ替えなどに使われています。

【5】Flick(フリック)

r1305.gif

 パンが“なぞる”ならば、フリックは“はらい”の動作に似ています。パンがオブジェクトの選択に対し、フリックはパネルや画面といった大きな領域を選択、移動に利用されているジェスチャです。例えば、前回紹介したPanoramaやPivotのパネルの移動が、これに当たります。

【6】Pinch and Stretch(ピンチ・アンド・ストレッチ)

r1306.gif

 では、マルチタッチを利用したジェスチャで、よくコンテンツのズームに利用されています。まずピンチと呼ばれる“つまむ”動作でコンテンツを選択し、ストレッチと呼ばれる指を広げる動作でコンテンツをズームインします。また、ズームインしたコンテンツは、これと逆順にジェスチャを行うことでズームアウトができるのが一般的です。

 おさらいができたら、実際に次ページでジェスチャを使ったサンプルを開発してみましょう。

       1|2|3 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。