狠狠撸

jQuery ?Mobile ?と ?HTML5
2013/07/23
第2回 ?HTML5ビギナーズ
Toru ?Yoshikawa ?(@yoshikawa_?t)
×

Who?
Google ?Developer ?Experts ?(Chrome)
html5j／HTML5とか勉強会スタッフ／ビギ
ナー部 ?(副部??長)
HTML5 ?Experts.jp ?エキスパートNo.3
Web先端技術味?見見部 ?(顧問)／?日本jQuery ?
Mobileユーザー会 ?(管理理?人)／Sublime ?Text ?
2 ?Japan ?Users ?Group ?(管理理?人)／allWebク
リエイター塾 ?jQuery ?Mobile担当講師
Blog: ?http://d.hatena.ne.jp/pikotea/
吉川 ?徹 ?/ ?Toru ?Yoshikawa
@yoshikawa_?t

Agenda
jQuery ?Mobileとは？
jQuery ?Mobileで利利?用されているHTML5の機能

jQuery ?Mobileの概要
モバイルサイト構築のためのフレームワーク
HTML5ベースのユーザーインターフェース
jQueryのプラグインとして動作する
?非常にシェアが?高い
活発な開発と豊富な情報量量

jQuery ?Mobileの特徴
デザイナーでも簡単にインタラクティブなサイト
を作ることができる
デベロッパーでも簡単にリッチなサイトを作るこ
とができる

jQuery ?Mobileで利利?用されている
HTML5の機能

jQuery ?Mobileの設定
data-‐??* ?attributes
<div ?data-‐??role=”page”>
? ?<div ?data-‐??role=”content”>
? ? ? ?<!-‐??-‐?? ?コンテンツ ?-‐??-‐??>
? ?</div>
</div>

ボタンなどの?角丸
border-‐??radius
.ui-‐??corner-‐??all ?{
? ?border-‐??radius: ?0.6em;
}

ボタンや背景などのグラデーション
linear-‐??gradient
.ui-‐??btn-‐??up-‐??b ?{
? ?background-‐??image: ?
linear-‐??gradient(#5f9cc5, ?#396b9e);
}

ボタンなどの影
box-‐??shadow
.ui-‐??shadow ?{
? ?box-‐??shadow: ?0 ?1px ?3px;
}

テキストの影
text-‐??shadow
.ui-‐??btn-‐??hover-‐??c ?{
? ?text-‐??shadow: ?0 ?1px ?0 ?#?f;
}

ページ遷移アニメーション（変形）
CSS3 ?Transform
transform: ?rotateY(-‐??90deg) ?scale(0.9);
変形?拡?大縮?小

ページ遷移アニメーション
CSS3 ?Animations
@keyframes ?popin ?{
? ? ? ?from ?{ ?transform: ?scale(.8); ?opacity: ?0; ?}
? ? ? ?to ?{ ?transform: ?scale(1); ?opacity: ?1; ?}
}
.pop.in ?{
animation: ?popin ?350ms;
}

パネルや細かなパーツのアニメーション
CSS3 ?Transitions
.ui-‐??panel-‐??animate ?{
transition: ?transform ?350ms ?ease;
}

レスポンシブウェブデザイン
CSS3 ?Media ?Queries
@media ?all ?and ?(max-‐??width: ?35em) ?{
? ?/* ?styles ?*/
}

その他
History ?API
jQuery ?Mobileでは、ページ遷移で ?pjax ?(Ajax ?+ ?
pushState)というテクニックを利利?用している
遷移先のページをAjaxでとってきて
ページのURLを書き換えて、あたかもそのペ
ージにアクセスするようにする（※リロード
してもそのページがちゃんと?見見える）

Getting ?more
jQuery ?Mobileではじめるモバイルサイト／アプリ制作
http://slidesha.re/11bc17l
jQuery ?Mobile ?1.1 ?最新情報 ?& ?Tips
http://slidesha.re/16WsnPO
jQuery ?Mobile ?1.2 ?最新情報 ?& ?Tips
http://slidesha.re/12evK8O
jQuery ?Mobileカスタマイズ?自由?自在 ?v1.2
http://slidesha.re/16WspaC
jQuery ?Mobile ?1.3 ?最新情報
http://slidesha.re/19f2OzT

Thank ?you!!
( ?@yoshikawa_?t ?)

狠狠撸

jQuery MobileとHTML5

Recommended

More Related Content

What's hot (20)

Similar to jQuery MobileとHTML5 (20)

More from yoshikawa_t (12)

jQuery MobileとHTML5