jQuery
bootstrap
laravel
popper

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

デザインが壊滅的

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

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

なお、今回の作業は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を利用して手に入る。

nodebrewでNode.jsをインストールする。

今回試すのはこちら。

  • Bootstrap
  • jQuery
  • POPPER

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

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

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="#">リンクのリスト1</a></li>
                <li role="presentation"><a href="#">リンクのリスト2</a></li>
                <li role="presentation"><a href="#">リンクのリスト3</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を動かすことはできた。

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