【サンプル有】HTML共通部分をJSインクルードするメリット・デメリットを説明

あなたはサイトを運営していて、「ヘッダー、グローバルナビゲーション(グロナビ)などの共通パーツの更新が面倒臭い!」と思った事はありませんか?

WordPressとったブログ・CMSであれば、ヘッダーやフッターといった共通パーツはあらかじめ別ファイル化(単一ファイル化)されていますが、静的なサイトだとそうはいきません。自分で何とかしなければならないのです。

PHPやSSIを使うことでも共通パーツのインクルードは可能ですが、サーバーの都合で使えないケースもあるかと思います。

ここでオススメしたいのがJavaScriptによる共通パーツのインクルード(外部読み込み)です。

そのまま使える!『HTML共通部分をJSインクルードするライブラリ・サンプル』のダウンロード&デモページ

細かい説明は不要!」という人の為に、ダウンロードすればそのまま使えるサンプルを用意しました。下記リンクからダウンロードして使ってみてください。

» JSライブラリ&サンプルのダウンロードはこちら

サンプルサイトの表示確認は下記のリンクから行えます。

» デモページはこちら

ダウンロードファイルの補足説明

  • ローカル環境では動作しないことがほとんどなので、サーバー上にアップしてテストをするか、XAMPPをインストールして使っているPCをサーバー化しましょう。
  • JSライブラリ本体はルート上の【script.js】1ファイルだけです。
  • 別途jQuery本体を読み込む必要があります。
  • サンプルは【sample】ディレクトリ内です。これをそのまま改変してサイト制作に使ってもOKです。

HTML共通部分をJSインクルードするメリットとデメリット

ライブラリ・サンプルの説明をする前に、HTML共通部分をJSインクルードするメリットとデメリットについて話します。

HTML共通部分をJSインクルードするメリットは?

ケアレスミスが大幅に減りメンテナンス性が向上

共通部分を別ファイルにまとめてJSインクルードするようにすれば、修正の際の確認箇所が減るので必然的にケアレスミスが減ります。

私も昔はDreamweaverなどのツールの一括置換していたんですが、それだとどうしても置換漏れが出てきてしまうんですよね…。公開後に発見されたら信用問題に関わる可能性もあります…。

それに、ページ数が100とか200もあると確認がメチャクチャ大変なんですよね。そんな悩みがこれで解消されます!

クライアントワークは信頼性が重要なので、ケアレスミスが減るのはかなり大きなメリットだと思います。

作業が圧倒的に効率化され時間に余裕が生まれる

もう一つのメリットも先ほどのケアレスミスに関連する内容ですが、100とか200あるページの共通部分を1ファイルにまとめるわけです。

この例だと単純計算で確認作業は100分の1、200分の1に短縮されますし、コーディングも同じコードを他のページにコピペする必要が無くなるので大幅に短縮できますよね。『圧倒的効率化』と言えるのではないでしょうか。

これにより時間が余裕が生まれ、他の作業に時間を割くこともできますし、普段なら残業が必要なところを定時帰宅することも可能になります。

HTML共通部分をJSインクルードするデメリットはないの?

イレギュラーな対応をする場合はプログラムの知識が必要になる

考えられる唯一のデメリットは共通ファイル化してしまうとイレギュラーな処理をやり難くなるということですね。

なぜなら、共通部分を1ファイルにまとめるわけですから、各ページに表示される共通部分の内容も同じにする必要があるわけです。

特定のページだけ処理を変えたい場合は、プログラムを調整して処理を分岐するようにするか、そのページだけインクルードしないという手段をとる必要があります。

SEO的な問題無いの?

SEOに関する心配をする人は多いと思います。でも安心してください。

昔はJavascriptで出力したテキストがクローラーに拾われないという問題がありましたが、クローラーが進化したので2018年時点では全く心配する必要はありません

そもそも、インクルードするのはヘッダーなどのナビゲーション部分のはずです。SEOにおいて評価されるのはナビゲーションではなく記事本文なので何も問題無いのです。

また、「クローラーが巡回してくれないのではないか」という心配も無用です。

