loading

cssGenerator(スタイルシートジェネレーター)for PHP

WEBサイトを制作する際に「CSS」(カスケーディングスタイルシート)というものを作成します。「CSSとは何か」という方は全く漏れなく関係がないのでお帰りください。
また、ガチなプログラマな人も関係ありません。対象は、プログラムはちょっと…でもコーディングはできるよ!というWEBデザイナな人です。

さて、cssを効率的に作る為に「Sass」http://sass-lang.com/guideという特殊な言語があります。
cssはWEBの主にデザイン面をコントロールする言語ですが、いわゆる「プログラム言語」ではありませんので、プログラマにはお馴染みの「変数」とか「配列」とか「ループ処理」「条件分岐」などが一切使えません。
Sassは、要するにcssをプログラム言語っぽくして変数とか使えるようにしたよ!というモノです。ざっくり言うと。
しかしながら、コイツは「Ruby」(というプログラム言語)で書かれているので、Rubyが入っていないと動きません。
クライアントPC(ようするにアナタのPC)にRubyとSassをインストールする、
またはサーバにRubyとSassをインストールする必要があります。サーバは、共用サーバとかでは基本無理です。

・・・ってな感じで、制限多いなぁって思ってまして。
んじゃまー、PHPで似たような事実現すればいいんじゃね?という事で、自前のcss生成プログラムを作って長らく使っておりました。
今回、それをちょっと簡易化したものを公開しよっか、と思ったわけです。

動作環境

php7.1.3で動作確認済み。
php5系でも使えます。4は試してないのでわかりませんが、たぶんエラーでます。
主にサーバにアップロードして実行しますが、ローカルにPHP入っていれば同様に動作するはずです。
実体はphpなので、htmlファイルでは動きません。拡張子を.phpにするか、.htmlでもphpが動くようにしておく必要があります。

ダウンロード

 ダウンロード 

設置

cssGenerator.zip というファイルがダウンロードされますので、これを解凍してください。
中身は、以下のような構成になっています。

Documentroot/
     └ cssGenerator/
        ├ basecss/
        │ └ css/
        │   ├ base.php
        │   ├ common.php
        │   └ contents.php
        └ cssGenerator_class.php

これを、ごっそりそのまま、Documentrootにアップロードします。
(ようするに、TOPページのindex.htmlファイルと同じ所にアップする、という事です)
次に、cssファイルを置くディレクトリ(フォルダ)を作ります。ここでは仮に「css」とつけます。
このディレクトリは、パーミッションを「707」に変更しておきましょう。(多少、サーバの設定をいじれる環境であれば、所有者を「apache」、パーミッションは「700」としましょう。)
通常、FTPなどでアップしたディレクトリのパーミッションは「755」。cssを編集しなくても良い段階まで進んだら、元に戻しておくほうがセキュリティとしてはよろしいです。
これで、ファイルの構造は以下のようになっているはずです。

Documentroot/
     ├ index.html(TOPページ)
     └ cssGenerator/
     │  ├ basecss/
     │  │ └ css/
     │  │   ├ base.php
     │  │   ├ common.php
     │  │   └ contents.php
     │ └ cssGenerator_class.php
     ├ css/(パーミッションを707に変更)
     └ (その他のファイルやディレクトリ)

続いて、使用するページのなるべく最初の方に下記ソースを設置します。

<?php
	// セッションスタート
	session_start();
	session_regenerate_id(FALSE);
	
	$cssGen = "";
	// ファイル読み込み
	require_once(sprintf("%s/cssGenerator/cssGenerator_class.php",$_SERVER['DOCUMENT_ROOT']));
	// classオブジェクト化
	$cssGen = new cssGenerator_aev();
?>

このスクリプトは基本的に一つのページで1回しか実行できません。phpが多少読める人ならわかると思いますが、プログラムのなるべく最初の方で実行しておく方が望ましいです。
SESSIONを利用しているので、セッションスタートしておく必要があります。
コアファイルなどで既に実行している場合はこの部分では削除してください。
あとは、実際にスタイルシートを読み込む部分に下記ソースコードを記入します。

<?php
	$cssGen->Execution($_SERVER['HTTP_HOST'],false,"css","false");
?>

linkタグが生成されますので、通常head内、理想は共用headerファイルに書き込んで置くべきでしょう。
これで準備OK。設置したページに、ブラウザからアクセスします。
/css/style.css
が生成されていれば成功です。

使い方

cssGenerator/basecss/css/ 内に、
base.php
common.php
contents.php
という3つのファイルが設置してあります。
これらはphpファイルですが、中身はほとんどタダのcssです。
cssGeneratorでは、この3つのファイルを合体させて、一つのcssファイルを生成する仕組みです。
3つのファイルは、それぞれ以下のような意味合いです。

