PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。
そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。
Ionic
パフォーマンスを重視しています。画面遷移などはハードウェアアクセラレーションを使っており、スムーズな動きを実現しています。jQueryは使わず、AngularJSベースになっています。
Ionic: Advanced HTML5 Hybrid Mobile App Framework
Onsen UI
jQuery Mobileよりも圧倒的なパフォーマンス、スマートフォンとタブレットに対応、jQueryやAngularJSと組み合わせた利用が可能です。
Onsen UI – A Custom Elements-Based HTML5 UI Framework | Onsen UI
UI for PhoneGap
Kendo UIをベースにPhoneGapに最適化した機能を提供しています。ネイティブ並のUIを実現できます。
Jo HTML5 Mobile App Framework
グレーを基調としたデザインになっており、ちょっと古い感じがするかも知れません。対応プラットフォームはiOS/Android/Windows 8/BlackBerry/Tizen/Chrome OSと幅広く想定されています。
AppGyver
HTML5/JavaScriptながら一部の機能をネイティブコンポーネントで提供しています。そのため動作が高速です。PhoneGapプラグイン互換となっています。
jQuery Mobile
Web開発では有名なjQueryをモバイルに最適化したフレームワークです。UIも提供されていますので、基本的に組み合わせて使うことが想定されています。大型なフレームワークのため、若干動作が重いように感じます。
OpenUI5
SAPが提供しているJavaScript UIライブラリです。スマートフォン、タブレットだけでなくデスクトップでも利用が出来ます。業務システムを開発するのに使えるくらい多機能です。
App.js
軽量なJavaScript UIライブラリです。Android 2.2、iOS 4.3以上に対応しています。
App.js | Mobile webapps made easy
Webix
JavaScriptでUIを生成するタイプのウィジェットフレームワークです。テーブル、ツリー、アコーディオン、カレンダー、メニュー、グラフなどのウィジェットが用意されています。
JavaScript UI Library, HTML5 Widgets Framework for App Development – Webix
ChocolateChip-UI
iOS/Android/Windows Phoneに向けたUIが提供されています。iOS 7に対応したすっきりとしたデザインなのが特徴です。
ChocolateChip-UI – A Mobile Web Framework in HTML5, CSS & Javascript
Topcoat
モバイルアプリだけでなく、Webアプリケーションにも使えるHTML5フレームワークです。カラーテーマも多数提供されています。
App Framework
Intelの提供するWebアプリ開発フレームワークのコンポーネント集です。リストやボタン、フォームなど多数のUIコンポーネントが利用できます。
Sencha Touch
50を越えるウィジェット、各OSに対応したテーマ、MVCフレームワークが統合されています。主にエンタープライズ系での利用が想定されています。
Bootstrap
主にWebサイト向けですが、スマートフォンにも対応していることもあってハイブリッドアプリでの利用も進んでいます。情報量は圧倒的に多いと思います。
いかがでしたか。HTML5とネイティブを合わせたハイブリッドアプリを作る際には必ず必須になるであろうUIコンポーネントは覚えておいて損はないはずです。ぜひアプリ開発の際に使ってみてください！
