Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery MobileとHTML5

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

  • Login to see the comments

jQuery MobileとHTML5

  1. 1. jQuery  Mobile  と  HTML5 2013/07/23 第2回  HTML5ビギナーズ Toru  Yoshikawa  (@yoshikawa_̲t) ×
  2. 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. 3. Agenda jQuery  Mobileとは? jQuery  Mobileで利利⽤用されているHTML5の機能
  4. 4. jQuery  Mobileとは?
  5. 5. jquerymobile.com
  6. 6. jQuery  Mobileの概要 モバイルサイト構築のためのフレームワーク HTML5ベースのユーザーインターフェース jQueryのプラグインとして動作する ⾮非常にシェアが⾼高い 活発な開発と豊富な情報量量
  7. 7. jQuery  Mobileの特徴 デザイナーでも簡単にインタラクティブなサイト を作ることができる デベロッパーでも簡単にリッチなサイトを作るこ とができる
  8. 8. Live  coding
  9. 9. jQuery  Mobileで利利⽤用されている HTML5の機能
  10. 10. jQuery  Mobileの設定 data-‐‑‒*  attributes <div  data-‐‑‒role=”page”>    <div  data-‐‑‒role=”content”>        <!-‐‑‒-‐‑‒  コンテンツ  -‐‑‒-‐‑‒>    </div> </div>
  11. 11. ボタンなどの⾓角丸 border-‐‑‒radius .ui-‐‑‒corner-‐‑‒all  {    border-‐‑‒radius:  0.6em; }
  12. 12. ボタンや背景などのグラデーション linear-‐‑‒gradient .ui-‐‑‒btn-‐‑‒up-‐‑‒b  {    background-‐‑‒image:   linear-‐‑‒gradient(#5f9cc5,  #396b9e); }
  13. 13. ボタンなどの影 box-‐‑‒shadow .ui-‐‑‒shadow  {    box-‐‑‒shadow:  0  1px  3px; }
  14. 14. テキストの影 text-‐‑‒shadow .ui-‐‑‒btn-‐‑‒hover-‐‑‒c  {    text-‐‑‒shadow:  0  1px  0  #fff; }
  15. 15. ページ遷移アニメーション(変形) CSS3  Transform transform:  rotateY(-‐‑‒90deg)  scale(0.9); 変形・拡⼤大縮⼩小
  16. 16. ページ遷移アニメーション CSS3  Animations @keyframes  popin  {        from  {  transform:  scale(.8);  opacity:  0;  }        to  {  transform:  scale(1);  opacity:  1;  } } .pop.in  { animation:  popin  350ms; }
  17. 17. パネルや細かなパーツのアニメーション CSS3  Transitions .ui-‐‑‒panel-‐‑‒animate  { transition:  transform  350ms  ease; }
  18. 18. レスポンシブウェブデザイン CSS3  Media  Queries @media  all  and  (max-‐‑‒width:  35em)  {    /*  styles  */ }
  19. 19. その他 History  API jQuery  Mobileでは、ページ遷移で  pjax  (Ajax  +   pushState)というテクニックを利利⽤用している 遷移先のページをAjaxでとってきて ページのURLを書き換えて、あたかもそのペ ージにアクセスするようにする(※リロード してもそのページがちゃんと⾒見見える)
  20. 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. 21. Thank  you!! (  @yoshikawa_̲t  )

×