ありがとうございます。

ここから 第18段階：画面設計・Thymeleaf実装方針設計（Bootstrap5 + Fragment + 画面パターン） に進みます。

これまでバックエンド側を中心に設計してきましたが、今回は実際に利用者が操作する画面構造を設計します。

対象ユーザー：

管理者
教師
メンター（将来）
受講者

です。

第18段階全体画面構成

                    LMS

                     |

        +------------+------------+

        管理画面                  利用画面

          |                         |

       Admin                    Teacher

          |                         |

    User管理                 教材管理

    承認管理                 教材作成

                     |

                  Student

                     |

                学習画面

1. Thymeleaf構成方針

Spring Boot + Thymeleafでは、画面共通部品をFragment化します。

推奨構成：

src/main/resources/templates

├ layouts
│
│  ├ base.html
│  └ fragment.html
│
├ components
│
│  ├ header.html
│  ├ sidebar.html
│  ├ pagination.html
│  ├ alert.html
│  └ modal.html
│
├ admin
│
├ teacher
│
├ student
│
└ error

2. 共通レイアウト

利用：

Bootstrap5
Thymeleaf Layout Dialect

または

Thymeleaf Fragment

今回は標準Fragment方式を採用します。

理由：

Spring Boot標準
学習コストが低い
保守しやすい

3. base.html

全画面共通。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8">

<title th:text="${title}">
LMS
</title>

<link
href="/webjars/bootstrap/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<header
th:replace="~{components/header :: header}">
</header>

<div class="container-fluid">

<div class="row">

<aside
class="col-md-2"
th:replace="~{components/sidebar :: sidebar}">
</aside>

<main
class="col-md-10">

<div
th:replace="${content}">
</div>

</main>

</div>

</div>

<script
src="/webjars/bootstrap/js/bootstrap.bundle.min.js">
</script>

</body>

</html>

4. Header Fragment

配置：

1	`components/header.html`

<header
xmlns:th="http://www.thymeleaf.org"
th:fragment="header">

<nav class="navbar navbar-dark bg-dark">

<div class="container-fluid">

<a class="navbar-brand"
href="/">

LMS

</a>

<div>

<span
th:text="${loginUser.username}">
</span>

<a
href="/logout"
class="btn btn-outline-light">

ログアウト

</a>

</div>

</div>

</nav>

</header>

ユーザー権限で表示変更します。

<div
xmlns:th="http://www.thymeleaf.org"
th:fragment="sidebar">

<ul class="nav flex-column">

<li>
<a href="/dashboard">

ダッシュボード

</a>
</li>

<li sec:authorize="hasRole('TEACHER')">

<a href="/teacher/content">

教材管理

</a>

</li>

<li sec:authorize="hasRole('ADMIN')">

<a href="/admin/users">

ユーザー管理

</a>

</li>

<li sec:authorize="hasRole('STUDENT')">

<a href="/student/course">

受講コース

</a>

</li>

</ul>

</div>

6. 画面URL設計

管理者

/admin

├ dashboard

├ users

│  ├ /
│  └ /{id}/edit

├ contents

│  └ approval

├ audit

├ roles

└ settings

教師

/teacher

├ dashboard

├ content

│
├ list

├ create

├ {id}

├ edit

└ submit

└ library

受講者

/student

├ dashboard

├ courses

├ course/{id}

├ lesson/{id}

├ history

└ certificates

7. 教師画面設計

教材一覧

URL:

1	`/teacher/content`

表示：

------------------------------------------------

教材一覧

[新規作成]

タイトル     状態       更新日

Java入門     公開中     2026/08/01

Spring       審査中     2026/08/02

[詳細]

------------------------------------------------

DTO：

@Data
public class TeacherContentListDto {

private Long id;

private String title;

private String status;

private LocalDateTime updatedAt;

}

8. 教材作成画面

URL:

1	`/teacher/content/create`

構成：

教材情報

タイトル

概要

教材種類

○動画

○テキスト

