JavaScript + CSS3を活用してスマートフォンサイト/アプリに     動きを付けてみよう    WordPress+HTML5勉強会 in 神戸           2012/02/18
まずは自己紹介若松 浩昭Twitter:   @azuyuuFacebook: facebook.com/azuyuu• フロント周りの実装を主に担当• 仕事のほとんどがスマートフォン対応• HTML5-WEST.jp コアメンバー
今回の話のポイントCSS3アニメーションを活用しよう!!
ちょっと話の整理• 制作案件の現状 → スマートフォン案件が急激に増加中• スマートフォン案件で求められるもの → 端末(OS・ブラウザ)の理解 → 無駄のないコーディング → 動きの実装            本当に必要?
動きは必要なのか?• UXの向上に貢献するのではないだろうか• クライアントから要望がある• 競合他社と差別化できる、かもなくてもいいけど・・・。需要があるのは確か。
ちなみに、ここでいう動きとは• 派手に主張するやつ → フルFlashみたいにグリグリ動くレベル• さりげなく主張するやつ → あくまでサイト/アプリの補足レベル        今日取り上げるのはこっち
動きを実装するにあたって
動きはどうやって付ける?• JavaScriptでアニメーション• CSS3でアニメーション
JavaScriptでアニメーション• 実態はsetIntervalでひたすらループ処理• 複雑な動きになると、書くのが面倒 (メンテナンスもしんどい)• 処理速度は端末のスペックに依存• スマートフォンでは処理落ちを覚悟
CSS3でアニメーション• 実装・制御はJavaScriptより簡単• メンテナンスがJavaScriptより楽• Mobile Safariではさらに快適 (全てのCSS要素が快適なわけではない)• Android端末は・・・
スマートフォンを対象とするなら• JavaScriptでアニメーション• CSS3でアニメーション      iPhoneで「ぬめー」っと動くのは      感動ものですよ!!
CSS3アニメーションの種類1• transition   → 簡単なアニメーションa:hover {     -webkit-transition: all 1s linear;     -webkit-transform: translat...
CSS3アニメーションの種類2• animation   → タイムライン・複雑なアニメーションa:hover {     -webkit-animation: animeSample 1s;}@-webkit-keyframes animeS...
動きの実例について
動きを組み込んだ例 DEMO
簡単に仕組みを解説• 例えば、ボタンをタップすることによっ て、オーバーレイを表示する場合・・
STEP1. タグ構成<!DOCTYPE html><html>  <div id="wrapper">    <!--メインコンテンツ-->    <a id="btn" role="button">開く</a>  </div>  <div ...
STEP2. JavaScriptでイベント<script>  $(function() {     $("#btn").click(function() {             $("#overlay").addClass("open")...
STEP3. CSSでアニメーション<style>    #overlay.open {      -webkit-animation: openOverlay 0.5s;     -webkit-animation-fill-mode : bo...
STEP4. 次のイベント<script>  $(function() {     $("#overlay").bind("webkitAnimationEnd", function() {             $("#hoge").tex...
補足. アニメーションを変更<style>@-webkit-keyframes openOverlay {     0% { -webkit-transform: translate3d(0, -300px, 0); }     100% { ...
注意事項1• 疑似要素にアニメーション指定はできない<style>#overlay:after {     display: block;     content: "";     width: 100px;            アニメーショ...
注意事項2• 非表示の要素に対してはタイマーを      使用してアニメーションを指定$("#btn").click(function() {     var overlay = $("#overlay");     overlay.css({...
最後に・・・
CSS3アニメーション・・・• スマートフォンなら気兼ねなく使える• 慣れれば実装が非常に簡単• 何より、動かすのは楽しい!!是非、使ってみてください!!
THANKS!!
Upcoming SlideShare
Loading in …5
×

JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう

3,849 views

Published on

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,849
On SlideShare
0
From Embeds
0
Number of Embeds
427
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう

  1. 1. JavaScript + CSS3を活用してスマートフォンサイト/アプリに 動きを付けてみよう WordPress+HTML5勉強会 in 神戸 2012/02/18
  2. 2. まずは自己紹介若松 浩昭Twitter: @azuyuuFacebook: facebook.com/azuyuu• フロント周りの実装を主に担当• 仕事のほとんどがスマートフォン対応• HTML5-WEST.jp コアメンバー
  3. 3. 今回の話のポイントCSS3アニメーションを活用しよう!!
  4. 4. ちょっと話の整理• 制作案件の現状 → スマートフォン案件が急激に増加中• スマートフォン案件で求められるもの → 端末(OS・ブラウザ)の理解 → 無駄のないコーディング → 動きの実装 本当に必要?
  5. 5. 動きは必要なのか?• UXの向上に貢献するのではないだろうか• クライアントから要望がある• 競合他社と差別化できる、かもなくてもいいけど・・・。需要があるのは確か。
  6. 6. ちなみに、ここでいう動きとは• 派手に主張するやつ → フルFlashみたいにグリグリ動くレベル• さりげなく主張するやつ → あくまでサイト/アプリの補足レベル 今日取り上げるのはこっち
  7. 7. 動きを実装するにあたって
  8. 8. 動きはどうやって付ける?• JavaScriptでアニメーション• CSS3でアニメーション
  9. 9. JavaScriptでアニメーション• 実態はsetIntervalでひたすらループ処理• 複雑な動きになると、書くのが面倒 (メンテナンスもしんどい)• 処理速度は端末のスペックに依存• スマートフォンでは処理落ちを覚悟
  10. 10. CSS3でアニメーション• 実装・制御はJavaScriptより簡単• メンテナンスがJavaScriptより楽• Mobile Safariではさらに快適 (全てのCSS要素が快適なわけではない)• Android端末は・・・
  11. 11. スマートフォンを対象とするなら• JavaScriptでアニメーション• CSS3でアニメーション iPhoneで「ぬめー」っと動くのは 感動ものですよ!!
  12. 12. CSS3アニメーションの種類1• transition → 簡単なアニメーションa:hover {     -webkit-transition: all 1s linear;     -webkit-transform: translate3d(500px, 0, 0);}
  13. 13. CSS3アニメーションの種類2• animation → タイムライン・複雑なアニメーションa:hover {     -webkit-animation: animeSample 1s;}@-webkit-keyframes animeSample {     0% { -webkit-transform: translate3d(0, 0, 0); }     100% { -webkit-transform: translate3d(500px, 0, 0); }}
  14. 14. 動きの実例について
  15. 15. 動きを組み込んだ例 DEMO
  16. 16. 簡単に仕組みを解説• 例えば、ボタンをタップすることによっ て、オーバーレイを表示する場合・・
  17. 17. STEP1. タグ構成<!DOCTYPE html><html> <div id="wrapper"> <!--メインコンテンツ--> <a id="btn" role="button">開く</a> </div> <div id="overlay"> <!--オーバーレイのコンテンツ--> </div></html> ボタンをクリックしたら、 #overlayの要素が、画面の手前に 表示される
  18. 18. STEP2. JavaScriptでイベント<script> $(function() { $("#btn").click(function() {     $("#overlay").addClass("open"); }); });</script> JavaScriptではclassを指定するのみ!! アニメーション自体はCSSまかせ
  19. 19. STEP3. CSSでアニメーション<style> #overlay.open { -webkit-animation: openOverlay 0.5s;     -webkit-animation-fill-mode : both; } @-webkit-keyframes openOverlay {     0% { -webkit-transform: translate3d(0, -300px, 0); }     100% { -webkit-transform: translate3d(0, 0, 0); } }</style> アニメーションの中身は全てCSSで定義
  20. 20. STEP4. 次のイベント<script> $(function() { $("#overlay").bind("webkitAnimationEnd", function() {     $("#hoge").text("オーバーレイが表示されました"); }); });</script> アニメーション終了時に呼び出す処理を ここに記述 transitionを使ってアニメーションした 場合は、 webkitTransitionEnd を使用
  21. 21. 補足. アニメーションを変更<style>@-webkit-keyframes openOverlay {     0% { -webkit-transform: translate3d(0, -300px, 0); }     100% { -webkit-transform: translate3d(0, 0, 0); }} 内容を切り替えてみる@-webkit-keyframes openOverlay {     0% { -webkit-transform: scale(0); }     50% { -webkit-transform: scale(1.2); }     80% { -webkit-transform: scale(0.9); }     100% { -webkit-transform: scale(1); }}</style>
  22. 22. 注意事項1• 疑似要素にアニメーション指定はできない<style>#overlay:after {     display: block;     content: "";     width: 100px; アニメーションしない・・・     height: 100px;     opacity: 0; -webkit-transition: all 0.3s linear;}#overlay.open:after {     opacity: 1;}</style>
  23. 23. 注意事項2• 非表示の要素に対してはタイマーを 使用してアニメーションを指定$("#btn").click(function() {     var overlay = $("#overlay");     overlay.css({ "display": "block" });     setTimeout(function() {          overlay.addClass("open");     }, 100); タイマーでアニメーションの}); 開始時間を遅延
  24. 24. 最後に・・・
  25. 25. CSS3アニメーション・・・• スマートフォンなら気兼ねなく使える• 慣れれば実装が非常に簡単• 何より、動かすのは楽しい!!是非、使ってみてください!!
  26. 26. THANKS!!

×