base.php … イニシャライズとかベースにあたるファイル。最も基礎的な記載をする。ほとんど変更しない。
common.php … 「そのサイト」の共通ファイル。レイアウトの基礎構造などを記載する。
contents.php … ページごとのファイル。

<?php
	$cssGen->Execution($_SERVER['HTTP_HOST'],false,"css","false");
?>

ところで、上記実行ソースで言うところの( )内は、プログラム用語で「引数」といいます。
,(カンマ)区切りで、第一引数、第二引数…というように数えます。プログラムの形態?によって「どこが第一か」は変わるのですが、
これは関数なので…まぁ、難しい事はすっ飛ばして、上記でいうと
$_SERVER['HTTP_HOST'] → 第一引数
false → 第二引数
"css" → 第三引数
"false" → 第四引数
となります。で、このプログラムに置いては、第一引数は基本変更してはいけません。

話がぶっ飛びましたが、「第二引数」が最終的に生成されるcssファイルのファイル名、
「第三引数」がcssファイルを生成する先のディレクトリ名を表しています。
上記の例では第二引数は「false」、プログラム的には「名無し」です。
この場合、ファイル名は自動的に「style.css」となり、第三引数と併せて「css/style.css」が生成される、という事です。

<?php
	$cssGen->Execution($_SERVER['HTTP_HOST'],false,"css","false");
	// コレと
	$cssGen->Execution($_SERVER['HTTP_HOST'],"style","css","false");
	// コレは同じ
	// 第二引数に名前をつける時は""または''で囲む事。拡張子(.css)は不要
?>

サンプルファイル。サンプルの為、ファイル名を「teststyle.css」としてあります。

ファイル名変更

第二引数にファイル名を書き込めば、そのファイル名でのcssファイルが生成されます。

<?php
	$cssGen->Execution($_SERVER['HTTP_HOST'],"test","css","false");
	// css/test.css が生成される
?>

test.css専用のスタイルを用意したい場合、
cssGenerator/basecss/css/contents.php
を複製し、ファイル名をcssファイル名と同じにしてください。
cssGenerator/basecss/css/test.php

先に生成してある「style.css」は削除はされません。不要であればFTPなどから削除してください。

サンプルファイル「test.css」

ディレクトリ変更

第三引数を書き換えれば生成先ディレクトリを変更できます。
階層の深いディレクトリを指定する事もできます。

<?php
	$cssGen->Execution($_SERVER['HTTP_HOST'],"test","_ADMIN/css","false");
	// _ADMIN/css/test.css が生成される
?>

この時、生成先のディレクトリのパーミッションをコントロールしておかないと、ファイルが生成できません。
_ADMIN/css/ のパーミッションを707にする、など。
また、セカンドディレクトリ以降の元となるcssファイル(.phpファイル)をアップしておく必要があります。

Documentroot/
     └ cssGenerator/
        ├ basecss/
        │ ├ css/
        │ │ ├ base.php
        │ │ ├ common.php
        │ │ └ contents.php
        │ └ _ADMIN/
        │   └ css/
        │     ├ base.php
        │     ├ common.php
        │     └ contents.php
        └ cssGenerator_class.php

上記のような構成になります。
ここから読み取れると思いますが、元々のディレクトリ「css」を変更する場合は、
cssGenerator/basecss/css/
この「css」ディレクトリ名を変更する必要があります。

minファイル生成

本質的には不要で、無駄な容量を食ってしまう「コメント」「改行」「スペース」を自動的に潰した、いわゆるminファイルを自動生成する機能があります。
最終的に完成したcssは、minファイルにしておく方が、例えばGoogle speedなどの評価が高くなります。

<?php
	$cssGen->Execution($_SERVER['HTTP_HOST'],"test-min","css","true");
	// 第四引数を"true"にする。
	// css/test-min.css が生成される
?>

やり方は簡単、第四引数を"true"にするだけです。

サンプルファイル「test-min.css」先のサンプル test.cssと中身は同じです。

ファイルを再生成する

このシステムはcssファイルが都度生成されるわけではありません。
再生成(更新)するには、以下2通りの方法があります。

1)生成されたcssファイルを、FTPなどから削除し、再度ページにアクセスすれば、ファイルは再生成されます。

2)cssGenerator/basecss/css/ 内のファイルを更新し、アップロードするとcssファイルが再生成されます。

<?php
	$cssGen->Execution($_SERVER['HTTP_HOST'],"test","css","false");
	// css/test.css が生成される
?>

例えばこの場合、
css/test.css
のファイル生成日時と較べて、
cssGenerator/basecss/css/base.php
cssGenerator/basecss/css/common.php
cssGenerator/basecss/css/contents.php
のいずれかのファイルの最終更新日時が新しい場合にファイルの再生成が実行されます。

ブラウザキャッシュ

再生成を実行した時、サーバによってキャッシュの影響で新しいcssがすぐに反映されない場合があります。
それを回避する為に、linkファイルにクエリを付けて「キャッシュさせない」ようにしています。

