デザインが壊滅的
今は、簡単な掲示板アプリの作成を目的に、サーバーサイドの学習を中心に進めている。しかし、作っているのは骨組みだけで「デザイン」を全く考慮していなかった。
ここで、ある程度デザインを整えておくことにする。正直、フロントサイドは先に基礎力をつけてから色々挑みたい。しかし、今のアプリの状態があまりにひどいため、先に実戦も兼ねてあるツールを使うことにした。
なお、今回の作業はLaravel 5.5.40で行うことを想定している。
Flat UIの導入
ここで使用するツールはFlat UIだ。Bootstrapを使用したデザイン集みたいな存在である。シンプルながらも素敵なデザインだ。
今回参考にしたサイト様はこちら。
LaravelでBootstrapの導入
簡単で便利なFlatUIの導入方法と使い方をなるだけわかりやすく解説するよ！
ダウンロード
公式サイトからFlat UI一式をダウンロードし、以下のディレクトリをプロジェクト内のpublicディレクトリへ移動する。
- dist
- docs/assets
$ mv dist /Users/ユーザー名/workspace/プロジェクト名/public
$ cd docs
$ mv assets /Users/ユーザー名/workspace/プロジェクト名/public
distディレクトリの中に、既にBootstrapが入っている。
動作確認
先ほど移動させなかったファイルを活用する。今回はサンプルデータだ。
プロジェクト内のviewディレクトリに適当なblade.phpファイルを作成し、試しにdocs/examplesディレクトリにあるファイルのどれかをコピペする。これを表示させれば、Flat UIのデザインは確認できる。
ソースコードの確認
docs/components.htmlをブラウザで表示すると、各パーツのソースコードが紹介されている。公式サイトも含めてこれらは全て英語表記だが、直感的に理解できると思う。
正直、コピペプログラマー感は否めないが、形だけでも手早く整えるにはオススメのツールだ。
フロントツールのインストール
やはりコピペ100%に罪悪感を感じ、自分でも少し動かすことにした。
Bootstrapの環境構築
Bootstrapを中心に、フロントサイドで使用するツール群をインストールすることにした。これらは先日インストールしたnpmを利用して手に入る。
今回試すのはこちら。
- Bootstrap
- jQuery
- POPPER
POPPERはJavaScript用のツールチップだ。ツールチップは、カーソルやマウスポインタと連動して、コメントなどを表示してくれる。
ここで参考にしたサイト様はこちら。
Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
Bootstrap3日本語リファレンス〜入門
Bootstrap
まずは、これらの機能を使用したいプロジェクト内で、package.jsonが存在するディレクトリに移動する。package.jsonはパッケージの依存関係がJSONという形式で書かれているファイルだ。npmはこれを読み込んで各パッケージの依存関係を判断し、それに応じた対応をする。Laravelではプロジェクトのルートディレクトリに設置されている。
そこで、以下のコマンドを順次実行する。
$ npm install bootstrap
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.1 requires a peer of popper.js@^1.14.3 but none is installed. You must installpeer dependencies yourself.
+ bootstrap@4.1.1
added 1 package in 1.307s
jQuery
$ npm install jquery
npm WARN bootstrap@4.1.1 requires a peer of popper.js@^1.14.3 but none is installed. You must installpeer dependencies yourself.
+ jquery@3.3.1
added 1 package in 1.15s
POPPER
$ npm install popper.js
+ popper.js@1.14.3
added 1 package in 1.128s
警告WARNを読むと、これらのツールはお互いに依存してるようだ。
このコマンドを終えると、新たにnode_modulesというディレクトリができるはずだ。その中に、各ツール用のディレクトリが入っている。
テストファイルの作成
プロジェクト内のviewディレクトリに適当なblade.phpファイルを作成し、確認のため幾つかBootstrapのパーツを埋め込む。実行はまだ行わない。
テストファイルの内容は、デフォルトのwelcome.blade.phpを基準とすると、変更点は<list>タグと<script>タグだけだ。
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Bootstrap表示テスト</h1><br>
<button type="button" class="btn btn-default">Default</button><br><br>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
ドロップダウン
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#">リンクのリスト１</a></li>
<li role="presentation"><a href="#">リンクのリスト２</a></li>
<li role="presentation"><a href="#">リンクのリスト３</a></li>
</ul>
</div><br>
<div class="alert alert-primary" role="alert">primary</div>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
publicディレクトリ
ビューファイルの実行にはnode_modulesディレクトリへのアクセスが必須だ。しかし、アクセスはpublicディレクトリが優先（唯一？）される。上記のコードではnode_modulesディレクトリをpublicディレクトリの中へ移動しないと、Bootstrapそのものが動作しない。
今回は、最初からpublicディレクトリにpackage.jsonを移動して作業した方が良かったかもしれない・・・
ここに気がつくまで時間が掛かってしまった。
scriptタグの順番
<script>タグだが、これは以下の順番で記述しなければならない。先ほど試しにドロップダウンを作成したが、これが正しく動作しなくなる。
-
popper.min.jsもしくはjquery.slim.min.js bootstrap.min.js
感想と反省
ディレクトリ構成など、今回説明した方法が正しいものなのか、正直わからない。しかし、LaravelでBootstarpを動かすことはできた。
とりあえず、今回はここまで。