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

5,540 views
5,351 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,540
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

×