Onsen UIはハイブリッドアプリ開発のための最適なUIフレームワークです。見た目をネイティブアプリ風にしてくれるのはもちろんのこと、画面遷移やアクションシートなどのアニメーションも実現してくれるのが魅力です。
そんなOnsen UIですが、一つだけ弱点があります。それはデスクトップのWebブラウザは対象としていないことです。プロジェクトによってはスマートフォンやタブレットに加え、デスクトップ対応も要件に入ってくることがあるでしょう。しかしOnsen UIではIEやEdge、Firefoxなどへの対応ができません。
そこで今回は、デスクトップブラウザ向けのUIフレームワーク、「Element」を紹介します。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-1.png?w=1118&ssl=1)
Elementの特徴
ElementはVueベースのUIフレームワークです。ReactやAngularと組み合わせて使うことはできませんので注意してください。ElementはあくまでもUIを描画するためのフレームワークであり、アニメーションなどは殆ど提供されていません。特にアプリで必要とされる、画面遷移機能は提供されていませんので、必要があったら自分で実装したり、画面遷移のためのライブラリを使う必要があります。
ElementはMIT Licenseで公開されていますので、商用でも安心して利用できます。
コンポーネントの紹介
カラーリング
Googleのようなカラーリングになっています。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-35.png?w=1118&ssl=1)
アイコン
アイコンはオリジナルのものが用意されています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-34.png?w=1118&ssl=1)
ボタン
ボタンは四角や角丸、アイコンだけの丸形など多彩です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-33.png?w=1118&ssl=1)
スマートフォンにフィットする、枠無しのボタンも用意されています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-32.png?w=1118&ssl=1)
ボタンをグルーピングした例です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-31.png?w=1118&ssl=1)
フォーム
ラジオボタンです。グルーピングした例です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-30.png?w=1118&ssl=1)
入力する内容に応じてアイコンを設定できます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-29.png?w=1118&ssl=1)
入力欄の前後にラベルを追加できます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-28.png?w=1118&ssl=1)
ドロップダウン
ドロップダウンです。HTML標準のものとはかなりデザインが違います。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-27.png?w=1118&ssl=1)
さらにドリルダウンできるドロップダウンも作れます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-26.png?w=1118&ssl=1)
ドロップダウンリスト。ドロップダウンに似ていますが、よりUIに細かく変更があります。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-6.png?w=1118&ssl=1)
レンジ
ある範囲内における値の大きさを視覚的に表現するレンジです。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-25.png?w=1118&ssl=1)
日付関連
タイムピッカーです。15分単位で選択できます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-24.png?w=1118&ssl=1)
日付ピッカーです。カレンダーのカスタマイズもできます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-23.png?w=1118&ssl=1)
日付と時間を組み合わせた例です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-22.png?w=1118&ssl=1)
アップロード機能
ファイルアップロードができます。アイコンやリストと組み合わせて実現しています。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-21.png?w=1118&ssl=1)
レーティング
アプリの評価などを行うレーティングボタンです。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-20.png?w=1118&ssl=1)
レイアウト
テーブルです。ヘッダーを固定したり、行の色を変えたりといったさまざまなカスタマイズが行えます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-19.png?w=1118&ssl=1)
カルーセルです。アニメーション付きで動きます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-a-2.gif?w=1118&ssl=1)
アコーディオン。情報の補足などに便利です。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-a-1.gif?w=1118&ssl=1)
ツリービュー。チェックボックスを無しにすることもできます。ファイルシステムの表示などに便利です。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-16.png?w=1118&ssl=1)
タブ。背景があるタブも作れます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-8.png?w=1118&ssl=1)
カード。画像とテキストを合わせたUIです。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-3.png?w=1118&ssl=1)
メニュー
ヘッダーメニューです。多階層のメニューが組めます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-10.png?w=1118&ssl=1)
縦型のメニューも可能です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-9.png?w=1118&ssl=1)
タグ
タグを追加したり削除したりと、動的に変更することができます。
プログレスバー
プログレスバーには、横長や円形など、いろいろな形が用意されています。
ページネーション
数字だけ、背景色ありなど多彩です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-15.png?w=1118&ssl=1)
バッジ
バッジには文字を出すパターン、単にドットだけ表示するパターンがあります。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-14.png?w=1118&ssl=1)
メッセージ
アイコン付き、閉じるボタン付きなども可能です。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-13.png?w=1118&ssl=1)
メッセージを表示するときのアニメーションです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-a-3.gif?w=1118&ssl=1)
モーダル
画面全体がマスクされ、最前面にモーダルが表示されます。
以下はOKボタンだけを表示していますが、モーダル内にフォームを組み込むこともできます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-12.png?w=1118&ssl=1)
通知ダイアログ
右上に表示されていますが、表示場所はカスタマイズできます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-11.png?w=1118&ssl=1)
ウィザード
フォーム入力や決済処理などで使う機会が多いウィザードUIです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-5.png?w=1118&ssl=1)
ツールチップ
マウスカーソルを乗せたときに表示されるツールチップ。スマートフォンでは使わないかも知れませんが、デスクトップでは便利です。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-4.png?w=1118&ssl=1)
パンくず
ページの階層を表すパンくず。こちらはアイコンをセパレータに用いたパターンです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-7.png?w=1118&ssl=1)
Monacaでの使い方
ここからはMonacaにElementを導入する方法について紹介します。
ベースはOnsen UI V2 Vue Minimum
ElementはVueで作られていますので、テンプレートは「Onsen UI V2 Vue Minimum」を使うと良いでしょう。WebPack周りの設定がすでに組み込まれていますので、すぐに使えるようになります。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-40.png?w=1118&ssl=1)
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ができあがります。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2018/10/monaca-element-ui-41.png?w=1118&ssl=1)
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