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