📗 Vol.8.12〜：共通レイアウト、`<%@ include %>` 設計など

🔗 本章は「Vol.8.9〜：Struts2 タグライブラリ応用編（実務／初級応用）」シリーズです。

---

🧭 はじめに

本記事では、Struts2アプリケーションにおいて 共通レイアウト（ヘッダー・フッター・メニュー等）を再利用できる構造 を実現するための方針と、実装例を解説します。

複数画面に共通する部品を適切に分離・再利用することで、

• コードの重複削減
• デザインの一貫性維持
• メンテナンス効率の向上

が可能になります。

---

📌 本記事の対象内容

項目	説明
common/header.jsp	ロゴやナビゲーションなどの共通ヘッダー
common/footer.jsp	フッター・著作権表示など
common/menu.jsp	ログイン後ユーザーメニュー
<%@ include %>	静的インクルードによる共通化
<s:include>	Struts2タグによる動的インクルードとの違い

---

🧱 ディレクトリ構成案

/WebContent/
├── view/
│ ├── common/
│ │ ├── header.jsp
│ │ ├── footer.jsp
│ │ └── menu.jsp
│ ├── BulletinboardManagementScreen.jsp
│ ├── UserManagementScreen.jsp
│ └── ...

---

🧩 header.jsp の例（共通ヘッダー）

<!-- /view/common/header.jsp -->
<div class="header">
    <h1>My Bulletin Board</h1>
    <hr/>
</div>

---

🧩 footer.jsp の例（共通フッター）

<!-- /view/common/footer.jsp -->
<hr/>
<div class="footer">
    <small>&copy; 2025 My Company</small>
</div>

---

🧩 menu.jsp の例（ログイン後メニュー）

<!-- /view/common/menu.jsp -->
<div class="menu">
    <ul>
        <li><a href="userPortal.action">ポータル</a></li>
        <li><a href="moveUserManagement.action">ユーザー管理</a></li>
        <li><a href="moveBulletinboardManagement.action">掲示板管理</a></li>
        <li><a href="logout.action">ログアウト</a></li>
    </ul>
</div>

---

💡 JSP内での共通部品読み込み

以下のように各画面で共通部品を読み込むことで、再利用性を高められます。

<%@ include file="common/header.jsp" %>
<%@ include file="common/menu.jsp" %>

<h2>掲示板管理画面</h2>
<!-- 各画面固有の内容 -->

<%@ include file="common/footer.jsp" %>

---

❓ <%@ include %> と の違い

比較項目	<%@ include %>	<s:include>
タイプ	静的インクルード	動的インクルード（Struts2タグ）
読み込み時点	コンパイル時に結合	実行時に読み込み
利用場面	基本的な共通部品	条件付き切替などが必要な時

---

📎 CSS・JSの共通読み込みも一括管理

例えば header.jsp に共通スタイルやスクリプトを追加すれば、全画面に適用できます。

<link rel="stylesheet" href="css/style.css" />
<script src="js/common.js"></script>

---

📘 まとめ

ポイント	内容
✅ 共通レイアウトをファイル分離	header.jsp や footer.jsp 等に共通化
✅ 再利用で修正コスト削減	デザイン変更も一括対応可能
✅ JSP標準構文で簡単導入	<%@ include %> で画面構成を効率化

---