SlideShare a Scribd company logo
1 of 14
Download to read offline
GUIのアーキテクチャ
GUIのアーキテクチャ
        猪股 健太郎
 猪股   健太郎
 日本ユニシス
 MSMVP for Visual C#
 Silverlightを囲む会@東京
 @ITで連載中
「Application Architecture Guideの概要」



自己紹介
 Martin  Fowler
    “GUI Architectures”
   http://martinfowler.com/eaaDev/uiArchs.html




元ネタ
Form1.cs

            画面レイアウトと
           イベントハンドラ登録

           イベントハンドラ1
      DBアクセスして業務処理して画面更新

        イベントハンドラ2
  入力データを加工してDBアクセスして画面更新

            イベントハンドラ3
                    3
 関心の分離
 依存関係の整理
 テストしやすさの向上
 再利用性
(UI部品を交換しても
ロジックを修正せず使える)


やりたいこと
ユーザー入力の
      受け付け

                        業務処理&
                        データ管理


      画面表示


Model-View-
Model-View-Controller
Controller
    ユーザー入力の
      受け付け
                        Model
                        業務処理&
                        業務データ
       View
      画面表示


Model-View-
Model-View-Controller
Controller
  ユーザー入力の      プログレスバーの
    受け付け          進捗
                Model
               業務処理&
               タブの選択状況
               業務データ
    View        フォントの色
   画面表示


そんなことをいっても……
そんなことをいっても……
View
 画面表示


        Presentation Model
              画面データ
        プログレスバーの
           進捗
                    Model
        タブの選択状況    業務処理&
        フォントの色
                   業務データ
解決策1
解決策1
Presenter
  ViewとModelの
      仲介
                Model
                業務処理&
                業務データ
    View
    画面表示


解決策2
解決策2
 FormはViewに徹する
 Visual
      Studioと上手に付き合う
 GUIのフレームワーク
  • Composite Application Guidance
  • Smart Client Composite UI Application
    Block
  • 各種MVVMフレームワーク@CodePlex



まとめ

More Related Content

Similar to GUIのアーキテクチャ

2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~Takeshi Shinmura
 
19-D-5 Silverlightを利用したビジネスアプリケーション作成のポイント
19-D-5 Silverlightを利用したビジネスアプリケーション作成のポイント19-D-5 Silverlightを利用したビジネスアプリケーション作成のポイント
19-D-5 Silverlightを利用したビジネスアプリケーション作成のポイントnishizaki
 
Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編Daizen Ikehara
 
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】 Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】 智治 長沢
 
【17-D-6】.NETアセンブリの宿命
【17-D-6】.NETアセンブリの宿命【17-D-6】.NETアセンブリの宿命
【17-D-6】.NETアセンブリの宿命Developers Summit
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料OCHI Shuji
 
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsMAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsShotaro Suzuki
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望についてKen Azuma
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望についてKen Azuma
 
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~Yoshitaka Seo
 
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発Akira Inoue
 
DSL駆動によるクラウド・アプリケーション開発
DSL駆動によるクラウド・アプリケーション開発DSL駆動によるクラウド・アプリケーション開発
DSL駆動によるクラウド・アプリケーション開発Tomoharu ASAMI
 
実演!要求開発の成果物をastah*でこう作れ
実演!要求開発の成果物をastah*でこう作れ実演!要求開発の成果物をastah*でこう作れ
実演!要求開発の成果物をastah*でこう作れKent Ishizawa
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発Akira Inoue
 
X dev 20121106
X dev 20121106X dev 20121106
X dev 20121106Ken Azuma
 
Blendの便利機能振り返り
Blendの便利機能振り返りBlendの便利機能振り返り
Blendの便利機能振り返り一希 大田
 

Similar to GUIのアーキテクチャ (20)

2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~
 
19-D-5 Silverlightを利用したビジネスアプリケーション作成のポイント
19-D-5 Silverlightを利用したビジネスアプリケーション作成のポイント19-D-5 Silverlightを利用したビジネスアプリケーション作成のポイント
19-D-5 Silverlightを利用したビジネスアプリケーション作成のポイント
 
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
 
Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編
 
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
 
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】 Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
Team Foundation Server ~ 今を生きるエンジニアのための開発基盤とは 【BPStudy #63】
 
【17-D-6】.NETアセンブリの宿命
【17-D-6】.NETアセンブリの宿命【17-D-6】.NETアセンブリの宿命
【17-D-6】.NETアセンブリの宿命
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
 
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsMAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
 
User Centered Agile
User Centered AgileUser Centered Agile
User Centered Agile
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
 
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
 
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
 
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
 
DSL駆動によるクラウド・アプリケーション開発
DSL駆動によるクラウド・アプリケーション開発DSL駆動によるクラウド・アプリケーション開発
DSL駆動によるクラウド・アプリケーション開発
 
