Devsumi 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) を取得する

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 の機能を一部

VB は制限あり

XNA Game Studio 4.0

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

C# のみサポート

日本語リソース

Windows Phone デベロッパーセンター http://msdn.microsoft.com/ja-jp/windowsphone/

コードサンプル

トレーニングキット

開発者ガイド Windows Phone 7 向け

UI デザイン/操作ガイド (必読)

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

Metro テーマ

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

PC vs モバイルその違い

画面解像度

モバル端末の解像度・サズはPC に比べて小さい

今回のデモ機 :HTC HD7

480 × 800 (WVGA)

4.3 ンチ

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

入力デバイスの違い

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

最適な大きさとは？

タッチ対象のサズ 9 mm 以上

見た目のサズ 60 ~ 100 % 7 mm~

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

ボタンボタン

7mm 7mm 2mm

画面サズの比較と

タッチ領域

入力の解釈の違い

マウス入力 • MouseDown • MouseUp • MouseMove などなど

• 指（タッチ）からの入力ジェスチャーが存在する • タップ • ダブルタップ • パン • フリック • タッチゕンドホールド • 縮小と拡大などなど

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

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

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

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

タップ素早く 1 度タッチ

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

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

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

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

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

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

ベントを使用しジェスチャーを判定

非常にめんどくさい

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

Demo GestureService の活用

GestureService

<phone:PhoneApplicationPage

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;

assembly=Microsoft.Phone.Controls.Toolkit“

<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

ピボット

データのフゖルタリング

複数のデータ表示

ビューの切り替え

ピボット・パノラマ

Pictures

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

UI/UX パターンラブラリー 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

Demo NetAdvantage 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/

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

おまけ

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

Devsumi 17 d-2

Technology

Programa d Eradio 17 d Ejulio

失敗から学ぶデータ分析グループのチームマネジメント変遷（デブサミ2016） #devsumi

ソフトウェア開発を勉強し始めて3年間でやったこと～After～ #devsumi

【15-e-7】Kinectから始まったスタートアップ #devsumi

Bocyl d-31122014-17

105 72 11 599 527 17 71 622 631 11 11/17 17 101 129 556 …...D D A A A A D D D D D D F F D108A 44 44 To Terrace Bay / Schreiber Hornepayne to Manitouwadge 104 Miles / 167 Km Hornepayne

La Notion d Emergence d Emergence en Musique 17

【20-A-7】アジャイルヒーローは誰だ!? #devsumi #devsumiA

Devsumi 2016 b_4 KafkaとSparkを組み合わせたリアルタイム分析基盤の構築

Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi

ヤフーを支える社内システム #devsumi 16-A-2

リアクティブ・アーキテクチャ～大規模サービスにおける必要性と課題〜 #devsumi

クラウド分散システム処理モデルの遷移およびその展望 #devsumi

DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか？

Yahoo! JAPANが考えるテクノロジーとITエンジニアの未来　#devsumi

mercurial-users.jp LT at DevSumi 2013 Tokyo

MY JOB WEND TO VIETNUM? DevSumi ver

プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi

CHT 17 M c D ’ S D

新規事業が対峙する現実からエンジニアリングを俯瞰する #devsumiB #devsumi