Laravel(6.x) BootstrapでCardデザイン
前回はLaravelでReactを使った記事を書きました
ただLaravelで人気なフロントエンドフレームワークって
まだまだBootstrapが根強い とも思ったので
今回はBootstrapを使ったものを書きます
React+Material-UIの記事はこちら
Material-UIではGridListを使った画像一覧画面でしたが
今回BootstrapではCardを使った画像一覧画面を使ってみたいと思います
目次
この記事をすすめるとどうなる
以下のようなCardの一覧が表示できます
Bootstrapを導入
とにもかくにもまずはBootstrapをインストールしましょう
composer require laravel/ui "^1.0" --dev次にartisanコマンドを使ってuiをbootstrapに設定します
php artisan ui bootstrap$ php artisan ui bootstrap
Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.bootstrapにuiを設定すると以下のファイルが変更されます
resources/js/bootstrap.js
以下のコードが追加されます
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}resources/sass/app.scss
以下のコードが追加されます
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';また、 sassフォルダに新しく _variables.scss も追加されます
では、指示どおりにnpm installとnpm run devを実行しておきます
npm install && npm run devルーティング、コンパイルの設定をする
新しい画面として用意するのでルートを作成します
routes/web.php
初期は、welcomeのみ入っている状態なので
以下を追加します
Route::get('/list', function () {
return view('list');
});Viewを作成する
resources/views/list.blade.php
reactではコンポーネントも記述していましたが、bootstrapでは
別途コンポーネントを作成するのではなくviewに記述していきます
BootstrapのCardを使ってviewを記述していきます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card Image List</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="{{ asset('/images/sample1.jpg') }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">花火大会</h5>
<p class="card-text">あああああああああああああいいいいいいいいいいいいいいいいううううううううううううええええええええええおおおおおおおおおお</p>
</div>
</div>
<div class="card text-center">
<img class="card-img-top" src="{{ asset('/images/sample4.jpg') }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">富士山</h5>
<p class="card-text">きれいだなー</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="{{ asset('/images/sample2.jpg') }}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">小川</h5>
<p class="card-text">縦画像の小川</p>
<p class="card-text"><small class="text-muted">最終更新日 3 日前</small></p>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">画像がない、テキストは中央</h5>
<p class="card-text">画像がないカードです</p>
<p class="card-text"><small class="text-muted">最終更新日 3 日前</small></p>
</div>
</div>
<div class="card">
<img class="card-img" src="{{ asset('/images/sample3.jpg') }}" alt="Card image">
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">画像がない、テキストは左寄り</h5>
<p class="card-text">画像がないカードです</p>
<p class="card-text"><small class="text-muted">最終更新日 3 日前</small></p>
</div>
</div>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
画像を配置する
Reactではimportを使いましたが、ここでは使えないので
直接サンプルを配置しておきます
Controllerを通す場合は、storageなどに配置することになります
public/images
sample1.jpg、sample2.jpg、sample3.jpg、sample4.jpg
のファイル名で配置してください（さっきのViewに記述しているため）
ビルドして画面を確認
npm run dev または npm run watch でビルドします
watchでビルドしておくほうが、ファイルの変更があれば再度自動で
ビルドしてくれるので楽になります
さらに別ターミナルでphp artisan serveでサーバを起動します
npm run watchphp artisan servehttp://localhost:8000/list にアクセスしてみましょう
以下のように画像一覧が表示されていれば成功です！
まとめ
Reactではresourceにコンポーネントを作成して表示させましたが
BootstrapではPHPのviewファイルに直接記述しました
Bootstrapも導入は非常に楽で、Reactよりもhtml,cssを直接修正する
という意味では親しみやすいかもしれません
（レンダリングコスト、styled-component…といった考えになってくるとReactがいいと思います）