Onsen UIはハイブリッドアプリ開発のための最適なUIフレームワークです。見た目をネイティブアプリ風にしてくれるのはもちろんのこと、画面遷移やアクションシートなどのアニメーションも実現してくれるのが魅力です。
そんなOnsen UIですが、一つだけ弱点があります。それはデスクトップのWebブラウザは対象としていないことです。プロジェクトによってはスマートフォンやタブレットに加え、デスクトップ対応も要件に入ってくることがあるでしょう。しかしOnsen UIではIEやEdge、Firefoxなどへの対応ができません。
そこで今回は、デスクトップブラウザ向けのUIフレームワーク、「Element」を紹介します。
Elementの特徴
ElementはVueベースのUIフレームワークです。ReactやAngularと組み合わせて使うことはできませんので注意してください。ElementはあくまでもUIを描画するためのフレームワークであり、アニメーションなどは殆ど提供されていません。特にアプリで必要とされる、画面遷移機能は提供されていませんので、必要があったら自分で実装したり、画面遷移のためのライブラリを使う必要があります。
ElementはMIT Licenseで公開されていますので、商用でも安心して利用できます。
コンポーネントの紹介
カラーリング
Googleのようなカラーリングになっています。
アイコン
アイコンはオリジナルのものが用意されています。
ボタン
ボタンは四角や角丸、アイコンだけの丸形など多彩です。
スマートフォンにフィットする、枠無しのボタンも用意されています。
ボタンをグルーピングした例です。
フォーム
ラジオボタンです。グルーピングした例です。
入力する内容に応じてアイコンを設定できます。
入力欄の前後にラベルを追加できます。
ドロップダウン
ドロップダウンです。HTML標準のものとはかなりデザインが違います。
さらにドリルダウンできるドロップダウンも作れます。
ドロップダウンリスト。ドロップダウンに似ていますが、よりUIに細かく変更があります。
レンジ
ある範囲内における値の大きさを視覚的に表現するレンジです。
日付関連
タイムピッカーです。15分単位で選択できます。
日付ピッカーです。カレンダーのカスタマイズもできます。
日付と時間を組み合わせた例です。
アップロード機能
ファイルアップロードができます。アイコンやリストと組み合わせて実現しています。
レーティング
アプリの評価などを行うレーティングボタンです。
レイアウト
テーブルです。ヘッダーを固定したり、行の色を変えたりといったさまざまなカスタマイズが行えます。
カルーセルです。アニメーション付きで動きます。
アコーディオン。情報の補足などに便利です。
ツリービュー。チェックボックスを無しにすることもできます。ファイルシステムの表示などに便利です。
タブ。背景があるタブも作れます。
カード。画像とテキストを合わせたUIです。
メニュー
ヘッダーメニューです。多階層のメニューが組めます。
縦型のメニューも可能です。
タグ
タグを追加したり削除したりと、動的に変更することができます。
プログレスバー
プログレスバーには、横長や円形など、いろいろな形が用意されています。
ページネーション
数字だけ、背景色ありなど多彩です。
バッジ
バッジには文字を出すパターン、単にドットだけ表示するパターンがあります。
メッセージ
アイコン付き、閉じるボタン付きなども可能です。
メッセージを表示するときのアニメーションです。
モーダル
画面全体がマスクされ、最前面にモーダルが表示されます。
以下はOKボタンだけを表示していますが、モーダル内にフォームを組み込むこともできます。
通知ダイアログ
右上に表示されていますが、表示場所はカスタマイズできます。
ウィザード
フォーム入力や決済処理などで使う機会が多いウィザードUIです。
ツールチップ
マウスカーソルを乗せたときに表示されるツールチップ。スマートフォンでは使わないかも知れませんが、デスクトップでは便利です。
パンくず
ページの階層を表すパンくず。こちらはアイコンをセパレータに用いたパターンです。
Monacaでの使い方
ここからはMonacaにElementを導入する方法について紹介します。
ベースはOnsen UI V2 Vue Minimum
ElementはVueで作られていますので、テンプレートは「Onsen UI V2 Vue Minimum」を使うと良いでしょう。WebPack周りの設定がすでに組み込まれていますので、すぐに使えるようになります。
Elementをインストールする
Monaca IDEを立ち上げたら、ターミナルを使ってElementをインストールします。ターミナル機能はProプラン以上でご利用いただけます。
npm i element-ui -S
Onsen UIを削除
package.jsonからOnsen UIを削除します。
npm uninstall onsenui -S
src/main.jsの編集
src/main.jsを開いて、読み込むフレームワークをOnsen UIからElementに変更します。
以下は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');
そしてElementを読み込むように変更します。
import ElementUI from 'element-ui';
require('element-ui/lib/theme-chalk/index.css');
さらに Vue.use の部分を変更します。
// 修正前
Vue.use(VueOnsen);
// 修正後
Vue.use(ElementUI);
これでElementを使う準備は整いました。
次はsrc/App.vueを編集します。App.vueの <template /> 内はOnsen UIを使っていますので、これをElementベースに書き換えます。
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>Tom</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
このようなUIができあがります。
Onsen UIとの相違点について
Onsen UIはスマートフォンを主な対象としており、WebブラウザはSafariとGoogle Chromeをサポートしています。対してElementはGoogle Chrome/Firefox/Edge/Safariなどの各種モダンブラウザに加え、Internet Explorer 10+にも対応しています。
ただしElementの対象JavaScriptフレームワークはVueのみであり、Onsen UIのようにAngular/React/jQuery/Pure JavaScript等と組み合わせて使える訳ではありません。
また、Onsen UIには画面遷移などの複雑な機能が搭載されているのに対して、ElementはUIフレームワークに特化しているのでシンプルに書けるイメージです。また、デスクトップブラウザを対象としている分、Elementの方がUIコンポーネントが充実しています。
まとめ
Elementは主にデスクトップブラウザを対象にしていますが、ハイブリッドアプリ開発でも活用できます。アプリとWebサイトを同時にリリースしたいときには、ぜひElementを利用してみてください。
Element - A Desktop UI Toolkit for Web
ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web