Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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  )
Nächste SlideShare
Wird geladen in …5
×

jQuery MobileとHTML5

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

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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  )

×