【Laravel】Flat UIとBootstrapでデザインをする。

# デザインが壊滅的

今は、簡単な掲示板アプリの作成を目的に、サーバーサイドの学習を中心に進めている。しかし、作っているのは骨組みだけで「デザイン」を全く考慮していなかった。

ここで、ある程度デザインを整えておくことにする。正直、フロントサイドは先に基礎力をつけてから色々挑みたい。しかし、今のアプリの状態があまりにひどいため、先に実戦も兼ねてあるツールを使うことにした。

なお、今回の作業は``Laravel 5.5.40``で行うことを想定している。

# Flat UIの導入

ここで使用するツールは``Flat UI``だ。Bootstrapを使用したデザイン集みたいな存在である。シンプルながらも素敵なデザインだ。

今回参考にしたサイト様はこちら。

[LaravelでBootstrapの導入](http://laraweb.net/knowledge/1758/)
[簡単で便利なFlatUIの導入方法と使い方をなるだけわかりやすく解説するよ！](http://flashbanglabo.com/2014/10/flat-ui/)

## ダウンロード

[公式サイト](http://designmodo.github.io/Flat-UI/)から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``を利用して手に入る。

[nodebrewでNode.jsをインストールする。](https://qiita.com/33yuki/items/bae442fa6314bd8f9d7a)

今回試すのはこちら。

- Bootstrap
- jQuery
- POPPER

``POPPER``は``JavaScript用のツールチップ``だ。ツールチップは、カーソルやマウスポインタと連動して、コメントなどを表示してくれる。

ここで参考にしたサイト様はこちら。

[Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。](https://original-game.com/bootstrap4-how-to-use/)
[Bootstrap3日本語リファレンス〜入門](http://bootstrap3.cyberlab.info/gettingStarted/)

## 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>タグ``だが、これは以下の順番で記述しなければならない。先ほど試しにドロップダウンを作成したが、これが正しく動作しなくなる。

1. ``popper.min.js``もしくは``jquery.slim.min.js``
2. ``bootstrap.min.js``

# 感想と反省

ディレクトリ構成など、今回説明した方法が正しいものなのか、正直わからない。しかし、LaravelでBootstarpを動かすことはできた。

とりあえず、今回はここまで。