Help us understand the problem. What is going on with this article?

Javascriptで簡単に更新!ヘッダーやフッターなどの共通部分を簡単に更新する方法!

qiita01ai.jpg

cms以外のhtmlで作った静的なサイトの共通部分、ヘッダーやフッターサイドバーなどを修正するとき一部分だけ変更する場合でも全ページのソースを修正しなければならないので大変です。
そこで何か一括で変換できるような方法がないかと思い、Javascriptで一括変換できるような方法を紹介します。

別にDreamweaverのtemplate機能やPHPで作成してもいいのですが、そもそもDreamweaverだとAdobeを購入しなければ行けないし、PHPだと「〜.php」になったり、html上でphpを使えるようにする為.accessの設定をしたりとかでサーバーごとの設定があるので今回はJavascriptを選択しました。

Javascriptで共通化していこう

まず、ベースとなるHTMLにJavascriptを読み込めるようにします。

<script src="main.js"></script>

そして共通化する部分に下記を記述。

<script>header();</script>

次に読み込むJavascriptを作ります。
今回はajaxを使用した方法になります。

参考:
jQuery リファレンス jQuery.ajax
url: "header.html",が読み込むHTMLファイルです。

js
function header(){
    $.ajax({
        url: "header.html",
        cache: false,
        success: function(html){
            document.write(html);
        }
    });
}

パスを指定した作りになるなら

<script>header('../');</script>
function header(rootDir){
    $.ajax({
        url: rootDir + "header.html",  // 読み込むHTMLファイル
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); //header.htmlの{$root}を置換
            document.write(html);
        }
    });
}

参考:
更新するのが面倒!サイトの共通部分を簡単に作る様々な方法

共通化ファイルが複数あるならincludeフォルダを作りまとめた方がわかりやすいです。

index.html
style.css
main.js
include
 - header.html
 - footer.html
 - sidebar.html

フォルダをまとめる際はディレクトリーを気をつけてください。

function header(rootDir){
    $.ajax({
        url: rootDir + "include/header.html", // ディレクトリー変更
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); 
            document.write(html);
        }
    });
}

リンクがある場合は「{$root}」を追加します。

<a href="{$root}index.html">TOP</a>

出力されると下記のようになります。
デメリットとしてはscript部分が余分なソースになる、ブラウザーのjsを切っている場合表示されないなどがあります。

<script>header('../');</script>
<header>
    <ul>
        <li><a href="{$root}index.html">TOP</a></li>
        <li><a href="{$root}about.html">ABOUT</a></li>
        <li><a href="{$root}service.html">SERVICE</a></li>
        <li><a href="{$root}contact.html">CONTACT</a></li>
    </ul>
</header>

追記

この記事を書いた頃より開発の状況は随分と変化し現在はNuxt.js(Vue-CLI)を仕様しています。

Vue.jsベースで作りたい → Nuxt.js

Vue.jsあんまり使わない → GulpやGrunt

↑が使えないときこの記事のやり方になるのではないかなと思います。

hiroyukiwk
Nuxt.js/Vue.jsを専門にしているWeb Desiner/Frontend Developperです。 Web制作やSPA,JAMStackなどの開発を主に行っております。
acall
ACALLは、「Life in Work and Work in Life for Happiness」をVISIONとして、どこでも安心・安全・快適なワークスタイルを実現するスマートオフィスプラットフォーム「WorkstyleOS」を開発・提供しています。オフィスワークとリモートワークのベストミックスを通じて、人々の「くらし」と「はたらく」を自由にデザインできる世界を目指します。
https://www.workstyleos.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away