app-UIはタブレット、スマートフォンに対応したWebアプリケーションフレームワークです。

サービスの目的によってはiOSアプリを開発するまでにないケースは多いです。しかしUIはアプリ風にしたいという要望もまた多く、そんな時に使えそうなライブラリがapp-UIです。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.06_thumb.1367373067.png)](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.06.1367373067.png)
iOSアプリ風のUIが簡単に実現できます。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.09_thumb.1367373072.png)](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.09.1367373072.png)
移動の履歴管理も行われています。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.21_thumb.1367373076.png)](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.21.1367373076.png)
二つに分けた表示もできます。スクロールはそれぞれ別で行えます。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.41_thumb.1367373081.png)](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.41.1367373081.png)
色合いを変えました。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.56_thumb.1367373085.png)](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.58.56.1367373085.png)
iPadなどの広い画面の時に使える、左側にメニューを表示する例。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.59.14_thumb.1367373090.png)](http://images.moongift.jp/2013/05/Screenshot 2013-04-27 14.59.14.1367373090.png)
スワイプ操作対応にできます。


スワイプするとこんな感じに折り畳んだコンテンツを表示することもできます。

app-UIの主な機能として、ナビゲーションビュー、スプリットビュー、スライドビューがサポートされています。これらを使いこなすことで、リッチなUIをもったスマートフォン向けWebサイトが構築できるでしょう。

app-UIはHTML5/JavaScript製のオープンソース・ソフトウェア(New BSD License)です。

MOONGIFTはこう見る

Webサイトをまるでアプリ風にするフレームワークは多数存在します。そろそろ次のステップが求められるかも知れません。つまり汎用的なフレームワークではなく、何かに特化したWebアプリケーションを組む時に使えるフレームワークです。

Twitter社もWebアプリケーションフレームワークを提供していますが、まだ流行りきっていないように見えます。デスクトップに比べてスマートフォンやタブレットではWebアプリケーション風の操作が受け入れられているように見えます。そこから開拓していくのは十分ありえるでしょう。

app-UI by triceam

triceam/app-UI · GitHub