Bootstrapでベースデザインを整える
今回は一旦Bootstrapでデザインを整えてみたいと思います。デザインを整えないまま開発を進めすぎてしまうと、いざデザインを組み込む時に今まで作ったページを一通り調整し直さなければなりません。そのためベースだけは最初に整えておいて、新規にページを作る際などは最初からデザインを組み込んでおく方が楽です。
npmの利用
BootstrapはCDNで提供されているURLから直接読み込んで利用することもできます。軽いですし個人的にはおすすめです。ただ、今回はnpmを利用して利用していきたいと思います。ビルドは重くなりますが、色のカスタマイズなどが必要になった時に簡単できるようになったりします。
また、JavaScriptを使う際などにもどのみちnpmを利用していきますので、JavaScriptもCSSも一括でビルドされます。
Node.jsをインストール
ということでPCにNode.jsが入っていない場合はNode.jsをインストールしておいてください。公式サイトのインストーラを使う形でも構いませんし、Windows意外、もしくはWindowsの場合はWSLが使えるようであればnvmを使うと簡単にバージョンを切り替えられるためおすすめです。
今回Node.js v10.16.3を利用していますので、合わせていただくと問題が出にくいと思います。（とはいえ最新のバージョン12とかでも恐らく動くのではないかと思いますが）
Yarnを利用
また、パッケージマネージャとしてYarnを利用して解説していきます。npmをそのまま使う形でも問題ないですが、合わせたい場合はそちらもインストールしておいてください。
Bootstrapのインストール
本来であればYarnなどを利用してインストールの設定を行っていきますが、Laravelにはlaravel/uiという外部パッケージがあり、そちらでJavaScriptとCSSを初期化すると自動的にBootstrapもインストールされます。以前記事を書きましたので、先に下記を参考にVue.jsを入れるパターンでインストールをしておきます。
デザインを整える
では前回作成したユーザー詳細ページを調整していきます。http://localhost:8000/users/ユーザー名というURLです。yarn hotでホットリローディングした状態で開発を進めていきます。
ビルドしたjs、cssファイルを読み込む
まずは共通レイアウトであるresources/views/layouts/app.blade.phpにyarn hotコマンドでLaravel Mixによってビルドされたjsファイルとcssファイルを読み込んでおきます。
headタグ内にCSSの読み込みを追加します。
<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
bodyタグの最後にJavaScriptファイルの読み込みを追加します。
<script src="{{ mix('js/app.js') }}"></script>
これでページをリロードして確認してみましょう。正常に読み込めていれば少し背景色や体裁などが変わります。
Formを整えてみる
BootstrapにはFormのコンポーネントが用意されています。
これで作成したフォームを整えてみます。また、箱系のサービスは大体中央寄せにしているのでそのあたりも調整してみます。
こんな感じになりました。
DevToolsのスマホ表示で見てみるとこんな感じです。
レイアウトの調整
全体レイアウトは具体的には下記のようにしました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ config('app.name') }}</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
</head>
<body>
@if (session('success'))
<div class="success">
{{ session('success') }}
</div>
@endif
<div class="container" style="max-width: 600px">
@yield('content')
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
- viewportが抜けていたので入れました。これを入れないとスマホ表示が正しく行われません。BootstrapのStarter templateを参考にしています。
- コンテンツを
class="container"で囲みました。Bootstrapはだいたいとりあえずcontainerで囲みます。 - 横幅が広すぎるとtextareaが不格好だったので最大サイズを600pxにしました。
質問ページの調整
質問ページは具体的には下記のようにしました。
<section class="text-center pt-4">
<h1 style="font-size: 1.5rem">{{ $user->name }}</h1>
<div class="mb-4">への質問</div>
{!! Form::open(['url' => url('questions')]) !!}
{!! Form::hidden('user', $user->unique_id) !!}
<div class="form-group">
{!! Form::textarea('body', null, [
'class' => 'form-control',
'placeholder' => '質問をする',
'required' => true,
]) !!}
</div>
{!! Form::Submit('質問する', ['class' => 'btn btn-primary']) !!}
{!! Form::close() !!}
</section>
- 全体をtext-centerクラスで囲んでセンタリングしました。箱系のサービスは大体そういうレイアウトだったような気がしますので。（参考：Text · Bootstrap）
mb-4を入れてマージンを調整しました。（参考：Spacing · Bootstrap）- Formにクラスを指定して整えました。（参考：Form · Bootstrap）
- requiredが抜けていたので入れておきました。ブラウザ側で簡易な入力必須チェックを行ってくれます。
雑にやる
仕事でもなく一人でやるので、styleを直書きしたりととにかく雑で良いと思います。開発しづらくなってきたら共通化したり整えたりしましょう。
アラートの調整
Flashメッセージの表示用にAlertコンポーネントを使います。
レイアウトを下記のように調整します。（ついでにcontainerの中に入れておきました）
@if (session('success'))
<div class="alert alert-success" role="alert">
{{ session('success') }}
</div>
@endif
ナビゲーションバーを入れる
ナビゲーションバーをヘッダ部分に入れてみます。
このあたりから適当に選んで入れてみました。containerの最初に入れています。
まとめ
とりあえず今回はこんなところでしょうか。とりあえずざっと最初の体裁が決まったので今後もこれに沿って進めていきます。あとはまた必要な物が出たら順次検討していきます。次回はツイートは何分に１回なら引かれないかを検証してみたいと思います。
view_list [連載] Laravelで質問箱みたいなサービスを作る
| 第2回 | Laravel Socialiteを使ってTwitterアカウントでログイン機能 |
| 第3回 | 質問できるようにする |
| 第4回 | Bootstrapでベースデザインを整える |
| 第5回 | 質問に回答する機能を作る |
| 第6回 | Twitterシェア用のOGPを作成する |
Crieitの開発者です。 Webエンジニアです（在宅）。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない！」という方は是非記事投稿リクエストボードへ！
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは？
コメント