狠狠撸

「その他」の
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=/slideshow/ui-framework-3/13301111/"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">狠狠撸</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
? 売りは？
– 础诲辞产别の开発者サイトで绍介されていた

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)

「その他」のUI Framework 3選