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