<link rel="stylesheet" type="text/css" href="/css/style.css?=20170728">

など

ただし、これは瞬間的に回避しているだけなので、リロードするとキャッシュされているcssが表示されるはずです。
時間経過とともに自動的にキャッシュはクリアされますが、強制的にクリアしたい場合は
キーボードのCtrl+F5を連打するか、
Ctrl+Uでソースコードを表示、css名の部分をクリックしてブラウザ上でcssを表示。
その上でF5などでリロードすれば、ブラウザの(cssの)キャッシュはクリアされます。
(画像のキャッシュクリアなどと理屈は同じです)

関数

cssGeneratorオリジナル関数

cssを設定する為の関数がいくつか用意してあります。

<?php
$color = $gradation_color = array();
/*
 * カラー
**/
$_SESSION['css']['color'] = array(
	"white"     => "#ffffff",
	"black"     => "#000000",
	"red"       => "#ff0000",
	"blue"      => "#0041fb",
);
/*
 * グラデーション
**/
$_SESSION['css']['gradation_color'] = array(
	"submit"       => array("#ffffff","#d3d3d3"),
	"submit_hover" => array("#ffffff","#e2e2e2"),
);
$color = $_SESSION['css']['color'];
$gradation_color = $_SESSION['css']['gradation_color'];
?>

.testbox{
	width: 500px;
	height: 500px;
/* 変数 */
	color: <?php echo($color['red']); ?>;
<?php
// グラデーション
	$GLOBALS['cssGen']->gradation_bc($gradation_color['submit']);

// 角丸
	$GLOBALS['cssGen']->borderRadius("5px","	");
?>
}

cssGenerator/basecss/css/common.php
の頭の部分で、phpでいう「配列」を使って変数を設定しています。
適宜書き換えるや追記すれば、新しい色などを設定できます。

media screen レスポンシブデザイン用css
<?php
$GLOBALS['cssGen']->terminalSwitch_input("custom:560","
	.testarea{
		width: 100px;
		height: 100px;
	}
");
?>

cssGenerator/basecss/css/contents.php にサンプルが記載されていますが、
上記のようなコードを書いておくと、いわゆる「media screen」を自動的に「まとめて」くれます。
詳細はcssが理解できている人なら説明不要だと思いますので割愛いたしますが、
custom:560
の560が閲覧領域の「幅」にあたります。
上記サンプルコードであれば、ブラウザの幅(表示領域の幅)が560px以下の場合、"~"のプロパティが優先されます。
幅はフレキシブルに、自由に書き換えられます。
また、
cssGenerator/basecss/css/common.php
cssGenerator/basecss/css/contents.php
内に自由に記載できます。

media screenは、cssのなるべく下方に、指定幅が大きい順にまとめて記載するのが望ましい、とされていますが
cssレイアウトのブロックごとに書くほうが、人間的には理解しやすいといえます。
この機能は、ブロックごとに記載しても最終的にcssファイルを生成する際にまとめてくれるという機能がついています。
cssGenerator/basecss/css/contents.php
の末尾に

<?php
// 端末表示振分 出力
$GLOBALS['cssGen']->terminalSwitch_output();
?>

という部分がありますが、ここでmedia screenの出力を実行しているので、
これを削除すると本機能は動作しなくなります。
また、(変数も同様ですが)SESSIONでデータを持ち越していますので、SESSIONをスタートさせていないと動作しません。
標準の3ファイル以外のbasecssファイル以外(ここまでの例だと cssGenerator/basecss/css/test.php)を利用する場合は、
cssGenerator/basecss/css/contents.php の末尾は削除(またはコメントアウト)し、
cssGenerator/basecss/css/test.php に記載しておくと良いでしょう。

その他機能

css生成、と言っても実体はタダのphpファイルですので、phpの関数は全て使えます。 ダウンロードファイルのbase.php を見てもらうとわかると思いますが、phpのループ処理を使って大量のプロパティを生成しています。

サンプルファイル。「その他」の欄が該当の部分です。

設置後

cssの編集が終わったら、cssGenerator/ 以下のディレクトリ・ファイルはサーバ上から削除した方が良いと思います。
また、ディレクトリのパーミッションも戻しておくほうが良いです。

ライセンス

著作権は弊社が留保いたしますが、利用については商用・非商用に関わらず無料です。
改変・再配布OKです。
生成されたcssにはコピーライトが記載されていますが、削ってもらっても構いません。
使用した旨報告いただけると嬉しいです。

バグ報告など

動作不良などありましたらコチラから報告してください。

免責事項

・本ページからダウンロードできるソフトウェア、および同梱のファイルの使用、または使用不具合等により生じたいかなる損害に関しまして弊社は一切責任を負いません。

・本ソフトウェアは、予告なく変更する場合があります。


TOPに戻る