Post on 24-May-2015
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 7mm2mm
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
DemoGestureService の活用
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
パノラマ 横に長いキャンパスにページ毎に別のコン
テンツを表示できる メニュー構造、画面遷移を
うまく表現できる
コンテンツ１ コンテンツ 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
DemoNetAdvantage 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：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/
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