Bar Vsug04 Masami Suzuki Windows7 UI

49
Windows 7登場記念 登場記念 登場記念 登場記念! Windows 7時代 時代 時代 時代の アプリエーション アプリエーション アプリエーション アプリエーションUI技術 技術 技術 技術は どう どう どう どう選択 選択 選択 選択していくか していくか していくか していくか?」 ?」 ?」 ?」 @ Bar VSUG

Transcript of Bar Vsug04 Masami Suzuki Windows7 UI

Page 1: Bar Vsug04 Masami Suzuki Windows7 UI

Windows 7登場記念登場記念登場記念登場記念!!!!

「「「「Windows 7時代時代時代時代ののののアプリエーションアプリエーションアプリエーションアプリエーションUI技術技術技術技術ははははどうどうどうどう選択選択選択選択していくかしていくかしていくかしていくか?」?」?」?」

@ Bar VSUG

Page 2: Bar Vsug04 Masami Suzuki Windows7 UI

OS 技術の進化はUIの進化

Page 3: Bar Vsug04 Masami Suzuki Windows7 UI

過去を振り返ってみましょう

Page 4: Bar Vsug04 Masami Suzuki Windows7 UI

MS-DOS

Page 5: Bar Vsug04 Masami Suzuki Windows7 UI

CUI = キャラクターユーザーインターフェース

Page 6: Bar Vsug04 Masami Suzuki Windows7 UI

こんな画面

Page 7: Bar Vsug04 Masami Suzuki Windows7 UI

アプリケーション例1

Page 8: Bar Vsug04 Masami Suzuki Windows7 UI

アプリケーション例2

Page 9: Bar Vsug04 Masami Suzuki Windows7 UI

当時の状況

• 黒い画面にシンプルな描画

• すべてキーボードで操作できるインターフェース

• アプリケーション間のデータ交換はテキストファイルで

• 開発現場: C や BASIC, 独自ライブラリ

Page 10: Bar Vsug04 Masami Suzuki Windows7 UI

開発環境

Page 11: Bar Vsug04 Masami Suzuki Windows7 UI

UI的には。。。

• 開発者が思い描く最良のUIを独自に開発メニュー表示: [ESC] キー? [/] キー ?

Page 12: Bar Vsug04 Masami Suzuki Windows7 UI

16 Bit Windows

Page 13: Bar Vsug04 Masami Suzuki Windows7 UI

GUI の導入 !!

Page 14: Bar Vsug04 Masami Suzuki Windows7 UI

こんな画面

Page 15: Bar Vsug04 Masami Suzuki Windows7 UI

アプリケーション例

Page 16: Bar Vsug04 Masami Suzuki Windows7 UI

アプリケーション例

Page 17: Bar Vsug04 Masami Suzuki Windows7 UI

当時の状況

• (狭いながらも)ウィンドウ表示が可能

• 擬似マルチタスク

• Windowsアプリケーション作成をお作法に則ったUI開発– GDI ・コモンコントロールなど

– WinG

• キーボードとマウスを利用(ただし、右クリックは未定義)

• アプリケーション間のデータ交換はクリップボードを経由したり、DDEやOLEで

• 開発現場: C や BASIC、 Visual Basic !!

Page 18: Bar Vsug04 Masami Suzuki Windows7 UI

開発環境

Page 19: Bar Vsug04 Masami Suzuki Windows7 UI

32 Bit Windows

Page 20: Bar Vsug04 Masami Suzuki Windows7 UI

Windows 95 / 98 / 2000 /

XP !!

Page 21: Bar Vsug04 Masami Suzuki Windows7 UI

こんな画面

Page 22: Bar Vsug04 Masami Suzuki Windows7 UI

アプリケーション例

Page 23: Bar Vsug04 Masami Suzuki Windows7 UI

アプリケーション例

Page 24: Bar Vsug04 Masami Suzuki Windows7 UI

当時(Windows 95)の状況

• インターネット人気と同期

• 現在のWindowsのUIの原型

– GDI32 , DirectX3

• 様々なすぐれた機能

– Plug&Play、ネットワーク対応、ロングファイルネーム、ドライバ32ビット化、FAT32(OSR2)

• 開発現場

– Visual Studio 97 / Visual Studio 6.0

Page 25: Bar Vsug04 Masami Suzuki Windows7 UI

当時(Windows XP)の状況

• NTカーネルを搭載した初のコンシューマWindows

• 完全マルチタスク

• 安定性向上

• GDI+, DirectX7

• 開発現場:Visual Studio .NET 2002

Page 26: Bar Vsug04 Masami Suzuki Windows7 UI

開発環境

Page 27: Bar Vsug04 Masami Suzuki Windows7 UI

Virtualization

Page 28: Bar Vsug04 Masami Suzuki Windows7 UI

Windows 7

Page 29: Bar Vsug04 Masami Suzuki Windows7 UI

