bar vsug04 masami suzuki windows7 ui
TRANSCRIPT
![Page 1: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/1.jpg)
Windows 7登場記念登場記念登場記念登場記念!!!!
「「「「Windows 7時代時代時代時代ののののアプリエーションアプリエーションアプリエーションアプリエーションUI技術技術技術技術ははははどうどうどうどう選択選択選択選択していくかしていくかしていくかしていくか?」?」?」?」
@ Bar VSUG
![Page 2: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/2.jpg)
OS 技術の進化はUIの進化
![Page 3: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/3.jpg)
過去を振り返ってみましょう
![Page 4: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/4.jpg)
MS-DOS
![Page 5: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/5.jpg)
CUI = キャラクターユーザーインターフェース
![Page 6: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/6.jpg)
こんな画面
![Page 7: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/7.jpg)
アプリケーション例1
![Page 8: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/8.jpg)
アプリケーション例2
![Page 9: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/9.jpg)
当時の状況
• 黒い画面にシンプルな描画
• すべてキーボードで操作できるインターフェース
• アプリケーション間のデータ交換はテキストファイルで
• 開発現場: C や BASIC, 独自ライブラリ
![Page 10: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/10.jpg)
開発環境
![Page 11: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/11.jpg)
UI的には。。。
• 開発者が思い描く最良のUIを独自に開発メニュー表示: [ESC] キー? [/] キー ?
![Page 12: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/12.jpg)
16 Bit Windows
![Page 13: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/13.jpg)
GUI の導入 !!
![Page 14: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/14.jpg)
こんな画面
![Page 15: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/15.jpg)
アプリケーション例
![Page 16: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/16.jpg)
アプリケーション例
![Page 17: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/17.jpg)
当時の状況
• (狭いながらも)ウィンドウ表示が可能
• 擬似マルチタスク
• Windowsアプリケーション作成をお作法に則ったUI開発– GDI ・コモンコントロールなど
– WinG
• キーボードとマウスを利用(ただし、右クリックは未定義)
• アプリケーション間のデータ交換はクリップボードを経由したり、DDEやOLEで
• 開発現場: C や BASIC、 Visual Basic !!
![Page 18: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/18.jpg)
開発環境
![Page 19: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/19.jpg)
32 Bit Windows
![Page 20: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/20.jpg)
Windows 95 / 98 / 2000 /
XP !!
![Page 21: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/21.jpg)
こんな画面
![Page 22: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/22.jpg)
アプリケーション例
![Page 23: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/23.jpg)
アプリケーション例
![Page 24: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/24.jpg)
当時(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](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/25.jpg)
当時(Windows XP)の状況
• NTカーネルを搭載した初のコンシューマWindows
• 完全マルチタスク
• 安定性向上
• GDI+, DirectX7
• 開発現場:Visual Studio .NET 2002
![Page 26: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/26.jpg)
開発環境
![Page 27: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/27.jpg)
Virtualization
![Page 28: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/28.jpg)
Windows 7
![Page 29: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/29.jpg)
こんな画面
省略
![Page 30: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/30.jpg)
アプリケーション例
省略
![Page 31: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/31.jpg)
アプリケーション例
省略
![Page 32: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/32.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/33.jpg)
Windows Presentation Foundation
• 様々な技術を一本化
–ドキュメント・ベース
–ピクセル・ベース
–ベクタ・ベース
• GPUのパフォーマンスを活用
• オブジェクトに対しての共通のハンドリング方法
![Page 34: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/34.jpg)
今の UI 選択
• Web か?クライアントアプリケーションか?
• HTMLか? RIA か?
• WinFormか?Officeクライアントか?WPF
か?
![Page 35: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/35.jpg)
(主に)インターネット向けクライアント向け技術
Web ブラウザー/携帯電話
(X)HTML + CSS +
Web ブラウザー (X)HTML + CSS + JavaScript
+ httpXMLRequest(AJAX)
Media Center MCML
RIA Silverlight
![Page 36: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/36.jpg)
(主に)イントラネット向けクライアント向け技術
(インターネット技術に加えて)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/37.jpg)
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](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/38.jpg)
UI 技術の選択方法
![Page 39: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/39.jpg)
状況状況状況状況に応じた使いやすい技術を
選択する技術を先に選択しない!!
![Page 40: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/40.jpg)
状況を考える(例)
牛肉の場合
![Page 41: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/41.jpg)
どちらがお好み?
41
![Page 42: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/42.jpg)
考慮すべきこと(例)
• 利用端末のOS・種類
• 利用端末のハードウェア
• 利用頻度
• 設置場所
• ネットワーク環境
• 操作方法
• 定型業務・非定型業務
• キータイプの量
• タイプする文字の種類
• 利用者のPC成熟度
• 非期型・非同期型
• …などなど
![Page 43: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/43.jpg)
最適な技術を選択してください
開発は、 Visual Studio で。
![Page 44: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/44.jpg)
Ⓒ 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](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/45.jpg)
追記
![Page 46: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/46.jpg)
Opinion 1
WinForm vs WPF
![Page 47: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/47.jpg)
Opinion 2
WPF vs Silverlight
![Page 48: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/48.jpg)
Opinion 3
HTMLの使い方
![Page 49: Bar Vsug04 Masami Suzuki Windows7 UI](https://reader034.vdocuments.mx/reader034/viewer/2022042714/5565ff99d8b42aa6628b477d/html5/thumbnails/49.jpg)
Opinion 4
WinForm vs HTML + AJAX ?