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先端技術味⾒見見部...
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”>
        <!-‐‑‒-‐‑‒  コ...
ボタンなどの⾓角丸
border-‐‑‒radius
.ui-‐‑‒corner-‐‑‒all  {
    border-‐‑‒radius:  0.6em;
}
ボタンや背景などのグラデーション
linear-‐‑‒gradient
.ui-‐‑‒btn-‐‑‒up-‐‑‒b  {
    background-‐‑‒image:  
linear-‐‑‒gradient(#5f9cc5,  #396b...
ボタンなどの影
box-‐‑‒shadow
.ui-‐‑‒shadow  {
    box-‐‑‒shadow:  0  1px  3px;
}
テキストの影
text-‐‑‒shadow
.ui-‐‑‒btn-‐‑‒hover-‐‑‒c  {
    text-‐‑‒shadow:  0  1px  0  #fff;
}
ページ遷移アニメーション(変形)
CSS3  Transform
transform:  rotateY(-‐‑‒90deg)  scale(0.9);
変形・拡⼤大縮⼩小
ページ遷移アニメーション
CSS3  Animations
@keyframes  popin  {
        from  {  transform:  scale(.8);  opacity:  0;  }
        to  { ...
パネルや細かなパーツのアニメーション
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://slides...
Thank  you!!
(  @yoshikawa_̲t  )
Upcoming SlideShare
Loading in...5
×

jQuery MobileとHTML5

1,007

Published on

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

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,007
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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  )
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×