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モード限定だったら
 迷わす、後述のSSIを利用する事をお勧めします。なぜってPHPのオーバーヘッドが大きく応答が若干遅くなりますので。
 ここの落書き人が利用しているレンタルサーバーは夕方から極端にレスポンスが落ちますので、この影響が馬鹿にならない事が判明しました。レンタルサーバーを引っ越そうかと思っています。

インクルードを埋め込むphpのコード

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

SSIでインクルードを実現

SSIは便利

SSIをを有効にした場合には、SSIインジェクションで不正行為の可能性がある様な、ブラウザから入力をさせるようなウェブアプリでは、かならずサニタイジングの考慮を行う注意が必要です。
その上で利用するならSSIは便利な機能です。
拡張子がhtmlのページにインクルードが仕込めるように環境を整える。それはshtmlのままではSSIが機能するウェブページだよとクラッカーわざわざ知らせるような物なので気持ち悪い。

.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かSSIを利用している事を簡単に悟られない様にしたいからです。
なぜって、簡単に悟られて攻撃の踏み台として試されたくないからです。
って、こんな事を書いたら、このページが有るサーバーがその様に設定されていると白状しちゃっている。^^;

PHPとSSIの共存

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

JavaScriptで共通部分を生成する

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

JavaScriptで動的に共通部分XHRやJSONPなどで読み込んで、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の読み込み順序が変わってしまうことがある。
 ・読み込み時間が不利。