NEL Laboratory

Learning Innovation.

jQueryを利用してHTMLの共通部分を分割し読み込ませる

複数のHTMLで同じ部分を手動修正するのはさすがに面倒くさすぎるので、共通部分を分割して読み込ませるようにさせましょう。

Advertisement
目次

HTML手書きのサイト

1日1記事しょうもないものを書き続けることを目的としたこのWordPressで作成されたサイト以外にも、HTMLなどに関することをなんやかんややるHTML手書きのサイトも持っています。

今の所JavaScriptで書いた地名ジェネレーターぐらいしかコンテンツはありませんが、今後色々やるかもしれませんしやらないかもしれません。

コードの修正を検討

そのHTML手書きなサイトの基礎的な部分を修正したくなったのです。

そんなこと聞いてないし早くやれというのはもっともですが、サイト立ち上げ時の私は面倒くさがって共通部分を分割せずに全てコピペで済ませるということをしてしまいました。許されません。

今の所そこまでファイル数があるわけでもなんでも無いのでめちゃくちゃ修正が面倒だというわけではありませんが、同じ内容をコピペしまくるというのは保守面でも修正面でも資源的にも最悪です。

HTMLの共通部分を分割して読み込ませる

ということで共通部分をできるだけ分割してまだまともなコードにしたいと思います。

様々な実現方法

分割して読み込ませる方法は様々あります。私はWebに明るくないので詳しいことは各自で調べていただくとして、今回私が採用したのはjQueryを利用した方法です。

jQueryとかいう得体のしれないものを純白な私のサイトに導入しなくてはならないということには若干抵抗がありますが、幾度となく名前を聞いたことがあるもので将来的にも使うでしょうし、なんて言ったってjQueryを利用する方法が一番簡単で見やすいのです。

jQueryの導入

jQueryは超絶便利なJavaScriptライブラリーです。面倒な記述を超絶楽にしてくれます。

jQueryの公式から直接読み込ませるのもありですが、なんとなく私は自分一人で生き抜きたいタイプなのでダウンロードしてきて自分のサーバーから読み込ませる方法にしました。

ここから”Download the compressed, production jQuery hogehoge”を右クリックしてリンク先を保存します。

その後適当な場所にアップロードし、HTML内でJSとして読み込ませることで利用できます。

HTMLの分割

次にHTMLを分割させます。

このサイトを見ていただければ分かりますが、ヘッダーとメイン、フッターぐらいしかありません。つまりヘッダーとフッターを分割させて読み込ませれば良いわけです。

ヘッダー用とフッター用のHTMLファイルに分割しました。

分割後のHTMLファイルはHTMLとして成立していませんが動くから良いのです。

分割したファイルの読み込み

<head>
    <script type = "text/javascript" src="jquery.js"></script> <!-- jQueryの読み込み -->

    <!-- 分割部分の読み込み -->
    <script type="text/javascript">
        $(function() {
            $("#header").load("header.html"); //header.htmlとして分割したものをid"header"で開く
            $("#footer").load("footer.html");
        });
    </script>
</head>
<body>
    <header>
        <div id="header"></div> <!-- header.htmlが読み込まれる -->
    </header>
    <footer>
        <div id="footer"></div> 
    </footer>
</body>

的な感じになります。うまいこと改変して動くようにしてください。

こんな感じで簡単に動いてしまいます。jQuery最高か？

なおローカル環境で動作確認をする場合はChromeだとうまく動かないのでFirefoxなりなんなりを利用してください。

注意点

注意点というか覚えておくと困ったときに便利なことです。

HTMLファイル内の一部取得

HTMLファイルから一部を取得したい場合は、取得したい範囲を囲ってidを振り、

$("#changelog").load("/changelog/ #top");

のように、#の後にidを書けば部分取得が出来ます。

txtも利用可能

HTMLファイル以外にtxtファイルも利用可能です。

それ単体できちんとページとして読めるHTMLファイルから部分取得したいような場合以外はtxtファイルに記述して読み込ませたほうが良いような気がします。コーディング規約的に。

CSSについて

ヘッダー用のCSSやフッター用のCSSのように分けて読み込ませていることも多いと思いますが、その場合は分割したHTMLファイルに多少修正を加える必要があるかもしれません。

読み込んだHTMLファイルはそのまま文字列として挿入されるような仕組みになっているため、元HTMLファイルでCSSによって綺麗に整形されていたとしても読み込み先では整形されていない状態になっています。

整形させたい場合は読み込み先でもCSSファイルを読み込ませる必要があります。取得する範囲内にCSSの適用記述をすれば読み込み先でもCSSファイルを読み込ませる事ができます。パスは読み込み先からのパスになりますが、複数のページへ読み込ませるでしょうからルートパスにしておくことをおすすめします。

読み込ませたHTMLファイル内のJavaScriptが動かない問題

読み込ませたHTMLファイル内にJavaScriptの記述があることも多いと思いますが、.loadすると何故かjs部分が綺麗に消えます。なぜに？？？

$(function () {
    $("#footer").load("/html/footer.html #footer", function () {
        $.getScript("/js/year.js"); });
});

事前にjsを読み込めればOKな場合は、この様にjsファイルを読み込ませればOKです。直接記述することも可能です。

事前にjsを読み込めればOKでは無い場合はtxtファイルとして読み込ませると動きます。

Advertisement

これで修正がかなり楽になりました。詳しいコードを見たい人は実際にサイトに飛んでソースコードでも見てください。

jQueryを利用して現在年を取得する