Webシステム授業資料

(1)

Webシステムプログラミングb

第09講目

(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定義書、画面遷移図など）

₃

(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上で実行可能

◼

発展部分の実装

※平常試験やレポート課題を含め総合的に評価する

◼

サンプル課題

◼

ゼミ室の蔵書管理システム

₁₀

(11)

システム設計の流れ

◼

DB設計はシステム設計の一部

11

業務分析

要件定義

基本設計

論理設計

詳細設計

今の業務はどうなっているのか

何をしたいのか

どんなシステムにすべきか

どのように実現するか

方法を明確にする

DB設計は

この段階に含まれる

DB設計＝DBの構造を設計

今回はこの部分が中心

(12)

業務分析・要件定義

◼

業務分析

◼

改善対象の業務実態（問題点）を客観的に把握する手法

◼

現状の業務内容、処理方式、業務間を流れる情報、業務量など

◼

具体例：貸出カードに記入して本を借りる、本を返却する

◼

手法：関係者インタビュー、ユースケース

◼

要件定義

◼

業務のあるべき姿（理想）を明確に定義する手法

◼

業務分析での問題点に対する改善策（何を解決するものか）

◼

具体例：貸出記録を管理したい、蔵書を管理したい

◼

手法：5W2H（5W1Hにコスト追加）、要求ワークショップ

◼

Why（何のために）When（いつ）Where（どこから）Who（誰が）

◼

What（何の情報）How much（どれくらい）How（どうするのか）

₁₂

(13)

具体例：業務分析・要件定義

◼

業務内容：ゼミ室の蔵書管理

◼

業務分析

◼

ゼミ室には教員の専門分野に関する書籍が豊富にある

◼

研究を進める際に、ゼミ生はゼミ室で書籍を読んだり、

必要に応じて教員から許可を得て書籍を借りたりする

◼

教員は誰に何の書籍を貸しているかは管理できていない

◼

要件定義

◼

ゼミ室の蔵書と貸し出し記録を管理したい

◼

教員はゼミ生の名簿と蔵書を管理したい

◼

教員、またはゼミ生は貸し出し記録を付けたい

◼

書籍の貸し出し冊数は5冊まで、期限は2週間とする

₁₃

(14)

基本設計

◼

基本設計

◼

要件定義を満たすシステム構成を記述する手法

◼

機能設計、データ構造

◼

システムフロー

◼

機能設計

◼

要件定義を満たす機能の洗い出し

◼

データ構造

◼

機能を実現するために記録すべきデータの整理

14

(15)

具体例：基本設計（1）

◼

機能

◼

ログイン機能

◼

ユーザのID、パスワードでログイン

◼

ユーザ管理機能

◼

ユーザの追加・更新・削除が可能

◼

ユーザ毎に権限を付与し、利用できる機能を制限

◼

蔵書登録機能

◼

書籍の追加・更新・削除が可能

◼

書籍のタイトル、カテゴリ、出版社、発行年などを管理

◼

条件を指定した蔵書検索が可能

◼

貸し出し機能

◼

ユーザへの書籍貸し出しを台帳に記録

◼

ユーザへの貸し出し冊数の上限と期限を設ける

15

(16)

具体例：基本設計（2）

◼

データ構造

◼

ユーザ情報

◼

ユーザID、パスワード、名前、権限（管理者 or 利用者）

◼

ユーザ情報を変更できるのは管理者のみ

◼

蔵書情報

◼

書籍のタイトル、カテゴリ、出版社、発行年

◼

貸出台帳

◼

書籍と貸し出したユーザの紐付け

◼

貸出日、返却予定日、貸出状態（貸出OK or 貸出中）

◼

上記の基本設計に基づきDBや画面設計を行う

16

(17)

システムフロー

◼

システムの構成と処理の流れを図示したもの

17

メニュー画面

Webブラウザ

アプリケーション

サーバ

データベース

サーバ

メニュー表示

ユーザ情報

蔵書情報

貸出台帳

貸出画面

蔵書登録

貸出処理

リクエストレスポンス DB操作レスポンスリクエストリクエスト

(18)

システム構成

◼

システム構成の事例

◼

LAMP環境：一般的なWebアプリケーション

◼

OS：Linux、Webサーバ：Apache

◼

データベース：MySQL、プログラミング言語：PHP

◼

授業で利用する環境

◼

OS：Windows、Webサーバ：Apache or Tomcat

◼

データベース：MySQL、プログラミング言語：PHP、Java

◼

MEAN：純粋JSのフルスタック、高リアルタイム性を追究

◼

MongoDB（ドキュメント思考データベース）

◼

Expless（Node.jsで動作するMVCフレームワーク）

◼

AngularJS（フロントエンドのJSフレームワーク）

◼

Node.js（サーバサイドのJS実行環境）

18

PHP

MySQL

Apache

Linux

(19)

Webアプリケーションフレームワーク

◼

概要

◼

目的：Webシステム開発の作業効率化＆保守性向上

◼

機能

◼

DBアクセスのライブラリ、Webテンプレート

◼

セッション管理、コードの再利用

◼

多くがMVC（Model-View-Controller）を採用

◼

代表的なフレームワーク

◼

PHP：CakePHP、Symfony、Laravel

◼

Java：Play Framework、Apache Struts

◼

Ruby：Ruby on Rails

◼

Python：Django

(20)

フレームワーク例：Ruby on Rails

◼

特徴

◼

Webアプリケーション開発の「フレームワーク」

◼

オブジェクト指向スクリプト言語「Ruby」で記述

◼

MVC（Model-View-Controller）アーキテクチャ

◼

モデル、ビュー、コントローラでの役割分担

◼

RubyとRails

◼

Ruby：プログラム言語

◼

Rails：Rubyで記述されたフレームワーク

◼

フレームワーク：ツール、ライブラリ、設定ファイル等

20

Ruby

Ruby on Rails

図. RubyとRailsの関係

(21)

MVCアーキテクチャ

◼

MVCアーキテクチャ

◼

モデル：DBとの連携

◼

ビュー：画面表示

◼

コントローラ：ユーザからのデータ入力＆内部処理

21

コントローラ

モデル

ビュー

DB

図. MVCアーキテクチャの概要

ユーザ

端末

①

②

③

④

(22)

開発するWebシステムの例（1）

◼

テーマ：学生生活で利用するWebシステム

◼

学業

◼

楽単システム（単位の習得難易度を管理）

◼

文献ストッカー（読んだ論文の要点、課題を記録）

◼

課外活動

◼

みんなのサークル（サークルでの出来事をシェア）

◼

読書日記（読んだ本とその書評）

22

(23)

開発するWebシステムの例（2）

◼

テーマ：学生生活で利用するWebシステム

◼

生活

◼

お小遣い帳（可処分所得から毎月の小遣いを管理）

◼

アルバイト

◼

アルバイターの道標（おすすめアルバイトの情報共有）

◼

遊び

◼

遊んだゲームリスト＆感想付き

◼

映画の感想共有（映画を感想をみんなでシェア）

23

(24)

課題のイメージ

(25)

想定される提出物

◼

提出物一覧

◼

第10講目：システムのタイトル、提出物一覧、要件定義書

◼

要件定義書：業務分析・要件をまとめたもの

◼

第11講目：基本設計書、画面設計図

◼

システム要件、機能とデータ構造、DB要件をまとめたもの

◼

第12講目：DB設計書

◼

ER図、テーブル定義書

◼

第13講目： UI設計書

◼

画面遷移図

◼

第14・15講目：設計書一式

◼

これまでの設計書 ※修正箇所があれば再提出

◼

実行結果と考察

25

(26)

DBの復習（1）

◼

用語（1）

◼

スキーマ（schema）：DBの構造を定義したもの

◼

表（テーブル、table）：リレーションともよぶ

◼

行（レコード、row）：1件のデータのこと

◼

列（フィールド、column）：各項目のこと

26

(27)

DBの復習（2）

◼

用語（２）

◼

空値である（null）：値が空であること

◼

一意である（ユニーク、unique）：同じ値がないこと

◼

キー：重要な役割りを持つフィールド

◼

主キー（primary key）：データを識別するフィールド

◼

キーと主キーは一意であり、空値はとらない

27

(28)

リレーショナルデータベースの操作

◼

考え方

◼

数学の概念に基づいた演算でデータ操作を行う

◼

操作の種類

◼

集合演算

◼

和（union）、差（difference）

◼

積（intersection）、直積（Cartesian product）

◼

関係演算

◼

射影（projection）、選択（selection）

◼

結合（join）、商（division）

28

(29)

和（union）

◼

2つの表に存在する全てのレコードを抽出

(30)

差（difference）

◼

片方の表のみに存在するレコードを抽出

◼

どの表を基準にするかによって、結果が異なる

(31)

積（intersection）

◼

2つの表に共通して存在するレコードを抽出

(32)

直積（Cartesian product）

◼

2つの表の行の組み合わせをすべて組み合わせる

(33)

射影（projection）

◼

表中の列を抽出する

(34)

選択（selection）

◼

表中の行を抽出する

(35)

結合（join）（1）

◼

表をつなぎ合わせる

◼

「商品」表の主キーである「商品コード」を参照する

◼

このとき「売上」表の商品コードを

外部キー

とよぶ

(36)

結合（join）（2）

◼

表をつなぎ合わせる

(37)

商（division）

◼

割られるほうの表から、割るほうの表のすべての行

を含むものを取り出し、そこから割るほうの行を除く

(38)

商（division）手順1

◼

割られるほうの表から、割るほうの表のすべての行

を含むものを取り出す

(39)