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

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

ただいまの
回答率

91.33%

  • PHP

    15222questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11275questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    2853questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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

解決済

回答 5

投稿 2017/11/21 14:28 ・編集 2017/11/21 14:41

  • 評価
  • クリップ 3
  • VIEW 176

ark0214

score 36

前提・実現したいこと

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

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

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

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

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

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

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

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

追記
借りているサーバーのバージョン情報は以下の通りです。
バージョン情報
Perlモジュール(標準以外)が非常に多岐に渡っていたため割愛します。
必要な部分を教えて頂ければ貼り付けます。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • showkit

    2017/11/21 14:35

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

    キャンセル

  • ark0214

    2017/11/21 14:43

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

    キャンセル

回答 5

+5

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

投稿 2017/11/21 15:01

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/22 11:08

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

    キャンセル

  • 2017/11/22 14:05

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

    キャンセル

checkベストアンサー

+1

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

  • ヘッダやフッタは必ずしも必要な機能ではない。あれば便利だがなくても構造的に問題ない。
    =補助的な機能であればjavascript(ajaxなど)でつければいい

  • ヘッダやフッタと言えどもhtmlの重要な構成要素。かならずスタティックに埋め込みたい。
    =サーバーサイドプログラムでテンプレートを読み込んで表示

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

投稿 2017/11/21 14:44

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/22 10:39

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

    キャンセル

+1

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

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

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

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

投稿 2017/11/21 15:46

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/22 11:09

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

    キャンセル

+1

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

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

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

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

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

投稿 2017/11/23 11:39

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

解決したようですが、最終的に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 さん

投稿 2017/11/23 12:41

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

ただいまの回答率

91.33%

関連した質問

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

  • PHP

    15222questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11275questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    2853questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。