目次一覧
状態:試行錯誤履歴
閲覧数:5,877
投稿日:2013-04-01
更新日:2019-10-14
2種類
経緯 ／ 最初に思いついた方法 ／ 次に思いついた方法
PHPを利用して、ドキュメントルート外のCSSファイルを読み込む
利用する関数別(2種類)
CSS読み込み別(2種類)
B.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、内部CSSとして読込
A.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、外部CSSとして読込
履歴
経緯 ／ 最初に思いついた方法 ／ 次に思いついた方法
PHPを利用して、ドキュメントルート外のCSSファイルを読み込む
利用する関数別(2種類)
CSS読み込み別(2種類)
B.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、内部CSSとして読込
A.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、外部CSSとして読込
履歴
2種類
経緯 ／ 最初に思いついた方法 ／ 次に思いついた方法
経緯
何が問題なの？
・「同じデザインの複数サイト」を運営している
・デザイン完成してから開発しているわけではなく、「デザイン」と「開発」を同時並行で進めている
・CSS変更が発生すると、その都度、全てのサイトへCSS更新を適用させなければいけない
・コピペするだけなのだが、この単純作業が作業の途中で何回も入ってくると、段々苦痛になってくる
・いちいち一つ一つCSS修正とかやっていられない
・何とかして、includeみたいに、1つのCSSファイルを、全てのサイトで読み込ませることは出来ないのか？ そう考えたのが始まり
最初に思いついた方法
@import url(ドキュメントルートより上階層のパス/style.css);
実際に試してみた結果分かったこと
@import urlは、「ドキュメントルートより上階層に配置されたCSS」を読込不可
次に思いついた方法
HTTP経由でCSSを読込
・jQueyだってHTTP経由で読み込んでいるわけだし、CSSだってHTTP経由で読み込めば良い
・そうすれば、一つのファイル修正結果が、すべてのサイトへ適用される
・JavaScriptやCSSで外部ファイルをURLで読み込む時に書く「src=”http://…”」や「href=”http://…”」の「http:」の部分は省略できる
HTTP経由でCSSを取得するに当たっての懸念事項
・速度的に問題ないの？
・読み取るHTTPをどこにするの？
・URLから関連があるサイトだとバレてしまう(いや、バレても別にいいのだが)
・この時点では、CSSアップロード専用ドメインを一つ準備して、そこから読み取ろう、と考えていた
・ホントに既の所でこの方式を採用するつもりだったのだが、ここで新たな手法を発見
PHPを利用して、ドキュメントルート外のCSSファイルを読み込む
基本的な考え方
PHP(サーバー側)でCSSを読込後、表示
PHPを利用することにより、「ドキュメントルートより上階層に配置したファイル」も読込可能になる
ドキュメントルートより上階層に配置した「外部CSS」を、「外部CSS」あるいは「内部CSS」として読み込む
何れを選択するかは、サイト設計思想に因る
利用する関数別(2種類)
file_get_contents
include
※試していないが、多分「require」でもいけるものと思われる
CSS読み込み別(2種類)
「PHPを利用してドキュメントルート外のCSSファイルを読み込む」場合、下記2つのパターンの何れかを選択することになる(同じ効果を得ることができる)
外部CSS利用
<link href="xxxx" rel="stylesheet">
内部CSS
<style></style>
利用する関数別(2種類)
「include」と「file_get_contents」の違い
評価有無
下記例では、何れを利用しても同じ結果を得られる
<style>
body{
color:blue;
}
</style>
下記例では、includeのみ期待した結果を得られる
※実際に動作確認してみたわけではないが…
<style>
body{
color:#<?php echo $randColor[0]; ?>;
}
</style>
include()
評価して実行
file_get_contents()
評価せず実行
ＰＨＰの外部関数で、ファイルを読み込みます。
画像ファイルとか、Acrobat pdfファイルのようなバイナリーファイルも
読み込めます。(文字列として読み込まれます)
・CSSはテキストファイル(?)なので、今回はincludeを採用画像ファイルとか、Acrobat pdfファイルのようなバイナリーファイルも
読み込めます。(文字列として読み込まれます)
※負荷計測(?)をしてみないことには、実際にはどちらを利用すべきかは不明
CSS読み込み別(2種類)
前提
下記何れを採用するかについて
論点は2つある
※ここで言う採用とは、PHPでどう実装するか、という話。例えば「外部CSS」で作成されていても、PHPを利用することにより(実装方法によっては)「内部CSS」と同じ効果を得ることも出来る
外部CSS利用
<link href="xxxx" rel="stylesheet">
内部CSS
<style></style>
論点は2つ
1.優先度
・CSSは記述場所によって、適用優先度が異なる、というかなり重要な話
・予め「外部CSS」で記述していたものを、PHPを利用することに何も考えずに「内部CSS」読み込みしてしまうと、意図した内容と違う表示をしてしまうこともあり得るので気をつけよう
2.速度
クライアントのブラウザの設定にもよりますが、同一ファイルはキャッシュしますので、同一CSSファイルを異なるページで読み込ませる場合は外部CSSファイルを読み込ませる方が処理は軽くなります
・内部CSSは(htmlへ記述するから)キャッシュされないが、外部CSSはキャッシュされる？
B.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、内部CSSとして読込
内部CSSとして読込
(PHPを利用して)ドキュメントルートより上階層へ配置した「style.css」を、<style></style>タグ内部で読み込む
<style>
<?php echo file_get_contents("ドキュメントルートより上階層のパス/style.css"); ?>
</style>
※「file_get_contents」の変わりにincludeを利用しても良い
特徴
初めて見るページでは
「外部CSS」より速く表示される
※サーバーへ対してCSSファイルをリクエストする時間が省略されるため、
A.(PHPを利用して、)ドキュメントルート外の外部CSSファイルを、外部CSSとして読込
方法は2種類
X.CSSファイルで、PHP関数を利用
Y.PHPファイルで読み込んだ文字列をCSSファイルとして出力
X.CSSファイルで、PHP関数を利用
「.htaccess」で、CSSファイルをPHPとしても動作させるよう予め設定しておく必要がある
index.php
<link href="style.css" rel="stylesheet">
style.css
<?php echo file_get_contents("ドキュメントルートより上階層のパス/style.css"); ?>Y.PHPファイルで読み込んだ文字列をCSSとして出力
ドキュメントルートより上階層へ配置した「style.css」を、「style.php」ファイル内部で読み込む
index.php
<link href="style.php" rel="stylesheet">
style.php
<?php
// ヘッダ出力
header("Content-Type: text/css; charset=utf-8");
echo include("ドキュメントルート上のパス/style.css");
※ヘッダで、明示的にCSSと出力しなければ、「rel="stylesheet"」指定で読み込んでも正常認識されないので、注意が必要
上記Yで、複数CSSファイル連結
複数CSSファイル連結にも挑戦
index.php
<link href="target.php" rel="stylesheet">
target.php
<?php
// ヘッダ出力
header("Content-Type: text/css; charset=utf-8");
$dir = "/var/www/xxxx/views/common/css";
$str = '';
if (is_file("$dir/style.css")) $str .= include("$dir/style.css");
if (is_file("$dir/hoge.min.css")) $str .= include("$dir/hoge.min.css");
echo $str;
履歴
2017/8/16時点
以前は外部CSSとして読み込んでいたが
現在は内部CSSとして読み込んでいる
変更理由
CSS読込階層変更
絶対パス指定例
▼/var/www/xxxx/views/common/common_siteheader.php
<style>
<?php echo file_get_contents("/var/www/xxxx/views/common/css/style.min.css"); ?>
</style>
相対パス指定例
▼/views/status/individual.php
<style>
<?php
echo include( realpath( dirname( __FILE__ ) ).'/../common/lib/xxxx/xxxx.min.css');
?>
</style>
色々な組み合わせ
▼/views/common/common_siteheader.php
<style>
<?php
echo file_get_contents("/var/www/xxxx/views/common/css/style.min.css");
echo include( realpath( dirname( __FILE__ ) ).'/../common/lib/xxxx/xxxx.min.css');
//echo file_get_contents("/var/www/xxxx/views/common/lib/xxxx/minified/themes/default.min.css");
echo include($_SERVER['DOCUMENT_ROOT'] ."/bootstrap/css/style-site.css");
?>
</style>
この方法を止めた理由
min化が面倒
・min化したcssファイルを読み込んでいる
・1cssファイル毎にmin化する必要がある
・面倒