Laravel + Blade に Bootstrap と jQuery を導入してデザイン面を整えます。

利用バージョンはこちら。

  • PHP 5.4
  • Laravel 5.0.0
  • Bootstrap 3 系

Bootstrap

Bootstrap
Bootstrap
Bootstrap
http://getbootstrap.com/

Bootstrap はボタンやメニューなどのパーツを簡単に利用することができるフレームワークです。

グリッドシステムと呼ばれるシステムを利用し、自在にレスポンシブなレイアウトを作ることができるのが魅力ですね。

テーマファイルも多数公開されています。
私が良く利用するのは Bootswatch です。

Bootswatch
Bootswatch
Bootswatch
http://bootswatch.com/

導入方法

この記事では「 public に、コンパイル済みの Bootstrap を直接設置 」する方法を説明いたします。


はじめに Bootstrap のサイトよりファイルをダウンロードします。

Bootstrap のダウンロード
Bootstrap のダウンロード

左側のDownload Bootstrapをクリックしてzipファイルを入手してください。

zipファイルを解凍し、解凍後フォルダに含まれる css、fonts、js を Laravel プロジェクトにコピーします。

コピー先のディレクトリはプロジェクトルート/public/assets/以下としてください。

その他の導入方法

Laravel で Bootstrap を利用するには 3 つの方法があります。

  • Bootstrap CDN を使用する
  • public ディレクトリ以下にコンパイル済の Bootstrap を直接する
  • ソースからコンパイルする

React など利用してフロントエンドを作り込むアプリケーションの場合はソースからコンパイルするのが良いでしょう。

この場合、Bootstrap のソースをダウンロードして resources/assets ディレクトリに配置し、コンパイルのコマンドを打ちます。

コンパイルには Laravel Mix (旧 Laravel Elixir)を利用します。 この Laravel Mix はフロンドエンドの JavaScript 開発環境が構築が必要のため、そちらに明るくない方には正直に敷居が高いです。

jQuery

jQuery
jQuery
jQuery
https://jquery.com/

導入方法

公式サイトから JavaScript ファイルをダウンロードし、/プロジェクトルート/public/assets/js/ 以下にコピーします。

Bladeのコード

Bootstrap のBasic template を Blade 化します。
まずはコードを。

ファイル

layout.blade.php

 1<html>
 2<head>
 3  <meta charset="utf-8">
 4  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 5  <meta name="viewport" content="width=device-width, initial-scale=1">
 6  <link href="{{asset('/assets/css/bootstrap.min.css')}}" rel="stylesheet">
 7  <link href="{{asset('/assets/css/admin-style.css')}}" rel="stylesheet">
 8  <!--[if lt IE 9]>
 9    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
10    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
11  <![endif]-->
12</head>
13<body>
14<div class="navbar navbar-default navbar-fixed-top">
15<div class="container">
16  <div class="navbar-header">
17    <a href="{{url('')}}" class="navbar-brand">AdminTools</a>
18  </div>
19</div>
20</div>
21<div class="container">
22<div class="row">
23  <div class="col-lg-4 col-md-4">
24    @section('sidebar')
25    @show
26  </div>
27  <div class="col-lg-8 col-md-8">
28    @yield('content')
29  </div>
30</div>
31</div>
32<footer>
33<div class="row">
34  <div class="col-lg-12">
35    @section('footer')
36    @show
37  </div>
38</div>
39@section('endbody')
40<script src="{{asset('/assets/js/jquery.min.js')}}"></script>
41<script src="{{asset('/assets/js/bootstrap.min.js')}}"></script>
42@show
43</body>
44</html>
45

index.blade.php

 1@extends('layout')
 2
 3@section('content')
 4{{-- content body --}}
 5@stop
 6
 7@section('endbody')
 8@parent
 9<script>
10jQuery(function($) {
11  // jQueryの処理
12});
13</script>
14@stop
15

解説

レイアウトの活用

Blade ではレイアウトシステムが利用できますのでこれを活用して layout.blade.php とコンテンツ用のてプレートの 2 ファイルを用意します。
Bootstrap はもちろん、jQuery もほとんどのページで利用すると思いますので、これらはレイアウトの定義側で読み込むこととしました。

JavaScript は最後に読み込む

jQuery など JavaScript のファイルや処理はブロッキングの原因となってしまいますので、コンテンツの最後に読み込みます。

セクション分け

前述のとおり、JavaScript ファイル類は</body> の後に読み込みますので、endbody というセクションを追加して、JavaScript 関係はそちらにまとめることとしました。

@section('content') 部分に JavaScript の処理を書いた場合、その時点で jQuery の読み込みは行われておらず、jQuery が見つからないというエラーが発生してしまいます。


これで下地が整いました。

ここまでやれば、ツールチップでもモーダルダイアログでも、インタラクティブなページを作り込むことができますよ!


参考

ララ帳
初めてのLARAVEL 5.1 : (15) BOOTSTRAP3 の導入
https://laravel10.wordpress.com/2015/03/07/初めてのlaravel-5-15-bootstrap3-で表示を整える/


PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応

竹澤 有貴,栗生 和明,新原 雅司,大村 創太郎
出版社:ソシム  発売日:2018-09-26

Amazonで詳細を見る

PHPフレームワーク Laravel入門

掌田津耶乃
出版社:秀和システム  発売日:2017-09-16

Amazonで詳細を見る

初めてのPHP

David Sklar
出版社:オライリージャパン  発売日:2017-03-18

Amazonで詳細を見る