WEBサイトの共有部分の読み込みは何で行うべきか

Question

###前提・実現したいこと
自社既存WEBサイトの改修計画があります。
今回、静的コンテンツ部分のヘッダー、フッターを共有化して使いまわしたいと思っています。
今現在、静的コンテンツは120ページ程度です。
外注せずに済むものは外注したくないとの考えのようで、有償CMSの利用などは考えておりません。
8割以上のページは作りっぱなしで大丈夫ですが、年に一回くらい定価変更や廃番などの関係で変更があるかもしれません。
（mod_rewriteで最終的には隠すことになるでしょうが）拡張子にこだわりはありません。

納期は特になく、開発人数は私を入れて1～2人です。
私が触ったことがあるものはHTML、CSS、PHPくらいで、Javascriptはコピペレベルです。

更新するのが面倒！サイトの共通部分を簡単に作る様々な方法｜WEB Drawer
ＨＴＭＬ共通部分を部品化して読み込ませる方法

これらのページを見ていますが、最終的にどの手段を取ればいいのか判断つきません。
2つ目の記事の中ではJavascriptが選ばれていますが、
各ブラウザで設定をオフにされると表示できないことを考えると、
あまりヘッダー・フッターには使いたくないかなと思ってしまいます。
同規模のサイトを見て回ったところ拡張子がhtmlやhtmの箇所があったりして、
いよいよ何で作るのが一般的なのかわかりません。

優先したいのは「管理しやすさ」（将来引き継ぐことになる人がしんどくないように）で、
作成時の学習量の多さやしんどさは度外視で構いません。
今後更新を引き継ぐことになる人にとって負の遺産になることだけ避けたいと考えています。

なお、この今後更新を引き継ぐことになる人についてですが、
社風上、経験者や既習者ではなく門戸外の人間に投げる可能性があります。
私個人、WEB制作はすべて独学で、周囲に相談できる人はいません。
そのため、場合によっては
「内部がどうなっているのかよくわかんないけど、とりあえず見た目の更新はこのファイルを弄ったらできるよ！」
……くらいのレベルの引き継ぎになるかもしれないと覚悟しております。

長くなってしまいましたが、
普通はどうやって作るものなのか、
上記のような事情を踏まえるとどうするのがおすすめなのか、
アドバイス頂けると大変ありがたいです。

※Yah●o知恵袋に行った方がいい案件であれば移動します

追記
借りているサーバーのバージョン情報は以下の通りです。

Perlモジュール（標準以外）が非常に多岐に渡っていたため割愛します。
必要な部分を教えて頂ければ貼り付けます。

Comments

[showkit]

わたしが回答できるかはわかりませんが、他の方が答えるためにも、ウェブサーバの OS なりサーバアプリケーション。PHP は使えるようですがその他のモジュールをインストールすることができるかなども情報として提示した方がよかろうかと思います。

[chibi144]

ありがとうございます。追記しました。モジュールの意味を理解していないのでトンチンカンなことを書いていたら申し訳ありません。

Answer 1

サーバーで都度動的に変更する必要がないのであれば、静的サイトジェネレーターを使うのも手です。
共通部分をincludeファイルとして外部化してコードを書いた後にビルドし、出力されたHTMLファイルをサーバーに配置します。
多少学習コストは必要ですがHUGOはビルドも速く、日本語の情報量もあるので他のHexo等と合わせて試してみると良いかと思います。
2017年注目の「静的サイトジェネレーター」を３つ紹介します。
HUGO
Hugo】ゴリラでも分かる静的サイトジェネレーターHugoでオリジナルテーマ作り
Hugoでwebサイト構築(1) レイアウトことはじめ

Comments

[chibi144]

ご回答ありがとうございます。
今回は採用できなさそうですが、ご提示頂いた内容にとても興味がそそられます。個人的に勉強してみたいです。

[aro10]

サイトをJavascriptで動的に変化させる場合は、企業サイトに有益となるようにSEO的に正しくグーグルが認識して描画しているか、URLは適切に変化しているか等のプログラム技術以外の知識も必要になるかもしれません。

Answer 2

解決したようですが、最終的にJavaScriptを採用したようですので、まだ出ていないJavaScriptのデメリットにも触れておきます。

JavaScriptを利用した場合、「Webページ参照時にHTML/jsファイルをDL→JavaScript実行→XHRないしfetchで外部HTMLをDL」の仕組みが考えられますが、HTTPアクセス分のタイムラグが発生します。
特にそれが重要な内部リンクであった場合、ユーザが目的のページに辿り着くまでページ遷移を繰り返すことで何度も待ち時間を強制されることになります。

私としては「サーバサイドスクリプト」「静的サイトジェネレータ」の二択だと思います。

私が過去に作った例では、htmlを全て「インクルードされる側」「インクルードする側」に分けて外部ファイル化し、「インクルードする側」には目印を付けたコメントにインクルードされるようPHPで一括置換して一元管理していました。
一元管理すると全てが同じphpファイルを経由してURLが美しくないので、mod_rewriteを併用しましたが。

include.php?file=index.html
include.php?file=a.html
include.php?file=b.html

Re: ark0214 さん

Answer 3

解決済みの後なので、回答の要点だけ言います。

・JavaScriptを多用したサイト、とくにSPAだと、SEOが難しい。
（ただし検索ボットが、JSを全然読めない訳でもない）
結果的に、検索流入から訪問客が減るリスクがあります。

・静的サイトジェネレーターは、DB不使用なのがメリットですが、
その代わり学習コストと（個別機能の）実装コストが大きいです。
次の引き継ぎの人も、その実装言語から習得する必要があります。

・また、更新が1年に1回とか、間隔が大きいのであれば、
ジェネレータのページ生成スピードの優先順位は低いでしょう。
かりに、ジェネレータ前提の場合、Middlmanとかもアリだと思います。

・WordPressでなるべくプログラムを書かないのが一番楽です。
技術的にはつまらなくなりますが、実務だと有力でしょう。

Answer 4

サーバが扱いやすそうなので。

　.shtml で、共通部分をインクルードするのが、最も単純な方法かと思います。

　Apache のコンフィグレーションファイルをいじれば、拡張子が .html や .htm であってもインクルード可能ですし。

　現在のマシン事情であれば、インクルードがあったとしても速度やリソースへの影響は少ないと思います。

Comments

[chibi144]

ご回答ありがとうございます。
SSIの採用は今回見送ってしまいましたが、いろんなところで聞く技術なのでぜひとも勉強してみたいと思います。

Answer 5

考え方は大きく２つありますね
運用するポリシーによって違うのでまずは方針を決めることです

• ヘッダやフッタは必ずしも必要な機能ではない。あれば便利だがなくても構造的に問題ない。

=補助的な機能であればjavascript(ajaxなど)でつければいい

• ヘッダやフッタと言えどもhtmlの重要な構成要素。かならずスタティックに埋め込みたい。

=サーバーサイドプログラムでテンプレートを読み込んで表示

※その他、いまや流行りませんがiframeなどの補助的な処理でやる（非推奨）

Comments

[chibi144]

ご回答ありがとうございます。
こちらで頂いた内容を基にもう一人と話したところ、Javascriptをオフにしているのは所謂わかってる人なんだから、必要であればオンにしてくれるはず…という見解で、結果的にJavascriptが採用されそうです。