スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb(HTML5)の進化は止まりません。ついにここまで!というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。

Famo.usの使い方

たくさんのデモが登録されていますので見ていきましょう。

写真と画像の組み合わせ。左右から表示されるアニメーションもあります。

スクロールパララックスエフェクトのデモ。

アニメーションのデモ。

カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。

スライドして表示される写真のデモです。

ページ送りのデモ。

天気アプリデモ。ベクター調の表示がいいですね。

タスク管理。スムーズなアニメーションがいい感じです。

メニューがアニメーション表示されるデモです。

こちらもメニュー表示のデモ。

上からスライドしてメニューが表示されます。

かなりダイナミックなコンテンツ表示のデモです。Webでここまでいけるのかといった感があります。

コンテンツが右側に縮小されつつメニューが出ます。Airbnb風です。

Yelp風。pull to refreshを再現しています。

Famo.usでは3Dレイアウトをサポートしており、DOM/Canvas/WebGLを使ってレンダリングしています。アニメーションはかなりスムーズです。今後のWebを考える上でCanvasやWebGLの知識は欠かせません。とは言え、素で使うのは難しいと思うのでFamo.usを使って扱いやすくするのは良さそうです。

Famo.usはHTML5/JavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。

Famo.us Famous/famous