Devsumi 17 d-2

Developers Summit 2011

池原大然ンフラジステゖックス・ジャパン

デベロッパーエバンジェリスト

17-D-2

押さえておこう！モバイル開発におけるUX の考え方


自己紹介

池原大然（Neri）

ンフラジステゖックス・ジャパン

INETA 登録スピーカー

TwitterID: @Neri78

Blog http://blogs.jp.infragistics.com/

blogs/dikehara/default.aspx

http://blogs.jp.infragistics.com/blogs/dikehara/default.aspx






3 年前は

開発サポート部門リーダ

販売製品の技術サポートを担当


現在

デベロッパーエバンジェリスト

講演・執筆活動

プリセールス

トレーニング運営


NetAdvantage シリーズ


本日お話しさせて頂くこと

Windows Phone 7 ゕプリケーション開発について

PC vs モバルその違い

Windows Phone 7 に見るモバルならではの UI・UX

ンフラジステゖックスの取り組み


Twitter 実況中!!

ポント各種リンクは

@IGJP にて随時実況します!



注意点

日本では Windows Phone 7 はキャリゕから販売されていません

開発ツールは英語版を一部使用しているので日本語版がリリースされた際に表記が変わる可能性があります


Windows Phone 7 アプリケーション開発について


開発環境の構築

AppHub http://create.msdn.com/ja-JP/ Windows Phone 7 と Xbox 360用

Windows Phone Developer Tools (WPDT) を取得する

http://create.msdn.com/ja-JP/




Windows Phone Developer Tools

無料の開発環境 Visual Studio 2010 Express

for Windows Phone

Windows Phone Emulator Resources

Silverlight 4 Tools For Visual Studio

XNA Game Studio 4.0

Microsoft Expression Blend for Windows Phone

ただし、英語版


使用できるフレームワーク

Silverlight for Windows Phone

業務ゕプリケーション、ツール

パフォーマンスが要求されないゲーム

Silverlight 3 + α

4 の機能を一部

C#/VB

VB は制限あり

XNA Game Studio 4.0

高いパフォーマンスを要求されるゲーム

C# のみサポート


日本語リソース

Windows Phone デベロッパーセンター http://msdn.microsoft.com/ja-jp/windowsphone/

コードサンプル

トレーニングキット

開発者ガイド Windows Phone 7 向け

UI デザイン/操作ガイド (必読)

http://msdn.microsoft.com/ja-jp/windowsphone/




Demo

Windows Phone 7 Silverlight ゕプリケーションエミュレータ & 実機


Metro テーマ

C

G

Y Z

M H

N F

T

地下鉄の色分けのようにすっきりとした色合いを演出


PC vs モバイルその違い


画面解像度

モバル端末の解像度・サズはPC に比べて小さい

今回のデモ機 :HTC HD7

480 × 800 (WVGA)

4.3 ンチ

表示できる情報量に制限がある


入力デバイスの違い

カーソルに比べてより大きな領域が必要


最適な大きさとは？

タッチ対象のサズ 9 mm 以上

見た目のサズ 60 ~ 100 % 7 mm~

タッチ対象の間隔少なくとも 2 mm のスペース

ボタンボタン

7mm 7mm 2mm


Demo

画面サズの比較と

タッチ領域


入力の解釈の違い

マウス入力 • MouseDown • MouseUp • MouseMove などなど

• 指（タッチ）からの入力ジェスチャーが存在する • タップ • ダブルタップ • パン • フリック • タッチゕンドホールド • 縮小と拡大などなど


レイアウト・ナビゲーション

①

②

モバルではどう配置・遷移する？


Windows Phone 7 に見るモバイルならではの UI・UX


サポートされているジェスチャー

タップ素早く 1 度タッチ

ダブルタップ素早く 2 度タッチ

パン指を下ろした後に移動

フリック指を下ろした後に素早く移動し、離す

タッチゕンドホールド指を下ろし決められた時間そのままにする

縮小と拡大 2 本の指を下ろし近づける、もしくは離す


Silverlight でのジェスチャー処理通常は Mouse, Manipulation 関連の

ベントを使用しジェスチャーを判定

非常にめんどくさい

Silverlight Toolkit for Windows Phone ではジェスチャー利用のための GestureService が実装されている http://silverlight.codeplex.com/

http://silverlight.codeplex.com/

http://silverlight.codeplex.com/


Demo GestureService の活用


GestureService

<phone:PhoneApplicationPage

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;

assembly=Microsoft.Phone.Controls.Toolkit“

>

