Webシステム授業資料

Transcription

1 Web システムプログラミング b 第 09 講目 Web システムプログラミング講義資料

2 到達目標 到達目標 Web システムを設計し 開発できること 最終成果物 : 学生生活で利用できる Web システム 授業計画 第 09 講 (12/03):Webシステムの基本設計 (1) 第 10 講 (12/10):Webシステムの基本設計 (2) 第 11 講 (12/17):WebシステムのDB 設計 第 12 講 (01/07):WebシステムのUI 設計 第 13 講 (01/21):Webシステムの処理 第 14 講 (01/23): 補講日 サンプル課題設計書 第 15 講 (01/28): 平常試験 ( 成果物確認 ) まとめ 2

3 第 09 講 :Web システムの基本設計 (1) 講義内容 Web システムの設計工程 業務分析 要件定義 基本設計 論理設計 詳細設計 Web システムの構成 各種 Webアプリケーションフレームワーク紹介 Model-View-Controller(MVC) に基づく設計 レポート課題 学生生活で利用できる Web システムの要件定義書 システムのタイトルと最終成果物の洗い出し 要件定義書 レポートに最低限書く内容 業務分析 要件定義を行うこと 最終成果物の確認 ( 要件定義書 DB 定義書 画面遷移図など ) 3

4 第 10 講 :Web システムの基本設計 (2) 講義内容 スピーディーな開発手法 Web API ライブラリの活用 ソーシャル連携サービス Web システムの外部設計 画面設計図 レポート課題 学生生活で利用できる Web システムの基本設計書 システムの機能とデータ構造 データの登録 表示 更新 削除ができること (CRUD) ログイン機能があると尚良 ( 要セッション管理 ) 画面設計図 4

5 第 11 講 :Web システムの DB 設計 講義内容 DB 設計 必要なデータの洗い出し 正規化 ER 図 テーブル定義表 レポート課題 学生生活で利用できる Web システムの DB 設計 要件 ER 図 テーブル定義表 DBには学生テーブルを含む3つ以上のテーブルがあること 各テーブルは第 3 正規形になっていること 5

6 講義内容 第 12 講 :Web システムの UI 設計 UI 設計の方針 画面遷移図 DB の実装 レポート課題 学生生活で利用できる Web システムの UI 設計 画面遷移図 6

7 講義内容 第 13 講 :Web システムの処理 内部処理の説明 授業時間の大半は開発 & 質問の時間 レポート課題 学生生活で利用できる Web システムの設計書一式 要件定義書 基本設計書 DB 定義書 ( テーブル定義表 ER 図 ) 画面設計図 画面遷移図 実行結果と考察 課題提出時と変更があれば修正版を提出 7

8 講義内容 第 14 講 : サンプル課題設計書 サンプル課題設計書の説明 授業時間の大半は開発 & 質問の時間 サンプル課題設計書一式 要件定義書 基本設計書 DB 定義書 ( テーブル定義表 ER 図 ) 画面設計図 画面遷移図 8

9 第 15 講 : 平常試験 ( 成果物確認 ) 講義内容 各自の成果物確認 成果物の確認 基本部分 設計書一式 Webシステムの実行画面 画面操作とDBの整合性確認 発展部分 ログイン機能 他サービスとの連携 (Twitterログイン Google Maps 連携など ) 9

10 評価基準の目安 目安 C: サンプル課題の流用 or テーブル内容の表示のみ サンプル課題をそのままの流用 レコードの追加 削除はSQL 手動での実行のみ B: オリジナル課題 テーブルの追加 表示ができること レコードの削除 変更は SQL 手動で実行でも OK A~S: テーブルの追加 表示 変更 削除ができること レコードの入出力は 基本 Web 上で実行可能 発展部分の実装 平常試験やレポート課題を含め総合的に評価する サンプル課題 ゼミ室の蔵書管理システム 10

11 システム設計の流れ DB 設計はシステム設計の一部 業務分析 今の業務はどうなっているのか 要件定義 何をしたいのか 今回はこの部分が中心 基本設計 どんなシステムにすべきか DB 設計はこの段階に含まれる 論理設計 どのように実現するか DB 設計 =DB の構造を設計 詳細設計 方法を明確にする TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES 11

