ほとんどのウェブサイトには、ヘッダやフッタなど、サイト全体で共通して使われている部分がありますが、これらを別個のパーツとして作成し、どのページにも読み込ませることができれば、年明けにフッタの年号を変更したいときなど、フッタ用のパーツだけ変更すれば、全てのページに反映されるので、メンテナンス性が非常に向上します。
アプリケーションに付随する機能を使ったり、サーバ上で動作するプログラムを使ったりなど、幾つもの方法がありますが、私はjavascriptというブラウザ上で動くプログラムを使い、アトリエ如瓶サイトの共通部分を一括管理できるようにしています。
とはいえ、奥深いjavascriptについては必要が生じたときに最小限の知識をネットで勉強しているため、思うように動作しなくなるとお手上げになります。
今回のケースについての対処法が役に立ったと思える方は少ないでしょうが、備忘録も兼ねて紹介しておきます。ただし長文なので、文末の結論だけ読んでから、内容を読むかどうか判断してくださって構いません。
サイトの構成と経緯
アトリエ如瓶サイトは、本来のトップページの1つ下の階層にトップページを配置しています。
もともと絵描きだった私は、先に絵画作品を紹介するサイトである「13日の金曜美術館」（以降「13金」）を2000年に公開していたのですが、アトリエ如瓶として独立するにあたって、もともとあったトップページから、絵描きとしてのサイトとデザイナーとしてのサイトを振り分けたサイト構成にして、アトリエ如瓶サイトを制作し、2015年に公開しました。どちらも同じパワーバランスで取り組もうという気持ちを、サイト構成に託したわけです。
アトリエ如瓶サイト（以降AJサイト）は、サイト制作も請けようというデザイナーのサイトなので、先述のjavascript（以降js）や、html5、css3など、最新とはいえなくとも、当面は通用すると思われる手法を極力使って作成していましたが、仕事でウェブ更新やバナー作成などの仕事をしていたものの、cssやjsを使って新規サイトを制作するのは大変な作業でした。
経緯はこれくらいにして、問題が起こったのは、cssもjsも申し訳程度にしか使っていなかった13金サイトをアトリエ如瓶サイトと同様に、cssやjsを駆使したサイトにリニューアルしようと思い立ったところから始まります。
症状・フッタが表示されない
先述の通りのサイト構成ですが、13金サイトの階層にも、AJサイトと同様にcssファイルやjsファイル、また共通して使うパーツのhtmlファイル用のフォルダ（cmnフォルダ。普通はcommonという名前をつけることが多い）を作り、AJサイトをお手本にしながら制作しようとしていたのが、トラブルが起こったときのサイト構成です。
フッタのhtmlファイルに、AJサイトと同じファイルネームを付け、フッタを表示させたいhtmlファイルのheadタグ内でjsフォルダ内に用意しておいたinclude.js（このファイル内で、cmnフォルダ内のフッタ用のhtmlファイルを読み込むように指示）を読み込ませるようにし、フッタを表示させたい位置にwriteFooter("./")と、ここにFooterを書き出してくださいと、AJサイトのjsのコードをコピー＆ペーストしました。("./")の部分で、フッタを表示させたいhtmlファイルと同じ階層にあるjsフォルダ内のinclude.jsファイルを読みに行くように指定してあり、jsフォルダと同じ階層にあるフォルダ内のhtmlファイルに表示させたければ("../")としておくわけです。
準備が整ったので、テストサーバに必要なファイルをUPしてみたのですが、用意していたフッタ用のhtmlファイルが全く表示されませんでした。
AJサイトと全く同じようにしているのに何故!?
検証と解決
とりあえず、お手本としてしたAJサイトの該当する部分を見直しましたが、表示したいhtmlファイルの位置とjsフォルダ、cmnフォルダ、さらにcssフォルダの位置まで何度も何度も確認し、ミスタイプや階層の指定違いなどないかまで確認しましたが、正常に表示されているAJサイトと差異はありませんでした。
外部のhtmlファイルを読み込むのに参考にしたサイトをもう一度探したり、冒頭でも紹介した他の方法を試そうと検索しまくったり……と、検証だけで土曜を1日潰してしまいました。
翌日の日曜の朝から、更に土曜にやった検証を繰り返したりしましたが、やはり結果は同じでしたが、そのうち、
「ひょっとしたら、全く同じなのが良くなくて、階層の指定や同じファイル名のjsをブラウザが混同し、コンフリクト（＝矛盾。この場合も使って良い言葉かどうかは未調査）が起きているのかも知れない！」
と思ったので、13金の階層内のcontents.htmlだけをAJの階層内のindex.htmlがあるのと同じ階層へUPし、AJサイトのURL＋contents.htmlを入力してブラウザで表示してみたところ、AJサイトのフッタがバッチリ表示されました。やはり別な階層であったとしても、jsのファイル名やwriteFooter("./")などの指定が全く同じなのがまずかったようです。
テストサーバ内のcontents.htmlの位置をもとに戻し、jsファイルの名前を書き換えたり、writeFooterf("./")（階層/fine/のfを末尾に付けた）と書き換えるなどしてみましたが、結果は同じでした。結局、/fine/と/dns/と振り分けてはあっても、同一サーバ内で複数の同名jsや同じコマンドを使おうとしていることに問題があるのかも知れない……という結論に至りました。
つまり、次の図のようにサイト構成を組み直す必要があるのではないか……と。
図の通り、振り分けた階層ごとにjsフォルダを用意するのをやめ、それぞれの階層用のjsファイルであることが分かるようなファイルネームに書き換えて別々に用意して、1つのjsフォルダ内に保管し、それぞれのhtmlフォルダに必要なjsファイルを読み込ませ、その中で指定してあるhtmlファイルを読み込むように構成を組み直したわけです。
それぞれのjsファイルを図のようにリネームし、13金サイトと、AJサイトと、それぞれ1ファイルずつ、リネームしたjsファイルを読み込むように指定し直して、それぞれをブラウザで表示してみると……バッチリと、ズバリと、それぞれのフッタ部が正常に表示されました。感動のあまり、目頭が熱くなりました。（苦笑）
すでに出来上がっているAJサイトの全てのhtmlファイル内には、リネーム前のinclude.jsを読み込むように指定がしてあったので、修正する手間を考えると暗澹たる気持ちになりましたが、それも漏れなく終えて、無事解決しました。本当はコーディングに使っているDreamweaverを使えば、複数のファイルの同一箇所の検索・置換ができることは知っていたのですが、連日の検証で参っているところに、取り返しのつかない失敗をしそうなのが怖くて、結局手動で書き換えた次第でした。
結論！！
同一サイト内で、デザインや構成の違うサイトを別な階層に振り分けて運営しようと思っても、jsファイルは振り分けるのと同じ階層にjsフォルダを作って1フォルダで管理すべし！！
……ということになります。これらの検証と解決のために、まる2日かかったというお粗末でした。
13金サイトのリニューアルは、まだまだ沢山の課題があるので、もう少し時間を頂くことになりそうです。
それにしても、AJサイトもろとも異常がでるならまだ分かるものの、後から作り始めた13金サイトのjsファイルだけに異常があったのは何故だかは分からずじまい……です。
同じようなトラブルに頭を痛める方のお役に立て……るようなことはないでしょうねえ。
今回は、検索で引っかかりそうな字句をたくさん使ったし、できれば参考にしてほしかったので、敬体文で書きました。