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

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

HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ

https://cdn-ak.f.st-hatena.com/images/fotolife/f/fjct/20171017/20171017135832.png

PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。

そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。

Ionic

Ionic
パフォーマンスを重視しています。画面遷移などはハードウェアアクセラレーションを使っており、スムーズな動きを実現しています。jQueryは使わず、AngularJSベースになっています。

Ionic: Advanced HTML5 Hybrid Mobile App Framework

Onsen UI

Onsen UI
jQuery Mobileよりも圧倒的なパフォーマンス、スマートフォンとタブレットに対応、jQueryやAngularJSと組み合わせた利用が可能です。

Onsen UI - A Custom Elements-Based HTML5 UI Framework | Onsen UI

UI for PhoneGap

UI for PhoneGap
Kendo UIをベースにPhoneGapに最適化した機能を提供しています。ネイティブ並のUIを実現できます。

UI for PhoneGap

Jo HTML5 Mobile App Framework

Jo HTML5 Mobile App Framework
グレーを基調としたデザインになっており、ちょっと古い感じがするかも知れません。対応プラットフォームはiOS/Android/Windows 8/BlackBerry/Tizen/Chrome OSと幅広く想定されています。

Jo HTML5 Mobile App Framework

AppGyver

AppGyver
HTML5/JavaScriptながら一部の機能をネイティブコンポーネントで提供しています。そのため動作が高速です。PhoneGapプラグイン互換となっています。

AppGyver

jQuery Mobile

jQuery Mobile
Web開発では有名なjQueryをモバイルに最適化したフレームワークです。UIも提供されていますので、基本的に組み合わせて使うことが想定されています。大型なフレームワークのため、若干動作が重いように感じます。

jQuery Mobile

OpenUI5

OpenUI5
SAPが提供しているJavaScript UIライブラリです。スマートフォン、タブレットだけでなくデスクトップでも利用が出来ます。業務システムを開発するのに使えるくらい多機能です。

OpenUI5

App.js

App.js
軽量なJavaScript UIライブラリです。Android 2.2、iOS 4.3以上に対応しています。

App.js | Mobile webapps made easy

Webix

Webix
JavaScriptでUIを生成するタイプのウィジェットフレームワークです。テーブル、ツリー、アコーディオン、カレンダー、メニュー、グラフなどのウィジェットが用意されています。

JavaScript UI Library, HTML5 Widgets Framework for App Development - Webix

ChocolateChip-UI

ChocolateChip-UI
iOS/Android/Windows Phoneに向けたUIが提供されています。iOS 7に対応したすっきりとしたデザインなのが特徴です。

ChocolateChip-UI - A Mobile Web Framework in HTML5, CSS & Javascript

Topcoat

Topcoat
モバイルアプリだけでなく、Webアプリケーションにも使えるHTML5フレームワークです。カラーテーマも多数提供されています。

Topcoat

App Framework

App Framework
Intelの提供するWebアプリ開発フレームワークのコンポーネント集です。リストやボタン、フォームなど多数のUIコンポーネントが利用できます。

App Framework

Sencha Touch

Sencha Touch
50を越えるウィジェット、各OSに対応したテーマ、MVCフレームワークが統合されています。主にエンタープライズ系での利用が想定されています。

Mobile App Development Framework. JavaScript and HTML5. Download Sencha Touch Free. | Sencha Touch | Products | Sencha

Bootstrap

Bootstrap
主にWebサイト向けですが、スマートフォンにも対応していることもあってハイブリッドアプリでの利用も進んでいます。情報量は圧倒的に多いと思います。

Bootstrap

さいごに

いかがでしたか。HTML5とネイティブを合わせたハイブリッドアプリを作る際には必ず必須になるであろうUIコンポーネントは覚えておいて損はないはずです。ぜひアプリ開発の際に使ってみてください!

f:id:mbaasblog:20180927104348p:plain