LaravelとJavascriptフレームワークを組み合わせたサンプルが無いかを探していたところLaravel+Vue.jsで作れる出席管理アプリに関する記事を見つけたので再現してみようと試していました。
実際にやってみて分かったことですが、Docker-Composeで構築した自分の環境にはBootstrap4が入っていた為に必要に応じてBootstrap4用の書き方に修正する箇所がありました。
今回勉強としてアプリを作って行くことで図らずともLaravel+Vue.js、BootStrap4についても学ぶことが出来たのでまとめたいと思います。
*Bootstrap4対応が必要だったところについてまとめています。(基本的なソースは参考資料にてご参照ください。)
動作環境について
OS:macOS High Sierra
version: 10.13.4
Docker(Engine):18.03.1-ce
Compose:1.21.1
Laravel:5.6
PHP:7.1
MySQL:5.7
参考資料
Laravel + Vue.js で出席管理Webアプリを作成する – Part.3
内容
下記、Laravel+Vue.jsの環境にBootStrap4対応をしていく過程をまとめていきます。
そもそもBootstrapが読み込めていなかった
基本的な話なんですが、「bootstrap.scss」を読み込めていませんでした。
「node_modules/bootstrap/scss/bootstrap.scss」をコピーして、「/resources/assets/sass/_bootstrap.scss」を作成します。
ファイルの中身はライブラリをインポートしている為、「_bootstrap.scss」内のパスを書き換えます。全て書き換えます.
(例)
@import "~bootstrap/scss/functions";
次に「app.scss」のbootstrapのimportの箇所を修正します。
(「_bootstrap.scss」が同一ディレクトリ内にある為、bootstrap直打ちで大丈夫です。)
@import "bootstrap";
これでBootStrapを読み込むことが出来ました！！
bootstrap4の影響が出たところ
・「panel」クラス
⇨「card」クラスで代用しました。
参考
Bootstrap4に用意されているクラス【card編】
変更前後の対応関係は下記の通りになっています。
panel panel-default:card
panel-heading:card-header
panel-body:card-body
panel-footer:card-footer
全て右側の記述に変更したら想定通りに表示されました。
カード間の余白をつける為に少し「app.scss」も修正しました。
marginを指定して余白をつけています。(app.scss)
下記で対応
.card {
margin: 10px auto;
}
・「navbar」クラス
まず「app.scss」に書いてある「.navbar-laravel」を「.navbar」に変更します。
「navbar」クラスに関しましては本来下記の様に記載されていましたが、Bootstrap4だと反映されませんでした。
例の通りに記載を変更したところ、navbarが表示される様になりました。
navbar navbar-findcond:
collapse navbar-collapse:
nav navbar-nav navbar-right:
active:
例
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<!-- Navbar content -->
<p>Navbar content</p>
</nav>
・「well」クラス
参考資料にある「AttendanceForm.vue」の、同じ様に「card」クラスに変更します。
<div class="well well-sm" id="attendance-form">
class="card"
さらにcardクラス内をさらに「class="card-body"」のdivタグで囲ったら想定通りのレイアウトで表示されます。
あと背景をグレーにしたかったのでクラス名に下記の通り変更しました。
class="card bg-light mb-3"
ビルドを忘れない様に。(しないと反映されません。)
npm run watch-poll
・アイコン(glyphicon)
bootstrap4と関係があるか分からないですが表示されなかったので代わりに「FontAwesome」で対応させました。
インストール
npm install font-awesome-scss --save-dev
インポートするファイルを探します。
root@834ed9a86fea:/var/www/test# ls node_modules/font-awesome-scss/css
font-awesome.css.map font-awesome.min.scss font-awesome.scss
「font-awesome.scss」をインポートさせます。
パスは下記の通りになります。
node_modules/font-awesome-scss/css/font-awesome.scss
上記パスを「app.scss」ファイルに追記する。
// FontAwesome
@import "node_modules/font-awesome-scss/css/font-awesome.scss";
クラス名「glyphicon glyphicon-user」を下記に変更します。
<span class="glyphicon glyphicon-user" id="start"></span>
⇨<span class="fa fa-user" id="start"></span>
アイコンが表示されました。
同様に他のアイコンも変更させました。
fa fa-calendar
fa fa-flag
これで参考通りのアプリが出来て動かすことが出来ました!
実際にアプリを作ることによってトレンドの技術+αの勉強になりました。
ありがとうございました!!