Vuetify.js を使ってマテリアルデザインに挑戦しよう！

2017/07/12 カテゴリ - フロントエンド,技術情報

「マテリアルデザイン」という言葉を Google が発表してから既に3年が経過しましたが、みなさんは実際にマテリアルデザインを使ったことはありますか？

今ではかなり浸透しており、メジャーな JavaScript のフレームワークには、マテリアルデザインをベースにした CSS フレームワークが登場しています。（React.js はフレームワークというよりライブラリですが）
　・ Angular ： Angular Material
　・ React.js ： Material-UI
　・ Vue.js ： Vuetify.js

マテリアルデザインのルールに則れば、直感的で使いやすい UI が作れる！
そこで今回は、 Vue.js の CSS フレームワークのひとつ Vuetify.js を使って、ゼロからマテリアルデザインを適用していきたいと思います。

Vuetify.js とは？

前述の通り、 Vuetify.js とは、 Vue.js に対応したマテリアルデザインをベースとした CSS フレームワークです。

※「マテリアルデザイン」そのものの解説は下記をご覧ください。
センス不要！エンジニア向け『マテリアルデザイン』のすすめ

Vuetify.js と似た CSS フレームワークで「 Vue Material 」というものもありますが、両方使ってみた結果、 Vuetify.js の方が使いやすいです。（検証する際のハードルが低く、ドキュメントが見やすいのが主な理由）
スタンドアロンで環境を構築してサンプルを見ながらいろいろ試すことが出来ます。
（https://vuetifyjs.com/vuetify/quick-start）

ゴールの確認

まずはゴールの確認です。

画像と文字が存在し、 CSS は何も効かせていない状態から、マテリアルデザインのルールに則って、以下の対応をします。
　・ヘッダー・フッターを設定する
　・情報をまとめる（カード化する）
　・カルーセルを追加する

Vuetify.js を使えば、この程度でしたら別途 CSS を用意する必要がありません。
では順に進めていきましょう！

Vuetify.js を有効化して、ヘッダー・フッターを設定する

まずは何はともあれ Vuetify.js を適用するところから始めます。
公式の CDN Install 欄の通り、必要な CSS や JavaScript を読み込みます。

<head>
    <meta charset="UTF-8">
    <meta name="description" content="hogehoge">
    <meta name="viewport" content="width=device-width">
    <title>hoge page</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
    <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css"></link>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
</head>

また、基本のレイアウトは Vuetify.js 側であらかじめ定義されているものがあるので、それを使います。
追加でヘッダーのタイトルとフッターの文字列を設定します。

<body>
    <div id="app">
        <v-app>
            <v-navigation-drawer></v-navigation-drawer>
            <v-toolbar><v-toolbar-title>Example Shop</v-toolbar-title></v-toolbar>
            <main>
                <v-container fluid>
                    <router-view></router-view>
                </v-container>
            </main>
            <v-footer>Design by hoge.</v-footer>
        </v-app>
    </div>

そして、 Vue インスタンスを生成します。

<script>
  new Vue({
    el: '#app',
    data: {

    }
  })
</script>

この時点で既に以下のようにヘッダーとフッターが表示されます。

後は色を修正すれば、ヘッダー・フッターは完了です。

情報をまとめる（カード化する）

マテリアルデザインのルールのひとつとして、「実際に触れることのできる現実世界に基づく」というものがあります。
UI は紙で、そこに要素が重なって形成されていると考え、要素 A の下に配置されている要素 B が要素 A を突き抜けて前面に出るといった物理法則を無視するような表現をしないようにします。
そのようなルールの中でよく使われているのが「カード」です。カードは情報のまとまり単位にまとめるのが一般的です。

そこで今度は、カード化を行います。

上から、写真とメッセージの「メッセージエリア」、画像を横並びに配置する「ギャラリーエリア」、画像をスライドショーのように表示する「カルーセルエリア」の3つに分け、それぞれをカード化していきます。

公式の多くのサンプルを試す場合、基本的に以下の対応をすれば動きを確認することができます。

