はじめに
CMSなどで、背景色や文字の色、さらにはJavascriptの変数など、サーバやデータベースに保管したパラメーターを使って、CSSやJavaScriptを使う時に、Viewがすっきりするスマートな方法を紹介します。
CSSファイルを生成しよう
データベースにマスターとして、背景やカテゴリごとのボタン色を指定できるようになっているとします。
CSSファイルをＤＢ保存した時に書き出しますか？
いいえ、いつものHTML表示と同じようにBladeで作りたい。
やってみましょう。
まず、dbをコントローラで読み込んで、ビューに渡します。
ポイントは、レスポンスでビューとヘッダーをつなげるところです。
そして、MIMEタイプを指定する部分にあります。
普通にVIEWで渡すとうまく来ません。
リターン、レスポンスから書いていきましょう。
/**
* CSS
*
* @return
*/
protected function css()
{
$MtbBackground = MtbBackground::all();
$MtbCategory = MtbCategory::all();
return response()
->view('front.component.colors',[
'cssbackgrands'=>$MtbBackground,
'csscategories'=>$MtbCategory
],200)
->header('Content-Type','text/css')
->header('Content-Disposition','inline');
}
つづいて、VIEWファイル
@charset "utf-8";
@foreach($csscategories as $csscategory)
.btn.category-{{$csscategory->id}} {
background-color: {{$csscategory->color}};
}
@endforeach
@foreach($cssbackgrands as $cssbackgrand)
.bg-{{$cssbackgrand->id}} {
background-color: {{$cssbackgrand->color}} !important;
}
@endforeach
ルーティングを設定します。
普通にファイル名のようにcolor.cssって名前を付けちゃって下さい。
Route::get( '/color.css','Frontend\HomeController@css');
HTMLにCSSをセット
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{url('color.css')}}">
これで、ルーティングに作ったCSSのURLを開いてみます。
CSSファイルがあたかもあるかのように、
狙い通りCSS出力されています。
普通の人がこのリンク先を開いたら、
単なるCSSファイルだと思いますよ。
うふふ。偽装している感じがいい。
あとは、本文中でCSSクラスをを適用していけば、うまくデザインもはまります。
データベースのマスターを変更すれば、反映もすぐです。
JSも同じようやってやれなくないでしょう。
なぜこれを作ったか
ボタンの色や文字の色、運用で追加されるデザインの色要素を、ViewのHTMLのヘッダーにロジックと共にベタ書きしてましたが。
公開されるHTMLのソースコードがダサイ。
Viewがコードが長くなって見ずらい。
CSSファイルとして読み込ませる方法、無いの？って。
JSも同じく、フッターに直でソースコードまるだし。
なーんか、いい方法無いの？
どうして思いついたか
メール機能を作る時、メール送信テンプレートをbladeで、HTMLメールとプレーンのを作ります。
メールって送信しないと、デザインが確認できない。不便すぎる。
という事で、HTMLメールにダミーデータを入れて、プレビューで確認できるように作りました。
こんどは、プレーンはどうなの？見れなくていいのか？という事で、
テキストメールもブラウザに表示すると、普通に改行されずに、表示します。
おやおや。
ブラウザにテキストを表示するには。を調べれば、レスポンスヘッダーを変えればいい事に気がつきます。
// アカウント登録認証メールの例（抜粋）
switch ($type){
case 'html':
return response()
->view('emails.RegisterMail',[
'title' => $this->title,
'header' => $this->header,
'token' => 'dummy',
'footer' => $this->footer,
],200);
case 'text':
return response()
->view('emails.plain.PlainRegisterMail',[
'title' => $this->title,
'header' => $this->header,
'token' => 'dummy',
'footer' => $this->footer,
],200)
->header('Content-Type','text/plain')
->header('Content-Disposition','inline');
}
テキストメールプレビュー機能で、こんな感じでレスポンスヘッダーを付足してみますと、
テキストメールもちゃんとブラウザで確認できます。
OK〜！メール送信しなくても、メールのデザインを調整できる。
勉強になりました。ありがとうございます。