- laravel / uiとは
- 導入準備、前提条件
- laravel/ui導入
- bootstrap導入
- bootstrap使い方
- まとめ
今回は上記のテーマで解説していきます。
細かいところについて詳しく解説していきますので、是非参考にして頂ければと思います。
目次
[laravel bootstrap 使い方]はじめに
今回は、Laravel 6.xについて解説していきます。
バージョン5.8まではフロントエンドフレームワークとしてbootstrapが使えていました。
それがなぜかバージョン6移行デフォルトで使えなくなってしまったんですね。
まさに改悪ですね…。
そのため、6.xでBootstrapを利用するには、フロントエンドのScafolding機能を提供するlaravel/uiのコマンドを使用してJavascriptのビルドとCSSのプリプロセッサ設定を生成する必要があります。
何言ってるかわからないと思いの読者さんもとりあえず、言葉の意味は理解しなくてよいので、この後に説明する手順を一緒に行ってくださればbootstrapが使えるようになりますので一緒に頑張っていきましょう！
[laravel bootstrap 使い方]laravel / uiとは
まずはlaravel/uiはなにか、というところから解説していきます。
ざっくり説明すると、、JavascriptのビルドとCSSのプリプロセッサ設定のScaffoldingの生成コマンドを提供するパッケージです。
コマンドオプション–authでフォーム認証用のビューテンプレートも生成することができるようになっています。
(6.xでは、artisan make:authコマンドがなくなっているので、認証機能をlaravel/uiのコマンドオプション–authで生成します)
[laravel bootstrap 使い方]導入準備、前提条件
JavascriptとCSSのビルドはLaravel Mix つまり Webpackを利用しますので、node.jsのインストールが必用です。
node.isをインストールする解説記事はbootstrap themeの使い方からどうぞ。
※凄く細かい話をすると「Composer」や「PHP」「MariaDB」も入っていたほうが良いです。
場合によっては必須ではないですが、開発環境によっては必要なのでインストールを推奨しています。
以上のものがパソコンにインストールされている前提でお話しさせていただきます。
[laravel bootstrap 使い方]laravel/ui導入
新規プロジェクトを作ります。名前はなんでもOKです。
今回は「test」としました。最後についてるやつが名前です。
|
1 |
$ composer create-project --prefer-dist laravel/laravel test |
次にlaravel/uiを読み込みます。
先ほど説明しました通りComposerで追加するので、インストールしといてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
composer require laravel/ui <出力結果> Using version ^2.0 for laravel/ui ./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev) Package operations: 0 installs, 1 update, 0 removals - Updating laravel/ui (v2.0.1 => v2.0.3): Downloading (100%) Writing lock file Generating optimized autoload files > Illuminate\Foundation\ComposerScripts::postAutoloadDump > @php artisan package:discover --ansi Discovered Package: facade/ignition Discovered Package: fideloper/proxy Discovered Package: fruitcake/laravel-cors Discovered Package: laravel/tinker Discovered Package: laravel/ui Discovered Package: maatwebsite/excel Discovered Package: nesbot/carbon Discovered Package: nunomaduro/collision Package manifest generated successfully. 10 packages you are using are looking for funding. Use the `composer fund` command to find out more! |
上記のようになったら次に進みます。
[laravel bootstrap 使い方]bootstrap導入
まずuiコマンドを立ち上げ、bootstrapを選択して実行します。
|
1 2 3 4 |
php artisan ui bootstrap <出力結果> Bootstrap scaffolding installed successfully. Please run "npm install && npm run dev" to compile your fresh scaffolding. |
その後、インストールしたら完了です。（ビルドはしてくださいね）
[laravel bootstrap 使い方]bootstrap使い方
それでは、テストがてらbootstrapを利用してwelcomeページを見てみましょう。
resources/viewを開きます。
welcome.blade.phpに編集をかけていきます。（先ほどPHPをインストール推奨したのはこのためです）
|
1 |
<link href="{{ asset('css/app.css') }}" rel="stylesheet"> |
こちらのコードを追加していきます。
次に、ボタンを追加していきます。こちらはおなじみのボタンタグです。
|
1 2 3 4 5 6 7 8 |
<a href="https://laravel.com/docs"><button class='btn btn-default'>Docs</button></a> <a href="https://laracasts.com"><button class='btn btn-primary'>Laracasts</button></a> <a href="https://laravel-news.com"><button class='btn btn-success'>News</button></a> <a href="https://blog.laravel.com"><button class='btn btn-info'>Blog</button></a> <a href="https://nova.laravel.com"><button class='btn btn-warning'>Nova</button></a> <a href="https://forge.laravel.com"><button class='btn btn-danger'>Forge</button></a> <a href="https://vapor.laravel.com"><button class='btn btn-link'>Vapor</button></a> <a href="https://github.com/laravel/laravel"><button class='btn btn-primary'>GitHub</button></a> |
こちらで完成です。
一度、ここでソースコード全体を確認していきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <!-- Styles --> <style> html, body { background-color: #fff; color: #636b6f; font-family: 'Nunito', sans-serif; font-weight: 200; height: 100vh; margin: 0; } .full-height { height: 100vh; } .flex-center { align-items: center; display: flex; justify-content: center; } .position-ref { position: relative; } .top-right { position: absolute; right: 10px; top: 18px; } .content { text-align: center; } .title { font-size: 84px; } .links > a { color: #636b6f; padding: 0 25px; font-size: 13px; font-weight: 600; letter-spacing: .1rem; text-decoration: none; text-transform: uppercase; } .m-b-md { margin-bottom: 30px; } </style> </head> <body> <div class="flex-center position-ref full-height"> @if (Route::has('login')) <div class="top-right links"> @auth <a href="{{ url('/home') }}">Home</a> @else <a href="{{ route('login') }}">Login</a> @if (Route::has('register')) <a href="{{ route('register') }}">Register</a> @endif @endauth </div> @endif <div class="content"> <div class="title m-b-md"> Laravel </div> <div class="links"> <a href="https://laravel.com/docs"><button class='btn btn-default'>Docs</button></a> <a href="https://laracasts.com"><button class='btn btn-primary'>Laracasts</button></a> <a href="https://laravel-news.com"><button class='btn btn-success'>News</button></a> <a href="https://blog.laravel.com"><button class='btn btn-info'>Blog</button></a> <a href="https://nova.laravel.com"><button class='btn btn-warning'>Nova</button></a> <a href="https://forge.laravel.com"><button class='btn btn-danger'>Forge</button></a> <a href="https://vapor.laravel.com"><button class='btn btn-link'>Vapor</button></a> <a href="https://github.com/laravel/laravel"><button class='btn btn-primary'>GitHub</button></a> </div> </div> </div> </body> </html> |
この後、ブラウザでも正しく表示されているかを確認できれば終わりです。
お疲れ様でした。
[laravel bootstrap 使い方]まとめ
いかがだったでしょうか？
laravel/ui導入にてbootstrapを使用する方法について解説してきました。
まとめますと
インストールするもの
- node.js
- Composer
- PHP
- MariaDB
手順
- 新規プロジェクトを立ち上げる
- laravel/uiを読み込む
- bootstrapを読み込む
になります。
それでは最後までありがとうございました。
