ITを学ぶなら
｢テックプロジン｣

Tips

2015.01.30
Blade Laravel windows XAMPP

Windows XAMPP で Laravel Blade Template

ono

Windows用XAMPP+Laravel Blade Templateを使ってみる

  • ※XAMPPのインストールフォルダはD:/dev/xamppにインストールします。
  • ※XAMPPのインストールしていない場合は、[styled_link link=”https://techpjin.sakura.ne.jp/techpjin_new/archives/38933″ textColor=”#000000″]WINDOWS XAMPP にて LARAVEL をインストール (XAMPP V1.8.3インストール)[/styled_link]
  • ※Composerのインストールしていない場合は、[styled_link link=”https://techpjin.sakura.ne.jp/techpjin_new/archives/38972″ textColor=”#000000″]WINDOWS XAMPP にて LARAVEL をインストール (COMPOSER 1.0.0-ALPHA8インストール)[/styled_link]
  • ※Laravelのインストールしていない場合は、[styled_link link=”https://techpjin.sakura.ne.jp/techpjin_new/archives/39295″ textColor=”#000000″]WINDOWS XAMPP にて LARAVEL をインストール (LARAVEL V4.2インストール)[/styled_link]
  • ※Laravelの環境設定していない場合は、[styled_link link=”https://techpjin.sakura.ne.jp/techpjin_new/archives/39416″ textColor=”#000000″]Windows XAMPP で Laravel 環境設定[/styled_link]
  • ※LaravelのDB設定していない場合は、[styled_link link=”https://techpjin.sakura.ne.jp/techpjin_new/archives/40368″ textColor=”#000000″]Windows用XAMPP+Laravel DB設定[/styled_link]
  • ※Modelを利用するので、Eloquentを読んでいない方は、[styled_link link=”https://techpjin.sakura.ne.jp/techpjin_new/archives/40435″ textColor=”#000000″]Windows用XAMPP+Laravel Eloquent[/styled_link]
  • ※Bladeを利用するので、Bladeを読んでいない方は、[styled_link link=”https://techpjin.sakura.ne.jp/techpjin_new/archives/42130″ textColor=”#000000″]Windows XAMPP で Laravel Blade[/styled_link]

Blade Template

前回Bladeを利用し画面を作成しましたが、今後処理を増やすことを考えると、共通部分はテンプレート化したほうが良いです。
書くソース量も少なくなるし、保守性も上がります。ちゃんと方式設計が出来ているのであれば、機能拡張など簡単に行うことが出来ます。

継承が出来るので、親－子関係となるのですが、どの部分を親に設定し、どの部分を子供（実装プログラム）に定義するかは、方式設計からの外部設計で決定します。
切り分け自体は慣れが必要になる作業なので、まずは作り、そして直すというのを何度か繰り返したほうがよいかと思います。

今回はあまり分割せずに、テンプレートと実装プログラムに分割してみようと思います。

共通部分の洗い出しを行い、親テンプレートを定義します。

共通部分になりやすいものは、大体以下です。

  1. メタタグ
  2. 共通スタイルの読み込み
  3. 共通jsの読み込み
  4. グローバルメニュー
  5. サイドメニュー
  6. フッタ

1.メタタグ

この部分はメタタグに何を設定するのかで共通化の方法が変わってきます。
keywordやdiscriptionなどは、コントローラで共通の文言を生成するのであれば共通化できるし、そうでないのであれば、実装プログラムに個別に書き込むこともできます。
出来れば、方式として $page.keyword みたいな共通のページ属性のようなものにセットすると表示されると決めたほうがよいと思います。

2.共通スタイルの読み込み

個別のスタイルの読み込みは個別でスーパテンプレートをオーバーライドする形で実現します。
それ以外は、共通のみ読み込むように整理しておくと、あとの設定や拡張が楽になります。

3.共通jsの読み込み

スタイルと同様に個別のjsはスーパーテンプレートをオーバーライドする形で実現します。
読み込みするjsは極力抑えたほうが、ネットワークのトラフィックを考えると早くなります。
キャッシュを利用する観点からCDN(Contents Delivery Network)を利用することをオススメします。
あまり多くのドメインを運用するとDNSの検索に手間取るので、なるべくまとめたほうが良いです。

4.グローバルメニュー

共通化するときに、どこのurlにアクセスするかで、activeなどのclassを追加するなどの共通処理が必要になるこを念頭に置いてください。

5.サイドメニュー

グローバルメニューと同様に共通化するのですが、メニューのオープン／クローズ、アクティブ化などはjsの初期化処理で行うか、Blade側で行うかは方式で決定しておくとプログラマが迷わないで済みます。

6.フッタ

フッタに関しては固定テンプレートになっている場合が多いです。出来れば外部設計時に固定化してテンプレート化することをお勧めします。

前回のBladeをテンプレート化

テンプレートはviewsの下に作成します。
layoutsというホルダーを作成し、テンプレートを入れてみました。
この場合、ホルダー階層は「.」ピリオドで表します。
views/layouts/template.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>{{{ $page['title'] }}}</title>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
	<!--[if lt IE 9]>
		<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	@yield('css')
</head>
<body>
	<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Dragon</a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">active</a></li>
				</ul>
			</div><!--/.nav-collapse -->
		</div>
	</div>

	@yield('container')

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	@yield('js')
</body>
</html>

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載

Windows XAMPP で Laravel Blade
nagiosでフリーな監視をしてみよう！～nagiosの設定(4)～
一覧へ戻る

Recent News

Recent Tips

Tag Search