devsumi17 d-2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

devsumi17 d-2

on

  • 1,253 views

 

Statistics

Views

Total Views
1,253
Views on SlideShare
1,253
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

devsumi17 d-2 Presentation Transcript

  • 1. 押さえておこう!モバイル開発におけるUX の考え方17-D-2 池原 大然 ゗ンフラジステゖックス・ジャパン デベロッパー エバンジェリスト Developers Summit 2011
  • 2. 自己紹介 池原 大然(Neri) ゗ンフラジステゖックス・ジャパン INETA 登録スピーカー TwitterID: @Neri78 Blog  http://blogs.jp.infragistics.com/ blogs/dikehara/default.aspx Developers Summit 2011
  • 3. 3 年前は 開発サポート部門リーダ 販売製品の技術サポートを担当
  • 4. 現在 デベロッパー エバンジェリスト 講演・執筆活動 プリセールス トレーニング 運営 Developers Summit 2011
  • 5. NetAdvantage シリーズ Developers Summit 2011
  • 6. 本日お話しさせて頂くこと Windows Phone 7 ゕプリケーション開発について PC vs モバ゗ル その違い Windows Phone 7 に見る モバ゗ルならではの UI・UX ゗ンフラジステゖックスの 取り組み Developers Summit 2011
  • 7. Twitter 実況中!! ポ゗ント 各種リンクは @IGJPにて随時実況します! Developers Summit 2011
  • 8. Developers Summit 2011
  • 9. 注意点 日本では Windows Phone 7 は キャリゕから販売されて いません 開発ツールは英語版を 一部使用しているので 日本語版がリリースされた際に 表記が変わる可能性があります Developers Summit 2011
  • 10. Windows Phone 7アプリケーション開発について Developers Summit 2011
  • 11. 開発環境の構築 AppHub http://create.msdn.com/ja-JP/ Windows Phone 7 と Xbox 360用  Windows Phone Developer Tools (WPDT) を取得する Developers Summit 2011
  • 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  ただし、英語版 Developers Summit 2011
  • 13. 使用できるフレームワークSilverlight for Windows Phone XNA Game Studio 4.0 業務ゕプリケーション、  高いパフォーマンスを ツール 要求されるゲーム パフォーマンスが  C# のみサポート 要求されないゲーム Silverlight 3 + α  4 の機能を一部 C#/VB  VB は制限あり Developers Summit 2011
  • 14. 日本語リソース Windows Phone デベロッパー センター http://msdn.microsoft.com/ja-jp/windowsphone/ コード サンプル トレーニング キット 開発者ガイド  Windows Phone 7 向け UI デザイン/操作ガイド (必読) Developers Summit 2011
  • 15. Windows Phone 7Silverlight ゕプリケーションエミュレータ & 実機Demo Developers Summit 2011
  • 16. Metro テーマ G M H T C Y Z N F 地下鉄の色分けのようにすっきり とした色合いを演出 Developers Summit 2011
  • 17. PC vs モバイルその違い Developers Summit 2011
  • 18. 画面解像度 モバ゗ル端末の解像度・サ゗ズはPC に 比べて小さい 今回のデモ機 :HTC HD7  480 × 800 (WVGA)  4.3 ゗ンチ 表示できる情報量に制限がある Developers Summit 2011
  • 19. 入力デバイスの違い カーソルに比べてより大きな領域が必要 Developers Summit 2011
  • 20. 最適な大きさとは? タッチ対象のサ゗ズ 9 mm 以上 見た目のサ゗ズ 60 ~ 100 % 7 mm~ タッチ対象の間隔 少なくとも 2 mm のスペース ボタン ボタン 7mm 2mm 7mm Developers Summit 2011
  • 21. 画面サ゗ズの比較とタッチ領域Demo Developers Summit 2011
  • 22. 入力の解釈の違い マウス 入力 • MouseDown • MouseUp • MouseMove などなど • 指(タッチ)からの入力 ジェスチャーが存在する • タップ • ダブルタップ • パン • フリック • タッチ ゕンド ホールド • 縮小と拡大 などなど Developers Summit 2011
  • 23. レイアウト・ナビゲーション ① ②モバ゗ルではどう配置・遷移する? Developers Summit 2011
  • 24. Windows Phone 7に見るモバイルならではの UI・UX Developers Summit 2011
  • 25. サポートされているジェスチャー タップ 素早く 1 度タッチ ダブルタップ 素早く 2 度タッチ パン 指を下ろした後に移動 指を下ろした後に素早く移動し、 フリック 離す 指を下ろし決められた時間 タッチ ゕンド ホールド そのままにする 2 本の指を下ろし近づける、 縮小と拡大 もしくは離す Developers Summit 2011
  • 26. Silverlight でのジェスチャー処理 通常は Mouse, Manipulation 関連の ゗ベントを使用しジェスチャーを判定  非常にめんどくさい Silverlight Toolkit for Windows Phone ではジェスチャー利用のための GestureService が実装されている http://silverlight.codeplex.com/ Developers Summit 2011
  • 27. GestureService の活用Demo Developers Summit 2011
  • 28. 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"); } Developers Summit 2011
  • 29. レイアウト・ナビゲーション ピボット・パノラマ Developers Summit 2011
  • 30. パノラマ 横に長いキャンパスにページ毎に別のコン テンツを表示できる  メニュー構造、画面遷移を うまく表現できる コンテンツ1 コンテンツ2 コンテンツ3 コンテンツ4 Developers Summit 2011
  • 31. ピボット データのフゖルタリング 複数のデータ表示 ビューの切り替え Developers Summit 2011
  • 32. ピボット・パノラマPicturesDemo Developers Summit 2011
  • 33. 他の UX パターンを検索するには UI/UX パターン ラ゗ブラリーhttp://jp.quince.infragistics.com  パターンの名前  パターンが解決する問題  背景  実装方法 Developers Summit 2011
  • 34. インフラジスティックスのモバイル プラットフォームへの取り組み Developers Summit 2011
  • 35. モバイル対応NetAdvantage モバ゗ル向け製品を開発中  Windows Phone 7 対応 Silverlight コントロール  iPhone & Android 向け モバ゗ル UI コントロール http://jp.infragistics.com/whats-hot/roadmap/new_products.aspx 2011 年発売予定!! Developers Summit 2011
  • 36. NetAdvantage for Mobile NetAdvantage for Silverlightを 試験的に WP7 環境で実験 http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx Developers Summit 2011
  • 37. NetAdvantage for MobileDemo Developers Summit 2011
  • 38. まとめ モバ゗ル対応ゕプリケーション における新たな UI・UX の設計 の必要性 プラットフォームでサポート されている機能を十二分に活用 新たなパターンの誕生と可能性 Developers Summit 2011
  • 39. Next Action! WPDT 導入で開発環境の構築  Silverlight についても併せて 学習を! Windows Phone 7 向け UI デザ゗ン/操作ガ゗ドに 慣れ親しむ 継続的にパターンを検索! Developers Summit 2011
  • 40. リソース(1)AppHubhttp://create.msdn.com/ja-JP/Windows Phone デベロッパー センターhttp://msdn.microsoft.com/ja-jp/windowsphone/Windows Phone 7 Developer Tools RTW (英語) (ISO も取得可能)http://bit.ly/8YxX8HWindows Phone Developer Tools January 2011 Update (英語)http://bit.ly/aOWxRrCodeRecipe – Windows Phone 7 サンプルコードhttp://msdn.microsoft.com/ja-jp/netframework/ee708289#winphoneMSDN – 高橋 忍のブログhttp://blogs.msdn.com/b/shintak/MSDN – 田中達彦のブログhttp://blogs.msdn.com/b/ttanaka/ Developers Summit 2011
  • 41. リソース(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:Mitsubahttp://d.hatena.ne.jp/c-mitsuba/DHJJ [Hatsunes Journal Japan] bloghttp://blogs.wankuma.com/hatsune/Blog: Daizen Ikeharahttp://blogs.jp.infragistics.com/blogs/dikehara/default.aspxインフラジスティックス・ジャパン HP (NetAdvantage)http://jp.infragistics.com/ Developers Summit 2011
  • 42. おまけDevelopers Summit 2011
  • 43. XAML トレーニング WPFブートキャンプ XAML・Expression Blendを 徹底的に学習 NA for WPFによる実践開発 NetAdvantageを使ったWPF開発応用編 Silverlightブートキャンプ XAML・Expression Blendを 徹底的に学習 NA for ASP.NETによる実践開発 NetAdvantageを使ったASP.NET開発応用編 Developers Summit 2011
  • 44. ゗ンフラジステゖックス主催の無料 .NETセミナー第8弾 4/6(水) 名古屋 @ マ゗クロソフト中部支店 4/7(木) 大阪 @マ゗クロソフト関西支店 4/20(水) 東京 @秋葉原 UDX カンフゔレンス世界に誇れるUX 開発のために今何が必要か?!
  • 45. IG で働いてみませんか? 業務拡大の為、優秀な人材を 募集中です!  開発サポート エンジニゕ  セールス エンジニゕ http://jp.infragistics.com/careers/openings.aspx Developers Summit 2011