CodeZine(コードジン)

特集ページ一覧

Visual Studio Team Systemで
システムモデリング

Visual Studio Team System 2008 Architecture Editionを使ってみよう(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

システムダイアグラムの作成

 これから、モデリングを行う対象がどんなものかを理解したところで、早速、Visual Studio上でモデルの作成に取り掛かります。最も簡単に話を進めると、アプリケーションシステムのモデルを作成するための手順は次に示すとおりになります。

  1. アプリケーションダイアグラムの作成
  2. システムダイアグラムの作成
アプリケーションダイアグラムの作成

 1番目のアプリケーションダイアグラムの作成は、前回の記事で説明していたアプリケーションデザイナを利用して作成することができます(アプリケーションデザイナを利用してアプリケーションの設定や通信経路がモデリングされたものをアプリケーションダイアグラムと呼んでいます)。使い方などについては、前回の記事をご覧いただくとして、実際に作成が終わると図4に示すとおりになります。

図4:アプリケーションダイアグラムの作成
図4:アプリケーションダイアグラムの作成

 左上の緑色の箱の「App1ClientApp」はWindowsApplicationを利用しています。中央の青色の箱の「App1ServerApp」と「App2ServerApp」はASP.NETWebServiceを利用しています。左下と、中央右側のオレンジ色の箱の「App1Database」と「App2Database」はExternalDatabaseです。右下のグレーの箱の「Service1」はExternalWebServiceを利用しています。また図3に示したような接続になるように、通信経路の定義を行っています。

システムダイアグラムの作成

 アプリケーションダイアグラムの作成まで終了すると準備完了です。いよいよ図3に示したような論理的なくくりを表現するためのシステムデザイナによるモデリングに取り掛かりましょう。まずは、純粋なスマートクライアント部分のモデリングを行います。作業の初めは、システムデザイナ用のファイルを追加します。Visual Studioで開いているソリューションを右クリックして、[追加]‐[新しい分散システムダイアグラム]を選択してください(図5)。新しい項目の追加ダイアログウィンドウが開くので、「Visual Studioにインストールされたテンプレート」から[システムダイアグラム]を選択します(図6)。

図5:新しい分散システムダイアグラムの追加
図5:新しい分散システムダイアグラムの追加
図6:システムダイアグラムの追加
図6:システムダイアグラムの追加

 システムダイアグラムを格納するファイル(.sd拡張子)がソリューションに追加され、中央には、システムデザイナが開きます。併せて、Visual Studioの画面左側の普段ツールボックスなどが表示されている部分に「システムビュー」というウィンドウが開きます(システムビューが表示されていない場合はVisual Studioの[ツール]メニューから[その他のウィンドウ]‐[システムビュー]を選択します)。

図7:システムデザイナの初期表示
図7:システムデザイナの初期表示

 図7では、デザイナ画面上で「System1」という文字を含むグレーの箱がアプリケーションシステムのくくりを表しているものです。この中には、アプリケーションダイアグラム内に定義してあるアプリケーションか、他のシステムダイアグラムで作成したアプリケーションシステムを含めることができます。

 図7の左側にあるシステムビューには、アプリケーションダイアグラムや他のシステムダイアグラムで作成した、アプリケーションまたはアプリケーションシステムの一覧が表示されています。ここからシステムデザイナ上にアイテムをドラッグ&ドロップすることで、システムダイアグラムを作成していくことができます。まずは図3でスマートクライアント型になっている部分をモデルとして作成していきますので、システムビューから「App1ClientApp」と「App1ServerApp」、「App1Database」を「System1」の中にドラッグ&ドロップします。通信経路も再度引き直したところまで終了すると図8のようになります。なお、図8では後で分かりやすいように「System1」という名前は「SmartClientSystem」という名前に変更しています。

図8:スマートクライアント部分のモデリング終了後
図8:スマートクライアント部分のモデリング終了後

 図8のようなモデリングをする際の注意ポイントは、既存のアプリケーションを再度モデリングに利用しているため、エンドポイントは既に存在しているという点です。例えば、図8に示す「App1ServerApp」というWebServiceアプリケーションはドラッグ&ドロップした段階で4つのエンドポイントを既に持っています。よって、通信経路を再度引き直す場合には、アプリケーションダイアグラムを作成した時に利用したエンドポイントと接続の整合性を保って、同じものを利用するように注意してください。

 また図4の段階では、「App1ServerApp」と「App2ServerApp」、「App1ServerApp」と「Service1」はそれぞれ直接の接続がありましたが、本来これらは別のアプリケーションシステムになるはずですので、ここではその接続は定義しません。

 同じ要領で、「App2ServerApp」を含む部分と、「Service1」の部分のシステムダイアグラムを作成するとそれぞれ図9、図10のようになります。

図9:別開発のWebサービス部分のモデリング終了後
図9:別開発のWebサービス部分のモデリング終了後
図10:外部のWebサービス部分のモデリング終了後
図10:外部のWebサービス部分のモデリング終了後

 最後にもう1つシステムダイアグラムを追加します。最後は図8~図10で作成したシステムダイアグラムを1つの絵として表現するためのシステムダイアグラムです。図9や図10に該当するシステムダイアグラムを作成するときにも表示されていたと思いますが、システムビュー内のシステムというカテゴリ内に「SmartClientSystem」や「WebServiceSystem」といった、システムデザイナを使って作成したアプリケーションシステム名が表示されているはずです(図11)。

図11:システムビューの確認
図11:システムビューの確認

 これをドラッグ&ドロップして1つのアプリケーションシステム内に配置しておきましょう。これを実行した結果は図12になります。

図12:アプリケーションシステムをまとめあげたシステムダイアグラム
図12:アプリケーションシステムをまとめあげたシステムダイアグラム

 まずはいったんここまででひと段落としておきましょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Visual Studio Team System 2008 Architecture Editionを使ってみよう

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト りばてぃ/FUJIKO/ナオキ(リバティ, フジコ, ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5