このスクリプトは実際に私が業務で企業サイトを作るのに使用していますが、問題無くクロールされていますし、心配ならGoogle Search Consoleでサイトマップを送信すればOKです。これで確実に巡回されます。

読み込みの遅延とか心配ないの?

読み込みの遅延の心配は全くありません。

なぜなら、HTML本体もJSライブラリも同じサーバー上にある為、どちらかの読み込みが遅延する様な事はあり得ないからです。

デモページを見て頂くと分かりますが、全く読み込みの遅延はありませんよね。

ダウンロードしたライブラリの導入方法・使い方を説明

それではダウンロードしたライブラリの導入方法や使い方をざっくりと解説していきます。

ライブラリの導入方法・読み込み方

上記のサンプルファイルをもとに簡単にスクリプトの仕組みを説明していきます。

まずはHTMLにライブラリ【script.js】を読み込みます。jQuery本体を【script.js】より前に読み込む必要があります。

<!--head要素内に記述-->
<script type="text/javascript" src="common/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="common/js/script.js"></script>

続いて、HTMLのbody内のヘッダーファイルを読み込みたい位置に下記の記述をします。includeHTML関数がライブラリのコアとなる部分ですね。

第1パラメータには第2パラメータを起点とした共通パーツのファイルパス、第2パラメータには現在ページのから見たサイトルートへのパスを指定します。詳しくはサンプルファイルをダウンロードして実際に触った方が分かり易いかと思います。

<!--body要素内のヘッダーを埋め込みたい箇所に記述-->
<script type="text/javascript">
	includeHTML("common/inc/header.html","./");
</script>

あとは第1パラメータで指定したパスの位置にインクルード用のファイルを配置すればOKです。

インクルードする共通パーツのHTMLフォーマット

共通パーツのHTMLには少しだけ特殊な記述が必要です。下記のコードをご覧ください。

<header>
	<nav>
		<ul>
			<li class="home"><a href="{$root}">Home</a></li>
			<li class="about"><a href="{$root}about/">About</a></li>
			<li class="product"><a href="{$root}product/">Product</a></li>
			<li class="recruit"><a href="{$root}recruit/">Recruit</a></li>
		</ul>
	</nav>
</header>

href属性の中に {$root} という記述があるのが分かるかと思います。これは階層によるパスの変化に対応する為です。

例えば、aboutディレクトリにアクセスするにしても【 about/ 】、【 ../about/ 】、【 ../../about/ 】というように現在の階層によって記述を変える必要があります。

しかし、1ファイルで管理される共通パーツであるため記述を統一する必要があるわけです。だからこの記述を導入したということです。

もちろん、{$root} の代わりに『 / 』を使える環境ならこちらでもOKです。

ナビゲーションをアクティブ化するには?

このライブラリを使っていると「現在いるページに対応したナビゲーションをアクティブにしたい」と思うかも知れません。サンプルではアクティブになっているのでそのまま流用すればOKですが一応解説しておきます。

body要素にナビゲーションと同じクラス名を設定する

アクティブにするにはいくつか方法があるかと思いますが、最も分かり易いのがbody要素にナビゲーションと同じクラス名を指定する方法です。

例えば、ナビゲーション部分のクラス指定が以下のように指定されている場合は、

<li class="about"><a href="{$root}about/">About</a></li>

このようにbody要素にも同じクラスを指定してください。

<body class="about">

そして、CSSにはこんな感じで指定します。

body.about header nav > ul > li.about a { color:#FF9; }

これで現在いるページに対応するナビゲーションがハイライトされアクティブな表示になります。

詳しくは、サンプルのソースコードを参照してみてくださいね。

おわりに

以上、HTML共通部分をJSインクルードするメリット・デメリット、そして、ライブラリの紹介について解説しました。

CMSを使えない環境において、メンテナンス性や作業効率が飛躍的に向上するかと思うのでぜひ活用してみてください。

» JSライブラリ&サンプルのダウンロードはこちら

» デモページはこちら

コメント

  1. […] 【JavaScript】ヘッダーなど共通部分を外部化してメンテナンス性を高めよう | affiliate.ks-product […]

タイトルとURLをコピーしました