12 業務分析 要件定義 業務分析 改善対象の業務実態 ( 問題点 ) を客観的に把握する手法 現状の業務内容 処理方式 業務間を流れる情報 業務量など 具体例 : 貸出カードに記入して本を借りる 本を返却する 手法 : 関係者インタビュー ユースケース 要件定義 業務のあるべき姿 ( 理想 ) を明確に定義する手法 業務分析での問題点に対する改善策 ( 何を解決するものか ) 具体例 : 貸出記録を管理したい 蔵書を管理したい 手法 :5W2H(5W1H にコスト追加 ) 要求ワークショップ Why( 何のために )When( いつ )Where( どこから )Who( 誰が ) What( 何の情報 )How much( どれくらい )How( どうするのか ) 12

13 具体例 : 業務分析 要件定義 業務内容 : ゼミ室の蔵書管理 業務分析 ゼミ室には教員の専門分野に関する書籍が豊富にある 研究を進める際に ゼミ生はゼミ室で書籍を読んだり 必要に応じて教員から許可を得て書籍を借りたりする 教員は誰に何の書籍を貸しているかは管理できていない 要件定義 ゼミ室の蔵書と貸し出し記録を管理したい 教員はゼミ生の名簿と蔵書を管理したい 教員 またはゼミ生は貸し出し記録を付けたい 書籍の貸し出し冊数は 5 冊まで 期限は 2 週間とする 13

14 基本設計 基本設計 要件定義を満たすシステム構成を記述する手法 機能設計 データ構造 システムフロー 機能設計 要件定義を満たす機能の洗い出し データ構造 機能を実現するために記録すべきデータの整理 14

15 具体例 : 基本設計 (1) 機能 ログイン機能 ユーザの ID パスワードでログイン ユーザ管理機能 ユーザの追加 更新 削除が可能 ユーザ毎に権限を付与し 利用できる機能を制限 蔵書登録機能 書籍の追加 更新 削除が可能 書籍のタイトル カテゴリ 出版社 発行年などを管理 条件を指定した蔵書検索が可能 貸し出し機能 ユーザへの書籍貸し出しを台帳に記録 ユーザへの貸し出し冊数の上限と期限を設ける 15

16 データ構造 ユーザ情報 具体例 : 基本設計 (2) ユーザID パスワード 名前 権限( 管理者 or 利用者 ) ユーザ情報を変更できるのは管理者のみ 蔵書情報 書籍のタイトル カテゴリ 出版社 発行年 貸出台帳 書籍と貸し出したユーザの紐付け 貸出日 返却予定日 貸出状態 ( 貸出 OK or 貸出中 ) 上記の基本設計に基づき DB や画面設計を行う 16

17 システムフロー システムの構成と処理の流れを図示したもの Web ブラウザ アプリケーションサーバ データベースサーバ メニュー画面 リクエスト メニュー表示 DB 操作 レスポンス レスポンス ユーザ情報 貸出画面 リクエスト 貸出処理 蔵書情報 蔵書登録 リクエスト 蔵書登録 貸出台帳 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES 17

18 システム構成の事例 システム構成 LAMP 環境 : 一般的な Web アプリケーション OS:Linux Webサーバ :Apache データベース :MySQL プログラミング言語:PHP 授業で利用する環境 OS:Windows Webサーバ :Apache or Tomcat データベース :MySQL プログラミング言語:PHP Java PHP MySQL Apache Linux MEAN: 純粋 JS のフルスタック 高リアルタイム性を追究 MongoDB( ドキュメント思考データベース ) Expless(Node.jsで動作するMVCフレームワーク ) AngularJS( フロントエンドのJSフレームワーク ) Node.js( サーバサイドのJS 実行環境 ) 18

19 Web アプリケーションフレームワーク 概要 目的 :Webシステム開発の作業効率化& 保守性向上 機能 DBアクセスのライブラリ Webテンプレート セッション管理 コードの再利用 多くがMVC(Model-View-Controller) を採用 代表的なフレームワーク PHP:CakePHP Symfony Laravel Java:Play Framework Apache Struts Ruby:Ruby on Rails Python:Django 19

