第19回 ソフトウェア開発環境展 ソフトウェア開発環境展 専門セミナー SD-5 プログラミング技法の最前線 (2009/5/14)

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

2. アジェンダ
 はじめに
 ASP.NET AJAXの説明
 ASP.NET AJAXのデモ
 Silverlightの説明
 Silverlightのデモ
 サービスの実装技術の紹介
 データアクセスの実装技術の紹介

3. 自己紹介
 猪股 健太郎 （いのまたけんたろう）
 日本ユニシス株式会社
共通利用技術部 .NETセンター
 2002年9月よりMicrosoft .NET専任組織に所属
 .NET案件提案支援、開発支援
 弊社開発標準「LUCINA for .NET」の策定
 技術記事執筆 (@IT、dotNETマガジン、Web+DB Press他)
 2008年7月
Microsoft MVP for Developer : Visual C# 受賞

4. Webアプリケーションのデザイン
 業務で使っている
Web アプリケーションの
デザインに満足している？
 デザインの
最も重要な
要素は？
出典：
2008/7 RIAコンソーシアム
http://www.ria-jp.org/css/
information/press/
20080714.pdf

5. 使いやすい業務システム
 業務システムを使いやすくするメリット
 業務システム利用時間の短縮
 マニュアル・教育のコスト低減
 業務システムを使いやすくする方法
 システム機能の視点から利用者の視点へ
 トップダウン……設計の方法を見直す
 ボトムアップ……“カイゼン”

6. .NET Webアプリケーションを使いやすく
 AJAX機能
→「ASP.NET AJAX」
 RIA (リッチ・インターネット・アプリケーション)
→「Silverlight」

7. AJAXとは
ブラウザの機能を活用してWebの表現力を上げるしくみ
非同期
 Asynchronous 画面遷移のタイミングとは別に
サーバーと通信したり
画面の一部を書き換えたりする
 JavaScript JavaScript
ブラウザに最初から備わっている
ブラウザの中でプログラムを実行できる
 And
Webサービス
XML XMLなどを用いてサーバーと通信する
Webサービスの技術を応用している

8. AJAXの例： Google Map

9. Webアプリケーションの基本構造
ブラウザ プレゼン ビジネス層 データ
テーション層 アクセス層
画面を要求
画面を 業務 DBに
送信 処理 アクセス
画面を表示
クライアント サーバー

10. AJAXアプリケーションの基本構造
ブラウザ プレゼン ビジネス層 データ
画面を要求 テーション層 アクセス層
画面を
画面を表示
送信
JavaScript 業務 DBに
画面の 処理 アクセス
サービス層
一部を更新
データを データを
送受信 送受信
クライアント サーバー

11. ASP.NET AJAX Control Toolkit
 ASP.NET AJAXの機能を拡張
 すぐに役立つ35種類の部品
 コミュニティベースの開発
 ソースコードも公開
 http://www.asp.net/ajax/ajaxcontroltoolkit/
（英語、動作サンプルあり）

12. ASP.NET AJAXの全体像
クライアント サーバー サーバー
フレームワーク フレームワーク コントロール
ASP.NET ASP.NET ASP.NET
AJAX Library AJAX Extensions AJAX Control Toolkit
JavaScriptの開発を Webアプリケーションを
便利な画面部品を
簡単にする AJAX対応させる
多数まとめたライブラリ
フレームワーク フレームワーク
Visual Studio 2008に含まれている ダウンロードして追加する

13. 業務システムに便利な部品(1)
 ValidatorCalloutExtender
 検証コントロールのエラー表示をわかりやすくする
 CalendarExtender
 日付の入力を支援する
 FilteredTextBoxExtender
 許可された文字だけを入力させる
 MaskedEditExtender
 文字列のフォーマットを限定する

14. DEMO
ValidatorCalloutExtender
CalendarExtender
FilteredTextBoxExtender
MaskedEditExtender

15. デモのまとめ
 AJAXの機能を使う画面には
ScriptManagerを追加しておく
 AJAX Control Toolkitの部品を
Visual Studioのツールボックスに登録する
 ValidatorCalloutExtenderは
検証コントロールの機能を拡張する
 CalendarExtender, FilteredTextBoxExtender,
