WEBデザイン・開発講義WEB Design&Development Lecture

システム設計とWEBデザイン

システム設計のUML、ER図、データフロー作成ツールのインストール

システム設計ツールのインストール

DOAのER図ツールのインストール※画像クリックで拡大表示(リンク)

  • ER図:ERD(Entity Relation Diagram)ツールは、
    A5:SQL Mk-2」が代表的で、そのツールのインストールと動作確認を実施します。
  1. 『A5:SQL Mk-2』のダウンロードサイトは、
    http://www.wind.sannet.ne.jp/m_matsu/developer/a5m2/ から、最新版「Ver.2.11.0」の「ダウンロードはこちら」をクリックすると
    『A5:SQL Mk-2』のダウンロードサイト
    Vectorのダウンロードサイトにリンクしており、Windows-OSの実行環境に合わせて「A5:SQL Mk-2(x86 edition)」か「A5:SQL Mk-2(x64 edition)」を選択してダウンロードを開始します。
    Vectorの『A5:SQL Mk-2』のダウンロードサイト
  2. 『A5:SQL Mk-2』のインストールは、
    設置フォルダを「C:¥Home¥Tools¥a5m2_x64」とし、ダウンロードした「a5m2_2.11.0_x64.zip」(64bit用OSのとき)のzipファイルを同フォルダに移動して解凍します。
    『A5:SQL Mk-2』の設置フォルダ
  3. インストールは、解凍したフォルダにある「A5M2.exe」の実行ファイルをダブルクリックして起動するとインストール完了となります。

「A5:SQL Mk-2」インストール確認ドキュメント『ER図サンプル』のダウンロード
(注)ダウンロードしたドキュメントの拡張子が『a5er』のため、ファイルを右クリックして「プロパティ」を選択して、実行するプログラム「A5M2.exe」を設定するとドキュメントファイルから実行可能になることを確認下さい。(ファイル上のアイコンも設定されるはずです)

POAのデータフロー図ツールのインストール

  • データフロー図:DFD(Data Flow Diagram)ツールは、Dynamic Draw」が代表的で、フローチャートも記述できるツールです。
  1. http://www.dynamicdraw.com/download/jp/ から、最新版「Ver.5.7.1」をダウンロードします。
    『Dynamic Draw』のダウンロードサイト
  2. Dynamic Draw」のインストールは、ダウンロードした「DynamicDraw_5_7_1_jp.msi」をダブルクリックして、インストールを開始します。
    「セットアップウィザード」が表示され、「次へ」ボタンをクリック
    『Dynamic Draw』のインストール1
  3. 「ライセンス条項」が表示され、「同意する」をチェックして「次へ」ボタンをクリック
    『Dynamic Draw』のインストール2
  4. 「プラットフォーム」が表示され、「Windowsにインストール」をチ確認して「次へ」ボタンをクリック
    『Dynamic Draw』のインストール3
  5. 「インストールフォルダ」が表示され、「参照」ボタンをクリックし、「C:¥Home¥Tools¥DynamicDraw¥」のフォルダを作成・指定して、「次へ」ボタンをクリック
    『Dynamic Draw』のインストール4
  6. 「インストールの確認」が表示され、「次へ」ボタンをクリック
    『Dynamic Draw』のインストール5
  7. 「インストールが完了しました。」が表示され、「閉じる」ボタンをクリック
    『Dynamic Draw』のインストール6
  8. http://www.dynamicdraw.com/usersdata/jp/ から、DynamicDrawのテンプレートをダウンロードでき、「DFDとERDのテンプレート」をダウンロードします。
    『Dynamic Drawのテンプレート』のダウンロードサイト
    「C:¥Home¥Tools¥DynamicDraw¥」のフォルダ下の「Templates」に解凍して設置します。

「Dynamic Draw」インストール確認は、インストールしたフォルダ内にある「DynamicDraw.exe」をダブルクリックして起動します。
するとテンプレートファイルを開くダイアログになるので、テンプレートにある「DFD_ERD.mdwt」を選択すると以下のような内容が表示されれば確認OK。
『Dynamic DrawのDFD_ERD』のインストール確認

OOAのUMLモデリングツールのインストール

  • UML(Unified Modeling Language)ツールは、
    astah-community」(Judeの後継版)が代表的で、そのツールのインストールと動作確認を実施します。
  1. http://astah.change-vision.com/ja/download.html から、最新版「Ver.6.9.0」をダウンロードします。
    astah-community『UML』のダウンロードサイト
  2. メンバーの新規登録をして、メールアドレス、パスワードを入力します。
    『astah-community』のメールアドレス、パスワードを入力
  3. 「DOWNLOAD」ボタンをクリックするとダウンロードができます。
    『astah-community』の「DOWNLOAD」ボタンをクリック
  4. セットアップする言語:「日本語」を選択して、「OK」ボタンをクリック
    『astah-community』のインストール1
  5. 「セットアップウィザード」が表示され、「次へ」ボタンをクリック
    『astah-community』のインストール2
  6. 「使用許諾契約書の同意」が表示され、「同意する」をチェックして「次へ」ボタンをクリック
    『astah-community』のインストール3
  7. 「インストール先の指定」が表示され、「参照」ボタンをクリックし、「C:¥Home¥Tools¥astah-community¥」のフォルダを作成・指定して、「次へ」ボタンをクリック
    『astah-community』のインストール4
  8. 「コンポーネットの選択」が表示され、そのままで「次へ」ボタンをクリック
    『astah-community』のインストール5
  9. 「プログラムグループの指定」が表示され、そのままで「次へ」ボタンをクリック
    『astah-community』のインストール6
  10. 「追加タスクの選択」が表示され、そのままで「次へ」ボタンをクリック
    『astah-community』のインストール7
  11. 「インストール準備完了」が表示され、「インストール」ボタンをクリック
    『astah-community』のインストール8
  12. 「インストール状況」が表示されます。
    『astah-community』のインストール9
  13. 「セットアップウィザードの完了」が表示され、「完了」ボタンをクリック
    『astah-community』のインストール10

「UML」ツールのインストール確認は、
インストール後に自動起動されるメニューから「Sample.asta」を選択します。
『astah-community』のインストール後に自動起動されるメニュー
表示された「構造ツリー」から展開して、「Class」のClass Diagram選択するとその図が表示されます。
『Sample.asta』メニューのClass Diagram選択
※クラス図が表示されればOK。

システム設計ツール補足説明

参考のシステム設計資料

pagetopへ