「その他」のUI Framework 3選

「その他」の
UIフレームワーク 3
選

2012/6/12 白石俊平

Kendo UI Mobile
• jQuery Mobileとコンセプトはほぼ同じ
• 商用（フリーだと、minifyされたソース
コードのみ）
• 動作環境
– iOS, Android, BlackBerry
• その他に必要なライブラリ
– jQuery

Kendo UI Mobile
• 売りは？
– プラットフォーム固有のルック＆フィールを
エミュレートしてくれる。

Kendo UI Mobile
• data-*属性でビューの役割を指定
– data-role, data-title, data-layout,
data-transition
• jQuery Mobile知っていれ
data-roleに指定できる役割
ば
– view, button, header, footer, navbar…
• 一瞬で理解可能
外部リンクはAjaxでページを取得され、
メインのDOMに統合される

Kendo UI Mobile
• コード例
<div data-role="view"
data-layout="overview-layout"
id="overview-cities"
data-title="Favourite Cities">
<ul data-role="listview"
data-style="inset" data-type="group">
<li>
Africa
<ul>
<li><h2>Nairobi</h2><img src="nairobi.jpg" /></li>
</ul>
</li>
</ul>
</div>

Kendo UI Mobile
• クオリティ高い！
• スマホから軽く触ってみた感じでは、パ
フォーマンスも悪くない
• データソース抽象レイヤやテンプレート
エンジン、MVCフレームワークなども統
合されている。
• お金を払ってもいいなら、使う価値はあ
るかも？

jqUi
• 「軽量版jQuery」として有名なjQ.Mobi
を使用したUIフレームワーク
• jQuery Mobileとコンセプトはかなり近い
• 動作環境
– iOS, Android
• 必要とされるライブラリ
– jQ.Mobi

jqUi
• 売りは？
– サイズが小さい。
– jQuery Mobileの場合、
jQuery(95kb) + jQuery Mobile (91kb)= 186kb
– jqUiの場合、74kb

jqUi
• data-*属性で

jQuery Mobile知っていれ
ば
一瞬で理解可能

jqUi
• コード例
<div title="Transitions"
id="jqmtransitions"
class="panel"
data-footer='footerui'>
<h2 class='expanded'>jqUi</h2>
<ul>
<li><a href="#t1" data-transition="slide">Slide</a></li>
<li><a href="#t2" data-transition="fade">Fade</a></li>
</ul>
</div>

jqUi
• 軽いし、それなりにUIも揃っているので、
悪くない。
• jQuery Mobileに比べてプラットフォーム
が限られる
• jQuery Mobileに比べて運営母体が貧弱
– ただし、開発はそれなりに活発っぽい

app-UI
• 横にスライディングするページ遷移の実
現に特化したフレームワーク
• 動作環境
– iOS, Android, BlackBerry
• その他に必要なライブラリ
– jQuery, jQuery.animate-
enhanced.js,iscroll.js,noClickDelay.js

app-UI
• 売りは？
– Adobeの開発者サイトで紹介されていた

app-UI
• 「アプリケーションコンテナ」と呼ばれ
るビューが用意されている
– ViewNavigator・・・スマホ向け
– SplitViewNavigator・・・タブレット向け

app-UI
• コード例
// ViewManagerの作成
var viewNavigator =
new ViewNavigator("スライドさせる領域のID");
// ビューをスタックに追加し、横移動
viewNavigator.pushView({
title: "タイトル",
backLabel: "戻る",
view: $elem
});

app-UI
• 「用途特化型」のマイクロフレームワー
ク。
• 開発自体はもう止まっているっぽい
– いじる余地がないのならばいいのだけど。

まとめ
• 今後のモバイルUIフレームワークは、
「フルスタック型」と
「用途特化型のライブラリ」の2つに分かれ
ていくのではないか。
• どちらが良い、という話ではなくて、要件に
合わせて使い分けられると良いのでは
– 納期重視ならフルスタック型
– クリエイティブ重視ならオリジナルUI+ライブラ
リ

「その他」のUI Framework 3選

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to 「その他」のUI Framework 3選 (20)

More from Shumpei Shiraishi (20)

Recently uploaded (7)

「その他」のUI Framework 3選