Windows Phone アプリケーションでの データ視覚化 Windows Phone “Arch” インフラジスティックス・ジャパン 株式会社 デベロッパー エバンジェリスト 池原 大然 D4-201

セッションの目的とゴール セッションの目的 セッションのゴール データ視覚化の概念を理解いただく データ視覚化のパターンを実装したデモ データ視覚化におけるパターンを理解し、シナリオに 合わせてパターンの選択を行えるようになる データ バインディングの仕組みを理解し 使用できるようになる

スピーカー紹介 池原大然 Twitter: @Neri78 Blog: http://bit.ly/IGDaizen

Web / RIA Reporting Win / Rich Client Mobile NetAdvantage

Windows Phone Arch Windows Phone に関する情報共有・勉強会 http://wp-arch.net

アジェンダ モバイル デバイスの特徴と データ視覚化の意義 データ バインディング概要 データ視覚化パターンとポイント

モバイル デバイス

Windows Phone の解像度 2 つの解像度 デスクトップとの差異 480 × 800 800 × 480 480 px 2 つの解像度 480 × 800 800 × 480 デスクトップとの差異 PC 画面に比べ、縦長、 あるいは横長のレイアウト 限られたスクリーンサイズ 3.5 ~ 4.3 インチ 800 px 表示できる情報に限り 縦横の考慮

眠気覚ましのエクササイズ 次の数字を 5 秒間で記憶してください お手持ちの紙、メモ用紙に 5 秒間で 記憶された番号を書いてください

7852

69234

132156

9023187

37801642

2389-6026

解答 7852 69234 132156 9023187 37801642 23896026

Human vs Numbers 数字の羅列は理解し辛い 一定以上の数値を理解できない or 時間がかかってしまう 意味・興味のないものは尚更 一定以上の数値を理解できない or 時間がかかってしまう 人間が（無理なく）覚えられる桁数は? 6547582453 654-758-2453 6,547,582,453

データの羅列 データの視覚化 膨大な数値 (データ) を提示されると 把握が難しい 混乱してしまう ⇒ 次のアクションの決定までに時間が必要 Date 製品1 製品2 製品3 製品4 2010/Q1 20,000 300,000 200,000 100,000 2010/Q2 30,000 40,000 2010/Q3 15,000 400,000 240,000 2010/Q4 50,000 60,000 302,410 2011/Q1 2011/Q2 2011/Q3 2011/Q4 35,000 データの視覚化 膨大な数値 (データ) を提示されると 把握が難しい 混乱してしまう ⇒ 次のアクションの決定までに時間が必要

データの視覚化と Silverlight データバインドを用いて UI とデータを 紐付けることができる Date 製品1 製品2 製品3 製品4 2010/Q1 20,000 300000 200000 100000 2010/Q2 30,000 40000 20000 2010/Q3 15,000 400000 240000 2010/Q4 50,000 30000 60000 302410 2011/Q1 2011/Q2 2011/Q3 2011/Q4 データバインドを用いて UI とデータを 紐付けることができる コンテンツ （データ）の見せ方を 自由にカスタマイズできる

アジェンダ モバイル デバイスの特徴と データ視覚化の意義 データ バインディング概要 データ視覚化パターンとポイント

データ連結の仕組み データ バインディング XAML プラットフォームで多用 Target Source Binding Object 依存関係 プロパティ Source プロパティ Binding Object <Slider x:Name="slider1" /> <TextBox x:Name="textBox1" Text="{Binding ElementName=slider1, Path=Value}" />

ItemsSource プロパティへのバインディング DataTemplate が各項目に適用される コレクションのバインド <ListBox Name="listBox1" ItemsSource="{Binding Path=DataList}" /> ItemsSource プロパティへのバインディング IEnumerable インターフェース <ListBox Name="listBox1" ItemsSource="{Binding Path=DataList}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Path=ID}" /> <TextBlock Text="{Binding Path=Name}" /> <TextBlock Text="{Binding Path=Age}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> DataTemplate が各項目に適用される

Demo コレクションの データバインディング

アジェンダ モバイル デバイスの特徴と データ視覚化の意義 データ バインディング概要 データ視覚化パターンとポイント

データ視覚化パターン データをわかりやすく表現 データ視覚化の例 特性を理解し使用する 全体の概要・トレンド 現在のステータス ダッシュボード チャート、ゲージ、 マップなど 特性を理解し使用する

チャート パターン データをわかりやすく理解 全体概要の把握 時系列でも表示

Demo チャート パターン

ブレッド グラフ パターン 多くの情報を 単一オブジェクトで表現 合計値を表示することが多い 単一オブジェクトでは過去は考慮しない 最高値 多くの情報を 単一オブジェクトで表現 最高値 目標値 現在値 評価基準 合計値を表示することが多い 単一オブジェクトでは過去は考慮しない

Demo ブレッド グラフ パターン

ツリー マップ パターン 大量の階層化されたデータ 上位 Top 3 などを把握する場合に有効

Demo ツリー マップ パターン

最高値に対する “現在”の値 ゲージ パターン 過去は考慮しない（≒向いていない） 起こった事象の大きさ リアルタイムで値が変動し 即時の判断が求められる場合にも Windows Phone + センサー 加速度 コンパス ジャイロ

Demo ゲージ パターン

それぞれの特徴 全体概要 何をどう示す？ 変動性

Demo さらに・・・

セッションのまとめ Session wrap up セッションの目的 データ視覚化の概念を理解いただく 概要把握、意思決定までの時間を短縮する シナリオに合わせたパターンの選択 このセッションで持ち帰っていただきたいモノ 数字の羅列はユーザーを混乱させてしまうこと 見せ方を工夫することで意思決定までの時間を 短縮できること Silverlight for Windows Phone では データを UI に表示するための強力なデータ バインディングが 提供されていること

NetAdvantage for Windows Phone

@IT 主催 スマートフォンアプリ選手権 賞金総額 100 万円! AppHub 登録サポート NetAdvantage 提供 http://www.atmarkit.co.jp/ad/event/smpa/index.html 賞金総額 100 万円! AppHub 登録サポート NetAdvantage 提供

リファレンス Windows Phone Arch http://wp-arch.net/ スマートフォンアプリ選手権 http://www.atmarkit.co.jp/ad/event/smpa/index.html .NET 開発コード サンプル集 Code Recipe http://msdn.microsoft.com/ja-jp/samplecode.recipe.aspx 本日のサンプル http://bit.ly/IGDaizen Microsoft Web Platform http://www.microsoft.com/web

ご清聴ありがとうございました アンケート にご協力 ください D4-201

このスライドは今年は印刷用としてあるのみで表示には使用しません。 © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista ,Windows 7 and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.