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