実演!要求開発の成果物をastah*でこう作れ
実演!要求開発の成果物をastah*でこう作れ実演!要求開発の成果物をastah*でこう作れ
実演!要求開発の成果物をastah*でこう作れ
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
X dev 20121106
X dev 20121106X dev 20121106
X dev 20121106
 
Blendの便利機能振り返り
Blendの便利機能振り返りBlendの便利機能振り返り
Blendの便利機能振り返り
 

More from Kentaro Inomata

『アプリケーション アーキテクチャ ガイド2.0』のガイド
『アプリケーション アーキテクチャ ガイド2.0』のガイド『アプリケーション アーキテクチャ ガイド2.0』のガイド
『アプリケーション アーキテクチャ ガイド2.0』のガイドKentaro Inomata
 
Bash on ubuntu on windows
Bash on ubuntu on windowsBash on ubuntu on windows
Bash on ubuntu on windowsKentaro Inomata
 
Agile Software Development (In Japan)
Agile Software Development (In Japan)Agile Software Development (In Japan)
Agile Software Development (In Japan)Kentaro Inomata
 
富山合同勉強会2015 ジェネリクス談義 C#編 補足
富山合同勉強会2015 ジェネリクス談義 C#編 補足富山合同勉強会2015 ジェネリクス談義 C#編 補足
富山合同勉強会2015 ジェネリクス談義 C#編 補足Kentaro Inomata
 
富山合同勉強会2015 ジェネリクス談義 C#編
富山合同勉強会2015 ジェネリクス談義 C#編富山合同勉強会2015 ジェネリクス談義 C#編
富山合同勉強会2015 ジェネリクス談義 C#編Kentaro Inomata
 
UIデザインパターンをSilverlightでやってみた part1
UIデザインパターンをSilverlightでやってみた part1UIデザインパターンをSilverlightでやってみた part1
UIデザインパターンをSilverlightでやってみた part1Kentaro Inomata
 
.NETの業務向けOSSフレームワーク鼎談
.NETの業務向けOSSフレームワーク鼎談.NETの業務向けOSSフレームワーク鼎談
.NETの業務向けOSSフレームワーク鼎談Kentaro Inomata
 
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみたASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみたKentaro Inomata
 
MacintoshでSilverlight開発
MacintoshでSilverlight開発MacintoshでSilverlight開発
MacintoshでSilverlight開発Kentaro Inomata
 
仮面ライダー勉強会LT06 響鬼についていろいろと
仮面ライダー勉強会LT06 響鬼についていろいろと仮面ライダー勉強会LT06 響鬼についていろいろと
仮面ライダー勉強会LT06 響鬼についていろいろとKentaro Inomata
 
18-D-5 MVP & .NET Community Members Lightning Talks
18-D-5 MVP & .NET Community Members Lightning Talks18-D-5 MVP & .NET Community Members Lightning Talks
18-D-5 MVP & .NET Community Members Lightning TalksKentaro Inomata
 
パズルをコンピュータに解かせる
パズルをコンピュータに解かせるパズルをコンピュータに解かせる
パズルをコンピュータに解かせるKentaro Inomata
 
Silverlightと業務アプリ
Silverlightと業務アプリSilverlightと業務アプリ
Silverlightと業務アプリKentaro Inomata
 
コミュニティの壁を越える
コミュニティの壁を越えるコミュニティの壁を越える
コミュニティの壁を越えるKentaro Inomata
 
業務システムを使いやすく! .NET Webアプリケーションの現在
業務システムを使いやすく!.NET Webアプリケーションの現在業務システムを使いやすく!.NET Webアプリケーションの現在
業務システムを使いやすく! .NET Webアプリケーションの現在Kentaro Inomata
 
解題:私がJavaからCsharpに乗り換えた10の理由
解題:私がJavaからCsharpに乗り換えた10の理由解題:私がJavaからCsharpに乗り換えた10の理由
解題:私がJavaからCsharpに乗り換えた10の理由Kentaro Inomata
 

More from Kentaro Inomata (20)

『アプリケーション アーキテクチャ ガイド2.0』のガイド
『アプリケーション アーキテクチャ ガイド2.0』のガイド『アプリケーション アーキテクチャ ガイド2.0』のガイド
『アプリケーション アーキテクチャ ガイド2.0』のガイド
 
Bash on ubuntu on windows
Bash on ubuntu on windowsBash on ubuntu on windows
Bash on ubuntu on windows
 
Agile Software Development (In Japan)
Agile Software Development (In Japan)Agile Software Development (In Japan)
Agile Software Development (In Japan)
 
Extreme Programming
Extreme ProgrammingExtreme Programming
Extreme Programming
 
