UIはハイブリッドアプリ開発のための最適なUIフレームワークです。見た目をネイティブアプリ風にしてくれるのはもちろんのこと、画面遷移やアクションシートなどのアニメーションも実現してくれるのが魅力です。UIですが、一つだけ弱点があります。それはデスクトップのWebブラウザは対象としていないことです。プロジェクトによってはスマートフォンやタブレットに加え、デスクトップ対応も要件に入ってくることがあるでしょう。UIではIEやEdge、Firefoxなどへの対応ができません。そこで今回は、デスクトップブラウザ向けのUIフレームワーク、「Element」を紹介します。Elementの特徴ElementはVueベースのUIフレームワークです。ReactやAngularと組み合わせて使うことはできませんので注意してください。ElementはあくまでもUIを描画するためのフレームワークであり、アニメーションなどは殆ど提供されていません。アプリで必要とされる、画面遷移機能は提供されていませんので、必要があったら自分で実装したり、画面遷移のためのライブラリを使う必要があります。Licenseで公開されていますので、商用でも安心して利用できます。コンポーネントの紹介カラーリングGoogleのようなカラーリングになっています。アイコンアイコンはオリジナルのものが用意されています。ボタンボタンは四角や角丸、アイコンだけの丸形など多彩です。スマートフォンにフィットする、枠無しのボタンも用意されています。ボタンをグルーピングした例です。フォームラジオボタンです。グルーピングした例です。入力する内容に応じてアイコンを設定できます。入力欄の前後にラベルを追加できます。ドロップダウンドロップダウンです。HTML標準のものとはかなりデザインが違います。ドリルダウンできるドロップダウンも作れます。ドロップダウンリスト。ドロップダウンに似ていますが、よりUIに細かく変更があります。レンジある範囲内における値の大きさを視覚的に表現するレンジです。日付関連タイムピッカーです。15分単位で選択できます。カレンダーのカスタマイズもできます。日付と時間を組み合わせた例です。アップロード機能ファイルアップロードができます。アイコンやリストと組み合わせて実現しています。レーティングアプリの評価などを行うレーティングボタンです。レイアウトテーブルです。ヘッダーを固定したり、行の色を変えたりといったさまざまなカスタマイズが行えます。アニメーション付きで動きます。情報の補足などに便利です。チェックボックスを無しにすることもできます。ファイルシステムの表示などに便利です。背景があるタブも作れます。画像とテキストを合わせたUIです。メニューヘッダーメニューです。多階層のメニューが組めます。縦型のメニューも可能です。タグタグを追加したり削除したりと、動的に変更することができます。プログレスバープログレスバーには、横長や円形など、いろいろな形が用意されています。ページネーション数字だけ、背景色ありなど多彩です。バッジバッジには文字を出すパターン、単にドットだけ表示するパターンがあります。メッセージアイコン付き、閉じるボタン付きなども可能です。メッセージを表示するときのアニメーションです。モーダル画面全体がマスクされ、最前面にモーダルが表示されます。以下はOKボタンだけを表示していますが、モーダル内にフォームを組み込むこともできます。通知ダイアログ右上に表示されていますが、表示場所はカスタマイズできます。ウィザードフォーム入力や決済処理などで使う機会が多いウィザードUIです。ツールチップマウスカーソルを乗せたときに表示されるツールチップ。スマートフォンでは使わないかも知れませんが、デスクトップでは便利です。パンくずページの階層を表すパンくず。こちらはアイコンをセパレータに用いたパターンです。Monacaでの使い方ここからはMonacaにElementを導入する方法について紹介します。Minimum」を使うと良いでしょう。WebPack周りの設定がすでに組み込まれていますので、すぐに使えるようになります。IDEを立ち上げたら、ターミナルを使ってElementをインストールします。ターミナル機能はProプラン以上でご利用いただけます。UIからElementに変更します。UIを読み込んでいる部分なので削除します。Iconsrequire('onsenui/css-components-src/src/onsen-css-components.css');require('onsenui/css/onsenui.css');そしてElementを読み込むように変更します。修正後Vue.use(ElementUI);これでElementを使う準備は整いました。次はsrc/App.vueを編集します。UIを使っていますので、これをElementベースに書き換えます。#333;}</style>このようなUIができあがります。Chromeをサポートしています。10+にも対応しています。JavaScript等と組み合わせて使える訳ではありません。UIには画面遷移などの複雑な機能が搭載されているのに対して、ElementはUIフレームワークに特化しているのでシンプルに書けるイメージです。デスクトップブラウザを対象としている分、Elementの方がUIコンポーネントが充実しています。まとめElementは主にデスクトップブラウザを対象にしていますが、ハイブリッドアプリ開発でも活用できます。アプリとWebサイトを同時にリリースしたいときには、ぜひElementを利用してみてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。