共通パーツ（header,footer等）をjQueryで読み込んで編集を楽にする方法＆文字化け対策

2018/01/16
2017/08/14
HowTo, Webデザインテクニック

WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編集する時、同じものをいちいち編集するのがすごく面倒というか時間が無駄というか。。DreamWeaver等の機能を使ってもよいのですが、簡単なようで久しぶりに見るとどこをどうすればよいか把握に時間がかかったりするので、良い方法が何かあるはず。と思って探していたところ、jQueryのみでシンプルにできる方法があった！のでその覚書を。そしてその方法を使って文字化けが発生していたことに気づいてなかった（クロスブラウザチェックを怠っていた。。）のでその対策方法も書いていきたいと思います。

jQueryを使って、共通パーツを読み込む方法

まずは共通パーツを読み込む方法を簡単に説明すると、普通にhtmlでページを作成したページから、Header, Footer等の共通で読み込むパーツを別のhtmlファイルとして作成し、それをjQueryで読み込む。といった方法です。

そんなわけで、htmlのページが作成されているのを前提に、

1. 共通で読み込みたいパーツ（Header、Footer等）を作成し、任意の場所におきます。

以下はサンプルです。

<!--ここから共通<header>-->
<a href="パス">ロゴとかタイトルとか</a>
<ul>
  <li><a href="パス">メニューとか</a></li>
  <li><a href="パス">メニューとか</a></li>
  <li><a href="パス">メニューとか</a></li>
</ul>
<!--ここまで共通</header>-->

htmlやbodyダグなどは不要です！あとで詳細は書きますが、ここで文字コードを記述すると文字化けする原因になるので、注意です。

2. htmlの元のページにjQueryファイルと、共通パーツ（Header、Footer等）を読み込むための記述をタグ内に、以下のように埋め込みます。

<head>
  <script src="js/jquery.min.js　jQueryのパス"></script>
  <script>
    $(function() {
      $("#header01").load("読み込むheaderのhtmlファイルのパス/header01.html");
      $("#footer01").load("読み込むfooterのhtmlファイルのパス/footer01.html");
    });
  </script>
</head>

3.タグ内に、共通で読み込みたいパーツ（Header, Footer等）を以下のように記述します。

<body>
  <div id="wrapper">
    <header id="header01">ここにheader01.htmlの内容が入る</header>

    〜〜

    <footer id="footer01">ここにfooter01.htmlの内容が入る</footer>
  </div><!-- /#wrapper -->
</body>

とりあえずはこれでOKです!!

超簡単。これでそのパーツだけ修正すれば、全ページでHeader, Footer等が自動的に置き換わってくれちゃいます!! もうこれは最初に作るときにこのような作りにしちゃった方が、後々の事を考えたら絶対いいですよね。

ただ、普通にUTF-8でページを作成されてる方はこれでおそらく問題ないと思うのですが、Shift_JIS等で作成されてる方は少し注意点があるので、以下も見てくださいね。

注意点

1. 文字コードの問題（楽天のECサイトにて）

簡単にできたのはいいのですが、実は注意しないといけないのがエンコード（文字コード）の問題です。ま、普通にUTF-8で作成していれば問題ないのですが、楽天のECサイトのように『Shift_JIS』を使わないといけないようなサイトもあります。
楽天のECサイトはエンコードが『Shift_JIS』なので、共通パーツもそうしないとダメだろう。と思い、htmlタグを入れ、エンコードを『Shift_JIS』で作成していました。最初は大丈夫のように見えてたのですが、Firefoxのみで文字化けが起こってしまい、なかなか原因がわからず。。という状態に陥ってしまいました。（2017/8時点：Mac[OS10.11.6, FF ver.54.0.1]、Windows[10, FF ver.54.0.1] 両方）

原因

原因は、楽天内だから、その共通パーツも『Shift_JIS』にしないといけない。と思い、共通パーツを『Shift_JIS』で作成したことでした。読み込む元のhtmlページの文字コードは『Shif_JIS』なのに、読み込み先のページが、『UTF-8』で読み込まれるjQueryのファイルを必要とするファイルとなるため、楽天内だからといって、共通パーツも『Shift_JIS』で作るのはダメ。ってことなんですね。
要は共通パーツは『UTF-8』にしないと文字化けする！ということです。ですので、わざわざhtmlタグをいれてhtmlファイルとしなくてもOKだったわけです。
今回はFirefoxのみでの現象だったのですが、とりあえず共通パーツは『UTF-8』ということを忘れないようにした方がよさそうです。

2. jsファイルの問題（2018/1/16追加）

今回、たまたまページ内リンクを埋め込んだ共通パーツを作ったのですが、その共通パーツ内からのページ内リンクに、通常はスムーススクロールが効くはずのところ、効かなくなっている事に気づきました。
かなり悪戦苦闘の末わかったことなのですが、大元のhtmlに記述しているjsファイルは読み込まれない！んですね。吐き出されるソースには、一つのhtmlとして確認できるのですが、共通パーツ内は、あくまで『共通パーツ』として完結された状態で、大元のhtmlに読み込まれるようですね。

ですので、共通パーツ内でもスムーススクロール等、大元のhtmlで使用しているjsの機能を使いたい場合は、共通パーツ内の最初に、必要なjsファイルを記述する必要があります。

これはちょっと盲点でした。。

まとめ

まさか Firefoxだけで文字化けが起こるなんて思ってなかったので少々はまってしまったのですが、このお陰でjQueryが『UTF-8』で作成されているとわかったことはよかったのかな。と思います。そんなこと今まで考えたことすらありませんでしたので。ま、これはレアケースだと思いますが、とりあえず最初にこの対策をしていれば後々絶対楽なので、少々面倒でも今後はこの方法で作成したいと思います！