第30回 HTML5とか勉強会で白石が発表したスライド。app-UI、Kendo UI Mobile、jqUiについて、ほんのさわりだけ紹介しています。

1. 「その他」の
UIフレームワーク 3
選
2012/6/12 白石俊平

2. Kendo UI Mobile

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

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

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

6. 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>

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

8. jqUi

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

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

11. jqUi
• data-*属性で
jQuery Mobile知っていれ
ば
一瞬で理解可能

12. 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>

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

14. app-UI

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

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

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

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

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

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