1. 背景

1.1. ドメイン

S社は、地方都市に本社を置くビル管理サービス事業会社である。市内に複数のビルを所有しており、主な事業は不動産賃貸事業及び設備総合管理事業である。

十数年前から所有物件の稼働率を向上するべく貸会議室運営事業に着手している。 当時としては先進的なオンライン予約システムを導入し、利用者からの評価も好評であった。 しかし、システムの老朽化が進んでおり、システムの刷新が求められている。

最近、システムの刷新プロジェクトが立ち上げられたが、担当者の急な退職により十分な引継ぎが行われなかったため全体を把握する人間が不在の状況となっておりプロジェクトは停滞している。

現在、貸会議室運事業の業務の大半は手作業で行われている。利用可能な会議室の登録は手作業でシステムに登録しているため、登録漏れや登録間違いにより予約した会議室が使えない、利用したい会議室がいつも使えないなど利用者からのクレームが発生しておりサービス品質向上が求めらている。 また、プロジェクタやホワイトボードなど付随する設備の要望が上がっているが十分に対応できていない状況である。

S社としては、システム刷新によるサービス品質向上を実現し、サブスクリプションサービスの導入による収益の多様化を実現することで貸会議室運営事業を新たな収益の柱に成長させたいと考えている。

2. 要件

2.1. 概要

要件定義にはリレーションシップ駆動要件分析(RDRA)を使用する。

RDRAとは短時間で要件を把握することを目的とした軽量の手法。 RDRAでは、決められたアイコンを使い、アイコンとアイコン、アイコンと図を関連づけ、アイコンで表現されたモデル要素と関連のつながりから要件を説明する。

rdra
rdra2

RDRA2.0 ハンドブックより引用

また、要件定義は開発と並行して都度反映され運用にも影響を与える。

life cycle.drawio

2.2. システム価値

2.2.1. システムコンテキスト

Diagram

2.2.2. 要求モデル

Diagram

2.3. システム外部環境

2.3.1. ビジネスコンテキスト

Diagram

2.3.2. ビジネスユースケース

会員管理
Diagram
予約管理
Diagram

2.3.3. 業務フロー

会員管理
問い合わせ管理
Diagram
Diagram
予約管理
会議室の予約
Diagram

2.3.4. 利用シーン

会員管理
利用者の認証
Diagram
利用者の管理
Diagram
予約管理
会議室の検索
Diagram
会議室の登録
Diagram

2.3.5. バリエーション・条件

利用者区分

管理者

一般

ゲスト

2.4. システム境界

2.4.1. ユースケース複合図

会員管理
利用者の認証
Diagram
利用者の管理
Diagram
問い合わせ管理
Diagram
予約管理
会議室の検索
Diagram
会議室の予約
Diagram
会議室の登録
Diagram

2.5. システム

2.5.1. 情報モデル

Diagram

2.5.2. 状態モデル

3. 開発

3.1. 仕様

3.1.1. コンテキストマップ

Diagram

3.1.2. ユースケース

service method call hierarchy

認証・認可
Diagram 
Feature: 会員管理:利用者の認証(基本)

  システムとして
  アプリケーション利用者の認証をしたい
  なぜなら認証された利用者むけのサービスだから

  Scenario: 利用者を認証する
    Given "ログイン" ページにアクセスする
    Then "ログイン" がログイン画面に表示される

Feature: 会員管理:利用者の認証(選択)

  システムとして
  アプリケーション利用者の認証をしたい
  なぜなら認証された利用者むけのサービスだから

  Scenario: 利用者を認証する
    Given "ログイン" ページにアクセスする
    Given 未入力でログインする
    Then "利用者番号を入力してください" と "パスワードを入力してください" がログイン画面に表示される

  Scenario: 利用者を認証する
    Given "ログイン" ページにアクセスする
    Given 利用者番号: "12345" パスワード: "password" でログインする
    Then "利用者番号の先頭はUから始まります" がログイン画面にエラー表示される

  Scenario: 利用者を認証する
    Given "ログイン" ページにアクセスする
    Given 利用者番号: "U1" パスワード: "password" でログインする
    Then "利用者番号の長さは7文字です" がログイン画面にエラー表示される

  Scenario: 利用者を認証する
    Given "ログイン" ページにアクセスする
    Given 利用者番号: "U000002" パスワード: "password" でログインする
    Then "パスワードは小文字、大文字、数字を含む必要があります" がログイン画面にエラー表示される

  Scenario: 利用者を認証する
    Given "ログイン" ページにアクセスする
    Given 利用者番号: "U123456" パスワード: "pAssw0rd" でログインする
    Then "利用者が存在しません" がログイン画面にエラー表示される
