CodeIgniterでヘッダー・フッターを共通化する方法！初心者向け完全ガイド

CodeIgniterでヘッダー・フッターを共通化する方法

先生と生徒の会話形式で理解しよう

生徒

「CodeIgniterで複数のページを作ると、ヘッダーやフッターを毎回コピーして貼り付けるのが大変です。何か良い方法はありませんか？」

先生

「それなら、ヘッダーとフッターを共通化する方法がありますよ。一度作れば、すべてのページで使い回せるので、とても便利です。」

生徒

「それはすごく便利ですね！どうやって実現するんですか？」

先生

「CodeIgniterのビュー機能を使えば簡単にできます。それでは、基本的な使い方から見ていきましょう！」

1. ヘッダー・フッター共通化とは？

Webサイトを作る際、ほとんどのページには共通する部分があります。それがヘッダーとフッターです。ヘッダーは、ページの上部にあるメニューやロゴが表示される部分で、フッターはページの下部にある著作権表示やリンク集などが配置される部分です。

通常、これらを毎回すべてのページに書いていると、デザインを変更したいときに全ページを修正する必要があり、非常に手間がかかります。そこで、共通化することで、一箇所を修正すれば全ページに反映されるという仕組みを作ることができます。

CodeIgniterでは、ビューという機能を使って、この共通化を簡単に実現できます。ビューとは、画面に表示するHTML部分を管理するファイルのことです。

2. ビューファイルの配置場所

CodeIgniterでは、ビューファイルを特定のフォルダに配置する必要があります。通常はapp/Viewsフォルダの中に配置します。このフォルダは、プロジェクトのルートディレクトリから見た構造です。

今回は、ヘッダーとフッターを共通化するために、以下のようなファイル構成を作ります。

app/Views/common/header.php - ヘッダー用のビューファイル
app/Views/common/footer.php - フッター用のビューファイル
app/Views/pages/home.php - 本文のコンテンツ用ビューファイル

commonフォルダは、共通パーツを入れるための専用フォルダとして作成します。これにより、ファイルの管理がしやすくなります。

3. ヘッダーファイルの作成方法

まず、ヘッダー部分のビューファイルを作成します。app/Views/common/header.phpというファイルを作り、以下のように記述します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'マイサイト' ?></title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>私のウェブサイト</h1>
            <nav>
                <ul>
                    <li><a href="/">ホーム</a></li>
                    <li><a href="/about">会社概要</a></li>
                    <li><a href="/contact">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>

このヘッダーファイルには、HTML文書の開始部分から<main>タグの開始までを記述します。$titleという変数を使うことで、ページごとに異なるタイトルを設定できるようになっています。??は、変数が設定されていない場合のデフォルト値を指定する演算子です。

4. フッターファイルの作成方法

次に、フッター部分のビューファイルを作成します。app/Views/common/footer.phpというファイルを作り、以下のように記述します。


    </main>
    <footer>
        <div class="container">
            <p>&copy; 2025 私のウェブサイト All rights reserved.</p>
            <ul>
                <li><a href="/privacy">プライバシーポリシー</a></li>
                <li><a href="/terms">利用規約</a></li>
            </ul>
        </div>
    </footer>
</body>
</html>

フッターファイルには、<main>タグの終了から、HTML文書の終了までを記述します。これで、ページの上下を囲む共通部分が完成しました。

5. コントローラーでビューを読み込む

作成したヘッダーとフッターを実際のページで使うには、コントローラーから読み込む必要があります。コントローラーとは、ユーザーからのリクエストを受け取り、適切な処理を行うプログラムのことです。

例として、app/Controllers/Home.phpというコントローラーを作成します。


<?php

namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        $data['title'] = 'ホームページ';
        
        echo view('common/header', $data);
        echo view('pages/home');
        echo view('common/footer');
    }
}

このコードでは、view()という関数を使って、ビューファイルを読み込んでいます。第一引数にはビューファイルのパスを指定します。拡張子の.phpは省略できます。第二引数には、ビューに渡すデータを配列で指定します。

echo文を使って、ヘッダー、本文、フッターの順番で出力することで、完全なHTMLページが生成されます。

6. 本文コンテンツのビューファイル

本文部分のビューファイルapp/Views/pages/home.phpも作成しましょう。このファイルには、ページ固有のコンテンツだけを記述します。


