jQuery Mobileの基礎

  • 2,666 views
Uploaded on

オープンソースカンファレンス2012 Tokyo Fall …

オープンソースカンファレンス2012 Tokyo Fall
jQuery Mobileの基礎

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,666
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
34
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery Mobile の基礎オープンソースカンファレンス 2012 Tokyo/Fall 09/08 田中智文
  • 2. 全体アジェンダ1. jQuery Mobile の基礎  田中智文2. jQuery Mobile で作る実用スマフォアプリ  梶原直人3. PhoneGap で Web アプリをパッケージング  岡本隆史
  • 3. 好評発売中!● 本日の発表者 3 人による著書● jQuery Mobile スマートフォンアプリ開発
  • 4. アジェンダ● jQuery Mobile の概要● 特徴● 使ってみよう● 周辺事情● まとめ
  • 5. 自己紹介● 田中智文(たなかともふみ) ● @tanacasino● サラリーマン(短パンだけど働いてます)● 高知 LOVE ● 高知 LOVE の人話かけてください● 主にオープンソースの IaaS と触れ合うお仕事 http://cloud.watch.impress.co.jp/docs/column/eucalyptus/Eucalyptus ではじめるプライベートクラウド構築
  • 6. jQuery Mobile とは?● スマートフォンサイトを開発するためのフレー ムワーク● 簡単にスマフォな UI が作れる!
  • 7. モバイル界の人気者● モバイルフレームワークとプラットフォームに何を使っていま すか ? 参考 eclipse-survey-2012-report-final http://www.slideshare.net/IanSkerrett/eclipse-survey-2012-report-
  • 8. 強力なスポンサー
  • 9. オープンソース!!!● GPL2/MIT のデュアルライセンス ● jQuery と同じ● Github 上でオープンに開発 ● 多くの人が開発に参加中 – ● Issue 管理も github で ( バグ情報は要チェック)
  • 10. git ポケットリファレンス● もはや git なしではオープンソースは満喫でき ぬ!?● 手元に置いておきたい本の決定版!
  • 11. jQuery Mobile の特徴
  • 12. スマートフォンに最適な UI● PC ブラウザと異なり 工夫が必要な ところを全部お任せ ● 文字のサイズ ● ボタンのサイズ ● タッチ操作にはそれな りの大きさが必要 ● ネイティブアプリのよ うな使い心地
  • 13. クロスプラットフォーム● 主要なプラットフォームからマ イナーまで手広くカバー ● Apple iOS 3.2-5.0 ● Android 2.1-2.3 ● Android 3.1, 4.0 ● Windows Phone 7-7.5 ● Blackberry 6.0,7.0 ● Palm WebOS ● PC ブラウザ – Chrome – Firefox – Safari 参照 : http://jquerymobile.com/gbs/
  • 14. 異なるプラットフォームでだいたい同じ iPhone Android(HTC) Windows Phone
  • 15. とっても簡単に使える!● マークアップだけで OK ! ● デザインが苦手な人でも安心♪リンクボタン <a href="#" data-role="button"> リンクボタン </a> jQuery Mobile では data-XXX といった HTML5 のカスタムデータ属性を使用検索テキストボックス要素によっては自動的に変換 <input type=”search” id=”s” name=”s” placeholder=” 検索キーワード” />
  • 16. jQuery Mobile を使ってみよう
  • 17. 基本のテンプレート<!DOCTYPE html><html><head>... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/><link rel="stylesheet" href="css/custom.css"/><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>...<script src="js/config.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script><script src="js/custom.js"></script></head><body> <div data-role="page" id="p-top"> <div data-role="header"> <h2> ヘッダタイトル </h2> </div> <div data-role="content"> <h2> 本文 </h2> <p> こんにちは </p> </div> <div data-role="footer"> <h2> フッタです </h2> </div> </div></body></html>
  • 18. jQuery Mobile の読み込み● jQuery が必須 ● jQuery Mobile と対応するバージョンは要チェック<head>...<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/><link rel="stylesheet" href="css/custom.css"/><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>...<script src="js/config.js"></script><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script><script src="js/custom.js"></script></head>
  • 19. 基本構造● ページ <div data-role="page" id="p-top"> <div data-role="header"> ● ヘッダ <h2> ヘッダタイトル </h2> </div> ● コンテンツ <div data-role="content"> <h2> 本文 </h2> ● フッタ <p> こんにちは </p> </div> <div data-role="footer"> <h2> フッタです </h2> </div> </div>
  • 20. ボタンリンクボタン<a href="#" data-role="button"> リンクボタン </a>グループ化<div data-role="controlgroup"> <a href="#" data-role="button"> りんご </a> <a href="#" data-role="button"> みかん </a> <a href="#" data-role="button"> ぶどう </a></div>アイコン付き<a href="#" data-role="button" data-icon="delete">削除 </a>
  • 21. アイコン● デフォルトで十分なアイコンセット完備● 独自アイコンも簡単 CSS でアイコンを定義 .ui-icon-myicon { background-image: url("myicon.png"); } data-icon で定義したアイコンを指定 <button data-icon="myicon">...</button>
  • 22. リストリストの基本<ul data-role="listview"> <li>Java</li> <li>C++</li> ...</ul>独立させる<ul data-role="listview" data-inset="true"> ...</ul>区切りを入れる (divider)<ul data-role="listview"> <li data-role="list-divider"> 静的型付け言語 </li> ...</ul>
  • 23. 高度なリスト検索フィルター付きリスト<ul data-role="listview" data-inset="true" data-filter="true"> ...</ul>入れ子メニュー<ul data-role="listview"> <li> 受信トレイ <ul> <li><a> メール 1</a></li> ... </ul> </li> ...</ul>
  • 24. フォーム ● タッチ操作に適したフォーム UI ● フォーム関連の要素は自動的に変換されるものもありテキストボックス チェックボックス<input type=”search” id=”s” name=”s” <fieldset data-role=”controlgroup”> placeholder=” 検索キーワード” /> <input type=”checkbox” id=”a” name=”a”> <label for=”a”> 雲のクリスタル </label> <input type=”checkbox” id=”b” name=”b”>スライダー <label for=”b”> 滝のクリスタル </label><input type=”range” min=”0” max=”100” ..... data-highlight="true" /> </fieldset>フリップスイッチ<select name="s" id="s" data-role="slider"> さらに横並びも可能 <option value="off">Off</option> <fieldset data-role=”controlgroup” <option value="on">On</option> data-type="horizontal"></select> ... </fieldset>
  • 25. ツールバーツールバー<div data-role="header" data-position="fixed"> <h1> タイトル </h1> <a href="#" data-icon="gear" class="ui-btn-right"> 設定 </a></div><div data-role="content"> ...</div><div data-role="footer" data-position="fixed" data-id="footer-id"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home" class="ui-btn-active"> ホーム </a> </li> <li><a href="#" data-icon="star"> お気に入り </a></li> <li><a href="#" data-icon="search"> 検索 </a></li> </ul> </div></div>
  • 26. 画面遷移● 次の画面を表示する際にはアニメーションを 使用して切り替え ● ネイティブアプリの使用感 ● 実際は Ajax で次の画面を読み込んでから表示して いる● 注意事項 ● 画面遷移に Ajax を使用するので – 開発時に Web サーバが必要 ● XAMPP などがお手軽 ● python -m SimpleHTTPServer – 次の画面の head 要素が読み込まれません (CSS/JS 注意 )
  • 27. 気を付けたいポイント● 重い ● それなりに大きなフレームワークなので – 使わない機能をオフにするなど対策は可能(後で) – 普通の Web と同じく画像・ JS などはなるべく軽量化しましょう ● アニメーションが重い – 種類があっても動かない OS もあり( fallback 有) ● そもそも端末が重い – 特に Android2.2 以下は重い場合が多い● 苦手 ● 基本は Web なのでゲームや自由なレイアウトは難しい ● 凝ったデザインにしたい場合も難しいかも● 得意 ● 表示、一覧表示、フォーム入力などが中心のもの
  • 28. jQuery Mobile の周辺事情
  • 29. Codiqahttp://www.codiqa.com/● D&D で簡単 UI 作成 ! モックアップに最適
  • 30. ThemeRollerhttp://jquerymobile.com/themeroller/● jQuery Mobile のテーマ作成ツール ● 作ったテーマはダウンロード、共有可能
  • 31. jQuery Mobile Icon Packhttp://andymatthews.net/code/jQuery-Mobile-Icon-Pack/ ● 100 種類以上のアイコンが使える
  • 32. Dateboxhttp://dev.jtsage.com/jQM-DateBox/● jQuery Mobile 用の日付入力補助プラグイン
  • 33. Download Builderhttp://jquerymobile.com/download-builder/● 必要な機能だけに絞って軽量化
  • 34. JQuery Mobile の今後● 1.2 が間もなくリリース!? ● ポップアップなどの新 UI が追加 ● Github を見る限り開発も活発
  • 35. まとめ● 簡単にスマートフォン向け UI が作れる ● すぐに使えるのでぜひ試して● 人気・スポンサーから考えても今後の開発も期 待できる ● 周辺ツールも充実 ● 日本語書籍も充実!!!● オープンソースだからプロダクションでも使え る ● しっかりコミュティとレポジトリをウォッチしま しょう (github)