2013/7/24の第2回HTML5ビギナーズの発表資料です。

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

2. 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

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

4. jQuery Mobileとは？

5. jquerymobile.com

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

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

8. Live coding

9. jQuery Mobileで利利⽤用されている
HTML5の機能

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

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

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

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

14. テキストの影
text-‐‑‒shadow
.ui-‐‑‒btn-‐‑‒hover-‐‑‒c {
text-‐‑‒shadow: 0 1px 0 #fff;
}

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

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

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

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

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

20. 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

21. Thank you!!
( @yoshikawa_̲t )