前回は、PC/スマートフォン両対応のUIフレームワーク「Element」を紹介しました。
今回は、Elementと同様にPC/スマートフォンに対応したVueベースのUIフレームワーク「Vuetify」を紹介します。フラットデザイン、マテリアルデザインにも対応していますので、今風のWebアプリケーションを実現することができます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-48.png?w=1118&ssl=1)
UIコンポーネントの紹介
VuetifyではあらかじめたくさんのUIコンポーネントが用意されています。まずはそれらを見て、Vuetifyのポテンシャルを感じてください。
アイコン + リスト
アイコン、ラベルなどを組み合わせたリスト表示です。幅が広いデスクトップやタブレットに適したUIです。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-47.png?w=1118&ssl=1)
アイコン + バッジ
アイコンとバッジを組み合わせたUIです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-46.png?w=1118&ssl=1)
ロールバー
アクションシートのように下から選択肢を表示させます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-52.gif?w=1118&ssl=1)
タブバー
アイコン付きのタブバーです。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-45.png?w=1118&ssl=1)
ボタン
ボタンはフラットデザインだけでなく、影付きなども用意されています。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-44.png?w=1118&ssl=1)
こちらは背景付きのボタンです。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-43.png?w=1118&ssl=1)
ボタンをグループ化してアイコンを使えば、こんな表現も可能です。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-21.png?w=1118&ssl=1)
ボタンをフローティングすることでメニューとして使うこともできます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-20.png?w=1118&ssl=1)
モーダル
シンプルなものはもちろん、以下のようにフォームを表示するリッチなモーダルも作れます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-51.gif?w=1118&ssl=1)
カード
最近はスマートフォンアプリでも使われることの多い、カードUIです。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-19.png?w=1118&ssl=1)
メニュー
メニューは、ダイナミックに大きさを変えることもできます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-49.gif?w=1118&ssl=1)
もちろんアニメーションしながら表示させることもできます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-48.gif?w=1118&ssl=1)
タグ
アイコンを使うことで閉じるボタン風の表現も可能です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-17.png?w=1118&ssl=1)
リスト
管理画面などで使えそうなヘッダー、フッターを持ったリスト表現です。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-16.png?w=1118&ssl=1)
テーブル
ページネーションなどのコンポーネントを組み合わせることで、以下のようなリッチなテーブルも作れます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-15.png?w=1118&ssl=1)
ステータスバー
ステータスバー上には自由にアイコンを配置できます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-14.png?w=1118&ssl=1)
アコーディオン
リストをトグルで開けるようになっています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-13.png?w=1118&ssl=1)
カレンダー、時間
カレンダーピッカーです。日付を選択すると、上に選択した日付が表示されます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-9.png?w=1118&ssl=1)
時間ピッカーです。時と分を順番に選んでいきます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-8.png?w=1118&ssl=1)
ローディング
ローディングは円形または直線のみですが、カラーリングが多彩です。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-7.png?w=1118&ssl=1)
レーティング
レーティングは色も大きさも多彩です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-6.png?w=1118&ssl=1)
ウィザード
設定や最初のチュートリアルで使えるウィザード風表示です。以下の画像では縦向きですが、横向きも用意されています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-5.png?w=1118&ssl=1)
スナックバー
ウィンドウの上下左右に通知を表示する機能です。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-47.gif?w=1118&ssl=1)
デスクトップブラウザ向けのUI
カルーセル
デスクトップブラウザではよく利用されるカルーセルです。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-18.png?w=1118&ssl=1)
ホバー
マウスを載せた際に情報を追加表示します。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-50.gif?w=1118&ssl=1)
コンテクストメニュー
一般的に右クリック時に表示することが多い、コンテクストメニューです。これもデスクトップ向けにはあると便利な機能でしょう。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-11.png?w=1118&ssl=1)
ツールチップ
マウスカーソルを部品に近づけると、部品の近くにツールチップが表示できます。場所は上下左右どこでも可能です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-3.png?w=1118&ssl=1)
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に変わっているはずです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/09/monaca-vuetify-1.png?w=1118&ssl=1)
まとめ
ハイブリッドアプリをWebサイト向けにも提供したい、デスクトップのWebブラウザも対象としたいというニーズはよくあります。そうした時にVuetifyはElementと同様、良い選択肢になるのではないでしょうか。VuetifyとElementは機能的に大きな違いがあるわけではないので、用意されているコンポーネントの好みで選んで良いでしょう。
ただし画面遷移などの処理は別途ライブラリをインストールしたり、自前で実装する必要があります。必要に応じて最適なUIフレームワークを選定してください。