20 特徴 フレームワーク例 :Ruby on Rails Webアプリケーション開発の フレームワーク オブジェクト指向スクリプト言語 Ruby で記述 MVC(Model-View-Controller) アーキテクチャ モデル ビュー コントローラでの役割分担 Ruby と Rails Ruby: プログラム言語 Rails:Rubyで記述されたフレームワーク フレームワーク : ツール ライブラリ 設定ファイル等 Ruby Ruby on Rails 図. Ruby と Rails の関係 20

21 MVC アーキテクチャ MVC アーキテクチャ モデル :DBとの連携 ビュー : 画面表示 コントローラ : ユーザからのデータ入力 & 内部処理 1 コントローラ モデル 端末 DB ビュー ユーザ 図. MVC アーキテクチャの概要 21

22 開発する Web システムの例 (1) テーマ : 学生生活で利用する Web システム 学業 楽単システム ( 単位の習得難易度を管理 ) 文献ストッカー ( 読んだ論文の要点 課題を記録 ) 課外活動 みんなのサークル ( サークルでの出来事をシェア ) 読書日記 ( 読んだ本とその書評 ) 22

23 開発する Web システムの例 (2) テーマ : 学生生活で利用する Web システム 生活 お小遣い帳 ( 可処分所得から毎月の小遣いを管理 ) アルバイト アルバイターの道標 ( おすすめアルバイトの情報共有 ) 遊び 遊んだゲームリスト & 感想付き 映画の感想共有 ( 映画を感想をみんなでシェア ) 23

24 課題のイメージ 24 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

25 想定される提出物 提出物一覧 第 10 講目 : システムのタイトル 提出物一覧 要件定義書 要件定義書 : 業務分析 要件をまとめたもの 第 11 講目 : 基本設計書 画面設計図 システム要件 機能とデータ構造 DB 要件をまとめたもの 第 12 講目 :DB 設計書 ER 図 テーブル定義書 第 13 講目 : UI 設計書 画面遷移図 第 講目 : 設計書一式 これまでの設計書 修正箇所があれば再提出 実行結果と考察 25

26 DB の復習 (1) 用語 (1) スキーマ (schema):dbの構造を定義したもの 表 ( テーブル table): リレーションともよぶ 行 ( レコード row):1 件のデータのこと 列 ( フィールド column): 各項目のこと 26

27 DB の復習 (2) 用語 (2) 空値である (null): 値が空であること 一意である ( ユニーク unique): 同じ値がないこと キー : 重要な役割りを持つフィールド 主キー (primary key): データを識別するフィールド キーと主キーは一意であり 空値はとらない 27

28 リレーショナルデータベースの操作 考え方 数学の概念に基づいた演算でデータ操作を行う 操作の種類 集合演算 和 (union) 差(difference) 積 (intersection) 直積(Cartesian product) 関係演算 射影 (projection) 選択(selection) 結合 (join) 商(division) 28

29 和 (union) 2 つの表に存在する全てのレコードを抽出 29 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

30 差 (difference) 片方の表のみに存在するレコードを抽出 どの表を基準にするかによって 結果が異なる 30

31 積 (intersection) 2 つの表に共通して存在するレコードを抽出 31 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

32 直積 (Cartesian product) 2 つの表の行の組み合わせをすべて組み合わせる 32 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

33 表中の列を抽出する 射影 (projection) 33 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

34 表中の行を抽出する 選択 (selection) 34 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

35 表をつなぎ合わせる 結合 (join)(1) 商品 表の主キーである 商品コード を参照する このとき 売上 表の商品コードを外部キーとよぶ 35

36 表をつなぎ合わせる 結合 (join)(2) 36 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

37 商 (division) 割られるほうの表から 割るほうの表のすべての行を含むものを取り出し そこから割るほうの行を除く 37 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

38 商 (division) 手順 1 割られるほうの表から 割るほうの表のすべての行を含むものを取り出す 38 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES

39 割るほうの行を除く 商 (division) 手順 2 39 TOKYO UNIVERSITY OFINFORMATION TOKYO JOHO UNIVERSITY SCIENCES