jQuery MobileとHTML5

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とは？

jquerymobile.com

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

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

Live coding

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

by yoshikawa_t on Jul 24, 2013

Statistics

Views

Actions

2 Embeds 59

Accessibility

Categories

Upload Details

Usage Rights

Report content

jQuery MobileとHTML5 Presentation Transcript

https://twitter.com	56
http://s.deeeki.com	3