スマホサイトアプリ開発高速化JavaScriptフレームワークまとめ

デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。

特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。

そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。

Mobile Angular UI

AngularJSとBootstrapを組み合わせたフレームワークです。Bootstrapを使っていますが、iOS7風にすっきりとしたデザインになっています。開発はもちろんAngularJSを使って行えます。

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

Onsen UI

元々AngularJSとの組み合わせでしたが、現在はjQueryとも組み合わせた利用が可能です。Monaca開発のアシアル社製とあって、特にMonacaでの利用が最適です。

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

Wink toolkit

位置情報、回転、加速度センサーなどをラッピングし、デバイス誤差を吸収してくれます。さらにCSSによって3Dアニメーションを実現しています。機能はプラグイン化されていて必要なものだけを組み込めます。

Wink toolkit - A mobile JavaScript framework to build great webapps

EmbedJS

スマートフォンやテレビなどをサポートするJavaScriptフレームワークです。各デバイス向けに必要なコードを配信することでより軽量にメモリ使用量を下げるコンセプトになっています。

EmbedJS - Build Your Own Framework

Moobile

MooToolsをモバイルに最適化したフレームワークです。多彩なUIコンポーネント、画面切り替え時のアニメーションがサポートされています。iOS向けのデザインはiOS 6以前のものとなっています。

Moobile | Home

Junior

モバイルに最適化されたCSSアニメーション、スワイプ操作のサポート、多くのUIコンポーネントが提供されます。JavaScript部分はBackboneのルーティング、ビューを利用しています。

Junior - A front-end framework for building HTML5 mobile apps with a native look and feel.

wijmo

jQuery UI、jQuery Mobileを使っています。グラフやスプリッター、カレンダーなど実に多くのウィジェットを提供しています。

UI for the Web powered by HTML5, jQuery & CSS3

DevExtreme Mobile

ネイティブアプリ並の操作性をモバイルで再現するというコンセプトのJavaScriptフレームワークです。モバイルプラットフォームはiOS/Android/Windows Phone/Tizenがサポートされています。

HTML5/JS Mobile Framework – DevExtreme Mobile | DevExpress

Treesaver.js

ちょっと目的が特定化されますが、TreesaverはHTML/CSSでマガジンスタイルのレイアウトを実現できるフレームワークです。電子書籍系サイト、アプリに使えそうです。

Treesaver.js

DHTMLX Touch

商用サポートも提供されているとあって、品質は高いです。数多くのウィジェットがあり、ネイティブ並のUIを簡単に実装できるようになっています。

DHTMLX Touch - JavaScript Mobile Framework for Building HTML5 Web Apps

Enyo

UIをJavaScriptで記述するフレームワークです。そのため、HTMLとJavaScriptの監視などを書く必要がなく、分かりやすいアプリが作れそうです。

Enyo JavaScript Application Framework

Ionic

AngularJSを使っています。UIに対するこだわりは強く、ネイティブ並のフラットでシンプルなUIが作れます。また速度面も重視されており、パフォーマンスも十分考慮されています。

Ionic: Advanced HTML5 Hybrid Mobile App Framework

Sencha Touch

Sencha Touchも主にビジネス用途で業務系Webアプリケーションを開発するのに使われています。大型なWebアプリケーションを作るのに向いていると思います。

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

jQuery Mobile

モバイルフレームワークとしては先進的存在です。デスクトップではjQueryを使っているサイトが多いのでノウハウが活かしやすいのが利点です。しかし動作が重たい、束縛が強いと言ったデメリットも良く聞かれます。

jQuery Mobile

Kendo UI jQuery and HTML5 widgets

Kendo UIは一部オープンソースですが商用製品としてのライセンスも行っています。それだけに品質高いWebアプリケーションが素早く構築できるはずです。

Kendo UI jQuery and HTML5 widgets

React

UIをJavaScriptで構築するタイプのフレームワークです。デザインは気にせずコーディングができるのがメリットです。

React | A JavaScript library for building user interfaces

Jo

JoもUIはJavaScriptで構築します。多数のコントロールとコンテナが用意されていますので、Joの流儀によって記述することでUIが簡単に実装でき、その操作もJavaScriptで容易に実装できます。

Jo HTML5 Mobile App Framework

The-M-Project

レイアウトも含めてジェネレータを使ってモバイルWebサイトのベースを生成します。JavaScript部分はBackboneを使っています。

The-M-Project :: Absinthe

Lungo

スマートフォンに最適化されたUI、軽量でスケーラブルなフレームワーク、多くのAPIを備えています。

Lungo

App Framework

Intelの開発しているフレームワークになります。iOS6と7、Android、Windows 8、Blackberry用のスタイルシートを用意しています。Intel XDKと組み合わせて使うようになっています。

App Framework

jQT

jQTouchで知られるフレームワークです。jQueryだけでなくZeptoも利用できるようになっています。UIとしてはiOS6やiOS7に対応したデザインを提供しています。

jQT (formerly jQTouch) — Zepto/jQuery plugin for mobile web development

Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

UIはなく、純粋にJavaScriptのフレームワークになります。jQuery互換でありつつ、HTML4のブラウザ対応を切り捨てることで軽量化、高速化しています。

Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

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

リスト、スイッチ、レンジ、ポップアップなど多彩なUIコンポーネントをiOS/Android/Windows 8向けデザインで提供します。jQueryと連携し、独自のフレームワークを提供しています。

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

さいごに

いかがでしたか。これらのフレームワークを使うことで、スマートフォンやタブレットに対応するWebサイトはもちろんのこと、MonacaやCordova/PhoneGapを使ったハイブリッドアプリも簡単に作れるようになります。

ニフティクラウド mobile backendではJavaScript SDKも提供していますので、アプリのデータを保存する際にはぜひお使いください！