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