リッチな表現を手軽に実現する、Vue向けUIフレームワーク「Vuetify」の紹介

前回は、PC/スマートフォン両対応のUIフレームワーク「Element」を紹介しました。

今回は、Elementと同様にPC/スマートフォンに対応したVueベースのUIフレームワーク「Vuetify」を紹介します。フラットデザイン、マテリアルデザインにも対応していますので、今風のWebアプリケーションを実現することができます。

UIコンポーネントの紹介

VuetifyではあらかじめたくさんのUIコンポーネントが用意されています。まずはそれらを見て、Vuetifyのポテンシャルを感じてください。

アイコン + リスト

アイコン、ラベルなどを組み合わせたリスト表示です。幅が広いデスクトップやタブレットに適したUIです。

アイコン + バッジ

アイコンとバッジを組み合わせたUIです。

ロールバー

アクションシートのように下から選択肢を表示させます。

タブバー

アイコン付きのタブバーです。

ボタン

ボタンはフラットデザインだけでなく、影付きなども用意されています。

こちらは背景付きのボタンです。

ボタンをグループ化してアイコンを使えば、こんな表現も可能です。

ボタンをフローティングすることでメニューとして使うこともできます。

モーダル

シンプルなものはもちろん、以下のようにフォームを表示するリッチなモーダルも作れます。

カード

最近はスマートフォンアプリでも使われることの多い、カードUIです。

メニュー

メニューは、ダイナミックに大きさを変えることもできます。

もちろんアニメーションしながら表示させることもできます。

テーブル

ページネーションなどのコンポーネントを組み合わせることで、以下のようなリッチなテーブルも作れます。

ステータスバー

ステータスバー上には自由にアイコンを配置できます。

アコーディオン

リストをトグルで開けるようになっています。

カレンダー、時間

カレンダーピッカーです。日付を選択すると、上に選択した日付が表示されます。

時間ピッカーです。時と分を順番に選んでいきます。

ローディング

ローディングは円形または直線のみですが、カラーリングが多彩です。

レーティング

レーティングは色も大きさも多彩です。

ウィザード

設定や最初のチュートリアルで使えるウィザード風表示です。以下の画像では縦向きですが、横向きも用意されています。

スナックバー

ウィンドウの上下左右に通知を表示する機能です。

デスクトップブラウザ向けのUI

カルーセル

デスクトップブラウザではよく利用されるカルーセルです。

ホバー

マウスを載せた際に情報を追加表示します。

コンテクストメニュー

一般的に右クリック時に表示することが多い、コンテクストメニューです。これもデスクトップ向けにはあると便利な機能でしょう。

ツールチップ

マウスカーソルを部品に近づけると、部品の近くにツールチップが表示できます。場所は上下左右どこでも可能です。

Monacaでの導入法

ここからはVuetifyをMonacaで利用する方法を紹介します。イチから導入するのはステップが多く面倒です。そのため、「Onsen UI V2 Vue Minimum」テンプレートをベースにして開発を始める方法がオススメです。

Vuetifyのインストール

プロジェクトを開いたら、ターミナルを開いてVuetifyをインストールします。ターミナル機能はMonacaのProプラン以上でご利用いただけます。

npm install vuetify -S

さらにアイコンファイルとして Material Design Icons をインストールします。

npm i material-design-icons-iconfont -S

Onsen UIを削除

package.jsonからOnsen UI V2を削除します。

npm uninstall onsenui -S

main.js の編集

src/main.js はVueアプリケーションを実行する基礎ファイルになります。まずこのファイルを編集します。

以下はOnsen UIに絡んだ部分なので削除します。

import VueOnsen from 'vue-onsenui';

// Onsen UI Styling and Icons
require('onsenui/css-components-src/src/onsen-css-components.css');
require('onsenui/css/onsenui.css');

そしてVuetifyを読み込むようにします。

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

さらに Vue.use の部分を変更します。

// 修正前
Vue.use(VueOnsen);

// 修正後
Vue.use(Vuetify);

App.vueの編集

次に実際の画面にあたる src/App.vue を修正します。元々 <template /> 内はOnsen UIを使っていますので、これをVuetifyベースに書き換えます。

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <v-toolbar
        color="primary"
        dark
      >
        <v-toolbar-side-icon></v-toolbar-side-icon>
        <v-toolbar-title class="white--text">Title</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon>refresh</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>more_vert</v-icon>
        </v-btn>
      </v-toolbar>
            <v-btn-toggle v-model="toggle_exclusive">
              <v-btn flat>
                <v-icon>format_align_left</v-icon>
              </v-btn>
              <v-btn flat>
                <v-icon>format_align_center</v-icon>
              </v-btn>
              <v-btn flat>
                <v-icon>format_align_right</v-icon>
              </v-btn>
              <v-btn flat>
                <v-icon>format_align_justify</v-icon>
              </v-btn>
            </v-btn-toggle>
      <router-view>
      </router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

また、アラートを表示する処理もOnsen UIで書かれているので変更します。

// 修正前
this.$ons.notification.alert('This is an Onsen UI alert notification test.');

// 修正後
alert('This is an Onsen UI alert notification test.');

これで完成です。ソースを保存してプレビューを確認すると、VuetifyのUIに変わっているはずです。

まとめ

ハイブリッドアプリをWebサイト向けにも提供したい、デスクトップのWebブラウザも対象としたいというニーズはよくあります。そうした時にVuetifyはElementと同様、良い選択肢になるのではないでしょうか。VuetifyとElementは機能的に大きな違いがあるわけではないので、用意されているコンポーネントの好みで選んで良いでしょう。

ただし画面遷移などの処理は別途ライブラリをインストールしたり、自前で実装する必要があります。必要に応じて最適なUIフレームワークを選定してください。

Vue.js Material Component Framework — Vuetify.js