Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5のメリットを活かしたコンテンツアイデア

24,562 views

Published on

HTML5の新機能をiPhoneで使おうという提案です。既存サービスのiPhone版をHTML5の新機能を使って作り、その解説をしています。CSS Nite 4周年記念イベント(Vol.40 reprise)の講演で使用しました。

HTML5のメリットを活かしたコンテンツアイデア

  1. 1. © Inc.
  2. 2.  –  – • • ©
  3. 3.  –  – – ©
  4. 4. ©
  5. 5. ©
  6. 6.  ©
  7. 7. ©
  8. 8. ©
  9. 9.  – – – ©
  10. 10.  – – – – ©
  11. 11.  – • – –  – – ©
  12. 12.  – – – • ©
  13. 13.  – – – – – ©
  14. 14.    ©
  15. 15. ©
  16. 16.  – ©
  17. 17. ©
  18. 18. ©
  19. 19. ©
  20. 20.  – –  – ©
  21. 21.  –  – ©
  22. 22.  – – ©
  23. 23. ©
  24. 24.  – – – ©
  25. 25.  – • – – ©
  26. 26.  – ©
  27. 27. ©
  28. 28. ©
  29. 29. ©
  30. 30. ©
  31. 31.  – – • • ©
  32. 32.  – ©
  33. 33. ©
  34. 34.  – • • • • • • ©
  35. 35.   <canvas width="480" height="268"></canvas> HTML function onEnterFrame3() { ctx.beginPath(); ctx.clearRect(0, 0, slideArea_w, canvas.height); sx = (sx + dx * 1 + tmpCanvas.width) % tmpCanvas.width; var w = Math.min(slideArea_w, tmpCanvas.width - sx); ctx.drawImage(tmpCanvas, sx, 0, w, cellH, 0, 0, w, cellH); var w1 = slideArea_w - w; JavaScript var x1 = w; while (w1 > 0) { var w2 = Math.min(w1, tmpCanvas.width); w1 = w1 - w2; ctx.drawImage(tmpCanvas, 0, 0, w2, cellH, x1, 0, w2, cellH); ©
  36. 36. ©
  37. 37.  – • • • • – – – – ©
  38. 38.  – – ©
  39. 39. – – CACHE MANIFEST # CSS /css/iphone.css # Version: 200911041941 # JavaScript /js/lib/jquery.js /js/iphone.js /js/iphone/appreciate.js CACHE: # Images /img/iphone/bg/body.png # Desktop Icon /img/iphone/viewer/logo.png /img/iphone/ico/desktop.png ©
  40. 40. <html manifest="/hoihoi.iphone.manifest"> HTML ©
  41. 41. – AddType text/cache-manifest .manifest ©
  42. 42.  – • – • • ©
  43. 43.  ©
  44. 44. ©
  45. 45.  – • ©
  46. 46. Key Value  – • ©
  47. 47.  – • <img src="data:image/png;base64,iVBORw0KGgoAAAAN SUhEUgAAAJYAA......"> ©
  48. 48.  – – ©
  49. 49. ©
  50. 50.  <input type="text"> input[type="text"], <input type="email"> input[type="password"], <input type="password"> input[type="email"], input[type="number"] { <input type="number"> width: 410px; margin-bottom: 3px; padding: 10px 7px; border: 1px solid #ff789e; -webkit-border-radius: 5px; background: #fffbd0; } input[type="password"], HTML CSS input[type="number"] { width: 200px; } ©
  51. 51.  – • – • – • ©
  52. 52.  – – ©
  53. 53.  – – ©
  54. 54.  – – ©
  55. 55. ©
  56. 56.  – • – • – • – – • • • ©
  57. 57. ©
  58. 58. ©
  59. 59. ©

×