・ Vue のコンポーネントを定義する

Vue.component('label-name', {
    template: '#label-name'
})

・ script タグ内に表示部分を記述する（今回はカード化に関する記述）

<script type="text/x-template" id="label-name">
    <v-card class="pa-3">

    </v-card>
</script>

・埋め込みたい箇所にタグを設置する（タグの名称はそれまでに設定した id 名を使用してください。

<v-container fluid>
    <label-name></label-name>
    <label-name2></label-name2>
　　　　　・
　　　　　・
　　　　　・
</v-container>

サンプルを参考にしながらコードを書いて、確認してみます。

このようにカードとして画像とテキストをまとめることができました。

グリッド化する

前段のカード化同様、コンポーネントの定義・表示部分の記述・タグ設置を行い、今度は複数画像をグリッドレイアウト上に表示しましょう。
コンポーネントの定義時に、画像のファイルパスを格納した配列を取得するメソッドを data プロパティに設定しておきます。

Vue.component('gallery-sec', {
    template: '#gallery-sec',
    data: function(){
        return {
            items: [
                {src: 'images/photo01.jpg'},
                {src: 'images/photo02.jpg'},
                {src: 'images/photo03.jpg'},
                {src: 'images/photo04.jpg'},
                {src: 'images/photo05.jpg'},
                {src: 'images/photo06.jpg'}
            ]
        };
    }
})

items 内の各要素をひとつひとつ取得し、 img タグの src に設定していきます。
ここでようやく Vue.js の繰り返し文 v-for を使っています。

<script type="text/x-template" id="gallery-sec">
    <v-card class="mt-4 mb-4 pa-3">
        <v-layout row wrap>
            <v-flex xs4 v-for="(item,i) in items" :key="i">
                <v-card class="grey lighten-3 ma-2">
                    <v-card-text><img v-bind:src="item.src" width="100%" alt=""></v-card-text>
                </v-card>
            </v-flex>
        </v-layout>
  </v-card>
</script>

挿入したい箇所にタグを設置し、確認します。

このように、グリッドレイアウト内に画像が順に表示されています。
今回は1行につき3つのグリッドにしましたが、設定によって1行あたりの要素数を制御することができます。
詳細は、公式をご覧ください。

カルーセルを追加する

最後の作業です。
Vuetify.js では、普通に書こうとするとなかなか大変なカルーセルも標準で提供されています。

<script type="text/x-template" id="carousels-sec">
    <v-card class="pa-3">
        <v-carousel>
            <v-carousel-item v-for="(carousel,i) in carousels" v-bind:src="carousel.src" :key="i"></v-carousel-item>
      </v-carousel>
    </v-card>
</script>

グリッド化のときと同様、コンポーネントの定義時に画像のファイルパスを配列で格納した変数 carousels を用意し、上記のコードでそれを順に取得・設定しています。
コンポーネントの定義・表示部分の記述・タグ設置を行い、確認します。

これでカルーセルの実装ができました！

Vuetify.js を使いながら、マテリアルデザインへの理解を深めていこう！

いかがでしたでしょうか？
Vue.js に少しでも馴染みがあれば、 Vuetify.js を使って難なくマテリアルデザインを適用していくことができます。
真に意味のあるマテリアルデザインを実現していくには、 CSS フレームワークの使い方と同時にマテリアルデザインそのものの知識を身に着けていかないといけませんが、 Vuetify.js でいろんなサンプルなどを試しながら理解を深めていってはいかがでしょうか？

お問い合わせ

SiTest の導入検討や
他社ツールとの違い・比較について
弊社のプロフェッショナルが
喜んでサポートいたします。
コンサルティング

ヒートマップの活用、ABテストの実施や
フォームの改善でお困りの方は、
弊社のプロフェッショナルが
コンサルティングいたします。
今すぐお気軽にご相談ください。

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

Vuetify.js を使ってマテリアルデザインに挑戦しよう！｜ SiTest (サイテスト) ブログ