利用者
Diagram 
Feature: 会員管理:利用者の管理(基本)

  スタッフとして
  アプリケーション利用者の登録をしたい
  なぜなら登録された利用者しか認証できないから

  Background:
    Given "スタッフ" としてログインしている

  Scenario: 利用者を一覧表示する
    Given "利用者一覧画面" ページにアクセスする
    Then 利用者登録画面に利用者番号 "U000001" が表示される

  Scenario: 利用者を新規登録する
    Given "利用者一覧画面" ページにアクセスする
    Given 利用者番号 "U000005" を新規登録する
    Then 利用者登録画面に "利用者を登録しました" が表示される
    Given 新規登録した利用者番号 "U000005" で認証する
    Then 新規登録利用者で認証される

  Scenario: 登録済み利用者を更新登録する
    Given "利用者一覧画面" ページにアクセスする
    Given 利用者番号 "U000005" の利用者情報を更新する
    Then 利用者登録画面に "利用者を更新しました" が表示される
    Given 更新した利用者番号 "U000005" で認証する
    Then 更新した利用者で認証される

  Scenario: 登録済み利用者を削除する
    Given "利用者一覧画面" ページにアクセスする
    Given 利用者番号 "U000005" を削除する
    Then 利用者登録画面に "利用者を削除しました" が表示される
予約
Diagram 
Feature: 予約管理:会議室の検索(基本)

  会員として
  会議室を検索したい
  なぜなら会議室を利用したいから

  Scenario: 予約可能な会議室を検索する
    Given "会員" としてログインしている
    Given "会議室予約一覧画面" ページにアクセスする
    Then 会議室予約一覧に "新木場" が表示される

Feature: 予約管理:会議室の予約(基本)

  会員として
  会議室を予約したい
  なぜなら会議室を利用したいから

  Background:
    Given "会員" としてログインしている

  Scenario: 会議室を予約する
    Given "会議室予約一覧画面" ページにアクセスする
    Given "新木場" 会議室を選択する
    Given 選択した会議室を予約する
    Then 予約者 "Aaa" が表示される

  Scenario: 会議室の予約を取り消す
    Given "会議室予約一覧画面" ページにアクセスする
    Given "有楽町" 会議室を選択する
    Given 選択した会議室を予約する
    Given "会議室予約一覧画面" ページにアクセスする
    Given "有楽町" 会議室を選択する
    Given 選択した会議室を予約をキャンセルする
    Then  会議室予約画面に "予約をキャンセルしました" が表示される

Feature: 予約管理:会議室の予約(選択)

  会員として
  会議室を予約したい
  なぜなら会議室を利用したいから

  Background:
    Given "会員" としてログインしている

  Scenario: 会議室を予約する
    Given "会議室予約一覧画面" ページにアクセスする
    Given "有楽町" 会議室を選択する
    Given 選択した会議室を予約する
    Given "会議室予約一覧画面" ページにアクセスする
    Given "有楽町" 会議室を選択する
    Given 選択した会議室を予約する
    Then  会議室予約画面に "入力の時間帯はすでに予約済です。" が表示される

  Scenario: 会議室を予約する
    Given "会議室予約一覧画面" ページにアクセスする
    Given "有楽町" 会議室を選択する
    Given 選択した会議室を開始時間: "09:00" 終了時間:"08:30" で予約する
    Then  会議室予約画面に "不正な予約時間帯です" が表示される
施設
Diagram 
Feature: 予約管理:会議室の登録(基本)

  スタッフとして
  会議室を登録したい
  なぜなら会議室を利用するために必要だから

  Background:
    Given "スタッフ" としてログインしている

  Scenario: 会議室を登録する
    Given "会議室一覧画面" ページにアクセスする
    Given "新会議室" を登録する
    Then 会議室一覧に "会議室を登録しました" が表示される

  Scenario: 会議室を更新する
    Given "会議室一覧画面" ページにアクセスする
    Given "新会議室" を "更新会議室" に更新する
    Then 会議室一覧に "会議室を更新しました" が表示される

  Scenario: 会議室を削除する
    Given "会議室一覧画面" ページにアクセスする
    Given "新会議室" を削除する
    Then 会議室一覧に "会議室を削除しました" が表示される

  Scenario: 予約可能な会議室を登録する
    Given "予約可能会議室一覧画面" ページにアクセスする
    Given "新木場" を "2022-01-01" 予約可能登録する
    Then 予約可能会議室一覧に "予約可能会議室を登録しました" が表示される

  Scenario: 予約可能な会議室を削除する
    Given "予約可能会議室一覧画面" ページにアクセスする
    Given 予約可能会議室を削除する
    Then 予約可能会議室一覧に "予約可能会議室を削除しました" が表示される

