今回は前回に続けて開発を進めていきましょう。
前章をまだご覧になっていない方は以下から開発を始めましょう。
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 画面はこのようになりました。





最初のデザインより良くなったのではないでしょうか。(とは言っても、まだまだ改良の余地しかないですね)
それでは、次回は Slack 通知機能に入っていきましょう。
13 章での変更点は以下からご確認いただけます。
https://github.com/t-aburasoba/thread-board/pull/12/files
以前までは、デザインが全くなかったもんな。