ハイブリッドアプリ開発にあたり、なるべくネイティブっぽい挙動やUIデザインをイチから実装するのはなかなか大変。今までは自力でやることが多かったけど、使えるものはなるべく利用していきたいと思い色々調べてみました。

JSプラグインは数も多いし新しいのが次から次へと出てくるし相性もあったりで、便利だけどなかなか大変。。

【Onsen UI】
公式:http://onsenui.io/
紹介記事:
 WEBサイトで利用できるサンプル&デモ(一番分かりやすい)
 アシアル(開発企業)のブログ(PhoneGap使用前提の説明)

AngularJS(アンギュラージェイエス)の使用が前提のプラグイン。AngularJSはjQueryとの併用も問題ないので、従来のWEBベースアプリに簡単に組み込むことができる。
AngularJS(アンギュラージェイエス) 日本語マニュアル(非公式)


<メリット>
ツールバー、タブバーを簡単に組み込める。画面下部固定タブバーは便利。
スムーズでネイティブ風の画面遷移。

<要検討>
各ページが別ファイル。前画面のデータ保持等はどうなるか。

WS000085WS000089


すっきりした流行のデザイン。ネイティブ並みの外観や操作性を実現できるとのこと。



【app-UI】

公式:http://triceam.github.io/app-UI/
紹介記事:http://www.adobe.com/jp/devnet/phonegap/articles/native-like-ux-phonegap-app-ui.html


app-UI:無料で提供されているオープンソースの再利用可能な「アプリケーションコンテナ」ユーザーインターフェイスコンポーネントのコレクション。 Webおよびモバイルデベロッパーが、特にモバイルデバイスを対象として、HTMLおよびJavaScriptを使用してインタラクティブアプリケーショ ンを作成する場合に役立ちます。

デモ動画を見る限り、画面遷移に効果を発揮する感じ。なんとなく実装が大変そうな予感。


【Monacaフレームワーク】

公式:http://monaca.mobi/ja/
紹介記事:http://itpro.nikkeibp.co.jp/article/COLUMN/20121212/443633/?ST=uxui&P=1
WS000086WS000087

PhoneGap拡張フレームワーク。
ネイティブコンポーネントを利用したツールバー、タブバーを実装可能。
また画面遷移にネイティブ機能を利用でき、HTML5だけでは表現が難しいアニメーションを使ったスムーズなページスライド処理を実現できる。

無料プランだと3プロジェクト、ソースバックアップ無し。


【Intel® XDK】
公式:http://software.intel.com/en-us/html5/tools
紹介記事:http://www.kaasan.info/archives/2872
WS000088

あらかじめ用意されたいくつかのCSSフレームワークを選んで、ドラッグ&ドロップで画面デザインを作成できる。エミュレートや実機テストも可能。とにかく見栄えの良いデザインをパパっと作るのによさそう。


【JSDeferred】
公式:http://cho45.stfuawsc.com/jsdeferred/
紹介記事:http://gihyo.jp/dev/feature/01/jsdeferred/0001

WEBデータベースの調べ物をしていて見かけた、「非同期処理ばかりで恐ろしいコールバック地獄になるので気を付けよう」てな問題を解決するできるJSプラグイン。同期処理のような感覚でコーディングできる。

なのだが、
jQueryにも$.Deferredって同様の機能があった(バージョン1.5から追加された)模様。結構前の話だった・・・。


【jqMini.js】

公式:https://github.com/creatorish/jqMini
紹介記事:PhoneGapでの画面遷移 jqMini.jsが便利

公式サイトは閉鎖されているようですがGitHubにソースや説明あり。
「jQueryMobileの画面遷移機能だけを取り出したシンプルな画面遷移フレームワークです」とのこと。
jQueryMobileはデザイン面でイマイチだったり色んなお作法に従わなきゃいけないので一部機能だけ利用したいけど諦めた、なんてこともあるので、これは嬉しい。




・かっこいいデザインのUIコンポーネント
・固定ツールバー
・画面遷移

これらをお手軽に、できればHTML上だけで実装できる最適な組み合わせを探してるんだけど、今のところこれといった黄金パティーンが見当たらず。