大規模サイトを制作するときの注意点「教えてマリオ」

• 2012年8月16日
• php,technique

今回は大規模サイトを作成するときの注意点を書いてみたいと思います。ワードプレスやムーバブルタイプで作成して効率を図ることもできますが、今回はこれらを使わず簡単なPHPで共通部分を部品化して修正などを効率的に行う方法を書きたいと思います。

1. 共通の部分を見極めインクルードする
2. CSSはインポートする
3. JAVASCRIPTは外部にまとめて書く
4. 後で泣かない為にタイトル、ディスクリプション、キーワードも忘れずに

1.共通の部分を見極めてインクルードする

これは個人的な見解ですが、50ページ～100ページの大規模サイトを作る場合に一番大変なのは当然作るのも大変ですが、修正がものすごく大変になってきます。

CSSでホームページを作ることは昔と違いほとんどの方が実践され作成されていると思いますので、お客さんに背景を黒から赤に変えてといわれてもCSSでbodyを#000から#F00に書き換えるだけで100ページだろうが1000ページだろうが一瞬で修正が可能ですね。ここまでは本屋さんに置いてあるホームページの作成方法などの本にCSSで作ったほうが世界基準で変更も楽ですよ、とたくさん書いてあります。

しかし上記のようなCSSの変更方法はたくさんでまわっていますが、何かを追加する場合のことはあまり本に書かれていないと思いますので今回はブログで書きたいと思います。

まずは全てのページの共通部分をみつけます。マリオデザインのホームページを例にとって説明しますと共通部分は以下のとおりです。



見づらいですが青色の点線で囲まれた3箇所が全ページの共通部分になります。

一番上のボタンの部分(navi部分)と、右側のバナーを設置している部分（right_cont部分）,一番したのリンク一覧の部分(footer部分)です。厳密に言えばブログでは違うのですがここでは気にせず進めます。カッコ内はマリオデザインのホームページで使われているdivのid名です。

これらの部分以外は個々のページによって内容が変わってきますのでその都度各ページを変更しなければいけません。しかし共通の部分は何ページあっても1回で変更できるようにphpで部品化して効率を図ります。

では説明していきます。今回はお客さんから右側のright_cont部分のホームページ制作サービス対応地域の下にスタッフブログ2を設置したいと依頼されたとします。この場合は画像を挿入しなければならず、上記に述べたようにCSSでどうにかなる場面ではありません。仮にマリオデザインのページ数が100ページだとすると100ページにスタッフブログ2のimgタグを100回コピーして貼り付けなければなりません。

これでは大変効率が悪いので、ホームページを作成する時点で共通になる部分はphpで部品化し読み込んで1箇所を変更すると全てのページに変更がいきわたるようにします。

部品化する前のright_cont部分のソースコードは

        <div id="right_cont">
            <h2>
                <img src="img/tel_banner.png" alt="ホームページ作成電話での注文はこちら" title="電話でのご相談ご依頼" />
            </h2>
            <h3>
                <a href="inq.html">
                    <img src="img/mail_banner_out.png" alt="メールでのホームページ作成お問い合わせはこちら" title="メールでのご相談ご依頼" />
                </a>
            </h3>
            <h4>
                <a href="part.html">
                    <img src="img/staff_banner_out.png" alt="パートナー企業募集" title="パートナー企業募集"/>
                </a>
            </h4>
            <h4>
            	<a href="ser11.html">
                    <img src="img/ser11_banner_out.gif" alt="11の基本サービス" title="11の基本サービス"/>
                </a>
            </h4>
            <div id="brog">
                <a href="brog.html">
                    <img src="img/brog_banner_out.png" alt="マリオデザインスタッフブログ" title="マリオデザインスタッフブログ"/>
                </a>
            </div>
            <!--brog_end -->
            <div id="eria">
                <h5><img src="img/eria_01.png" alt="ホームページ作成対応エリア" title="ホームページ制作対応エリア" /></h5>
                <p>
                福岡・九州を中心とした全国対応<br/>
                北海道,青森,岩手,宮城,秋田,山形,福島,茨城,栃木,群馬,埼玉,千葉,東京,神奈川,新潟,
                富山,石川,福井,山梨,長野,岐阜,静岡,愛知,三重,滋賀,京都,大阪,兵庫,奈良,和歌山,
                鳥取,島根,岡山,広島,山口,徳島,香川,愛媛,高知,福岡,佐賀,長崎,熊本,大分,宮崎,
                鹿児島,沖縄
                </p>
            </div>
            <!--eria_end -->
        </div>
        <!--right_cont -->

です。

これをPHPを使って部品化します。

ファイル名は何でもいいですがわかりやすくright_cont.phpというファイルを作り、上記の2行目から36行目まで切り取って貼り付けます。

すると元のファイルは中身が切り取られたので

        <div id="right_cont">
   
        </div>
        <!--right_cont -->

になります。これでは何も表示されないので、先ほど作ったright_cont.phpを読み込みます。

読み込み方は

   <div id="right_cont">
   <?PHP 
	include "right_cont.php";			
    ?>
   </div>
   <!--right_cont -->

です。

include “読み込みたいファイル”;でファイルを読み込めます。今回は元のファイルとright_cont.phpが同じ階層という体でそのまま書いています。階層が違う場合はファイルまでのパスを記述してください。

