jQuery Mobileの基礎

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 と触れ合うお仕事

http://cloud.watch.impress.co.jp/docs/column/eucalyptus/

Eucalyptus ではじめるプライベートクラウド構築

jQuery Mobile とは？
● スマートフォンサイトを開発するためのフレー
ムワーク
● 簡単にスマフォな UI が作れる！

モバイル界の人気者
● モバイルフレームワークとプラットフォームに何を使っていま
すか ?

参考 eclipse-survey-2012-report-final
http://www.slideshare.net/IanSkerrett/eclipse-survey-2012-report-

オープンソース！！！
● GPL2/MIT のデュアルライセンス
● jQuery と同じ
● Github 上でオープンに開発
● 多くの人が開発に参加中
–

● Issue 管理も github で ( バグ情報は要チェック）

git ポケットリファレンス
● もはや git なしではオープンソースは満喫でき
ぬ！？
● 手元に置いておきたい本の決定版！

スマートフォンに最適な 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 ！
● デザインが苦手な人でも安心♪
リンクボタン
<a href="#" data-role="button"> リンクボタン </a>

jQuery Mobile では
data-XXX といった
HTML5 のカスタムデータ属性を使用

検索テキストボックス
要素によっては自動的に変換
<input type=”search” id=”s” name=”s” placeholder=” 検索キーワード” />

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)
<li data-role="list-divider"> 静的型付け言語 </li>
...
</ul>

高度なリスト

検索フィルター付きリスト
<ul data-role="listview"
data-inset="true"
data-filter="true">
...
</ul>

入れ子メニュー
<li>
受信トレイ
<ul>
<li><a> メール 1</a></li>
...
</ul>
</li>
...
</ul>

フォーム
● タッチ操作に適したフォーム 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>

ツールバー

ツールバー
<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 なのでゲームや自由なレイアウトは難しい
● 凝ったデザインにしたい場合も難しいかも
● 得意
● 表示、一覧表示、フォーム入力などが中心のもの

Codiqa
http://www.codiqa.com/
● D&D で簡単 UI 作成 ! モックアップに最適

ThemeRoller
http://jquerymobile.com/themeroller/
● jQuery Mobile のテーマ作成ツール
● 作ったテーマはダウンロード、共有可能

jQuery Mobile Icon Pack
http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/

● 100 種類以上のアイコンが使える

Datebox
http://dev.jtsage.com/jQM-DateBox/
● jQuery Mobile 用の日付入力補助プラグイン

Download Builder
http://jquerymobile.com/download-builder/
● 必要な機能だけに絞って軽量化

JQuery Mobile の今後
● 1.2 が間もなくリリース！？
● ポップアップなどの新 UI が追加
● Github を見る限り開発も活発

まとめ
● 簡単にスマートフォン向け UI が作れる
● すぐに使えるのでぜひ試して
● 人気・スポンサーから考えても今後の開発も期
待できる
● 周辺ツールも充実
● 日本語書籍も充実！！！
● オープンソースだからプロダクションでも使え
る
● しっかりコミュティとレポジトリをウォッチしま
しょう (github)

jQuery Mobileの基礎

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie jQuery Mobileの基礎

Ähnlich wie jQuery Mobileの基礎 (20)

Mehr von Takashi Okamoto

Mehr von Takashi Okamoto (9)

jQuery Mobileの基礎