業務システムを使いやすく!.net webアプリケーションの現在
DESCRIPTION
第19回 ソフトウェア開発環境展 ソフトウェア開発環境展 専門セミナー SD-5 プログラミング技法の最前線 (2009/5/14)TRANSCRIPT
![Page 1: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/1.jpg)
業務システムを使いやすく!業務システムを使いやすく!.NET Web.NET Webアプリケーションの現在アプリケーションの現在
![Page 2: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/2.jpg)
アジェンダ はじめに
ASP.NET AJAXの説明
ASP.NET AJAXのデモ
Silverlightの説明
Silverlightのデモ
サービスの実装技術の紹介
データアクセスの実装技術の紹介
![Page 3: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/3.jpg)
自己紹介 猪股 健太郎 (いのまたけんたろう)
日本ユニシス株式会社共通利用技術部 .NETセンター
2002年9月よりMicrosoft .NET専任組織に所属
.NET案件提案支援、開発支援
弊社開発標準「LUCINA for .NET」の策定
技術記事執筆 (@IT、dotNETマガジン、Web+DB Press他)
2008年7月Microsoft MVP for Developer : Visual C# 受賞
![Page 4: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/4.jpg)
Webアプリケーションのデザイン 業務で使っている
Web アプリケーションのデザインに満足している?
デザインの最も重要な要素は?
出典:2008/7 RIAコンソーシアムhttp://www.ria-jp.org/css/
information/press/20080714.pdf
![Page 5: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/5.jpg)
使いやすい業務システム 業務システムを使いやすくするメリット 業務システム利用時間の短縮
マニュアル・教育のコスト低減
業務システムを使いやすくする方法 システム機能の視点から利用者の視点へ
トップダウン……設計の方法を見直す
ボトムアップ……“カイゼン”
![Page 6: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/6.jpg)
.NET Webアプリケーションを使いやすく
AJAX機能→「ASP.NET AJAX」
RIA (リッチ・インターネット・アプリケーション)→「Silverlight」
![Page 7: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/7.jpg)
AJAXとは
Asynchronous
JavaScript
And
XML
非同期画面遷移のタイミングとは別にサーバーと通信したり画面の一部を書き換えたりする
非同期画面遷移のタイミングとは別にサーバーと通信したり画面の一部を書き換えたりする
JavaScriptブラウザに最初から備わっているブラウザの中でプログラムを実行できる
JavaScriptブラウザに最初から備わっているブラウザの中でプログラムを実行できる
WebサービスXMLなどを用いてサーバーと通信するWebサービスの技術を応用している
WebサービスXMLなどを用いてサーバーと通信するWebサービスの技術を応用している
ブラウザの機能を活用してWebの表現力を上げるしくみ
![Page 8: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/8.jpg)
AJAXの例: Google Map
![Page 9: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/9.jpg)
プレゼンテーション層
プレゼンテーション層
ビジネス層ビジネス層 データアクセス層
データアクセス層
ブラウザブラウザ
Webアプリケーションの基本構造
画面を送信
画面を表示
業務処理
DBにアクセス
画面を要求
クライアントクライアント サーバーサーバー
![Page 10: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/10.jpg)
サービス層サービス層
プレゼンテーション層
プレゼンテーション層
ビジネス層ビジネス層 データアクセス層
データアクセス層
ブラウザブラウザ
AJAXアプリケーションの基本構造
画面を送信
画面を表示
業務処理
DBにアクセス
画面を要求
クライアントクライアント サーバーサーバー
データを送受信
JavaScriptJavaScript
画面の一部を更新
データを送受信
![Page 11: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/11.jpg)
ASP.NET AJAX Control Toolkit ASP.NET AJAXの機能を拡張
すぐに役立つ35種類の部品
コミュニティベースの開発
ソースコードも公開
http://www.asp.net/ajax/ajaxcontroltoolkit/(英語、動作サンプルあり)
![Page 12: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/12.jpg)
サーバーフレームワーク
サーバーフレームワーク
サーバーコントロールサーバー
コントロールクライアント
フレームワーククライアント
フレームワーク
ASP.NET AJAXの全体像
ASP.NETAJAX Extensions
ASP.NETAJAX Control Toolkit
ASP.NETAJAX Library
Visual Studio 2008に含まれているVisual Studio 2008に含まれている ダウンロードして追加するダウンロードして追加する
JavaScriptの開発を簡単にするフレームワーク
JavaScriptの開発を簡単にするフレームワーク
WebアプリケーションをAJAX対応させるフレームワーク
WebアプリケーションをAJAX対応させるフレームワーク
便利な画面部品を多数まとめたライブラリ便利な画面部品を多数まとめたライブラリ
![Page 13: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/13.jpg)
業務システムに便利な部品(1) ValidatorCalloutExtender
検証コントロールのエラー表示をわかりやすくする
CalendarExtender 日付の入力を支援する
FilteredTextBoxExtender 許可された文字だけを入力させる
MaskedEditExtender 文字列のフォーマットを限定する
![Page 14: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/14.jpg)
DEMO
ValidatorCalloutExtenderCalendarExtender
FilteredTextBoxExtenderMaskedEditExtender
![Page 15: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/15.jpg)
デモのまとめ AJAXの機能を使う画面には
ScriptManagerを追加しておく
AJAX Control Toolkitの部品をVisual Studioのツールボックスに登録する
ValidatorCalloutExtenderは検証コントロールの機能を拡張する
CalendarExtender, FilteredTextBoxExtender,MaskedEditExtenderはテキストボックスの機能を拡張する
![Page 16: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/16.jpg)
業務システムに便利な部品(2) CascadingDropDown
階層関係のある選択ボックスを作る(例:大分類→中分類→小分類)
AutoComplete 入力値の候補をポップアップ表示する
![Page 17: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/17.jpg)
CascadingDropDownとAutoCompleteは動作するためにWebサービスが必要である
JavaScriptJavaScript
Webサービスを呼び出す
サービス層サービス層
現在の入力値をもとに次の入力候補一覧をクライアントに送信次の入力候補の
表示を更新
現在の入力値をサーバに送信
![Page 18: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/18.jpg)
DEMO
CascadingDropDownAutoComplete
![Page 19: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/19.jpg)
デモのまとめ Webサービスクラスには
[ScriptService]属性を追加しておく
Webサービスメソッドのパラメータ名にも注意する
C# 3.0の機能である自動プロパティとLINQの紹介
CascadingDropDownとAutoCompleteのServicePathとServiceMethodを設定する
![Page 20: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/20.jpg)
Webアプリケーションで難しいこと 業務アプリケーションでよく使われる画面で
Webアプリケーションでは難しいこと
データグリッド (Excelのような) 100件を超えるデータの一覧表示
柔軟なキー入力制御(ファンクションキーやEnterキーなど)
AJAXを駆使して実現することもできるが…… 高度なプログラミングスキルが要求される
複数ブラウザ・複数バージョンのテストが大変
![Page 21: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/21.jpg)
Microsoft Silverlight
主要Webブラウザーに対応するプラグイン
複数プラットフォームに対応
マルチメディアコンテンツを再生可能
.NET Frameworkは不要
表現力豊かなアプリケーションをブラウザ上で動作可能
RIA (リッチ・インターネット・アプリケーション)
http://www.microsoft.com/japan/silverlight/
![Page 22: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/22.jpg)
Silverlightの例: Microsoft Health CUIhttp://www.mscui.net/PatientJourneyDemonstrator/http://www.mscui.net/PatientJourneyDemonstrator/
![Page 23: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/23.jpg)
SilverlightでRIA Visual Studioを使って
C#やVBでプログラムを開発可能
Visual Studioのアドオンを無料配布
デザインやアニメーションはXAMLで定義する
デザイナー向けツール ”Microsoft Expression”
データグリッドなどの便利なコントロールを利用可能
Webサービスでサーバーと通信可能
![Page 24: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/24.jpg)
サービス層サービス層
ビジネス層ビジネス層 データアクセス層
データアクセス層
ブラウザブラウザ
Silverlightアプリケーションの基本構造
業務処理
DBにアクセス
クライアントクライアント サーバーサーバー
データを送受信
SilverlightSilverlight
画面を更新
データを送受信
![Page 25: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/25.jpg)
DEMO
Silverlightアプリケーションサンプル
![Page 26: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/26.jpg)
デモのまとめ Visual Studio上での開発
データグリッド
非同期にWebサービスを呼び出しデータ追加
クライアント上での絞込み
Enterキーでフォーカス移動
![Page 27: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/27.jpg)
ASP.NET AJAXとSilverlightの共通点 ビジネス処理とデータアクセス処理を
「サービス」という形で公開しクライアントソフトウェアから利用する
クライアント環境をWindows, IE, .NET Frameworkに限定しない
マイクロソフトが掲げてきた「スマートクライアント」の
発展形
マイクロソフトが掲げてきた「スマートクライアント」の
発展形
![Page 28: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/28.jpg)
サービス作成のための技術 ASP.NET Webサービス XML-SOAP形式での通信
.NET Framework 3.5からJSON形式にも対応
Windows Communication Foundation .NET Framework 3.0から
XML-SOAPを用いるWebサービスの新しい仕様に対応
さまざまな通信形態に対応
ADO.NET Data Service .NET Framework 3.5 SP1から
最小限のコーディングでDBのCRUDをサービス化
Atom/JSON形式に対応
![Page 29: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/29.jpg)
技術選択簡易チャート
CRUDのサービス化?
CRUDのサービス化?
ADO.NETData Service
ASP.NETWebサービス
WCF
いいえ
はい
HTTP以外?HTTP以外?はい
SOAPでないXML?
SOAPでないXML?
いいえ
はい
いいえ
![Page 30: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/30.jpg)
サービス向きデータアクセス技術 これまで使われてきたDataSet/DataTableは、
ASP.NET AJAXやSilverlightで利用するサービスでは使用できない
それに代わるデータアクセス技術として「LINQ to SQL」「ADO.NET Entity Framework」が使用できる
![Page 31: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/31.jpg)
サービス向きデータアクセス技術 LINQ to SQL .NET Framework 3.0から
DBテーブルとクラスとの対応関係が単純
将来的には推奨されない
ADO.NET Entity Framework .NET Framework 3.5 SP1から
DBテーブルとクラスとの対応関係が柔軟
バージョン1.0ではいくつかの機能が不足
今後はさまざまなRDBMSに対応
![Page 32: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/32.jpg)
Entity Frameworkのエンティティデザイナ
![Page 33: 業務システムを使いやすく!.NET Webアプリケーションの現在](https://reader033.vdocuments.pub/reader033/viewer/2022061115/5463d7caaf795969338b467d/html5/thumbnails/33.jpg)
本セッションのまとめ
ビジネス層ビジネス層
データアクセス層
データアクセス層
プレゼンテーション層プレゼンテーション層 サービス層サービス層
ASP.NET AJAX
Silverlight
ADO.NET Data Service
WCF
ASP.NETWeb
サービス
EntityFramework
EntityFramework
LINQ to SQL
技術を上手に選択して、使いやすい業務システムを!