業務システムを使いやすく！業務システムを使いやすく！.NET Web.NET Webアプリケーションの現在アプリケーションの現在

アジェンダ はじめに

ASP.NET AJAXの説明

ASP.NET AJAXのデモ

Silverlightの説明

Silverlightのデモ

サービスの実装技術の紹介

データアクセスの実装技術の紹介

自己紹介 猪股 健太郎 （いのまたけんたろう）

日本ユニシス株式会社共通利用技術部 .NETセンター

2002年9月よりMicrosoft .NET専任組織に所属

.NET案件提案支援、開発支援

弊社開発標準「LUCINA for .NET」の策定

技術記事執筆 (@IT、dotNETマガジン、Web+DB Press他)

2008年7月Microsoft MVP for Developer : Visual C# 受賞

Webアプリケーションのデザイン 業務で使っている

Web アプリケーションのデザインに満足している？

デザインの最も重要な要素は？

出典：2008/7 RIAコンソーシアムhttp://www.ria-jp.org/css/

information/press/20080714.pdf

使いやすい業務システム 業務システムを使いやすくするメリット 業務システム利用時間の短縮

マニュアル・教育のコスト低減

業務システムを使いやすくする方法 システム機能の視点から利用者の視点へ

トップダウン……設計の方法を見直す

ボトムアップ……“カイゼン”

.NET Webアプリケーションを使いやすく

AJAX機能→「ASP.NET AJAX」

RIA (リッチ・インターネット・アプリケーション)→「Silverlight」

AJAXとは

Asynchronous

JavaScript

And

XML

非同期画面遷移のタイミングとは別にサーバーと通信したり画面の一部を書き換えたりする

非同期画面遷移のタイミングとは別にサーバーと通信したり画面の一部を書き換えたりする

JavaScriptブラウザに最初から備わっているブラウザの中でプログラムを実行できる

JavaScriptブラウザに最初から備わっているブラウザの中でプログラムを実行できる

WebサービスXMLなどを用いてサーバーと通信するWebサービスの技術を応用している

WebサービスXMLなどを用いてサーバーと通信するWebサービスの技術を応用している

ブラウザの機能を活用してWebの表現力を上げるしくみ

AJAXの例： Google Map

プレゼンテーション層

プレゼンテーション層

ビジネス層ビジネス層 データアクセス層

データアクセス層

ブラウザブラウザ

Webアプリケーションの基本構造

画面を送信

画面を表示

業務処理

DBにアクセス

画面を要求

クライアントクライアント サーバーサーバー

サービス層サービス層

プレゼンテーション層

プレゼンテーション層

ビジネス層ビジネス層 データアクセス層

データアクセス層

ブラウザブラウザ

AJAXアプリケーションの基本構造

画面を送信

画面を表示

業務処理

DBにアクセス

画面を要求

クライアントクライアント サーバーサーバー

データを送受信

JavaScriptJavaScript

画面の一部を更新

データを送受信

ASP.NET AJAX Control Toolkit ASP.NET AJAXの機能を拡張

すぐに役立つ35種類の部品

コミュニティベースの開発

ソースコードも公開

http://www.asp.net/ajax/ajaxcontroltoolkit/（英語、動作サンプルあり）

サーバーフレームワーク

サーバーフレームワーク

サーバーコントロールサーバー

コントロールクライアント

フレームワーククライアント

フレームワーク

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対応させるフレームワーク

便利な画面部品を多数まとめたライブラリ便利な画面部品を多数まとめたライブラリ

業務システムに便利な部品(1) ValidatorCalloutExtender

検証コントロールのエラー表示をわかりやすくする

CalendarExtender 日付の入力を支援する

FilteredTextBoxExtender 許可された文字だけを入力させる

MaskedEditExtender 文字列のフォーマットを限定する

DEMO

ValidatorCalloutExtenderCalendarExtender

FilteredTextBoxExtenderMaskedEditExtender

デモのまとめ AJAXの機能を使う画面には

ScriptManagerを追加しておく

AJAX Control Toolkitの部品をVisual Studioのツールボックスに登録する

ValidatorCalloutExtenderは検証コントロールの機能を拡張する

CalendarExtender, FilteredTextBoxExtender,MaskedEditExtenderはテキストボックスの機能を拡張する

業務システムに便利な部品(2) CascadingDropDown

