HTMLファイルのインクルード

 
Web Page
Booskanium's Tips.

各HTMLページで共通部分をインクルードして、HTMLページの変更メンテナンスを楽にする。
ナビ部分が各ページで重複する場合などにインクルードを使うと、後々のメンテナンスが楽になります。

PHPでインクルードを実現

拡張子がhtmlでphpが解釈できる様にする

拡張子がphpでも良いのですがhtmlの既存ページにインクルードを仕込みたかったので、htmlのままでphpが埋め込めるように環境を整える必要がありました。
.htaccessによる方法
※これは環境によって違いますので、利用しているサーバーの環境を認する必要あります。

<FilesMatch "\.html$">
  AddType application/x-httpd-php .html
</FilesMatch>
							
※利用しているレンタルサーバーのPHPがCGIモード限定だったら
PHPのオーバーヘッドが大きく応答が若干遅くなることから、後述のSSIを利用する事をお勧めします。
落書き人が以前利用していたレンタルサーバーの場合ですが、夕方から極端にレスポンスが落ち、この影響が馬鹿にならない事が判明しました。現在利用しているレンタルサーバーなら問題有りません。

インクルードのphpのコード

<?php echo file_get_contents("~インクルードするファイル名~"); ?>
							
※phpのインクルードファイル名のパス指定はhtmlの相対パスはNGなので絶対バスで指定。

SSIでインクルードを実現

SSIは便利

SSIをを有効にした場合には、SSIインジェクションで不正行為を回避するために、ブラウザから入力をさせるウェブアプリでは、かならずサニタイジングの考慮を行う注意が必要です。
その上で利用するならSSIは便利な機能です。
拡張子がhtmlのページにインクルードが仕込めるように環境を整えることをお勧めします。

.htaccessによる方法
※これは環境によって違い、利用中のサーバーの設定方法を確認する必要あり。

例1. お名前.comのレンタルサーバーの場合は、.htaccessを作成してUpload
AddHandler server-parsed .html

例2. Xserverビジネスの場合はServerPanelの.htaccess編集にて
AddHandler server-parsed .html

PHPとSSIのどっちを使う

拡張子htmlでどっちが動くかで決める

拡張子がhtmlでphpが動く環境ならPHP、そうでないのならSSIです。
自分で管理しているサーバーならどっちなのかで決めれますが、そうでない場合はサーバー管理者に確認しましょう。

なぜ、拡張子がhtmlでPHPまたはSSIが動くように設定する

拡張子がphpやshtmlで利用するのが気持ち悪いだけの理由です。^^;

PHPとSSIの共存

SSIでインクルードして、PHPも組み込まれているページはどうなるんでしょう。
落書き人はそんな面倒そうな事はしませんでの、その結果がどうなるかは試していません。^^;

JavaScriptで共通部分を生成する

SEOとか全然気にしないページならこれも有り

JavaScriptで動的に共通部分をXHRで読み込んで、DOMに加える方法も有りです。
ただしSEO的にどうなのという気もしますので、SEOなんて気にしないと言うのであば選択肢の一つです。
WEBサーバーの設定でPHPやSSIの利用が出来ない場合の苦肉の策としても有効です。

CSSのインポート

<link rel="stylesheet" href="~">>

linkでCSSをインクルードする

<link rel='stylesheet' href='css/~.css' type='text/css' media='all'>
この方法は推奨となる。理由は
 ・パラレルロードが効く。
 ・media属性でレスポンシブ対応が出来る。
<link rel='stylesheet' href='css/~_mobile.css' type='text/css' media="screen and (max-width: 600px)">
<link rel='stylesheet' href='css/~_pc.css' type='text/css' media="screen and (min-width: 601px)">
 ・id属性でJavaScriptにてcssファイルの置換ができる。
<link rel='stylesheet' href='css/~.css' type='text/css' id='chg_css'>

let lnkStyle = document.getElementById('chg_css');
lnkStyle.href = '/css/~.css';

@import url();

CSSの中でインポートする。

<style type="text/css">
	@import url("/css/~.css");
</style>
この方法は
 ・パラレルロードが効かない。
 ・CSSの読み込み順序が変わってしまうことがある。
 ・読み込み時間が不利。
ただし、バンドルツールで一つにまとめているならこの限りではありません。

JavaScriptのインポート

<link rel="stylesheet" href="~">>

JavaScriptのモジュールのページを参照。