jQuery MobileとHTML5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery MobileとHTML5

on

  • 1,421 views

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

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

Statistics

Views

Total Views
1,421
Views on SlideShare
1,362
Embed Views
59

Actions

Likes
6
Downloads
8
Comments
0

2 Embeds 59

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery MobileとHTML5 Presentation Transcript

  • 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  )