階層関係のある選択ボックスを作る（例：大分類→中分類→小分類）

AutoComplete 入力値の候補をポップアップ表示する

CascadingDropDownとAutoCompleteは動作するためにWebサービスが必要である

JavaScriptJavaScript

Webサービスを呼び出す

サービス層サービス層

現在の入力値をもとに次の入力候補一覧をクライアントに送信次の入力候補の

表示を更新

現在の入力値をサーバに送信

DEMO

CascadingDropDownAutoComplete

デモのまとめ Webサービスクラスには

[ScriptService]属性を追加しておく

Webサービスメソッドのパラメータ名にも注意する

C# 3.0の機能である自動プロパティとLINQの紹介

CascadingDropDownとAutoCompleteのServicePathとServiceMethodを設定する

Webアプリケーションで難しいこと 業務アプリケーションでよく使われる画面で

Webアプリケーションでは難しいこと

データグリッド (Excelのような) 100件を超えるデータの一覧表示

柔軟なキー入力制御（ファンクションキーやEnterキーなど）

AJAXを駆使して実現することもできるが…… 高度なプログラミングスキルが要求される

複数ブラウザ・複数バージョンのテストが大変

Microsoft Silverlight

主要Webブラウザーに対応するプラグイン

複数プラットフォームに対応

マルチメディアコンテンツを再生可能

.NET Frameworkは不要

表現力豊かなアプリケーションをブラウザ上で動作可能

RIA (リッチ・インターネット・アプリケーション)

http://www.microsoft.com/japan/silverlight/

Silverlightの例: Microsoft Health CUIhttp://www.mscui.net/PatientJourneyDemonstrator/http://www.mscui.net/PatientJourneyDemonstrator/

SilverlightでRIA Visual Studioを使って

C#やVBでプログラムを開発可能

Visual Studioのアドオンを無料配布

デザインやアニメーションはXAMLで定義する

デザイナー向けツール ”Microsoft Expression”

データグリッドなどの便利なコントロールを利用可能

Webサービスでサーバーと通信可能

サービス層サービス層

ビジネス層ビジネス層 データアクセス層

データアクセス層

ブラウザブラウザ

Silverlightアプリケーションの基本構造

業務処理

DBにアクセス

クライアントクライアント サーバーサーバー

データを送受信

SilverlightSilverlight

画面を更新

データを送受信

DEMO

Silverlightアプリケーションサンプル

デモのまとめ Visual Studio上での開発

データグリッド

非同期にWebサービスを呼び出しデータ追加

クライアント上での絞込み

Enterキーでフォーカス移動

ASP.NET AJAXとSilverlightの共通点 ビジネス処理とデータアクセス処理を

「サービス」という形で公開しクライアントソフトウェアから利用する

クライアント環境をWindows, IE, .NET Frameworkに限定しない

マイクロソフトが掲げてきた「スマートクライアント」の

発展形

マイクロソフトが掲げてきた「スマートクライアント」の

発展形

サービス作成のための技術 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形式に対応

技術選択簡易チャート

CRUDのサービス化？

CRUDのサービス化？

ADO.NETData Service

ASP.NETWebサービス

WCF

いいえ

はい

HTTP以外?HTTP以外?はい

SOAPでないXML?

SOAPでないXML?

いいえ

はい

いいえ

サービス向きデータアクセス技術 これまで使われてきたDataSet/DataTableは、

ASP.NET AJAXやSilverlightで利用するサービスでは使用できない

それに代わるデータアクセス技術として「LINQ to SQL」「ADO.NET Entity Framework」が使用できる

サービス向きデータアクセス技術 LINQ to SQL .NET Framework 3.0から

DBテーブルとクラスとの対応関係が単純

将来的には推奨されない

ADO.NET Entity Framework .NET Framework 3.5 SP1から

DBテーブルとクラスとの対応関係が柔軟

バージョン1.0ではいくつかの機能が不足

今後はさまざまなRDBMSに対応

Entity Frameworkのエンティティデザイナ

本セッションのまとめ

ビジネス層ビジネス層

データアクセス層

データアクセス層

プレゼンテーション層プレゼンテーション層 サービス層サービス層

ASP.NET AJAX

Silverlight

ADO.NET Data Service

WCF

ASP.NETWeb

サービス

EntityFramework

EntityFramework

LINQ to SQL

技術を上手に選択して、使いやすい業務システムを！