HTMLには別のファイルをincludeするタグはありませんが、これを実現することは可能です。今回は、別ファイルに書かれたHTMLをincludeする方法について解説します。
HTMLにはincludeのようなコマンドは無い
プログラミング言語には、他のプログラムと共通で使う関数を別のファイルに用意しておき、それを活用して利用するのが一般的です。そして、HTMLでもヘッダやフッタに同じ記述が使われるケースも多く、共通化できれば作業の手間を減らすことが可能です。しかし、HTMLには、プログラミング言語のincludeのような外部ファイルを取り込む機能はありません。
まずは、HTMLを編集する際の問題点について解説します。
HTMLを作る上で難しい点
HTMLは、プログラミング言語に比べれば構造が簡単なことから習得しやすい言語ですが、管理しやすいとは限りません。複数のHTMLから構成されているWebサイトでは、同じような内容なのに、1ページ分を全て1つのファイルに書かなければなりません。さらに、修正があれば全てのページを直すことになり、手間がかかります。そして、例え簡単な修正だとしても、閉じるタグを書き忘れたりして、簡単な修正のつもりが予定外に時間がかかることもあります。
これは、HTMLに外部のHTMLファイルを取り込む機能が無いため、パーツを共通化できないのが原因の一つです。つまり、HTMLには、プログラミング言語のincludeのような機能はありません。
プロならツールを活用する
先ほど解説したとおり、HTML自体には外部のHTMLファイルを取り込む機能はありませんが、HTMLの作り方を工夫すれば、同じことが可能です。そして、よく使われるのがHTMLを記述するための統合ソフトウェアであり、その代表と言えるのがAdobe Dreamwaverです。
Adobe Dreamewaverにはテンプレート機能があり、これを活用すれば全てのHTMLを共通部分と個別部分に分けて管理できます。他にも同じような機能を備えたHTML用の統合ソフトウェアがあり、HTMLの編集を効率化しているプロは、こういったツールを活用しています。
サーバー側で対応する
繰り返しになりますが、HTML自体には外部のファイルを取り込む機能がありません。しかし、サーバー側で複数のHTMLファイルから1つのHTMLファイルに合成して送り出すことで、共通部分と個別の部分にファイルを分けることが可能です。例えば、HTMLをphpとして扱えば、phpのincludeやrequireの機能を利用して、外部のHTMLファイルを利用できます。
他にもhttpサーバーに手を加えることになりますが、SSI(Server Side Includes)を活用することで、外部のHTMLを取り込むことが可能です。さらに、JavaScriptで外部のHTMLを取り込んで、Webブラウザ側で合成させる、という方法もあります。サーバーの設定が可能な場合は、このような方法も検討してください。
phpを利用した方法
クラウド上のWebサーバーのほとんどは、UbuntuやCentOSなどのLinuxサーバーですが、そのようなLinuxのWebサーバーの多くでphpが利用できます。また、phpなら簡単な修正で、既存のHTMLの一部を外部ファイルに切り出して、共通化すことも可能です。
次から、phpを利用したHTMLファイルのinclude機能の実現方法を紹介します。
phpはHTMLと同居できる
phpは、HTMLに埋め込む構文が特徴のプログラミング言語です。具体的には、HTMLの中にphpのプログラムを記述するPHPタグを埋め込むことで、既存のHTMLをそのまま残して、さらにプログラムの実行結果を表示させることが可能です。
さらにphpにはrequreやincludeなどの外部のファイルを取り込む機能があり、その外部のファイルにHTMLやphpのプログラムを埋め込む書き方が可能です。つまり、phpの外部のファイルにHTMLだけ書いて準備しておけば、あたかもHTMLファイルをincludeすることが可能になります。
phpのincludeの使い方
phpで外部ファイルを取り込むにはinclude関数を使います。使い方は簡単で、引数にファイル名を指定するだけです。なお、ファイル名は、相対パスでも絶対パスでも構いません。
phpのincludeの文法
include ‘ファイル名’;
または
include(‘ファイル名’);
phpのincludeを使った例
<?php
include("header.html");
?>
includeと同じ機能は他にもある
このようにphpのincludeを使えば、外部のHTMLファイルを取り込むことが可能ですが、phpにはincludeと同じような機能が他にもあります。
まず、includeと同じ機能なのがrequireで、includeとはエラーの処理が違います。また、同じファイルを一度だけ読み込むinclude_onceと、require_onceがあり、ライブラリの読み込みだとで使われます。
なお、これらの違いはプログラムを効率的に開発するための仕様です。外部のHTMLを取り込む機能としては、これらは全て同じと考えて問題ありません。
JavaScriptを利用した方法
先ほど紹介したphpは便利ですが、phpが使えないサーバーもあります。そのような場合、Webブラウザで動作するJavaScriptを利用する方法もあります。次からJavaScriptを使った、まるでプログラムのincludeのような使い方について紹介します。
jQueryの非同期処理を活用する
JavaScriptを使う際、よく利用されるのがJavaScriptのフレームワークとして有名なjQueryです。そして、jQueryの非同期処理を活用すれば、まるでHTMLをincludeするような機能を組み込めます。
なお、非同期処理とは、WebブラウザがWebページを表示したタイミング以外に、JavaScriptがサーバーと通信する処理のことです。Webブラウザに表示されたボタンを押すと、最初空白だった場所に、詳しい情報が表示される機能などに使います。もし、興味のある方は、「Ajax」で検索してみてください。
jQueryを使ってHTMLのincludeを実現するには、次のようなスクリプトを利用します。
jQueryを利用したHTMLのincludeの例
この例では、idがincludeのdivタグに対して、「Include-File.html」というHTMLファイルを表示します。
他のライブラリでも可能
jQueryは、Webシステムの開発に使われることが多いものの、最近ももっと高性能なJavaScriptライブラリもあります。プロジェクトによっては、Vue.jsやReactといった新しいjJavaScriptライブラリを採用しているかもしれません。
もちろん、そのような新しいjJavaScriptライブラリでも、Ajaxが使えます。例えば、Vue.jsでは、axiosというライブラリを利用することで、jQueryのAjaxと同じ処理が可能です。
httpサーバーのssiを利用する
もし、httpサーバーの設定を変更できるのなら、ssiを設定することで、サーバー側でパーツのHTMLをincludeして、1つのHTMLとして送信できます。
httpサーバーのssiとは
なお、ssiとは、Server Side Includesの略で、HTMLの中にWebサーバ側で処理するコマンドを埋め込み、その実行結果をWebブラウザに送信する仕組みで、apache httpdやnginxなどのサーバープログラムで対応しています。
ただし、ssiを処理するためのモジュールを組み込み、さらにサーバープログラムの設定ファイルでssiを有効にしなければなりません。インフラエンジニアなどのサーバー管理者のサポートを必要とします。
ssiを使った例
ssiが使えるサーバーでは、次のコマンドで外部のHTMLファイルを読み込みます。
ssiが使える環境でheader.htmlをincludeする例
まとめ
これまで解説したように、HTML自体には別のファイルをincludeしたりできませんが、サーバー側でphpで取り込んだり、ssiを設定すれば、includeすることが可能です。また、JavaScriptのAjaxを使うという方法なら、サーバーの設定なしでも実現できます。
もし、HTMLを別ファイルにすることになったら、今回紹介した方法を検討してください。
