「その他」のUI Framework 3選

12,092 views

Published on

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

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,092
On SlideShare
0
From Embeds
0
Number of Embeds
8,497
Actions
Shares
0
Downloads
23
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

「その他」のUI Framework 3選

  1. 1. 「その他」のUIフレームワーク 3 選2012/6/12 白石俊平
  2. 2. Kendo UI Mobile
  3. 3. Kendo UI Mobile• jQuery Mobileとコンセプトはほぼ同じ• 商用(フリーだと、minifyされたソース コードのみ)• 動作環境 – iOS, Android, BlackBerry• その他に必要なライブラリ – jQuery
  4. 4. Kendo UI Mobile• 売りは? – プラットフォーム固有のルック&フィールを エミュレートしてくれる。
  5. 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. 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. 7. Kendo UI Mobile• クオリティ高い!• スマホから軽く触ってみた感じでは、パ フォーマンスも悪くない• データソース抽象レイヤやテンプレート エンジン、MVCフレームワークなども統 合されている。• お金を払ってもいいなら、使う価値はあ るかも?
  8. 8. jqUi
  9. 9. jqUi• 「軽量版jQuery」として有名なjQ.Mobi を使用したUIフレームワーク• jQuery Mobileとコンセプトはかなり近い• 動作環境 – iOS, Android• 必要とされるライブラリ – jQ.Mobi
  10. 10. jqUi• 売りは? – サイズが小さい。 – jQuery Mobileの場合、 jQuery(95kb) + jQuery Mobile (91kb)= 186kb – jqUiの場合、74kb
  11. 11. jqUi• data-*属性で jQuery Mobile知っていれ ば 一瞬で理解可能
  12. 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. 13. jqUi• 軽いし、それなりにUIも揃っているので、 悪くない。• jQuery Mobileに比べてプラットフォーム が限られる• jQuery Mobileに比べて運営母体が貧弱 – ただし、開発はそれなりに活発っぽい
  14. 14. app-UI
  15. 15. app-UI• 横にスライディングするページ遷移の実 現に特化したフレームワーク• 動作環境 – iOS, Android, BlackBerry• その他に必要なライブラリ – jQuery, jQuery.animate- enhanced.js,iscroll.js,noClickDelay.js
  16. 16. app-UI• 売りは? – Adobeの開発者サイトで紹介されていた
  17. 17. app-UI• 「アプリケーションコンテナ」と呼ばれ るビューが用意されている – ViewNavigator・・・スマホ向け – SplitViewNavigator・・・タブレット向け
  18. 18. app-UI• コード例 // ViewManagerの作成 var viewNavigator = new ViewNavigator("スライドさせる領域のID"); // ビューをスタックに追加し、横移動 viewNavigator.pushView({ title: "タイトル", backLabel: "戻る", view: $elem });
  19. 19. app-UI• 「用途特化型」のマイクロフレームワー ク。• 開発自体はもう止まっているっぽい – いじる余地がないのならばいいのだけど。
  20. 20. まとめ• 今後のモバイルUIフレームワークは、 「フルスタック型」と 「用途特化型のライブラリ」の2つに分かれ ていくのではないか。• どちらが良い、という話ではなくて、要件に 合わせて使い分けられると良いのでは – 納期重視ならフルスタック型 – クリエイティブ重視ならオリジナルUI+ライブラ リ

×