Laravelの基本はこちらから学べます

Laravel でスレッド掲示板を作成(中級)。13 章デザインを整える




今回は前回に続けて開発を進めていきましょう。
前章をまだご覧になっていない方は以下から開発を始めましょう。

13 章:デザイン調整

デザインを整える

油そば

以前までは、デザインが全くなかったもんな。

今回は少しデザインを整えていきましょう。
まずは、webpack.mix.js を編集していきます。

//webpack.mix.js

const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/assets/js')
   .sass('resources/sass/app.scss', 'public/assets/css');


Laravel 6.x アセットのコンパイル(Mix)
https://readouble.com/laravel/6.x/ja/mix.html

mix.js( ‘ ビルド前のコード ‘, ‘ビルド後のコードの格納先’ )
上記のようになっております。

resources/js/app.js 及び resources/sass/app.scss を確認すると、ビルド前のコードを確認することができます。

それでは実際にビルドしてみましょう。

2ch % npm run dev

 DONE  Compiled successfully in 6459ms                                                                        16:03:20

              Asset      Size          Chunks             Chunk Names
/assets/css/app.css   180 KiB  /assets/js/app  [emitted]  /assets/js/app
  /assets/js/app.js  1.41 MiB  /assets/js/app  [emitted]  /assets/js/app

上記のような表示が出ればビルド完了です。
では実際にビルド後のファイルも確認してみましょう。

/public/assets/js/app.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}

// 略

非常に長いコードが書かれたファイルになっています。
/public/assets/css/app.css に関しても同様にかなり長いコードが書かれたファイルになっていますね。

上記のファイルは git の管理から外しましょう。
( npm run dev をすればどの環境でも手に入るファイルであるため、git 管理する必要がない )

.gitignore

/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
public/assets/js
public/assets/css

また、上記ビルドしたファイルを blade で読み込むために下記を変更しましょう。

resources/views/layouts/app.blade.php

// 変更前
<script src="{{ asset('js/app.js') }}" defer></script>

// 変更後
<script src="{{ mix('assets/js/app.js') }}" defer></script>

// 変更前
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

// 変更後
<link href="{{ mix('assets/css/app.css') }}" rel="stylesheet">

2箇所変更しました。
こちらで、ビルドが完了した app.js と app.css を読み込めるようになりましたね。

scss を追加する

では次にデザインを整えるために、scss を追加していきます。

resources/sass/_variables.scss

// Body
$body-base-color: #dae0e6;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #39F;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
$white: #eeeeee
resources/sass/base/_base.scss

body {
    background-color: $body-base-color;
}

.btn-primary {
    background-color: $blue;
}
.badge-primary {
    background-color: $blue;
    border-radius: 1rem;
}
.btn-danger {
    background-color: $white;
    color: #e3342f;
}
.card-header {
    background-color: $white;
    border: none;
}

.card-footer {
    background-color: $white;
}
resources/sass/app.scss

/// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Base
@import 'base/base';

それでは、scss の追加が完了したので、再度ビルドを行いましょう。
こちらのビルドを行わないと、反映がされません。

2ch % npm run dev

 DONE  Compiled successfully in 6459ms                                                                        16:03:20

              Asset      Size          Chunks             Chunk Names
/assets/css/app.css   180 KiB  /assets/js/app  [emitted]  /assets/js/app
  /assets/js/app.js  1.41 MiB  /assets/js/app  [emitted]  /assets/js/app

Header の位置を固定する

app.blade.php

// 省略
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm sticky-top"> // sticky-top を追加。 

// 省略
油そば

スクロールした後, 要素をviewportの上部に配置します。

Bootstrap
https://getbootstrap.jp/docs/5.0/helpers/position/#sticky-top

Bootstrap のクラスを利用しました。.sticky-top を class に追加するだけでヘッダーを固定することができます。

ヘッダーが固定され、スクロールに追随している

Login, Register 画面はこのようになりました。

Login gががmがめがめn画面画面
Register 画面
一覧画面
詳細画面
管理画面

最初のデザインより良くなったのではないでしょうか。(とは言っても、まだまだ改良の余地しかないですね)

それでは、次回は Slack 通知機能に入っていきましょう。

13 章での変更点は以下からご確認いただけます。
https://github.com/t-aburasoba/thread-board/pull/12/files

もしこの記事をいいねと思ったたり、ご参考になりましたら下記ボタンからサポートしていただけますと、とても励みになります!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です