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




2012/6/12 白石俊平
Kendo UI Mobile
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
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
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選

  • 1.
    「その他」の UIフレームワーク 3 選 2012/6/12 白石俊平
  • 2.
  • 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.
  • 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 • コード例 <divtitle="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.
  • 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+ライブラ リ