jquery mobileの基礎
DESCRIPTION
オープンソースカンファレンス2012 Tokyo Fall jQuery Mobileの基礎TRANSCRIPT
jQuery Mobile の基礎
オープンソースカンファレンス2012 Tokyo/Fall
09/08田中智文
全体アジェンダ
1. jQuery Mobile の基礎 田中智文
2. jQuery Mobile で作る実用スマフォアプリ 梶原直人
3. PhoneGap で Web アプリをパッケージング 岡本隆史
好評発売中！
● 本日の発表者 3 人による著書● jQuery Mobile スマートフォンアプリ開発
アジェンダ
● jQuery Mobile の概要● 特徴● 使ってみよう● 周辺事情● まとめ
自己紹介
● 田中智文（たなかともふみ）● @tanacasino
● サラリーマン（短パンだけど働いてます）● 高知 LOVE
● 高知 LOVE の人話かけてください● 主にオープンソースの IaaS と触れ合うお仕事
Eucalyptus ではじめるプライベートクラウド構築
http://cloud.watch.impress.co.jp/docs/column/eucalyptus/
jQuery Mobile とは？
● スマートフォンサイトを開発するためのフレームワーク
● 簡単にスマフォな UI が作れる！
モバイル界の人気者● モバイルフレームワークとプラットフォームに何を使っていま
すか ?
参考 eclipse-survey-2012-report-finalhttp://www.slideshare.net/IanSkerrett/eclipse-survey-2012-report-final
強力なスポンサー
オープンソース！！！
● GPL2/MIT のデュアルライセンス● jQuery と同じ
● Github 上でオープンに開発● 多くの人が開発に参加中
–
● Issue 管理も github で ( バグ情報は要チェック）
git ポケットリファレンス
● もはや git なしではオープンソースは満喫できぬ！？
● 手元に置いておきたい本の決定版！
jQuery Mobile の特徴
スマートフォンに最適な UI
● PC ブラウザと異なり工夫が必要なところを全部お任せ● 文字のサイズ● ボタンのサイズ● タッチ操作にはそれな
りの大きさが必要● ネイティブアプリのよ
うな使い心地
クロスプラットフォーム● 主要なプラットフォームからマ
イナーまで手広くカバー● 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/
異なるプラットフォームでだいたい同じ
iPhone Android(HTC) Windows Phone
とっても簡単に使える！
● マークアップだけで OK ！● デザインが苦手な人でも安心♪
<input type=”search” id=”s” name=”s” placeholder=” 検索キーワード” />
検索テキストボックス要素によっては自動的に変換
リンクボタン
jQuery Mobile ではdata-XXX といったHTML5 のカスタムデータ属性を使用
<a href="#" data-role="button"> リンクボタン </a>
jQuery Mobile を使ってみよう
基本のテンプレート<!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>
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>
基本構造
● ページ● ヘッダ● コンテンツ● フッタ
<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>
ボタン
リンクボタン<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>
アイコン
● デフォルトで十分なアイコンセット完備
● 独自アイコンも簡単CSS でアイコンを定義.ui-icon-myicon { background-image: url("myicon.png");}data-icon で定義したアイコンを指定<button data-icon="myicon">...</button>
リスト
リストの基本<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>
高度なリスト
検索フィルター付きリスト<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>
フォーム
● タッチ操作に適したフォーム UI● フォーム関連の要素は自動的に変換されるものもあり
チェックボックス<fieldset data-role=”controlgroup”> <input type=”checkbox” id=”a” name=”a”> <label for=”a”> 雲のクリスタル </label> <input type=”checkbox” id=”b” name=”b”> <label for=”b”> 滝のクリスタル </label> .....</fieldset>
さらに横並びも可能<fieldset data-role=”controlgroup” data-type="horizontal"> ...</fieldset>
スライダー<input type=”range” min=”0” max=”100” data-highlight="true" />
フリップスイッチ<select name="s" id="s" data-role="slider"> <option value="off">Off</option> <option value="on">On</option></select>
テキストボックス<input type=”search” id=”s” name=”s” placeholder=” 検索キーワード” />
ツールバー
ツールバー<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>
画面遷移
● 次の画面を表示する際にはアニメーションを使用して切り替え● ネイティブアプリの使用感● 実際は Ajax で次の画面を読み込んでから表示して
いる● 注意事項
● 画面遷移に Ajax を使用するので– 開発時に Web サーバが必要
● XAMPP などがお手軽● python -m SimpleHTTPServer
– 次の画面の head 要素が読み込まれません (CSS/JS 注意 )
気を付けたいポイント● 重い
● それなりに大きなフレームワークなので
– 使わない機能をオフにするなど対策は可能（後で）
– 普通の Web と同じく画像・ JS などはなるべく軽量化しましょう
● アニメーションが重い
– 種類があっても動かない OS もあり（ fallback 有）
● そもそも端末が重い– 特に Android2.2 以下は重い場合が多い
● 苦手● 基本は Web なのでゲームや自由なレイアウトは難しい
● 凝ったデザインにしたい場合も難しいかも
● 得意● 表示、一覧表示、フォーム入力などが中心のもの
jQuery Mobile の周辺事情
Codiqahttp://www.codiqa.com/
● D&D で簡単 UI 作成 ! モックアップに最適
ThemeRollerhttp://jquerymobile.com/themeroller/
● jQuery Mobile のテーマ作成ツール● 作ったテーマはダウンロード、共有可能
jQuery Mobile Icon Packhttp://andymatthews.net/code/jQuery-Mobile-Icon-Pack/
● 100 種類以上のアイコンが使える
Dateboxhttp://dev.jtsage.com/jQM-DateBox/
● jQuery Mobile 用の日付入力補助プラグイン
Download Builderhttp://jquerymobile.com/download-builder/
● 必要な機能だけに絞って軽量化
JQuery Mobile の今後
● 1.2 が間もなくリリース！？● ポップアップなどの新 UI が追加● Github を見る限り開発も活発
まとめ
● 簡単にスマートフォン向け UI が作れる● すぐに使えるのでぜひ試して
● 人気・スポンサーから考えても今後の開発も期待できる● 周辺ツールも充実● 日本語書籍も充実！！！
● オープンソースだからプロダクションでも使える● しっかりコミュティとレポジトリをウォッチしま
しょう (github)