MaskedEditExtenderは
テキストボックスの機能を拡張する

16. 業務システムに便利な部品(2)
 CascadingDropDown
 階層関係のある選択ボックスを作る
（例：大分類→中分類→小分類）
 AutoComplete
 入力値の候補をポップアップ表示する

17. Webサービスを呼び出す
 CascadingDropDownとAutoCompleteは
動作するためにWebサービスが必要である
JavaScript サービス層
現在の入力値を
サーバに送信 現在の入力値をもとに
次の入力候補一覧を
次の入力候補の クライアントに送信
表示を更新

18. DEMO
CascadingDropDown
AutoComplete

19. デモのまとめ
 Webサービスクラスには
[ScriptService]属性を追加しておく
 Webサービスメソッドの
パラメータ名にも注意する
 C# 3.0の機能である
自動プロパティとLINQの紹介
 CascadingDropDownとAutoCompleteの
ServicePathとServiceMethodを設定する

20. Webアプリケーションで難しいこと
 業務アプリケーションでよく使われる画面で
Webアプリケーションでは難しいこと
 データグリッド (Excelのような)
 100件を超えるデータの一覧表示
 柔軟なキー入力制御
（ファンクションキーやEnterキーなど）
 AJAXを駆使して実現することもできるが……
 高度なプログラミングスキルが要求される
 複数ブラウザ・複数バージョンのテストが大変

21. Microsoft Silverlight
http://www.microsoft.com/japan/silverlight/
 主要Webブラウザーに対応するプラグイン
 複数プラットフォームに対応
 マルチメディアコンテンツを再生可能
 .NET Frameworkは不要
 表現力豊かなアプリケーションを
ブラウザ上で動作可能
RIA (リッチ・インターネット・アプリケーション)

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

23. SilverlightでRIA
 Visual Studioを使って
C#やVBでプログラムを開発可能
 Visual Studioのアドオンを無料配布
 デザインやアニメーションはXAMLで定義する
 デザイナー向けツール ”Microsoft Expression”
 データグリッドなどの便利なコントロールを利用可能
 Webサービスでサーバーと通信可能

24. Silverlightアプリケーションの基本構造
ブラウザ ビジネス層 データ
アクセス層
Silverlight サービス層
業務 DBに
画面を更新
処理 アクセス
データを データを
送受信 送受信
クライアント サーバー

25. DEMO
Silverlightアプリケーションサンプル

26. デモのまとめ
 Visual Studio上での開発
 データグリッド
 非同期にWebサービスを呼び出しデータ追加
 クライアント上での絞込み
 Enterキーでフォーカス移動

27. ASP.NET AJAXとSilverlightの共通点
 ビジネス処理とデータアクセス処理を
「サービス」という形で公開し
クライアントソフトウェアから利用する
 クライアント環境を
Windows, IE, .NET Frameworkに限定しない
マイクロソフトが掲げてきた
「スマートクライアント」の
発展形

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

29. 技術選択簡易チャート
CRUDの はい ADO.NET
サービス化？ Data Service
いいえ
はい
HTTP以外? WCF
いいえ
SOAPでない はい
XML?
ASP.NET
いいえ
Webサービス

30. サービス向きデータアクセス技術
 これまで使われてきたDataSet/DataTableは、
ASP.NET AJAXやSilverlightで利用するサービスでは
使用できない
 それに代わるデータアクセス技術として
「LINQ to SQL」
「ADO.NET Entity Framework」
が使用できる

31. サービス向きデータアクセス技術
 LINQ to SQL
 .NET Framework 3.0から
 DBテーブルとクラスとの対応関係が単純
 将来的には推奨されない
 ADO.NET Entity Framework
 .NET Framework 3.5 SP1から
 DBテーブルとクラスとの対応関係が柔軟
 バージョン1.0ではいくつかの機能が不足
 今後はさまざまなRDBMSに対応

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

33. 本セッションのまとめ
技術を上手に選択して、使いやすい業務システムを！
プレゼンテーション層 サービス層 データ
アクセス層
ASP.NET ADO.NET Data Service
AJAX ビジネス層
WCF Entity
ASP.NET Framework
Silverlight
Web
サービス
LINQ to SQL