Webサイト制作におけるインクルード化とは？基本と設定方法
デザイン・コーディング

Webサイト制作におけるインクルード化とは？基本と設定方法

Share
このエントリーをはてなブックマークに追加

新規Webサイト制作などの大がかりなプロジェクトでは、コーディングフェーズでの効率化が欠かせません。例えば、ヘッダーやフッター、グローバルナビゲーションの部分。これらの部分は1つのサイト内において、ほとんどのページで同じものを使用すると思います。しかし、もし1ページずつ同じコードを打っていた場合、サイトのページが何千ページとあるときは1つのメニューの修正だけで、すべてのページで更新しなければいけません。こういった作業を効率化するために、今回は「共通する部分をインクルード化する」という方法をお伝えします。

インクルード化

ハイブリッド型受講を可能に。医療団体に特化した研修管理システム。

https://manaable.com/

manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。

目次

  1. インクルードとは
    1. インクルード具体例
  2. インクルード化のやり方
    1. JavaScript
    2. PHP
    3. SSI（Server Side Include）
  3. インクルード化する際の注意点
  4. まとめ

インクルードとは

インクルードとは、IT用語で「あるファイルの中に別のファイルを組み込みむこと」を指します。特にWebサイト制作においては、ヘッダーなど、各ページで共通する部分をインクルード化することで、ソースコードのコピペをする必要もなく、コーディングの手間を省くことができます。

インクルード化の便利な点は、共通部分の修正が楽、という点です。例えばヘッダーで修正部分があった際に、インクルードで読み込んでいる元のファイルを修正するだけで、インクルード化した全てのページのヘッダーが修正される仕組みになっています。何千ページもあった場合、1ページずつHTMLを修正する必要はなくなります。

インクルード具体例

Webページにおいて、インクルードしやすい部分はヘッダー、フッター、サイドバー、headタグ内などがあげられます。前者３つはインクルード化の定番ですが、Webサイト制作を行っている弊社ITRAではheadタグのインクルードも行っています。 headタグ内はWebページの情報を示す要素であり、SEO対策などの観点から重要視されています。

Webサイト内のコンテンツが増ると、タイトルに示すべき要素を整理する必要があったりなど管理が意外と煩雑、という難点があります。 そこで、headタグにはメタタグなど共通部分が多くある特徴を考えると、インクルード化すれば保守生産性が上がる利点があります。

インクルード化のやり方

HTMLのみではインクルードすることはできませんが、Java Script、PHP、SSIなどを使用することでWebページのインクルードが可能になります。今回は上記の３つのメリット、デメリットをご紹介します。

JavaScript

JavaScriptとは、HTMLに埋め込むことができるスクリプト言語であり、ブラウザ上に実行環境がある言語です。JavaScriptでインクルードすることのメリットは、比較的容易にコードを呼び出すことができることです。その使いやすさからか、広告、SNSの計測タグなどのインクルードに使われることが多くなっています。このJavaScriptを用いてインクルード化を行います。

デメリットは、JavaScriptが無効になっているブラウザをユーザーが使っている場合や、JavaScriptが何かしらのエラーで動かない場合に読み込めない可能性があることです。

Java Scriptでのインクルード

header.js

  1. document.write('<div class="header">ヘッダ</div>');
  2. index.html
  3. <script src="header.js"></script>
  4. <div class="contents">
  5.   インデックス
  6. </div>

PHP

PHPは、JavaScriptと同様のHTMLに埋め込むことができるスクリプト言語です。JavaScriptと異なる点は、実行環境がサーバーにあるところです。PHPでのインクルード化のメリットは、サーバーで処理されて表示されるため、ブラウザやユーザー環境の影響がない点です。

デメリットは、ファイルをPHPファイルに変換しなければならないことです。また、html拡張子のままにする場合は.htaccessファイルの設置が必要になるため、少し手間がかかってしまいます。

PHPでのインクルード

side.php

  1. <!-- ここから外部ファイル化する -->
  2.  <div class="header">ヘッダー</div>
  3. <!-- ここまで外部ファイル化する -->
  4. index.php
  5. <?php include('./side.php'); ?>
  6. <div class="contents">
  7.  メイン
  8. </div>

SSI（Server Side Include）

SSIとは、Webサーバの機能の1つであり、HTMLのなかにコマンドを組みこんでおくことでユーザーがページを読み込んだ際にインクルード化された状態でページが再現されるという仕組みです。 SSIでインクルードすることのメリットは、JavaScriptと比較するなら環境に左右されないことで、PHPと比較するならば、HTML形式のファイルのままで構わない点です。

デメリットとは、SSIの利用にはサーバーの設定が必要という点です。もし、サーバーに関する知識が乏しいのであれば、SSIによるインクルード化は難しいでしょう。また、そもそもWebサーバーがSSIに対応していないケースも考えられます。例えば、レンタルサーバーなどでは、PHPは使えてもSSIは使えないことがあります。

SSIでのインクルード

header.html

  1. <!-- ▼▼/common/inc/header.htmlの内容▼▼ -->
  2. <div class="header">ヘッダー</div>
  3. <!-- ▲▲/common/inc/header.htmlの内容▲▲ -->

index.htmlにheader.htmlをインクルードしたものが以下です。

index.html

  1. <!--#include virtual="/common/inc/header.html" -->
  2. <div class="contents">
  3.  トップページ
  4. </div>

このindex.htmlを、SSIが動作するサーバー上に置くと、ブラウザでは以下のように表示されます。

  1. <!-- ▼▼/common/inc/header.htmlの内容▼▼ -->
  2. <div class="header">ヘッダー</div>
  3. <!-- ▲▲/common/inc/header.htmlの内容▲▲ -->
  4. <div class="contents">
  5.  トップページ
  6. </div>

インクルード化する際の注意点

インクルードファイルを作成する際、共通部分のホバー設定などをJavaScriptで制御できるようにしなければならないケースがあります。例えば、そのページにいることを見た目で表示する、メニューのアクティブ時のデザインなどは、こういった処置が必要です。

JavaScriptを使わないのであれば、ヘッダーのアクティブ設定をする際、メニューを構成するliタグにonというクラス名をつけ、onが付いているメニューは色を変えるという設定をします。

しかし、全ページ共通したファイルを使うのであれば、特定のタグにだけアクティブの設定をしては、すべてのページで同じ部分がアクティブになってしまいます。 インクルード化されたファイルを変更せずに、現在のページをアクティブにするには、JavaScriptを用いましょう。例えば、URLの判断からドメイン以下のディレクトリが同じリンクのタグにonというクラス名を付け、アクティブにするというやり方があります。

まとめ

今回はインクルード化の概要をご説明しました。今回ご紹介したもの以外にもインクルード化する手法は存在するので、自社にあったものをお使いください。外部ファイルの読み込みは慣れてしまえば難しいものではないため、ぜひお試し下さい。

Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか？

ITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。

コーディングにおける効率化にご興味のある方はこちらの記事もご覧ください。

Share
このエントリーをはてなブックマークに追加

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。