Lungoはマルチデバイス対応のHTML5フレームワークです。

スマートフォン向けのサービス提供を考えた場合、Webベースとアプリベースの二つが考えられます。今回はWebでサービス提供しようと考える場合に使えるクロスデバイスフレームワーク、Lungoを紹介します。

[](http://images.moongift.jp/2013/04/2013-04-15 10.34.45.1366002546.png)
デモアプリのUIです。

[](http://images.moongift.jp/2013/04/2013-04-15 10.34.55.1366002550.png)
サイドメニューが出てきます。

[](http://images.moongift.jp/2013/04/2013-04-15 10.35.15.1366002552.png)
タブバーなどのレイアウトデモ。

[](http://images.moongift.jp/2013/04/2013-04-15 10.35.37.1366002555.png)
リスト。

[](http://images.moongift.jp/2013/04/2013-04-15 10.35.44.1366002558.png)
右側に→をつけるのも簡単。

[](http://images.moongift.jp/2013/04/2013-04-15 10.35.47.1366002560.png)
矢印だけでなくラベルをつけることもできます。

[](http://images.moongift.jp/2013/04/2013-04-15 10.35.52.1366002564.png)
左側に画像を表示する形。

[](http://images.moongift.jp/2013/04/2013-04-15 10.35.57.1366002567.png)
カラーリスト。

[](http://images.moongift.jp/2013/04/2013-04-15 10.36.13.1366002569.png)
こちらはカラーラベルを追加したものです。

[](http://images.moongift.jp/2013/04/2013-04-15 10.36.25.1366002572.png)
フォーム。

[](http://images.moongift.jp/2013/04/2013-04-15 10.36.38.1366002575.png)
右側に追加メニュー。

[](http://images.moongift.jp/2013/04/2013-04-15 10.36.54.1366002577.png)
data要素を使った表示。

[](http://images.moongift.jp/2013/04/2013-04-15 10.36.59.1366002580.png)
ローディングもdata-loadingと指定するだけです。

[](http://images.moongift.jp/2013/04/2013-04-15 10.37.17.1366002583.png)
各種アイコン。

[](http://images.moongift.jp/2013/04/2013-04-15 10.37.35.1366002585.png)
水平、垂直の画像スライダー。

[](http://images.moongift.jp/2013/04/2013-04-15 10.37.45.1366002591.png)
通知。

[](http://images.moongift.jp/2013/04/2013-04-15 10.37.53.1366002594.png)
フローティングの確認ダイアログ。

[](http://images.moongift.jp/2013/04/2013-04-15 10.38.06.1366002597.png)
Pull to Refresh。

[](http://images.moongift.jp/2013/04/2013-04-15 10.38.18.1366002599.png)
画像のスライダー。

[](http://images.moongift.jp/2013/04/2013-04-15 10.38.30.1366002606.png)
環境表示。iPhoneで表示した例です。

[](http://images.moongift.jp/2013/04/2013-04-15 10.38.41.1366002610.png)
色は青、赤、緑が基本です。

[](http://images.moongift.jp/2013/04/2013-04-15 10.38.59.1366002612.png)
カラーテーマ対応です。

[](http://images.moongift.jp/2013/04/2013-04-15 10.39.08.1366002615.png)
グリッド対応。

LungoはクロスデバイスのHTML5フレームワークとなっており、スマートフォンだけでなくタブレットやPC向けも想定されています。しかしデザインを見る限りはPC向けというよりもスマートフォン/タブレット向けと見る方が良さそうです。なおJavaScriptライブラリは独自で、jQueryなどに依存しないようです。

LungoはHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。

MOONGIFTはこう見る

この手のスマートフォン向けに最適化されたWebページを表示するライブラリは昔から存在しました。しかしアプリが様々な新機能（サイドに隠れるメニューなど）を実装するのに伴って、Webフレームワークにもまた新しい機能が必要とされるようになっています。

この流れはとても興味深いものがあります。アプリが進化するのに伴って、Webもまた進化しています。Webが使えないスマートフォンの機能はまだまだ多いですが、徐々にその差は減ってきています。今後ますますWebアプリケーションの多機能化が進んでいくことでしょう。

Lungo - HTML5 Cross-Device Framework

TapQuo/Lungo.js · GitHub