○クイズ

○ファイル

詳細入力欄

保存

審査申請

9. 動的フォーム切替

JavaScript利用。

例：

document
.getElementById("contentType")
.addEventListener(
"change",
function(){


document
.querySelectorAll(".content-area")
.forEach(
e=>e.style.display="none"
);


document
.getElementById(
this.value
)
.style.display="block";


});

10. Markdown表示画面

保存：

Markdown

↓

CommonMark解析

↓

HTML

↓

表示

利用ライブラリ：

implementation(
"org.commonmark:commonmark:0.21.0"
)

Service：

public String markdownToHtml(
String markdown){

return parser
.parse(markdown)
.accept(renderer);

}

11. 学習画面

URL：

1	`/student/lesson/{id}`

画面：

--------------------------------

Javaとは

[動画]

▶ 再生

概要

Javaの特徴について説明します。

[完了]

--------------------------------

次のレッスン

--------------------------------

12. 動画表示

YouTube：

<iframe
th:src="${video.url}">
</iframe>

R2 HLS：

利用：

<video controls>

<source
th:src="${video.url}"
type="application/x-mpegURL">

</video>

13. クイズ画面

例：

Javaの特徴は？

○ JVMで動作する

○ OS専用である

○ HTMLを書く言語

○ DB専用

[回答]

結果

正解

Form：

@Data
public class QuizAnswerForm {

private Long quizId;

private List<Long>
selectedChoiceIds;

}

14. 管理者承認画面

URL：

1	`/admin/content/approval`

表示：

審査待ち教材

Java入門

作成者：山田

[詳細]

[承認]

[差戻し]

15. Pagination共通Fragment

利用：

1	`components/pagination.html`

<nav
th:fragment="pagination">

<ul class="pagination">

<li
th:each="page:${pages}"
class="page-item">

<a class="page-link"
th:text="${page.number}"
th:href="@{?page=${page.number}}">
</a>

</li>

</ul>

</nav>

16. Form入力共通化

例：

<div
th:fragment="input(
name,
label
)">


<label
th:text="${label}">
</label>


<input
class="form-control"
th:field="*{__${name}__}">


</div>

利用：

<div
th:replace=
"~{components/form :: input(
'title',
'タイトル'
)}">
</div>

17. Bootstrap画面設計ルール

採用：

用途	Bootstrap
一覧	table
登録	form-control
カード	card
通知	alert
ボタン	btn
ダイアログ	modal
ページング	pagination

18. Ajax利用箇所

基本はThymeleaf。

Ajax化する箇所：

機能	方式
動画再生位置保存	Ajax
お気に入り	Ajax
既読通知	Ajax
検索候補	Ajax
Markdownプレビュー	Ajax

19. 画面アクセス制御

Spring Security：

.requestMatchers(
"/admin/**"
)
.hasRole("ADMIN")


.requestMatchers(
"/teacher/**"
)
.hasRole("TEACHER")


.requestMatchers(
"/student/**"
)
.hasRole("STUDENT")

20. 現在の完成画面構造

templates

├ layouts

├ components

├ admin

│  ├ dashboard

│  ├ users

│  └ approval

├ teacher

│  ├ content

│  ├ library

│  └ dashboard

├ student

│  ├ courses

│  ├ lesson

│  └ dashboard

└ error

第18段階終了時点

追加された設計：

✅ Thymeleaf共通レイアウト
✅ Fragment設計
✅ Bootstrap5画面方針
✅ 管理者画面構成
✅ 教師画面構成
✅ 受講者画面構成
✅ Form設計
✅ 一覧・詳細・編集パターン
✅ Pagination共通化
✅ Ajax利用方針

次の 第19段階 では、いよいよSpring実装に近づけます。

内容：

Entity完全版生成
Repository生成
MyBatis Mapper設計
DTO一覧
Form一覧
Service層構成
Controller層構成
Spring Security設定

として、実装可能なJavaコード構成へ落とし込みます。

第18段階 全体画面構成