当ブログ人気記事!
転職体験談
Laravelで学ぶWebアプリ開発
誰でも作れるチャットアプリ
未経験への勧め

【実践Laravel】Vuetifyでトップ画面をサクッと実装する

プログラミング

HTML, CSSあんま書きたくないー!
画面手抜きしたい!
LaravelでVuetifyを使いたい!

本記事はこういった悩みに対しての記事です!


この記事を書いている僕(@Shoot58153748)は、
2020年3月現在メガベンチャーの社内スタートアップの部署で
エンジニア(1年目)をしており、

プログラミング未経験からメガベンチャーへの転職を成功させた経験・ノウハウ
Webエンジニアになってから学んだこと

をブログにまとめています。




前回の記事LaravelVuetifyを使う方法を紹介し、ログイン画面を実装しました!

今回はトップ(Welcome)画面を作っていきます。

学びポイントを以下にまとめました。
是非参考にしてください!

今回のポイント

  • LaravelでのVuetifyを使う方法
  • Vuetifyで文字サイズをレスポンシブにする
スポンサーリンク

Vuetifyでログイン画面を実装

画面イメージ

前準備

必要なパッケージ一覧

  • material-design-icons-iconfont
  • @mdi/font
  • vuetify

アイコンやフォントなども含めてvuetifyの機能全て使うには、
vuetifyだけでなく、
material-design-icons-iconfont

@mdi/font
も必要です!

以下のコマンドでインストールします。

npm i --save material-design-icons-iconfont @mdi/font vuetify

実装

インストールしたパッケージを読み込ませてWelcome画面を作成していきます。
今回の制作物は以下です。

※アプリの環境設定はこちらの記事を踏襲しています。

  • Js
  • Vueコンポーネント
  • Webpack.mix
  • 画面(blade)

Js

ファイル名:resouces/js/welcome.js

import '@mdi/font/css/materialdesignicons.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.component('welcome-component', require('./components/WelcomeComponent.vue').default);
new Vue({
  el: '#welcome',
  vuetify: new Vuetify({
  theme: {
    dark: true,
  },
}),
});


インストールしたパッケージたちをインポートして、
コンポーネントを登録します。

Vuetifyのインスタンスを生成するときに
theme: {dark: true,}
を渡してあげることで背景色を黒くしてます。


注意点としては、
import '@mdi/font/css/materialdesignicons.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';

を読み込まないとアイコンが表示されません。
どうもvuetify2.0以降の仕様ぽいですね。

あとは、
Vue.componentでコンポーネントをrequireしていますが、
後ろにdefaultをつけないとうまくいきませんでした。


続いてコンポーネントWelcomeComponent.vueを作成していきます!

Vueコンポーネント

ファイル名:resouces/js/conponents/WelcomeComponent.vue

<template>
  <v-app>
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col
            cols="12"
            sm="8"
            md="4"
          >
              <div class="text-center pa-4">
                  <p style="color:white; font-weight: bold;" :class="{'headline': $vuetify.breakpoint. smAndDown, 'display-1': $vuetify.breakpoint. mdAndUp}">SHOOT's ROOM</p>
                  <p style="color:white; font-weight: bold;" :class="{'headline': $vuetify.breakpoint. smAndDown, 'display-1': $vuetify.breakpoint. mdAndUp}">Yutori, Gather!!</p>
              </div>

            <div class="text-center pa-4">
                <div class="my-4">
                    <v-btn href="/tweet/index" rounded width="80%" color="primary">Join Tweet Room</v-btn>
                </div>
                <div class="my-4">
                    <v-btn href="/login" rounded width="80%" color="primary">Login</v-btn>
                </div>
                <div class="my-4">
                    <v-btn href="/register" rounded width="80%" color="primary">Register</v-btn>
                </div>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>


画面の配置を決めているのは、
v-containerclass="fillheight", fluid

v-rowalign="center", justify="center"
です。

画面の中央にボタンや文字が表示されるようになります。

今回特に見て欲しいのが2点。

<p>タグのレスポンシブな文字サイズ表示



v-btnのページ遷移です。


前者に関して、

:class="{'headline': $vuetify.breakpoint. smAndDown, 'display-1': $vuetify.breakpoint. mdAndUp}"

クラスをバインディングして、ブレークポイントに応じて文字サイズを出し分けています。

スマートフォンサイズの時はheadlineクラス(Regular 34sp)
スマートフォン以外のディスプレイの時はdisplay-1クラス(Regular 24sp)

文字サイズ、ブレークポイントの厳密な定義に関して、詳しくはVuetify公式ドキュメントを見てください。

後者に関しては、

hrefでパスを指定することで画面遷移が可能です。


これでWelcomeページのコンポーネントができました!

webpack.mix

ファイル名:webpack.mix.js

...

mix.js('resources/js/welcome.js', 'public/js')

...

webpackにビルドパスを記載してから

npm run devでビルドします。

画面(Blade)

ファイル名:resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
      <div id="welcome">
          <welcome-component></welcome-component>
      </div>
      <script src="{{ mix('js/welcome.js') }}"></script>
    </body>
</html>

<body>タグのなかで作成したwelcome-componentを呼び出し、

idがwelcomeであるdivタグで囲んであげます。



これでトップ(Welcome)画面完成です!

まとめ

以上、Laravel×Vuetifyでトップ画面を実装しました!


最後に今回のポイントと成果物をまとめます。

ポイント

  • LaravelでのVuetifyを使う方法
  • Vuetifyで文字サイズをレスポンシブにする

制作物

  • Js
  • Vueコンポーネント
  • Webpack.mix
  • 画面(blade)


サーバーサイドエンジニアにとって
デザインが整った画面を手軽に早く作れるのは大きな魅力です。


僕はVuetifyに出会ってから、画面は
nuxt×vuetifylaravel×vuetify
で作ることが増えています。
(良いのか悪いのかという感じですが)

vuetify自体の学習コストもありますが、
学ぶ価値ありです!

次回は今までSassでデザインしていたツイート画面をVuetifyで書き換えて
おしゃれなデザインにします!



この他にもし、こんな機能を実装してほしいというリクエストがあったら
連絡ください!

実装して皆さんに共有したいと思います。


それではまた!

プログラミング
スポンサーリンク
シェアする
SHOOTをフォローする
末っ子WebエンジニアSHOOTのブログ

コメント

タイトルとURLをコピーしました