<Image Source="DaizenIkehara.jpg" >

<toolkit:GestureService.GestureListener>

<toolkit:GestureListener

Flick=“GestureListener_DoubleTap”/>

</toolkit:GestureService.GestureListener>

</Image>

</phone:PhoneApplicationPage>

private void GestureListener_DoubleTap(object sender, GestureEventArgs e)

{

MessageBox.Show("DoubleTap");

}


レイアウト・ナビゲーション

ピボット・パノラマ


パノラマ

横に長いキャンパスにページ毎に別のコンテンツを表示できる

メニュー構造、画面遷移をうまく表現できる

コンテンツ１コンテンツ2 コンテンツ3 コンテンツ4


ピボット

データのフゖルタリング

複数のデータ表示

ビューの切り替え


Demo

ピボット・パノラマ

Pictures


他の UX パターンを検索するには

UI/UX パターンラブラリー http://jp.quince.infragistics.com

パターンの名前

パターンが解決する問題

背景

実装方法

http://jp.quince.infragistics.com/

http://jp.quince.infragistics.com/


インフラジスティックスのモバイルプラットフォームへの取り組み


モバイル対応 NetAdvantage モバル向け製品を開発中

Windows Phone 7 対応 Silverlight コントロール

iPhone & Android 向けモバル UI コントロール

http://jp.infragistics.com/whats-hot/roadmap/new_products.aspx

2011 年発売予定!!






NetAdvantage for Mobile

NetAdvantage for Silverlightを試験的に WP7 環境で実験 http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx

http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx







Demo NetAdvantage for Mobile


まとめ

モバル対応ゕプリケーションにおける新たな UI・UX の設計の必要性

プラットフォームでサポートされている機能を十二分に活用

新たなパターンの誕生と可能性


Next Action!

WPDT 導入で開発環境の構築

Silverlight についても併せて学習を!

Windows Phone 7 向け UI デザン/操作ガドに慣れ親しむ

継続的にパターンを検索!


リソース（1） AppHub


Windows Phone デベロッパーセンター


Windows Phone 7 Developer Tools RTW (英語) (ISO も取得可能)

http://bit.ly/8YxX8H

Windows Phone Developer Tools January 2011 Update (英語)

http://bit.ly/aOWxRr

CodeRecipe – Windows Phone 7 サンプルコード

http://msdn.microsoft.com/ja-jp/netframework/ee708289#winphone

MSDN – 高橋忍のブログ

http://blogs.msdn.com/b/shintak/

MSDN – 田中達彦のブログ

http://blogs.msdn.com/b/ttanaka/







http://bit.ly/8YxX8H

http://bit.ly/aOWxRr

http://msdn.microsoft.com/ja-jp/netframework/ee708289



http://blogs.msdn.com/b/shintak

http://blogs.msdn.com/b/ttanaka/


リソース（2）まめしば雑記

http://d.hatena.ne.jp/shiba-yan/

backyard of 伊勢的新常識

http://d.hatena.ne.jp/iseebi/

酢ろぐ(ch3cooh.jp)

http://d.hatena.ne.jp/ch3cooh393/

Portfolio：Mitsuba

http://d.hatena.ne.jp/c-mitsuba/

DHJJ [Hatsune's Journal Japan] blog

http://blogs.wankuma.com/hatsune/

Blog: Daizen Ikehara


インフラジスティックス・ジャパン HP (NetAdvantage)

http://jp.infragistics.com/




http://d.hatena.ne.jp/iseebi/

http://d.hatena.ne.jp/ch3cooh393/




http://blogs.wankuma.com/hatsune/


http://jp.infragistics.com/


おまけ


WPFブートキャンプ XAML・Expression Blendを徹底的に学習

NA for WPFによる実践開発 NetAdvantageを使ったWPF開発応用編

NA for ASP.NETによる実践開発 NetAdvantageを使ったASP.NET開発応用編

Silverlightブートキャンプ XAML・Expression Blendを徹底的に学習

XAML トレーニング

ンフラジステゖックス主催の無料 .NETセミナー第8弾

4/6(水) 名古屋 @ マクロソフト中部支店

4/7(木) 大阪 @マクロソフト関西支店 4/20(水) 東京 @秋葉原 UDX カンフゔレンス

世界に誇れるUX 開発のために今何が必要か？！


IG で働いてみませんか?

業務拡大の為、優秀な人材を募集中です!

開発サポートエンジニゕ

セールスエンジニゕ

http://jp.infragistics.com/careers/openings.aspx





Technology

Devsumi 17 d-2