FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

ハイブリッドアプリを作るのに使いたいUIフレームワーク10選

f:id:mbaasdevrel:20180209164811p:plain

Monacaを使えばiOS/Android両方で動作するハイブリッドアプリが開発できます。しかしハイブリッドアプリという技術上、特定のUIフレームワークがありません。そのためアプリっぽく動作する部分を自分で工夫しなければなりません。

しかし、そのためのUIフレームワークはすでに多数存在します。これらを使えば、より優れたUI/UXのアプリが開発できるでしょう。

Onsen UI 2: HTML5モバイルアプリを速く、美しく - Onsen UI

f:id:mbaasdevrel:20180209164426p:plain

Onsen UIはMonaca開発元であるアシアル社がメインで開発を行っています。素のJavaScriptはもちろん、Angular/React/Vueなどと組み合わせることもできます。モバイルに特化することで高いパフォーマンスが出ます。

Onsen UI 2: HTML5モバイルアプリを速く、美しく - Onsen UI

Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular

f:id:mbaasdevrel:20180209164456p:plain

モバイルに向いたUIフレームワークですが、ElectronであったりデスクトップのWebブラウザもサポートされています。Angularが必須のようです。

Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular

Mobile Angular UI - Angular JS Mobile UI framework with Bootstrap 3 Css

f:id:mbaasdevrel:20180209164534p:plain

Angular JSと組み合わせて使うUIフレームワークです。Bootstrap3も使っています。Angular JSとBootstrap3という組み合わせは若干古いですが情報も多く、対応ライブラリも多いのが利点でしょう。

Mobile Angular UI - Angular JS Mobile UI framework with Bootstrap 3 Css

Kendo UI Web Components - Build Better Apps Faster

f:id:mbaasdevrel:20180209164603p:plain

jQuery/Angular/React/Vueといったフレームワークとの組み合わせをサポートしています。モバイルだけでなくデスクトップでも利用可能です。チャートやカレンダー、ツリーマップなどコンポーネントが多彩です。

Kendo UI Web Components - Build Better Apps Faster

f:id:mbaasdevrel:20180209164630p:plain

特にフレームワークを特定することなく使えるUIフレームワークです。依存性がない分、自由に使えますがそれぞれ特有の問題を自分で解決する必要がありそうです。アコーディオンやスワイプ、ポップアップなどUIコンポーネントが多彩に用意されています。

Framework7 - Full Featured Mobile HTML Framework For Building iOS & Android Apps

Phonon · A light weight and scalable HTML5 Mobile Framework

f:id:mbaasdevrel:20180209164652p:plain

IE9から使えるUIフレームワークです。Riot/Angular/Vueと組み合わせ利用できます。他のUIフレームワークに比べてサイズが小さいのが特徴です。

Phonon · A light weight and scalable HTML5 Mobile Framework

Material-UI

f:id:mbaasdevrel:20180209164715p:plain

Googleのマテリアルデザインに合わせて開発されているReactコンポーネントです。そのためAndroid向きと言えそうです。タップした時のアニメーションは別途ライブラリを用いる必要がありそうです。

Material-UI

Ratchet

f:id:mbaasdevrel:20180209164739p:plain

iOS/Android両方に対応したテーマを提供しています。基本的なUI部品は揃っているようです。素のHTMLで実装されていますのでフレームワークは自由に選択できそうです。

Ratchet

Vue.js 2 Material Component Framework | Vuetify.js

f:id:mbaasdevrel:20180209164811p:plain

Vue向けのUIフレームワークです。デスクトップもサポートされています。UIコンポーネントも多数揃っており、多くのWebサイト/ハイブリッドアプリで使えるでしょう。

Vue.js 2 Material Component Framework | Vuetify.js

cblanquera/mobility: Mobility is a super light weight HTML, CSS, and JS framework built on top of Bootstrap for developing mobile applications.

f:id:mbaasdevrel:20180209164842p:plain

Bootstrap3/jQueryを使ったUIフレームワークです。画面の遷移もサポートされています。技術的には目新しくないですが、学習コストは低く使いやすいと言えそうです。

cblanquera/mobility: Mobility is a super light weight HTML, CSS, and JS framework built on top of Bootstrap for developing mobile applications.

まとめ

Monacaで使うのであればOnsen UIがベストな選択になるでしょう。さらに開発したフロントエンドのコードをデスクトップ向けにも使いたいとなると、デスクトップもサポートしたUIフレームワークを選択するのが良いでしょう。また、React/Angular/VueといったVirtualDOM系フロントエンドフレームワークのサポート状況も選択の余地があると言えそうです。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。