• Save
第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 929 views
Uploaded on

第35回HTML5とか勉強会で使用したスライドです。 ...

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
929
On Slideshare
929
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 Conference 2012 クイズの裏側 第35回 HTML5とか勉強会 Jan. 21, 2013 @KDDI, TOKYO
  • 2. 大人の事情
  • 3. テーマ:  「Web+OS最前線!」
  • 4. テーマ:  「Web+OS最前線!」関係ないです
  • 5. 大人の事情 おわり
  • 6. 自己紹介 小野 充輝 ONO Mitsuki職業: 社会人2年目の Webエンジニア見習いTwitter : @mitsuki_ni
  • 7. 大人の事情 2 (10秒CM) 宣 伝 す る こ と を
  • 8. http://www.barcodefootballer.com
  • 9. 大人の事情 おわり
  • 10. ここから本編
  • 11. 当日の動画http://youtu.be/4LBOZTtiEh8
  • 12. システム構成
  • 13. 解答画面 WebSocket 解答受付 HTTP 名前登録 解答受付出題画面 受付開始 受付停止 速答正解者 ランキング
  • 14. 解答画面 WebSocket 解答受付 HTTP 名前登録 解答受付出題画面 受付開始 受付停止 速答正解者 ランキング
  • 15. html5slideshttp://code.google.com/p/html5slides/
  • 16. jQueryhttp://jquery.com/
  • 17. jQuery Mobile http://jquerymobile.com/
  • 18. WebSocket
  • 19. WebSocket HTTPリクエスト HTTPレスポンス Upgrade WebSocketクライアント WebSocketサーバ(ブラウザ) 接続確立後はどちらからでも データの送信が可能
  • 20. application cache
  • 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.  application cache ■容量 5MB まで (iOS 6 からは 25MB まで) ■MIMEタイプ AddType text/cache-manifest .appcache ■キャッシュが更新されるタイミング 1. ユーザーがブラウザのデータをクリアした時 2. マニフェストファイルが更新された時 3. プログラムで更新命令を実行した時 (JavaScript) ※マニフェストに書いたキャッシュ対象ファイルを更新しても、再読込みされない ※マニフェストファイルの比較はバイト単位で行なわれる (ファイルの更新日時だけではNG) ・キャッシュすべきファイルか ・非対応ブラウザへの配慮はあるか
  • 23. メディア要素 preload
  • 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. Q8の動画http://youtu.be/4LBOZTtiEh8#t=10m43s
  • 26. フレキシブル・ボックス
  • 27. フレキシブル・ボックスフレキシブル・ボックスとは、その中に含まれるボックスのサイズ調整や配置を指定できる、柔軟なボックスのこと。これまでのpositionプロパティや、floatプロパティを使うボックスのレイアウトに比べて、より簡単に指定できる。 sample.css .containers { display: -webkit-box; -webkit-box-orient: vertical; } http://www.html5rocks.com/ja/tutorials/flexbox/quick/
  • 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. 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. CSS Animation
  • 31. Q6のアニメーションhttp://youtu.be/4LBOZTtiEh8#t=7m34s
  • 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. 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. Q8のアニメーションhttp://youtu.be/4LBOZTtiEh8#t=11m21s
  • 35. cubic-bezier.com http://cubic-bezier.com
  • 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. 第34回 HTMLとか勉強会 Q3のアニメーション http://youtu.be/YT8s74HOLzk
  • 38. なんだかんだと とりとめなくお話しましたが
  • 39. 楽しくなければ じゃない!
  • 40. thanks.