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

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

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

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

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

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

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

Mobile Angular UI

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

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

Onsen UI

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

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

Wink toolkit

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

Wink toolkit - A mobile JavaScript framework to build great webapps

EmbedJS

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

EmbedJS - Build Your Own Framework

Moobile

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

Moobile | Home

Junior

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

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

wijmo

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

UI for the Web powered by HTML5, jQuery & CSS3

DevExtreme Mobile

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

HTML5/JS Mobile Framework – DevExtreme Mobile | DevExpress

Treesaver.js

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

Treesaver.js

DHTMLX Touch

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

DHTMLX Touch - JavaScript Mobile Framework for Building HTML5 Web Apps

Enyo

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

Enyo JavaScript Application Framework

Ionic

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

Ionic: Advanced HTML5 Hybrid Mobile App Framework

Sencha Touch

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

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

jQuery Mobile

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

jQuery Mobile

Kendo UI jQuery and HTML5 widgets

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

Kendo UI jQuery and HTML5 widgets

React

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

React | A JavaScript library for building user interfaces

Jo

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

Jo HTML5 Mobile App Framework

The-M-Project

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

The-M-Project :: Absinthe

Lungo

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

Lungo

App Framework

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

App Framework

jQT

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

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

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も提供していますので、アプリのデータを保存する際にはぜひお使いください!

sample&tutrial