HTML5 Conference 2012    クイズの裏側     第35回 HTML5とか勉強会        Jan. 21, 2013       @KDDI, TOKYO
大人の事情
テーマ:  「Web+OS最前線!」
テーマ:  「Web+OS最前線!」関係ないです
大人の事情 おわり
自己紹介    小野 充輝    ONO Mitsuki職業: 社会人2年目の Webエンジニア見習いTwitter : @mitsuki_ni
大人の事情 2 (10秒CM)       宣       伝       す       る       こ       と       を
http://www.barcodefootballer.com
大人の事情 おわり
ここから本編
当日の動画http://youtu.be/4LBOZTtiEh8
システム構成
解答画面       WebSocket         解答受付         HTTP         名前登録         解答受付出題画面         受付開始         受付停止        速答正解者       ...
解答画面       WebSocket         解答受付         HTTP         名前登録         解答受付出題画面         受付開始         受付停止        速答正解者       ...
html5slideshttp://code.google.com/p/html5slides/
jQueryhttp://jquery.com/
jQuery Mobile http://jquerymobile.com/
WebSocket
WebSocket         HTTPリクエスト         HTTPレスポンス          Upgrade         WebSocketクライアント                     WebSocketサーバ(ブラ...
application cache
 application cache    キャッシュを簡単かつ高度に制御    example.appcache                       index.html     CACHE MANIFEST             ...
 application cache    ■容量    5MB まで (iOS 6 からは 25MB まで)    ■MIMEタイプ    AddType text/cache-manifest .appcache    ■キャッシュが更新さ...
メディア要素 preload
 メディア要素 preload属性    バックグラウンドで(動画を)ダウンロード    sample.html     <!DOCTYPE html>     <html>     <head>     <meta charset="UTF-...
Q8の動画http://youtu.be/4LBOZTtiEh8#t=10m43s
フレキシブル・ボックス
フレキシブル・ボックスフレキシブル・ボックスとは、その中に含まれるボックスのサイズ調整や配置を指定できる、柔軟なボックスのこと。これまでのpositionプロパティや、floatプロパティを使うボックスのレイアウトに比べて、より簡単に指定できる...
slide.html  <div class="containers">      <div class="box1"></div>      <div class="box2"></div>      <div class="box3"></...
slide.html  <div class="containers">      <div class="horizontal">          <div class="box1"></div>          <div class="...
CSS Animation
Q6のアニメーションhttp://youtu.be/4LBOZTtiEh8#t=7m34s
style.css  @-webkit-keyframes zoom_out {      0% {background-size: 500%;}     80% {background-size: 250%;}    100% {backgr...
transition-timing-function変化のタイミング・進行割合を指定easecubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ(開始と完了を滑らかに)(初期値)linearcubic-bez...
Q8のアニメーションhttp://youtu.be/4LBOZTtiEh8#t=11m21s
cubic-bezier.com   http://cubic-bezier.com
CSS Filter Effects画像にフィルターを適用させる。 sample.css   img {       -webkit-filter:   grayscale();     /*グレースケール*/       -webkit-fi...
第34回 HTMLとか勉強会 Q3のアニメーション http://youtu.be/YT8s74HOLzk
なんだかんだと とりとめなくお話しましたが
楽しくなければ じゃない!
thanks.
第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121
第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121
第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121
第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121
第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121
Upcoming SlideShare
Loading in …5
×

第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121

938 views

Published on

第35回HTML5とか勉強会で使用したスライドです。
html5j.komasshu.info/ri35th.html

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

No Downloads
Views
Total views
938
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121

  1. 1. HTML5 Conference 2012 クイズの裏側 第35回 HTML5とか勉強会 Jan. 21, 2013 @KDDI, TOKYO
  2. 2. 大人の事情
  3. 3. テーマ:  「Web+OS最前線!」
  4. 4. テーマ:  「Web+OS最前線!」関係ないです
  5. 5. 大人の事情 おわり
  6. 6. 自己紹介 小野 充輝 ONO Mitsuki職業: 社会人2年目の Webエンジニア見習いTwitter : @mitsuki_ni
  7. 7. 大人の事情 2 (10秒CM) 宣 伝 す る こ と を
  8. 8. http://www.barcodefootballer.com
  9. 9. 大人の事情 おわり
  10. 10. ここから本編
  11. 11. 当日の動画http://youtu.be/4LBOZTtiEh8
  12. 12. システム構成
  13. 13. 解答画面 WebSocket 解答受付 HTTP 名前登録 解答受付出題画面 受付開始 受付停止 速答正解者 ランキング
  14. 14. 解答画面 WebSocket 解答受付 HTTP 名前登録 解答受付出題画面 受付開始 受付停止 速答正解者 ランキング
  15. 15. html5slideshttp://code.google.com/p/html5slides/
  16. 16. jQueryhttp://jquery.com/
  17. 17. jQuery Mobile http://jquerymobile.com/
  18. 18. WebSocket
  19. 19. WebSocket HTTPリクエスト HTTPレスポンス Upgrade WebSocketクライアント WebSocketサーバ(ブラウザ) 接続確立後はどちらからでも データの送信が可能
  20. 20. application cache
  21. 21.  application cache キャッシュを簡単かつ高度に制御 example.appcache index.html CACHE MANIFEST <!DOCTYPE html> # comment <html manifest="example.appcache"> <head> CACHE: <meta charset="UTF-8"> index.html <title>Offline Application</title> style.css <link rel="stylesheet" href="style.css"> js/script.js <script src="js/script.js"></script> logo.png </head> <body> NETWORK: <img src="logo.png"> login.php <a href="login.php">Login</a> /api </body> </html> FALLBACK: images/large/ images/offline.png http://www.html5rocks.com/ja/tutorials/appcache/beginner/
  22. 22.  application cache ■容量 5MB まで (iOS 6 からは 25MB まで) ■MIMEタイプ AddType text/cache-manifest .appcache ■キャッシュが更新されるタイミング 1. ユーザーがブラウザのデータをクリアした時 2. マニフェストファイルが更新された時 3. プログラムで更新命令を実行した時 (JavaScript) ※マニフェストに書いたキャッシュ対象ファイルを更新しても、再読込みされない ※マニフェストファイルの比較はバイト単位で行なわれる (ファイルの更新日時だけではNG) ・キャッシュすべきファイルか ・非対応ブラウザへの配慮はあるか
  23. 23. メディア要素 preload
  24. 24.  メディア要素 preload属性 バックグラウンドで(動画を)ダウンロード sample.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Media Preload</title> </head> <body> <video src="mov.mp4" type="video/mp4" preload="auto"> </video> </body> </html> http://www.html5rocks.com/ja/tutorials/video/basics/
  25. 25. Q8の動画http://youtu.be/4LBOZTtiEh8#t=10m43s
  26. 26. フレキシブル・ボックス
  27. 27. フレキシブル・ボックスフレキシブル・ボックスとは、その中に含まれるボックスのサイズ調整や配置を指定できる、柔軟なボックスのこと。これまでのpositionプロパティや、floatプロパティを使うボックスのレイアウトに比べて、より簡単に指定できる。 sample.css .containers { display: -webkit-box; -webkit-box-orient: vertical; } http://www.html5rocks.com/ja/tutorials/flexbox/quick/
  28. 28. slide.html <div class="containers"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div>style.css .containers { display: -webkit-box; -webkit-box-orient: vertical; }
  29. 29. slide.html <div class="containers"> <div class="horizontal"> <div class="box1"></div> <div class="box2"></div> </div> <div class="horizontal"> <div class="box3"></div> <div class="box4"></div> </div> </div>style.css .containers { display: -webkit-box; -webkit-box-orient: vertical; } .horizontal { display: -webkit-box; -webkit-box-orient: horizontal; }
  30. 30. CSS Animation
  31. 31. Q6のアニメーションhttp://youtu.be/4LBOZTtiEh8#t=7m34s
  32. 32. style.css @-webkit-keyframes zoom_out { 0% {background-size: 500%;} 80% {background-size: 250%;} 100% {background-size: 100%;} } .box { background-position: 50% 50%; -webkit-animation-name: zoom_out; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-duration: 8s; -webkit-animation-fill-mode: forwards; }
  33. 33. transition-timing-function変化のタイミング・進行割合を指定easecubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ(開始と完了を滑らかに)(初期値)linearcubic-bezier(0.0, 0.0, 1.0, 1.0) を指定したのと同じ (一定)ease-incubic-bezier(0.42, 0, 1.0, 1.0) を指定したのと同じ (ゆっくり始まる)ease-outcubic-bezier(0, 0, 0.58, 1.0) を指定したのと同じ (ゆっくり終わる)ease-in-outcubic-bezier(0.42, 0, 0.58, 1.0) を指定したのと同じ (ゆっくり始まってゆっくり終わる)cubic-bezier(p1, p2, p3, p4)3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
  34. 34. Q8のアニメーションhttp://youtu.be/4LBOZTtiEh8#t=11m21s
  35. 35. cubic-bezier.com http://cubic-bezier.com
  36. 36. CSS Filter Effects画像にフィルターを適用させる。 sample.css img { -webkit-filter: grayscale(); /*グレースケール*/ -webkit-filter: sepia(); /*セピア*/ -webkit-filter: saturate(); /*彩度*/ -webkit-filter: hue-rotate(); /*反転*/ -webkit-filter: invert(); /*色相回転*/ -webkit-filter: opacity(); /*透明度*/ -webkit-filter: brightness(); /*輝度*/ -webkit-filter: contrast(); /*コントラスト*/ -webkit-filter: blur(); /*ぼかし*/ -webkit-filter: drop-shadow(); /*ドロップシャドウ*/ } http://www.html5rocks.com/en/tutorials/filters/understanding-css/
  37. 37. 第34回 HTMLとか勉強会 Q3のアニメーション http://youtu.be/YT8s74HOLzk
  38. 38. なんだかんだと とりとめなくお話しましたが
  39. 39. 楽しくなければ じゃない!
  40. 40. thanks.

×