後輩に喜ばれたTipsシリーズ(2)-コーディング時、共通化するため確認しておくこと

こんにちは。気がつけばもう9月。後輩も少しずつ進行に慣れてきたようで、あまり何を言っても喜ばれなくなってきました。
悲しくなった私は、会議の中で上がった技術的な話題を上手く説明することができなかったので、この場を借りて後輩に喜んでもらおうと思います。

喜んでくれるといいなぁ。

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

メニューやフッターなど、どのページにも表示される共通部分は「共通化」をおこなったほうが効率よく作成ができ、また修正が入った場合もスムーズに対応、確認できます。いいこと尽くしですね！
「共通化」を行う際、ブリッジではいくつかの方法をとっているのですが、今回はどの方法を使うべきか、ディレクターでも知っておくべきポイントをまとめてみました。

SSI（Server Side Include）

htmlファイルの拡張子を「.shtml」とすることで共通化したタグが使えるようになります。
例えばこんな感じのタグをshtmlファイルの共通部分を表示したい箇所に記述します。

＜!–#include virtual=”/ssi/header.html”–＞

でも、なるべく拡張子はhtmlで揃えたいですよね…
その場合は、.htaccessというファイルで、サーバに対して指示をしてあげます。

AddType text/x-server-parsed-html .html

「htmlでもSSIを使用したい！」という想いが込められています。

でも「せっかくSSI化したのに、今回のサーバは外部のレンタルサーバだったから、.htaccessへの編集権限がなかった！」ということになってしまっては大変です。SSIを使用するときは、本番サーバで.htaccessの編集権限があるか確認しましょう！

PHPファイルを使う

行うことはSSIと同じ。方法はこの2つが多いような気がします。（もっと他の方法があるよ！っという方教えてください！）

PHPファイルの拡張子をhtmlに変更する
htmlのままPHPがinclude出来るように設定する
※相対パスで画像等を読み込む際に難あり？

これも.htaccessにそれぞれ想いを込めた記述をしますので、本番サーバで.htaccessの編集権限があるか確認しましょう！
また、そのサーバでPHPが使えるかどうかと、PHPのバージョンも確認が必要です。

JavaScriptを使う

htmlファイルには、共通化するJavaScriptと、配置する場所に指示をかきます。
JavaScriptファイルへの書き方は、SSIやPHPファイルとは異なりますが、ここでは割愛します。

この方法は、.htaccessへの設定は必要ないので、一見お手軽に見えますが、ブラウザによる依存の問題があったり、ユーザーがブラウザのJavaScriptを切っている場合あるなど、上記2種類にはない問題が潜んでいます。
また、JavaScriptに書かれたソースはSEO的にあまり評価されないという説もあるようです。
それ以外にも、サイトの読み込み速度に影響したり、imgタグを入れるときは階層を変えていくなど少しお手間な問題も。

どうしても.htaccessが使用できないが共通化したい場合には、検討してみてください。