17 D-2

Developers Summit 2011

池原大然インフラジスティックス・ジャパンデベロッパーエバンジェリスト

17-D-2

押さえておこう！モバイル開発におけるUX の考え方


自己紹介池原大然（ Neri ）インフラジスティックス・ジャパン INETA 登録スピーカー

TwitterID: @Neri78 Blog

http://blogs.jp.infragistics.com/blogs/dikehara/default.aspx






3 年前は開発サポート部門リーダ販売製品の技術サポートを担当


現在

デベロッパーエバンジェリスト講演・執筆活動プリセールストレーニング運営 ?


NetAdvantage シリーズ


本日お話しさせて頂くこと

Windows Phone 7 アプリケーション開発について

PC vs モバイルその違いWindows Phone 7 に見る

モバイルならではの UI ・ UX インフラジスティックスの

取り組み


Twitter 実況中 !!

ポイント各種リンクは

@IGJP にて随時実況します !



注意点

日本では Windows Phone 7 はキャリアから販売されていません

開発ツールは英語版を一部使用しているので日本語版がリリースされた際に表記が変わる可能性があります


Windows Phone 7 アプリケーション開発について


開発環境の構築 AppHub

http://create.msdn.com/ja-JP/Windows Phone 7 と Xbox 360 用

Windows Phone Developer Tools (WPDT) を取得する

http://create.msdn.com/ja-JP/


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 ただし、英語版


使用できるフレームワークSilverlight for Windows

Phone

業務アプリケーション、ツール

パフォーマンスが要求されないゲーム

Silverlight 3 + α 4 の機能を一部

C#/VB VB は制限あり

XNA Game Studio 4.0

高いパフォーマンスを要求されるゲーム

C# のみサポート


日本語リソース Windows Phone デベロッパーセン

ターhttp://msdn.microsoft.com/ja-jp/windowsphone/

コードサンプルトレーニングキット開発者ガイド

Windows Phone 7 向けUI デザイン / 操作ガイド( 必読 )

http://msdn.microsoft.com/ja-jp/windowsphone/


Demo

Windows Phone 7 Silverlight アプリケーションエミュレータ & 実機


Metro テーマ

C

G

Y Z

M H

N F

T

地下鉄の色分けのようにすっきりとした色合いを演出


PC vs モバイルその違い


画面解像度モバイル端末の解像度・サイズは PC

に比べて小さい今回のデモ機 :HTC HD7

480 × 800 (WVGA) 4.3 インチ

表示できる情報量に制限がある


入力デバイスの違い

カーソルに比べてより大きな領域が必要


最適な大きさとは？タッチ対象のサイズ

9 mm 以上見た目のサイズ

60 ~ 100 % 7 mm~

タッチ対象の間隔少なくとも 2 mm のスペース

ボタンボタン

7mm 7mm2mm


Demo画面サイズの比較とタッチ領域


入力の解釈の違いマウス入力• MouseDown• MouseUp• MouseMoveなどなど

• 指（タッチ）からの入力ジェスチャーが存在する

• タップ• ダブルタップ• パン• フリック• タッチアンドホールド• 縮小と拡大などなど


レイアウト・ナビゲーション

①

②

モバイルではどう配置・遷移する？


Windows Phone 7 に見るモバイルならではの UI ・UX


サポートされているジェスチャー

タップ素早く 1 度タッチ

ダブルタップ素早く 2 度タッチ

パン指を下ろした後に移動

フリック指を下ろした後に素早く移動し、離す

タッチアンドホールド指を下ろし決められた時間そのままにする

縮小と拡大 2 本の指を下ろし近づける、もしくは離す


Silverlight でのジェスチャー処理通常は Mouse, Manipulation 関連の

イベントを使用しジェスチャーを判定非常にめんどくさい

Silverlight Toolkit for Windows Phone ではジェスチャー利用のためのGestureService が実装されているhttp://silverlight.codeplex.com/

http://silverlight.codeplex.com/

http://silverlight.codeplex.com/


DemoGestureService の活用


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");}


レイアウト・ナビゲーション

ピボット・パノラマ


パノラマ横に長いキャンパスにページ毎に別のコン

テンツを表示できるメニュー構造、画面遷移を

うまく表現できる

コンテンツ１コンテンツ 2 コンテンツ 3 コンテンツ 4


ピボット

データのフィルタリング複数のデータ表示ビューの切り替え


Demoピボット・パノラマPictures


他の UX パターンを検索するには

UI/UX パターンライブラリーhttp://jp.quince.infragistics.com パターンの名前パターンが解決する問題背景実装方法

http://jp.quince.infragistics.com/

http://jp.quince.infragistics.com/


インフラジスティックスのモバイルプラットフォームへの取り組み


モバイル対応NetAdvantageモバイル向け製品を開発中

Windows Phone 7 対応 Silverlight コントロール

iPhone & Android 向けモバイル UI コントロール

http://jp.infragistics.com/whats-hot/roadmap/new_products.aspx

2011 年発売予定 !!




NetAdvantage for Mobile

NetAdvantage for Silverlight を試験的に WP7 環境で実験http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx

http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx

http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx


DemoNetAdvantage for Mobile


まとめ

モバイル対応アプリケーションにおける新たな UI ・ UX の設計の必要性

プラットフォームでサポートされている機能を十二分に活用

新たなパターンの誕生と可能性


Next Action!

WPDT 導入で開発環境の構築Silverlight についても併せて学習を !

Windows Phone 7 向けUI デザイン / 操作ガイドに慣れ親しむ

継続的にパターンを検索 !


リソース（ 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/

http://create.msdn.com/ja-JP/

http://msdn.microsoft.com/ja-jp/windowsphone/

http://bit.ly/8YxX8H

http://bit.ly/aOWxRr

http://msdn.microsoft.com/ja-jp/netframework/ee708289#winphone

http://blogs.msdn.com/b/shintak

http://blogs.msdn.com/b/ttanaka/


リソース（ 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/

http://d.hatena.ne.jp/shiba-yan/

http://d.hatena.ne.jp/iseebi/

http://d.hatena.ne.jp/ch3cooh393/

http://d.hatena.ne.jp/c-mitsuba/

http://blogs.wankuma.com/hatsune/


http://jp.infragistics.com/


おまけ


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 開発のために今何が必要か？！


IG で働いてみませんか ?

業務拡大の為、優秀な人材を募集中です !開発サポートエンジニアセールスエンジニア

http://jp.infragistics.com/careers/openings.aspx




Technology

17 D-2