Web制作実験ヘッダやメニューなど共通部分を外部ファイルに - 基本編
公開：
ブログやホームページのヘッダやメニューなど共通部分を外部ファイル1つにし、各ページから読み込む方法です。変更が1ファイルで済みメンテナンス性が向上します。
私の使っているサーバがPHPに対応してなく、新規ページを追加する度に全ファイルのメニュー部分をgrep（一括置換）で更新していました。それも悪くはないのですが、非効率でメンテナンス性に不満でした。色々試した結果…
jQueryで簡単にできました。
Ajaxによるものですが特別なことをしなければサーバーや通信の知識がなくてもjQueryの知識だけでできてしまいます。ただし、制約やデメリットもあります。それも含めて、既存のページを変更する例で書いていきます。
前準備
以下のHTMLファイルが出てきますのでお間違えなく。
| contents1.html | 元のオリジナルコンテンツ、及び変更後 |
|---|---|
| menu.html | 全ページ共通にするメニュー部分 |
| contents2.html | contents1.htmlとは別のコンテンツ |
contents1.htmlはよくあるような例として以下とします。
<h1>タイトル</h1> <div id="navi"> <ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> </ul> </div> <p>フッタ</p>
既存のファイルに直接行う場合、初めや慣れないうちはバックアップしておくといいでしょう。
実際の様子
（実際はファイル名など記事と違う点もありますが、根本はそのままです。）
変更作業
menu.htmlの新規作成
contents1.htmlのulの部分のみを切り取り、新規ファイルにこれを貼ります。
<ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> </ul>
<!DOCTYPE html> <html> <head> <title> <body>全てなしで、ただul部分のみの記述です。これをmenu.html の名前で、UTF-8で保存します。
contents1.htmlの変更、保存
contents1.htmlは2、3行目のように空divの状態になります。
<h1>タイトル</h1>
<div id="navi">
</div>
<p>フッタ</p>
<script src="jquery-x.x.x.min.js"></script>
<script>
$(function(){
$('#navi').load('menu.html');
});
</script>
<head>内または</body>の手前に6～11行目を追加します。src=～は今までjQueryをお使いでしたらいつも通りでけっこうです。他のサーバのCDNでも、ご自分のサイトに用意したファイルでもけっこうです。フォルダやverは任意に変えてください。
これをcontents1.htmlとして上書き保存します。または安全に別のファイル名で保存してもいいですが、リンクは切れるので元の名前に後に戻します。
CSSファイルは変更しません。今までメニューを横並びにしてたらその今まで通りに表示されます。
ブラウザのJavaScriptは有効にしておきます。
サーバー上でテスト
contents1.htmlとmenu.htmlをサーバーに転送します。contents1.htmlを表示させると今まで通りに表示されるはずです。初回だけはローカル内だけでなく必ずサーバー上でもテストしてください。
contents1.htmlを別名保存した場合は元の名前に変更します。
実際の様子
別コンテンツでの確認
contents2.htmlはcontents1.htmlとほぼ同じですが、ボタンを押すとメニューが読み込まれるようにしてあります（このような使い方はしないでしょうが、ご参考までに）。読み込むファイルは先ほどcontents1.htmlで読み込んだのと同じmenu.htmlです。
<h1>タイトル</h1>
<div id="navi">
<button type="button" id="menu">メニュー読込</button>
</div>
<p>フッタ</p>
<script src="jquery-x.x.x.min.js"></script>
<script>
$(function(){
$('#menu').click(function(){
$('#navi').load('menu.html');
});
});
</script>
load()の仕様上、読み込まれる場所にあった要素は全て削除されます。ここでは#navi内のbutton要素が消えました。
実際の様子
基本編ここまでのまとめ
例えば新しいページを追加した場合、menu.htmlただ1つを変更するだけで済みます。contents1.htmlでもcontents2.htmlでも変更が反映されることになります。
基本編は以上ですが、実はこれでできない場合もあります。その対処や注意などを次の記事でご紹介します。