こんな画面

省略

Page 30: Bar Vsug04 Masami Suzuki Windows7 UI

アプリケーション例

省略

Page 31: Bar Vsug04 Masami Suzuki Windows7 UI

アプリケーション例

省略

Page 32: Bar Vsug04 Masami Suzuki Windows7 UI

Windows Vista / 7

• 32ビットから64ビット環境へ

• UIの進化

– Aero, DirectX9 ,

Windows Presentation Foundation

• 開発現場

– Visual Studio 2008 → Visual Studio 2010

– .NET Frameworkが標準開発プラットフォームに

Page 33: Bar Vsug04 Masami Suzuki Windows7 UI

Windows Presentation Foundation

• 様々な技術を一本化

–ドキュメント・ベース

–ピクセル・ベース

–ベクタ・ベース

• GPUのパフォーマンスを活用

• オブジェクトに対しての共通のハンドリング方法

Page 34: Bar Vsug04 Masami Suzuki Windows7 UI

今の UI 選択

• Web か?クライアントアプリケーションか?

• HTMLか? RIA か?

• WinFormか?Officeクライアントか?WPF

か?

Page 35: Bar Vsug04 Masami Suzuki Windows7 UI

(主に)インターネット向けクライアント向け技術

Web ブラウザー/携帯電話

(X)HTML + CSS +

Web ブラウザー (X)HTML + CSS + JavaScript

+ httpXMLRequest(AJAX)

Media Center MCML

RIA Silverlight

Page 36: Bar Vsug04 Masami Suzuki Windows7 UI

(主に)イントラネット向けクライアント向け技術

(インターネット技術に加えて)

Windows Windows Form

MFC

Office system

WPF

Game DirectX11

Windows Mobile WinForm (.NET Compact

Framework)

RIA Silverlight

Page 37: Bar Vsug04 Masami Suzuki Windows7 UI

PC向けプレゼンテーションテクノロジの選択

ユーザーインターフェイスユーザーインターフェイスユーザーインターフェイスユーザーインターフェイスののののユーザーインターフェイスユーザーインターフェイスユーザーインターフェイスユーザーインターフェイスののののリッチリッチリッチリッチささささリッチリッチリッチリッチささささ

開発生産性

開発生産性

ASP.NET

(HTML)

Windows

Forms

Win32

DHTML

ASP.NET

AJAX

Direct3D11

Microsoft

Office

Windows

Presentation

Foundation

Silverlight

MFC

Page 38: Bar Vsug04 Masami Suzuki Windows7 UI

UI 技術の選択方法

Page 39: Bar Vsug04 Masami Suzuki Windows7 UI

状況状況状況状況に応じた使いやすい技術を

選択する技術を先に選択しない!!

Page 40: Bar Vsug04 Masami Suzuki Windows7 UI

状況を考える(例)

牛肉の場合

Page 41: Bar Vsug04 Masami Suzuki Windows7 UI

どちらがお好み?

41

Page 42: Bar Vsug04 Masami Suzuki Windows7 UI

考慮すべきこと(例)

• 利用端末のOS・種類

• 利用端末のハードウェア

• 利用頻度

• 設置場所

• ネットワーク環境

• 操作方法

• 定型業務・非定型業務

• キータイプの量

• タイプする文字の種類

• 利用者のPC成熟度

• 非期型・非同期型

• …などなど

Page 43: Bar Vsug04 Masami Suzuki Windows7 UI

最適な技術を選択してください

開発は、 Visual Studio で。

Page 44: Bar Vsug04 Masami Suzuki Windows7 UI

Ⓒ 2008 Microsoft Corporation. All rights reserved. ※ Microsoft, Visual Studio, Visual Studio ロゴ, Access, BizTalk, Excel, Groove, InfoPath, OneNote, Outlook, PowerPoint, SharePoint, SQL Server, Visio, Visual Basic, Visual C++, Visual C#,

Visual SourceSafe, Visual Web Developer, Windows, Windows Live, Windows Server, Windows Vista は米国 Microsoft Corporationの米国およびその他の国における登録商標または商標です。※ その他、記載されている会社名および製品名は、各社の商標または登録商標です。※ 本書は、情報提供を目的としており、製品内容および価格について、予告なく変更する場合があります。

Page 45: Bar Vsug04 Masami Suzuki Windows7 UI

追記

Page 46: Bar Vsug04 Masami Suzuki Windows7 UI

Opinion 1

WinForm vs WPF

Page 47: Bar Vsug04 Masami Suzuki Windows7 UI

Opinion 2

WPF vs Silverlight

Page 48: Bar Vsug04 Masami Suzuki Windows7 UI

Opinion 3

HTMLの使い方

Page 49: Bar Vsug04 Masami Suzuki Windows7 UI

Opinion 4

WinForm vs HTML + AJAX ?