2015年7月30日木曜日

UIフレームワークを選ぶ

Cordovaで使用する際に検討しましたUIフレームワークを記載します。ライセンスはMITかApache2となっています。
選ぶポイントになりそうな箇所を黄色マーカーで注意する箇所をオレンジマーカーで書いています。

Cordovaアプリにした際の動きを確認してみたかったので、色々なUIフレームワークアプリを試すことができるアプリ「UI Framework Catalog」を作成いたしました。
Get it on Google Play

Framwrok7

  • Android(Material Design), iOS
  • x AngularJS (Template7という独自のフレームワーク)
コンポーネントの数がとても多く、UIの再現度もかなり高いです。
1点個人的に残念なことにAngularJSではなく独自のフレームワーク(Template7)を使用しているという点です。Angularを使用に慣れてる方には機能が足りないかなと思います。
iOS UIデモ Material UIデモ 

ionic2(preview版)

  • UIはOS別にネイティブルック
ver1と違い一気にネイティブの見た目に近づきました。Android,iOS,Windowsの3つの見た目を備えています。Angularjs2の使用が前提となっています。

  • UIはOS別ではなく独自
  • AnguarJS使用前提
  • Githubのスターが2万近く
最もポピュラーなフレームワークではないでしょうか。使う人も多い分フォーラムやサンプルも充実しています。UIはiOSともAndroidともいえない独自の見た目です。

Quasar

調査中。ionicのように専用のコマンドツールを持つ大きめのフレームワーク。コンポーネントの数も豊富です。パンくずリスト、ツリー表示、ページネーションなど他のフレームワークにはないものも含まれています。

OnsenUI

  • OS別(iOS,Android)別に若干デザインが変わる 
  • AngularJS前提(一応知識がなくても使用可能)
  • コンポーネント数はionicとほぼ同じ
日本のアシアル社がメンテナンスしているため、日本語のドキュメントがあります。ネイティブライクなUIですが見た目もコンポーネントの数もFramework7の方が上です。
次のバージョンOnsenUI2ではMaterialDesignに対応になり、Angularjsが必須でなくなるようです。[公式ブログ]

Phonon

  • 軽量が売り。AngularJS,Reactなど組み合わせは自由
  • デザインはマテリアルデザインに若干似ているフラットデザイン
  • コンポーネントはAndroid系が一通り揃っている
2016年8月現在開発が活発なフレームワークです。軽量かつ、AngularJSやReactなどに縛られないため、自由に選択ができます。タブレット様にスプリットビュー風にも対応しているなど、ニーズに合わせてよく考えられていると思いました。ただ、Form周りのコポーネントは1行テキスト入力、シンプルなラジオ・チェックボックスと、入力がメインのアプリには物足りないと思いました。

Material Design Lite

  • 名前の通りMaterial Design
  • x AngularJS
スマホでもさくさく動きますがコンポーネントは少ないです。あくまでUIのみなので画面遷移時のアニメーションなどは別途ライブラリが必要になります。
CSS Classで定義していくので別途テンプレートライブラリがないと記述量が多くなる印象です。

jQuery Mobile

  • UIは独自
  • x AngularJS(組み合わせて使用するプロジェクトは既に開発終了)
古いIEなども含めて幅広いブラウザに対応しているためか動作は遅め。幅広いブラウザに対応する必要のあるWebアプリも作成する場合に検討するとよいかもしれません。バージョンアップの頻度も落ちているので将来性は(?)
デモ

OpenUI5

  • UIは独自
ERPパッケージ世界最大のソフトウェア企業SAPの作ったものだけに業務アプリ向けのコンポーネントが揃っている。動作速度は遅めで個人が使用することは難しそうです。

Angular Material

  • マテリアルデザイン
  • Angularjs
コンポーネントは豊富ですが、若干重いです(1.2Ghz x 4core)。また、モバイルで使用するとアプリとしては動作が不自然な箇所があるので、スマホアプリとしては使用は難しそうです。

ChocolateChip-UI

  • iOS,Android,WindowsPhone
現在は開発は特に積極的に行われていないようです。

App.js

  • iOS,Andorid別のネイティブルックですがタイトルバー,ダイアログぐらいの違いです
  • コンポーネントの数はかなり少ないですが軽いです
スマホ向けのちょっとした画面を作る際などには軽いので個人的には重宝しています。学習コストも非常に低く、すぐに使い始めることができます。
iOS UIデモ Android UIデモ


Mobile Angular UI

  • Bootstrap3を使用したiOSライクなUI
  • 名前のとおりAngularjsが使用の前提
どちらかというとWebアプリ向きのフレームワークだと思います。

その他

0 件のコメント:

コメントを投稿