<div class="container">
    <h2>ようこそ、私のウェブサイトへ</h2>
    <p>これはホームページのコンテンツです。</p>
    <p>CodeIgniterのビュー機能を使って、ヘッダーとフッターを共通化しています。</p>
    
    <section class="features">
        <h3>主な機能</h3>
        <ul>
            <li>レスポンシブデザイン対応</li>
            <li>高速なページ表示</li>
            <li>SEO最適化</li>
        </ul>
    </section>
</div>

このように、本文部分には<html>や<head>タグは不要です。ヘッダーとフッターで既に定義されているため、コンテンツ部分だけを書けば良いのです。

7. 複数ページでの活用方法

この仕組みの最大のメリットは、複数のページで同じヘッダーとフッターを使い回せることです。別のページを作る場合も、同じパターンでコントローラーを作成できます。

例えば、お問い合わせページを作る場合、以下のようにコントローラーを作成します。


<?php

namespace App\Controllers;

class Contact extends BaseController
{
    public function index()
    {
        $data['title'] = 'お問い合わせ';
        
        echo view('common/header', $data);
        echo view('pages/contact');
        echo view('common/footer');
    }
}

このように、ヘッダーとフッターの読み込み部分は全く同じで、変わるのは$titleの値と本文のビューファイルだけです。これにより、サイト全体で統一感のあるデザインを保ちながら、各ページ固有のコンテンツを表示できます。

8. データを渡す際の注意点

ビューにデータを渡す際は、配列形式で渡す必要があります。配列のキーが、ビュー内で使える変数名になります。例えば、$data['title']で渡したデータは、ビュー内で$titleとして使えます。

複数のデータを渡したい場合は、配列に複数の要素を追加します。例えば、ユーザー情報やページの説明文なども渡すことができます。ただし、セキュリティのため、ビューで表示する際にはHTMLエスケープを忘れないようにしましょう。CodeIgniterではesc()関数を使うことで、安全に文字列を出力できます。

9. ヘッダー・フッター共通化のメリット

ヘッダーとフッターを共通化することで、以下のようなメリットがあります。

まず、メンテナンス性が向上します。デザインを変更したい場合、ヘッダーファイルとフッターファイルの2つを修正するだけで、サイト全体に変更が反映されます。100ページあるサイトでも、2ファイルの修正で済むのです。

次に、コードの重複がなくなることで、ファイルサイズが削減されます。また、コードの見通しが良くなるため、バグの発見や修正も容易になります。

さらに、開発効率が上がります。新しいページを追加する際に、ヘッダーとフッターのコードを書く必要がなく、本文のコンテンツに集中できます。チームでの開発でも、役割分担がしやすくなります。

このように、ビューの共通化は、Webアプリケーション開発において非常に重要なテクニックです。最初は少し複雑に感じるかもしれませんが、慣れてしまえば、この方法なしでは開発できないと感じるほど便利な機能です。

10. トラブルシューティング

ビューファイルの読み込みでエラーが発生した場合、まず確認すべき点がいくつかあります。

一つ目は、ファイルパスが正しいかです。view('common/header')と書いた場合、CodeIgniterはapp/Views/common/header.phpを探します。スペルミスや階層の間違いがないか確認しましょう。

二つ目は、ファイルのアクセス権限です。サーバーによっては、ファイルの読み取り権限が適切に設定されていないと、エラーが発生します。通常は、ファイルのパーミッションを644に設定すれば問題ありません。

三つ目は、変数の未定義エラーです。ビュー内で使用している変数が、コントローラーから渡されていない場合、エラーが発生します。$title ?? 'デフォルト値'のように、デフォルト値を設定しておくと安全です。

これらの点を確認することで、ほとんどの問題は解決できます。エラーメッセージをよく読んで、何が原因なのかを特定することが重要です。

公的機関での指導実績【CodeIgniterモダン開発実践セミナー】

商用CodeIgniter 4 徹底実践講座：軽量MVCによる高速開発とシステムのモダナイゼーション

#商用設計 #APIアーキテクチャ #市場価値最大化

ハローワーク職業訓練講師の実績を持つプロが監修。商用PHP開発の「現場の作法」を完全伝授。

「極限のパフォーマンス」を実装する。CodeIgniter 4で軽量・高速な商用システムを構築。

本講座では、フレームワークのオーバーヘッドを最小限に抑えた「高レスポンスなWebアプリケーション設計」を学びます。シンプルながら強力なCodeIgniter 4を通じ、既存システムのPHP 8.x対応や、リソース効率を極めたAPI開発など、実務で重宝される最適化技術を習得します。