Feature: 予約管理:会議室の登録(選択)

  スタッフとして
  会議室を登録したい
  なぜなら会議室を利用するために必要だから

  Background:
    Given "スタッフ" としてログインしている

  Scenario: 会議室を登録する
    Given "会議室一覧画面" ページにアクセスする
    Given 会議室番号:" " 会議室名: " " で登録する
    Then 会議室一覧に "会議室番号が未入力です" がエラー表示される

  Scenario: 会議室を登録する
    Given "会議室一覧画面" ページにアクセスする
    Given 会議室番号:"123" 会議室名: " " で登録する
    Then 会議室一覧に "会議室名が未入力です" がエラー表示される

  Scenario: 会議室を登録する
    Given "会議室一覧画面" ページにアクセスする
    Given 会議室番号:"1234" 会議室名: "新会議室" で登録する
    Then 会議室一覧に "会議室番号は999以下である必要があります" がエラー表示される
問い合わせ
Diagram 
Feature: 会員管理:問い合わせの実施(基本)

  会員として
  問い合わせをしたい
  なぜならサービス内容を確認する手段が必要だから

  Background:
    Given "会員" としてログインしている

  Scenario: 問い合わせをする
    Given "問い合わせ画面" ページにアクセスする
    Given 問い合わせ画面で "問い合わせ内容" を入力する
    Then 問い合わせが送信される

Feature: 会員管理:問い合わせの実施(基本)

  ゲストとして
  問い合わせをしたい
  なぜならサービス内容を確認する手段が必要だから

  Scenario: 問い合わせをする
    Given "ゲスト問い合わせ画面" ページにアクセスする
    Given 問い合わせ画面で "問い合わせ内容" を入力する
    Then 問い合わせが送信される

Feature: 会員管理:問い合わせの対応(基本)

  スタッフとして
  会員からの問い合わせを管理したい
  なぜならサービス品質を向上させるため資料を提供するために必要であるから

  Background:
    Given "スタッフ" としてログインしている

  Scenario: 会員の問い合わせを確認する
    Given "会員" としてログインしている
    Given "問い合わせ画面" ページにアクセスする
    Given 問い合わせ画面で "問い合わせ内容" を入力する
    Given "スタッフ" としてログインしている
    Given "問い合わせ一覧画面" ページにアクセスする
    Then 問い合わせ一覧画面に "問い合わせ内容" が表示される

  Scenario: ゲストの問い合わせを確認する
    Given "ゲスト問い合わせ画面" ページにアクセスする
    Given 問い合わせ画面で "問い合わせ内容" を入力する
    Given "スタッフ" としてログインしている
    Given "問い合わせ一覧画面" ページにアクセスする
    Then 問い合わせ一覧画面に "問い合わせ内容" が表示される

3.2. 設計

3.2.1. アプリケーションアーキテクチャ

architecture

3.2.2. ドメインモデル

package relation depth4
business rule relation
利用者
Diagram
予約
Diagram
施設
Diagram
問い合わせ
Diagram

3.2.3. データモデル

利用者
relationships.real.large
予約
relationships.real.large
施設
relationships.real.large
問い合わせ
relationships.real.large

4. 運用

4.1. 開発

npm start

4.2. テスト

npm test

4.3. ビルド

npm build

4.4. デプロイ

npm run deploy

5. 構築

ソフトウェア

バージョン

備考

Java

17

Node.js

16.3.0

5.1. アプリケーションコンポーネント

5.1.1. プロダクション・開発環境

Diagram

5.2. コンポーネントセットアップ

5.2.1. 開発関連

開発ツール
npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/register
npm install --save-dev npm-run-all watch foreman cpx rimraf marked@1.2.2
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server
touch Procfile.dev

5.2.2. ドキュメント関連

Asciidoctor
npm install --save-dev asciidoctor asciidoctor-kroki

5.2.3. フロントエンド関連

Cypress
npm install cypress
npmx cypress open
npm install --save-dev cypress-cucumber-preprocessor
npm install --save-dev cucumber-html-reporter
React
npm install --save-dev jest
npm install react react-dom
npm install --save-dev babel-loader @babel/preset-react
npm install --save-dev @testing-library/react @testing-library/jest-dom
npm install --save-dev sass-loader sass style-loader css-loader
npm install --save-dev identity-obj-proxy
npm install react-router-dom
npm install --save-dev typescript ts-loader
npm install --save @types/react @types/react-dom @types/react-router-dom
npm install --save-dev @types/jest@27.1.4 ts-jest@27.1.4
npx tsc --init
npm install -save @reduxjs/toolkit react-redux
npm install -save axios @types/axios
npm install --save-dev react-hook-form
npm install cross-env

6. 配置

6.1. システムアーキテクチャ

Diagram 
heroku create case-study-mrs
heroku open

7. 参照