これで部品化の完成です。このように共通部分を初めのうちに（作成時から部品化するのがポイント）部品化しておけば100ページだろうが1000ページだろうがたとえスタッフブログ2やスタッフブログ3が追加になっても、right_cont.phpだけにimgタグを記述するだけで全てのページを一瞬にして変更できるのでとても便利です。みなさんも大規模サイトを作成する場合は、共通部分はなるべく部品化し効率化を図りましょう。

復習ですが、PHPを使う場合のファイルの拡張子は.phpです。.htmlのままですとエラーが出ますのできおつけてください。拡張子を.phpに変更すると完成後の確認もローカルでは出来ないのでサーバーにアップするか、xamppなどのローカルサーバーで確認してください。

2.CSSはインポートする

次はCSSファイルの複数読み込みです。これはあまり大規模サイトとは関係ありませんが、CSSファイルをインポートしておけばheadの中もすっきりするし、毎回使うリセット系のCSSを使いまわすときとかも大変便利です。

通常のCSSファイルの読み込みはhead内に

<link href="ファイル名.css" rel="stylesheet" type="text/css" />

で読み込みます。

複数のcssファイルを読み込む場合は

<link href="a.css" rel="stylesheet" type="text/css" />
<link href="b.css" rel="stylesheet" type="text/css" />
<link href="c.css" rel="stylesheet" type="text/css" />
<link href="d.css" rel="stylesheet" type="text/css" />

のようになります。これでもまったく問題ないのですが、個人的にはhead内に文字がたくさんあるのはあまり好きでないので、１つのファイルの中に読み込んでhead内をすっきりさせてみたいと思います。

まずは全てのCSSファイルを読み込むファイルを読み込みます。（少し変な文章ですいません）

<link href="import.css" rel="stylesheet" type="text/css" />

ここでは全てのcssを読み込むファイルの名前をimport.cssとしました。ファイル名は何でも良いです。head内に書くものはこれだけです。後はimport.cssに読み込むファイル名を書いていきます。

import.cssに下記を記述します。

@import url(ファイル名.css);

です。上記のようにa～dのcssファイルを読み込む場合は

@import url(a.css);
@import url(b.css);
@import url(c.css);
@import url(d.css);

となります。上記を日本語で書くとa.cssとb.cssとc.cssとd.cssを読み込んでねと書いてあります。

こうすることにより、head内がとてもすっきりして個人的にはお勧めです。

3.JAVASCRIPTは外部にまとめて書く

先ほどのCSSのJAVASCRIPTバージョンです。これもあまり大規模サイトとは関係ありませんが、head内がすっきりするのでお勧めです。
まず通常のJAVASCRIPTの読みは、

<script type="text/javascript" src="ファイル名.js"></script> 

で読み込みます。これでも全然問題ないのですが、たまにたくさん使いすぎて6行とか8行とかたくさん書かなくてはいけなくなってしまいます。

そこで先ほどのＣＳＳと同じように1つのファイルの中に読み込んで書いてみたいと思います。

まずは全てを読み込むファイルを読み込みます。ここではjsフォルダの中にあるimport.jsとします。

<script type="text/javascript" src="js/import.js"></script> 

head内に記述するのは上記のみです。

後はimport.js内にファイルの読み込み（ここは書き出し）を書いていきます。

document.write('<script type="text/javascript" src="js/a.js"></script>');
document.write('<script type="text/javascript" src="js/b.js"></script>');
document.write('<script type="text/javascript" src="js/c.js"></script>');
document.write('<script type="text/javascript" src="js/d.js"></script>');

です。日本語で書くと’’（シングルコーテーション）の中のものを書き出してねと書いてあります。これでだいぶhead内がすっきりするので個人的はこちらもお勧めです。

4.後で泣かない為にタイトル、ディスクリプション、キーワードも忘れずに

最後は私の過去の失敗談です。昔大規模サイト約150ページのサイトを作成したときのことです。1.共通の部分を見極めてインクルードするのように共通部分を全て部品化し自分で出来ることは全てやっていました。いや、やった気でいました

あるときお客さんから、サイトのタイトルにキーワードをひとつ追加してほしいと依頼がありました。そうなんです。部品化するのは何もbodyの中だけのは話ではなく,タイトル、ディスクリプション、キーワードも基本的には共通ですのでここも部品化することをお勧めします。当時の私は約30分かけてコピーして貼り付けを繰り返しました。まだ150ページぐらいですのでたすかりましたがもっと多かったら確実に泣いていました。

マリオデザインでは基本的にタイトルに、サイトのタイトルプラスページのタイトルを入れております。ですのでサイトのタイトルを部品化し（ここではtitle.phpに記述）ページのタイトルは手打ちという形をとっています。

こんな感じです。

   <title><?PHP include "title.php";?>ここにページのタイトルを手打ち</title>

です。head内も共通のものは部品化することをお勧めします。

＊ワードプレスを使っている方は部品のイメージはすぐにわかると思います。ワードプレスを使ったことがなくこれから使ってみたいと思っているかたも今まで述べた部品のイメージを頭に入れておけばワードプレスもすんなりと覚えられるのかなと思います。