1. 押さえておこう！モバイル開発におけるUX の考え方 17-D-2 池原 大然 インフラジスティックス・ジャパン デベロッパー エバンジェリスト

2. 自己紹介 池原 大然（Neri） インフラジスティックス・ジャパン INETA 登録スピーカー TwitterID: @Neri78 Blog http://blogs.jp.infragistics.com/blogs/dikehara/default.aspx

3. 3 年前は 開発サポート部門リーダ 販売製品の技術サポートを担当

4. 現在 デベロッパー エバンジェリスト 講演・執筆活動 プリセールス トレーニング運営 ?

5. NetAdvantageシリーズ

6. 本日お話しさせて頂くこと Windows Phone 7 アプリケーション開発について PC vsモバイル その違い Windows Phone 7 に見るモバイルならではの UI・UX インフラジスティックスの取り組み

7. Twitter 実況中!! ポイント各種リンクは@IGJPにて随時実況します!

9. 注意点 日本では Windows Phone 7 はキャリアから販売されていません 開発ツールは英語版を一部使用しているので日本語版がリリースされた際に表記が変わる可能性があります

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

11. 開発環境の構築 AppHubhttp://create.msdn.com/ja-JP/Windows Phone 7 と Xbox 360用 Windows Phone Developer Tools (WPDT) を取得する

12. 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 ただし、英語版

13. 使用できるフレームワーク Silverlight for Windows Phone 業務アプリケーション、ツール パフォーマンスが要求されないゲーム Silverlight 3 + α 4 の機能を一部 C#/VB VB は制限あり XNAGame Studio 4.0 高いパフォーマンスを要求されるゲーム C# のみサポート

14. 日本語リソース Windows Phone デベロッパー センターhttp://msdn.microsoft.com/ja-jp/windowsphone/ コード サンプル トレーニング キット 開発者ガイド Windows Phone 7 向けUI デザイン/操作ガイド(必読)

15. Demo Windows Phone 7 Silverlight アプリケーションエミュレータ &実機

16. Metro テーマ C G Y Z M H N F T 地下鉄の色分けのようにすっきりとした色合いを演出

17. PC vsモバイル その違い

18. 画面解像度 モバイル端末の解像度・サイズはPC に比べて小さい 今回のデモ機 :HTC HD7 480 × 800 (WVGA) 4.3 インチ 表示できる情報量に制限がある

19. 入力デバイスの違い カーソルに比べてより大きな領域が必要

20. 最適な大きさとは？ タッチ対象のサイズ 9 mm以上 見た目のサイズ60 ~ 100 % 7 mm~ タッチ対象の間隔少なくとも 2 mm のスペース ボタン ボタン 7mm 7mm 2mm

21. Demo 画面サイズの比較と タッチ領域

23. MouseUp

25. タップ

26. ダブルタップ

27. パン

28. フリック

29. タッチ アンド ホールド

30. 縮小と拡大などなど

31. レイアウト・ナビゲーション ① ② モバイルではどう配置・遷移する？

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

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

34. Silverlight でのジェスチャー処理 通常は Mouse, Manipulation 関連のイベントを使用しジェスチャーを判定 非常にめんどくさい Silverlight Toolkit for Windows Phone ではジェスチャー利用のためのGestureServiceが実装されているhttp://silverlight.codeplex.com/

35. Demo GestureServiceの活用

36. GestureService <phone:PhoneApplicationPagexmlns:toolkit="clr-namespace:Microsoft.Phone.Controls; assembly=Microsoft.Phone.Controls.Toolkit“><ImageSource="DaizenIkehara.jpg"> <toolkit:GestureService.GestureListener> <toolkit:GestureListener Flick=“GestureListener_DoubleTap”/> </toolkit:GestureService.GestureListener> </Image></phone:PhoneApplicationPage> privatevoidGestureListener_DoubleTap(object sender, GestureEventArgs e) { MessageBox.Show("DoubleTap"); }

37. レイアウト・ナビゲーション ピボット・パノラマ

38. パノラマ 横に長いキャンパスにページ毎に別のコンテンツを表示できる メニュー構造、画面遷移をうまく表現できる コンテンツ１ コンテンツ2 コンテンツ3 コンテンツ4

39. ピボット データのフィルタリング 複数のデータ表示 ビューの切り替え

40. Demo ピボット・パノラマ Pictures

41. 他の UX パターンを検索するには UI/UX パターン ライブラリーhttp://jp.quince.infragistics.com パターンの名前 パターンが解決する問題 背景 実装方法

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

43. モバイル対応NetAdvantage モバイル向け製品を開発中 Windows Phone 7 対応 Silverlight コントロール iPhone & Android 向けモバイル UI コントロール http://jp.infragistics.com/whats-hot/roadmap/new_products.aspx 2011 年発売予定!!

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

45. Demo NetAdvantage for Mobile

46. まとめ モバイル対応アプリケーションにおける新たな UI・UX の設計の必要性 プラットフォームでサポートされている機能を十二分に活用 新たなパターンの誕生と可能性

47. Next Action! WPDT 導入で開発環境の構築 Silverlight についても併せて学習を! Windows Phone 7 向けUI デザイン/操作ガイドに慣れ親しむ 継続的にパターンを検索!

48. リソース（1）

49. リソース（2）

50. おまけ

51. WPFブートキャンプXAML・Expression Blendを 徹底的に学習 NA for WPFによる実践開発NetAdvantageを使ったWPF開発応用編 Silverlightブートキャンプ XAML・Expression Blendを 徹底的に学習 NA for ASP.NETによる実践開発NetAdvantageを使ったASP.NET開発応用編 XAML トレーニング

52. インフラジスティックス主催の無料 .NETセミナー第8弾 4/6(水) 名古屋 @ マイクロソフト中部支店 4/7(木) 大阪 @マイクロソフト関西支店 来週から 登録開始 4/20(水) 東京 @秋葉原 UDX カンファレンス 世界に誇れるUX 開発のために今何が必要か？！

53. IG で働いてみませんか? 業務拡大の為、優秀な人材を募集中です! 開発サポート エンジニア セールス エンジニア http://jp.infragistics.com/careers/openings.aspx