富山合同勉強会2015 ジェネリクス談義 C#編 補足
富山合同勉強会2015 ジェネリクス談義 C#編 補足富山合同勉強会2015 ジェネリクス談義 C#編 補足
富山合同勉強会2015 ジェネリクス談義 C#編 補足
 
富山合同勉強会2015 ジェネリクス談義 C#編
富山合同勉強会2015 ジェネリクス談義 C#編富山合同勉強会2015 ジェネリクス談義 C#編
富山合同勉強会2015 ジェネリクス談義 C#編
 
UIデザインパターンをSilverlightでやってみた part1
UIデザインパターンをSilverlightでやってみた part1UIデザインパターンをSilverlightでやってみた part1
UIデザインパターンをSilverlightでやってみた part1
 
.NETの業務向けOSSフレームワーク鼎談
.NETの業務向けOSSフレームワーク鼎談.NETの業務向けOSSフレームワーク鼎談
.NETの業務向けOSSフレームワーク鼎談
 
RESTful Webサービス
RESTful WebサービスRESTful Webサービス
RESTful Webサービス
 
Azureといえば
AzureといえばAzureといえば
Azureといえば
 
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみたASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
 
MacintoshでSilverlight開発
MacintoshでSilverlight開発MacintoshでSilverlight開発
MacintoshでSilverlight開発
 
仮面ライダー勉強会LT06 響鬼についていろいろと
仮面ライダー勉強会LT06 響鬼についていろいろと仮面ライダー勉強会LT06 響鬼についていろいろと
仮面ライダー勉強会LT06 響鬼についていろいろと
 
18-D-5 MVP & .NET Community Members Lightning Talks
18-D-5 MVP & .NET Community Members Lightning Talks18-D-5 MVP & .NET Community Members Lightning Talks
18-D-5 MVP & .NET Community Members Lightning Talks
 
パズルをコンピュータに解かせる
パズルをコンピュータに解かせるパズルをコンピュータに解かせる
パズルをコンピュータに解かせる
 
Silverlightと業務アプリ
Silverlightと業務アプリSilverlightと業務アプリ
Silverlightと業務アプリ
 
コミュニティの壁を越える
コミュニティの壁を越えるコミュニティの壁を越える
コミュニティの壁を越える
 
釣りの楽しみ
釣りの楽しみ釣りの楽しみ
釣りの楽しみ
 
業務システムを使いやすく! .NET Webアプリケーションの現在
業務システムを使いやすく!.NET Webアプリケーションの現在業務システムを使いやすく!.NET Webアプリケーションの現在
業務システムを使いやすく! .NET Webアプリケーションの現在
 
解題:私がJavaからCsharpに乗り換えた10の理由
解題:私がJavaからCsharpに乗り換えた10の理由解題:私がJavaからCsharpに乗り換えた10の理由
解題:私がJavaからCsharpに乗り換えた10の理由
 

Recently uploaded

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 

Recently uploaded (8)

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 

GUIのアーキテクチャ

  • 2.  猪股 健太郎  日本ユニシス  MSMVP for Visual C#  Silverlightを囲む会@東京  @ITで連載中 「Application Architecture Guideの概要」 自己紹介
  • 3.  Martin Fowler “GUI Architectures”  http://martinfowler.com/eaaDev/uiArchs.html 元ネタ
  • 4.
  • 5.
  • 6.
  • 7. Form1.cs 画面レイアウトと イベントハンドラ登録 イベントハンドラ1 DBアクセスして業務処理して画面更新 イベントハンドラ2 入力データを加工してDBアクセスして画面更新 イベントハンドラ3 3
  • 8.  関心の分離  依存関係の整理  テストしやすさの向上  再利用性 (UI部品を交換しても ロジックを修正せず使える) やりたいこと
  • 9. ユーザー入力の 受け付け 業務処理& データ管理 画面表示 Model-View- Model-View-Controller
  • 10. Controller ユーザー入力の 受け付け Model 業務処理& 業務データ View 画面表示 Model-View- Model-View-Controller
  • 11. Controller ユーザー入力の プログレスバーの 受け付け 進捗 Model 業務処理& タブの選択状況 業務データ View フォントの色 画面表示 そんなことをいっても…… そんなことをいっても……
  • 12. View 画面表示 Presentation Model 画面データ プログレスバーの 進捗 Model タブの選択状況 業務処理& フォントの色 業務データ 解決策1 解決策1
  • 13. Presenter ViewとModelの 仲介 Model 業務処理& 業務データ View 画面表示 解決策2 解決策2
  • 14.  FormはViewに徹する  Visual Studioと上手に付き合う  GUIのフレームワーク • Composite Application Guidance • Smart Client Composite UI Application Block • 各種MVVMフレームワーク@CodePlex まとめ