質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.06%

ヘッダー、フッター、そしてサイドメニューをJavascriptを用いて共通化させたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 94

ypk

score 33

初めまして。
現在、HTML及びCSSを用いて自作サイトの作成を行っているものです。

ヘッダーとフッター、そしてサイドメニューについて、最終的にはどのページでも表示されるようにするためそれぞれ別のHTMLファイルにソースコードを書き、必要があればそれを取り出せるようにできる機能をJavascriptを用いて実装させようとしています。

**
現在は、その第一弾としてフッターを別ファイルからJavascriptを用いて表示させようとしているのですが、残念ながら表示させることができません。**

下記のサイトを参考に、いろいろいじってみています。

https://qiita.com/hiroyukiwk/items/f2a74ba1406de9fad6f6

サーバーのフォルダ階層を下記のようにし、ソースコードを記述してみました。

イメージ説明

function footer(rootDir){
$.ajax({
url: rootDir + "include/footer.html",
cache: false,
async: false,
dataType: 'html',
success: function(html){
  html = html.replace(/\{\$root\}/g, rootDir);
  document.write(html);
}
});
}

ちなみになのですが、main.jsのソースコードの意味があまりよくわかっていません、、、、

function footer(rootDir){
$.ajax({
url: rootDir + "include/footer.html",
cache: false,
async: false,
dataType: 'html',
success: function(html){
  html = html.replace(/\{\$root\}/g, rootDir);
  document.write(html);
}
});
}


は具体的に、何をしようとしているものなのか、もしよろしければご教授いただけると嬉しいです、、、

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <meta name="robots" content="noindex,nofollow">
   <title>ああああああ</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <link rel="stylesheet" href="partsSet.css">
   <link rel="stylesheet" href="stylesheet.css">

   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
   <script>
   $(function() {
      const hum = $('#hamburger, .close')
      const nav = $('.sp-nav')
      hum.on('click', function(){
         nav.toggleClass('toggle');
      });
   });
   </script>
</head>
<body>
   <header>
      <h1>
         <a href="/">ああああああ</a>
      </h1>
      <nav class="pc-nav">
         <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">カテゴリー</a>

              <ul>
                <li><a href="">Child1</a></li>
                <li><a href="">Child2</a></li>
                <li><a href="">Child3</a></li>
                <li><a href="">Child4</a></li>
                <li><a href="">Child5</a></li>
              </ul>
            </li>

            <li><a href="#">掲示板</a></li>
            <li><a href="#">自己紹介</a></li>
            <li><a href="#">連絡先</a></li>
         </ul>
      </nav>
      <nav class="sp-nav">
         <ul>
           <li><a href="#">ホーム</a></li>
           <li><a href="#">カテゴリー</a></li>
           <li><a href="#">掲示板</a></li>
           <li><a href="#">自己紹介</a></li>
           <li><a href="#">連絡先</a></li>
            <li class="close"><span>閉じる</span></li>
         </ul>
      </nav>
      <div id="hamburger">
         <span></span>
      </div>

   </header>
   <div class="main-visual">
     <div id="wrapper">
       <div class="left-column">
         コンテンツ
       </div>

       <div class="right-column">

         <h3>人気記事</h3>

       </div>

    </div>
   </div>

   <!-- footer -->

  <script type="text/javascript">footer();</script>

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

</body>
</html>

index.htmlの

  <script type="text/javascript">footer();</script>

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

の部分にて、フッターの内容を呼び出そうとしているのですが、残念ながら実行してみてもフッターは表示されません。

ファイルの指定方法が適切ではないのか、それともソースコードの記述が不適切なのか、、、

Javascriptを用いて、フッターを表示させる方法をご教授いただければ幸いです。

どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

ヘッダーとフッター、そしてサイドメニューについて、最終的にはどのページでも表示されるようにするためそれぞれ別のHTMLファイルにソースコードを書き、必要があればそれを取り出せるようにできる機能をJavascriptを用いて実装させようとしています。

直接の回答ではありませんが、上記のような管理がしたい場合、「静的サイトジェネレータ」を使用すると便利です。
検討してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/02 07:57

    ありがとうございます。静的サイトジェネレータについて調べてみました。確かに、便利そうですね、、、、
    私は現在、Atomというテキストエディタを用いて自力でやろうとしているのですが、紹介してくださった静的サイトジェネレータを利用しないと私が実装させたい機能をつけることは難しいですかね、、、

    キャンセル

  • 2020/08/02 08:07

    > 静的サイトジェネレータを利用しないと私が実装させたい機能をつけることは難しいですかね、、、

    いいえ。
    適当な DOM を JavaScript で構築していくだけなので、たいしたことではないです。
    ただ、無駄なアクセスが多発する設計になるので、一般的には避けられる仕組みです。
    また、文法チェック等も掛けにくくなるので、管理も少し煩雑になります。

    テンプレートファイルを結合させながら、静的サイトを作るのであれば、サーバ側で結合した後のファイルを送信する静的サイトジェネレータを使用した方が、管理上もSEO上も有利だと思います。

    キャンセル

  • 2020/08/02 09:11

    なるほど、、、ご丁寧にありがとうございます。
    さっそく、静的サイトジェネレータを使用してみます。ご紹介してくださりありがとうございました。

    キャンセル

0

<script src="scripts/main.js"></script>
  <script type="text/javascript">footer();</script>

とすると、どうなりますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/02 05:19

    ご返信が遅くなってしまい申し訳ございません。
    早速修正をしてみましたが、残念ながらフッターは出現しませんでした、、、、

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る