前回
www.tohuandkonsome.site
Threadの一覧
前回は、適当にったテストデータのThreadの一覧が、こんな感じで見えたところまでやりました。
今回は、テストコードというところからは全く関係がなくなってしまうのですが、画面の見た目を整えていきたいと思います。
index.blade.phpを綺麗にする
bladeテンプレートの機能を使って、ヘッダ、コンテンツ、フッターぐらいは分けて、それぞれ再利用が効くようにしておきます。
views配下のディレクトリ構成
.
├── components
│ ├── footer.blade.php
│ └── header.blade.php
├── layouts
│ └── app.blade.php
├── thread
│ └── index.blade.php
ヘッダーはこんな感じにしました。
Googleの日本語フォントを使用してみようと思います。
また後ほど編集するスタイルシートapp.cssを読み込んでおきます。
header.blade.php
<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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
フッターに関しても、どこかで使うかもしれないjavascirptを読み込んで置きます。
footer.blade.php
<script src="{{ asset('js/app.js') }}"></script>
上記header、footerをまとめてレイアウトに含んでおきます。
こちらは、今回作成するWebサイトは基本的にこちらのレイアウトを継承して作成します。
app.blade.php
@include('../components/header')
<body>
@yield('content')
@include('../components/footer')
</body>
</html>
そして、こちらが今回さわるスレッド一覧ページです。
こんな感じにしてみました。
index.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<h1>This is Thread!</h1>
<div class="threads">
@foreach($threads as $thread)
<div class="thread">
<h1> {{ $thread->title }} </h1>
<p> {{ $thread->body }} </p>
</div>
@endforeach
</div>
</div>
@endsection
scss(css)を書く
さて、見た目を整えていくにはスタイルシートを書いていくのですが、せっかくなのでscssで書いていきます。
scssをコンパイルするとcssになります。
(ひどい説明)
qiita.com
pugとhtmlみたいな関係ですね！
きっと、cssが抱えている不便さだっり、問題を解消するためのものだろうと思うのですが、保守を考えてcssを書いたり、複数人で書いたりしたことがないので、いまいちcssの課題みたいなのが見えていないです。
とはいえ、HTMLとCSSっがすごい苦手なのは間違いないので、良いと評判のものは積極的に使っていきたいと思います。
ディレクトリ構成
とりあえず以下のような構成でファイルを作成してみました。
/resources/assets/sass配下
├── app.scss
└── components
├── _thread.scss
└── _variables.scss
app.scssやら_variables.scssやらはデフォルトで用意されているので、既存のコードをまっさらにして、variable_scssはcomponentsディレクトリ配下に移動しています。
_thread.scssは新規で作成したファイルですね。
まずは、_thread.scssを以下ように書いてみます。
_thread.scss
//threadの一覧をwrapするクラス
.threads{
display: flex;
flex-wrap: wrap;
}
//threadそのもの
.thread{
margin: 10px;
background: $mainColor;
color:$subColor;
width: 300px;
height: 350px;
}
せっかくsassを使っているので、サイトのカラーは変数としてまとめて置いておきます。
_variables.scss
//色
$mainColor: #4517FB;
$subColor: #C7FE01;
app.scssは上記を束ねるファイルとして以下のように書きます。
app.scss
//色
//npm install normalize.css でインストールしたものを読み込む
"~normalize.css";
//共通で使える変数はここに書く
"components/variables";
//Threadページはここに書く
"components/thread";
body{
font-family: "Sawarabi Gothic";
}
@import "~normalize.css"はnode.jsのパッケージマネージャ「npm」で normalize.cssをインストールしておくと、@importで読み込めるみたい。
でも、チルダ(~)の意味とかがいまいちわからないんだなぁ。
scssをcssにコンパイルする
さきほど、scssをコンパイルするとcssになると記載しました。
ということはコンパイラが必要になります。
えー、めんどくさいと思ったあなた。大丈夫です。Laravelに標準で用意されています。
プロジェクトのルートディレクトリでnpmのコマンドを叩きましょう。
コンパイラのインストール
$ sudo npm install
ルートディレクト配下にある`package.json'に書かれているjavascirptの便利なパッケージたちが、'node_modules'配下にインストールされていきます。
scssをコンパイルするためのコンパイラもその中に入ってます。
ちょっと蛇足ですが、「scss コンパイル」とかで検索するといろいろでてくるかと思います。
scssをコンパイルするだけであれば以下のようにシンプルなコマンドで使えるパッケージがあったりもします。
コンパイルするイメージ
//hoge.scss がhoge.cssになるかんじ
$ saas hoge.scss
一方、Laravelが用意しているものは、laravel-mixと呼ばれるものが用意されています。
以下は、app.scssをコンパイルするためのwebpack.mix.jsになるます。
webpack.mix.js
let mix = require('laravel-mix');
mix.sass('resources/assets/sass/app.scss', 'public/css');
こんな感じにwebpack.mix.jsを書いたら、以下のコマンドでコンパイルします。
コンパイル
npm run dev
こうすることで、app.cssが生成されたかと思います。
とりあえず画面はこんな感じになりました。
/threadにアクセスした場合
今回はTDDとはまったく関係のない話でしたが、正直なところなにがなんだかわからないよ！という感想を持ちますね。
次回に続きます。
ここまでのソース
github.com
