技術ひろば.net 勉強会 2012年4月のセッション資料（2012年4月28日開催）

1. LightSwitch から UX を見てみる
瀬尾佳隆 (@seosoft)
Microsoft MVP for Visual C#
技術ひろば.net 勉強会 2012年4月

2. 自己紹介
瀬尾 佳隆 （せお よしたか）
MVP for Visual C# (Jan 2009 – Dec 2012)
数少ない(？) “LightSwitch ファン”
y.seo@seosoft.jp, @seosoft
劇団四季とディズニーリゾートと AKB48 が好き

3. 私には話せないこと
UX とは何か？
コードを自動生成するフレームワークと
UX とはどう関わるべきか？
皆さんでそれを議論するきっかけにして
いただければ

4. 私が話せること
LightSwitch の開発フロー
UX に近いところだと UI = 画面設計
LightSwitch が（多分）目指していること
大層なタイトルにしてしまってごめんなさい

5. 今日のテーマ
LightSwitch の画面は
“自動生成” が基本
“雰囲気” は
エクステンションで変える
見た目に “凝りたい” なら
LS + リッチ UI クライアント
やり過ぎないように

6. LightSwitch の基本

7. LightSwitch とは？
LightSwitch is the simplest way
to create data-centric
今日のポイント
business applications
for the Desktop and the Cloud.

8. LightSwitch の基本的な考え方
既定のテンプレートでの
画面レイアウトが基本
画面は自動的・機械的に決まる
UX はどう関わったらいいの？

9. LightSwitch が得意なこと
LightSwitch アプリケーションは
誰が作っても
どのアプリケーションでも
一定の操作感を提供しやすい
テーブル 画面
カスタマイズ
定義 デザイン

10. Metro スタイルの UX の基本
Immersive
そぎ落とす
コンテンツが優先
スッキリした視覚表現
レイアウトが大事

11. LightSwitch に当てはめてみると
Immersive 装飾はいらない
そぎ落とす
コンテンツが優先 データセントリック
スッキリした視覚表現 体系立った配置
レイアウトが大事 画面テンプレート

12. LightSwitch の画面デザイン

13. LightSwitch の画面デザイン
定義されたルールに沿って行う
画面テンプレートに出来るだけ “忠実に”
レイアウト項目の配置は “パターン化”

14. 画面テンプレート
編集可能グリッド画面
詳細画面
一覧および詳細画面
新規データ画面
データ検索画面

15. レイアウト項目
テーブルのレイアウト
行のレイアウト
列のレイアウト
タブのレイアウト
グループボックス

16. レイアウト項目の配置パターン（１）
グリッド

17. レイアウト項目の配置パターン（２）
一覧

18. レイアウト項目の配置パターン（３）
一覧と詳細

19. レイアウト項目の配置パターン（４）
追加情報

20. レイアウト項目の配置パターン（５）
さらに追加

21. エクステンションの利用

22. 画面を変更したくなったら
エクステンションで “雰囲気” を変える
使う
作る
まずは “使う”
“作る” のはその後で
UX の成果を
発揮できるフェーズ

23. Shell エクステンション
アプリ全体の見た目を変える
メニューとナビゲーションをどう表示するか
アプリケーションごとにむやみに変えない
作る場合、決して凝りすぎない

24. “標準” シェル
安心感・馴染みのあるレイアウト

25. “Minimal” シェル
ナビゲーションがない ＝ コンテンツに集中

26. “Cosmopolitan” シェル
タッチデバイスを意識

27. LightSwitch + リッチ UI クライアント

28. LightSwitch を超えたくなったら
LightSwitch V2 は OData 対応
OData の Producer として LightSwitch を使う
リッチな UI 開発が出来るものと組み合わせる

29. OData
The Open Data Protocol (OData) is a Web
protocol for querying and updating data that
provides a way.
“データセット” を
REST で受け渡しする

30. 効率のよい Producer 開発ツール
OData 対応のための追加コードが不要
浮いたコストは UX に
クライアント （= OData Consumer）
PowerPivot for Excel
WPF / Silverlight
Windows Phone
Metro スタイルアプリ

31. まとめ
LightSwitch の画面は
“自動生成” が基本
“雰囲気” は
エクステンションで変える
見た目に “凝りたい” なら
LS + リッチ UI クライアント
やり過ぎないように