【PHPでWeb制作】ローカル環境とサーバー環境でCSSを読み込むときの注意点は？？

PHPスクラッチでWeb制作をする時、どうしていますか？？
ローカル環境で制作してからサーバー環境にアップするというやり方が多いのではないでしょうか？

私たち、FrankuL -フランクル- でもWeb制作の案件を受注し、チーム制作を行う場合はベースを共有しそれぞれがローカル環境で制作、サーバーにアップするという流れをとっています。

先日いただいた案件で、CSSがうまく反映されずに困った経験がありました。
そこで、今回はローカル環境とサーバー環境など、環境違いの読み込みでの注意点と解決法をご紹介したいと思います。

ローカル環境とサーバー環境の違い

ローカル環境とは？

ローカル環境とは、個人のコンピューターの中に構成される環境です。自分のパソコンでのみ操作できます。他の人と共有することはできません。

URLは　http://localhost:80/——–/ となり、他の人に共有しようと、このURLを伝えても、同じファイルを全て共有していない限り同じものを見ることはできません。

サーバー環境とは

サーバー環境とは、レンタルサーバーを借りて世の中に対して公開することができる環境です。

もちろん、URLを伝えれば同じように見ることができます。

環境が変わる場合のソースの書き方

〜データベース接続〜

ソースを書く際に、まずはどのデータベースと繋げるのかを記載する必要があります。
接続用のファイルを作成し以下の内容を記述します。（db_conn.phpなど）

ローカル環境でのみデータベースと繋げるための一般的な書き方はこちらです。
※MySQLでの接続文なので、他のデータベースの場合は異なります。

	$hostname = "localhost:80";
	$dbuserid = "root";
	$dbpasswd = "●●●●●";
	$dbname = "root";

	$dsn = "mysql:host=" .$hostname. ";dbname=" .$dbname. ";charset=utf8";

	try {
		$dbh = new PDO($dsn, $dbuserid, $dbpasswd);
		$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
		$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION)
		return $dbh;
	} catch (PDOException $e) {
		echo $e->getMessage();
		return $dbh = null;
	}

ローカル環境とサーバー環境を切り替えるためのソースの書き方はこちらです。

function db_connect() {

	// server（レンタルサーバー)
☆	$hostname = "レンタルサーバー内のサーバー情報";
☆	$dbuserid = "データベースのユーザーID";
☆	$dbpasswd = "レンタルサーバーのパスワード";

	// MAMP（MySQL)
●	$hostname = "localhost:80";
●	$dbuserid = "ローカル環境内でのユーザーID";
●	$dbpasswd = "ローカル環境内でのパスワード";

	$dbname = "データベースの名前";

	$dsn = "mysql:host=" .$hostname. ";dbname=" .$dbname. ";charset=utf8";

	try {
		$dbh = new PDO($dsn, $dbuserid, $dbpasswd);
		$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
		$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
		return $dbh;
	} catch (PDOException $e) {
		echo $e->getMessage();
		return $dbh = null;
	}
}

ローカル環境で繋ぐ場合はserver(レンタルサーバー)部分の☆マークが付いているものを // でコメントアウトします。
サーバーで使用する場合はMAMP(MySQL)部分の●マークが付いているものを // でコメントアウトします。

ここまでが、データベースへ接続するための準備です。

〜プロトコルの設定〜

プロトコルとは、ネットワーク通信をする際に決められた決まり事です。
初めにプロトコルの設定をします。

定義用のファイル（define.phpなど）を作成し以下の記述をします。　

// プロトコル
$protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] !== 'off')? 'https': 'http';

// server（レンタルサーバー)
☆  $local_subdir = '/';

// MAMP（MySQL)
●  $local_subdir = '/ローカル環境内のフォルダの名前/';

レンタルサーバーを使用する場合は●、ローカル環境を使用する場合は☆を // でコメントアウトします。

〜define(定義)を使用した環境の読み込み〜

ランディングページのように1ページしかないWebサイトであれば、全てコードで文章やルートパスなどを書くという方法もあります。
しかし、ページが多数あったり、同じ言葉やルートパスが多くある場合は、define（定義）を使用するのがもっとも効率がよく、修正忘れなども少なくすみます。

環境が変わるということは、各ページのURLが変わるので、define（定義）を使用してルートパスを編集します。

// ルートパス
define('C_PATH_ROOT', $protocol.'://'.$_SERVER["HTTP_HOST"].$local_subdir);
define('C_PATH_ROOT_HTTPS', 'https://'.$_SERVER["HTTP_HOST"].$local_subdir);
define('C_PATH_ROOT_HTTP', 'http://'.$_SERVER["HTTP_HOST"].$local_subdir);

ファイルやCSS、JavaScriptを読み込む際にも、ローカル環境とサーバー環境ではURLが異なるのでdefine（定義）を使用します。

// ドキュメントルート
define('C_DOCUMENT_ROOT', $_SERVER["DOCUMENT_ROOT"]);

// 共通 css パス
define('C_PATH_CSS', C_PATH_ROOT. 'css/');

// 共通 javascript パス
define('C_PATH_JS', C_PATH_ROOT . 'js/');

失敗画面と成功画面

上記のルートの変更がうまくいっているか、一番簡単に見分けるコツはCSSが反映されているか？です。

上記の2枚を見比べると、違いが一目瞭然です。ナビバーが崩れていますし、サイト名も見えません。
自分が作成したはずのCSSが反映されていなければ、読み込みがエラーとなっています。

エラーに気づいたときのチェック項目

エラーに気づいたら、以下のことをチェックしてみましょう。

一に確認、二に確認！

私は、コメントアウトのミスで何度も同じエラーを起こしてしまいました。

制作の現場ではサーバーに上がっている状態のものが最新に変わったら、それを自分のローカル環境にダウンロードして作業をするということを繰り返しています。その際に、サーバーにある最新のファイルでコメントアウトされているパスは、もちろんローカル環境ですよね！ですが、いつもそのことを忘れそのまま使用してエラーが起きてしまうんです。

これだけ自分側でエラーを繰り返すということは、自分がサーバーにアップする際にローカル環境の状態のままアップしてしまったことも多々あるのではないか(＞人＜;)と気づいてしまいました。

それに気づいたチームメンバーが人知れず直してくれていたと思うと…感謝でいっぱいです。

自分1人で作業する際には、このように気づいて直してくれる人はいません！
全て自分の責任です。1人で制作する場合も、チームで制作する場合も確認をしっかりして、中途半端な状態でサーバーにアップしないように気をつけましょう！

今回はdefine（定義）について簡単にご紹介しましたが、define（定義）を使うとWebサイトの修正がとっても簡単になるので、次回はもっと詳しく使い方をまとめてご紹介します！