Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

いま、Html5でできること

  1. 1. HTML5 2011.4.3 Untitled!!!!!!!! HTML5-WEST.jp
  2. 2. @bathtimefish Web IT / Web / HTML5-WEST.jp / GTUG / CSS Nite in OSAKA / OSC Kansai / IT HTML5-WEST.jp HTML5 JavaScript Python Google Apps http://html5-west.jp/
  3. 3. • 1 • HTML5 (AudioElement) + jQuery Mobile • Open JTalk •
  4. 4. HTML
  5. 5. AudioElement <audio controls src=”audios/a01.mp3”> </audio>
  6. 6. jQuery Mobile
  7. 7. <link rel="stylesheet" href="http://code.jquery.com/mobile/ 1.0a4/jquery.mobile-1.0a4.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"> </script> <script src="http://code.jquery.com/mobile/1.0a4/ jquery.mobile-1.0a4.min.js"> </script>
  8. 8. <div data-role="page" id="main"> <div data-role="header" data-position="inline" data-backbtn="false"> <h1> </h1> </div> <div data-role="content"> <p>Web </p> .... </div> <div data-role="footer"> <div data-role="navbar" id="mobile-footer-links"> <ul> <li><a href="list.html" data-transition="slideup"> </a></li> <li><a href="about.html" data-transition="slideup"> </ a></li> </ul> </div>
  9. 9. / <div style="text-align:center" class="reader"> <p> 1 </span></p> <audio controls id="a01" src="audios/a01.mp3"></audio> <a href="#" id="c01" class="txtbtn"> </a> <div id="t01" style="display:none;text-align:left;padding:3px;"> ... </div> </div>
  10. 10. $("#c01").toggle( function () { $("#t01").css("display","block"); $(this).text(" "); }, function () { $("#t01").css("display","none"); $(this).text(" "); } );
  11. 11. Audacity mp3
  12. 12. <video></video> <audio></audio>
  13. 13. jQuery Mobile • iPhone, Android, WinPhone, BlackBerry • non JavaScript, non CSS • HTML UI
  14. 14. Android • Android Web • Opera for Android, Firefox for Android
  15. 15. mobile safari ...
  16. 16. Firefox for Android
  17. 17. jQuery Mobile + CSS MediaQuery
  18. 18. 100
  19. 19. • jQuery Mobile HTML5 • CSS3 PC • HTML5 + CSS3 + WebFw WEB
  20. 20. Thanks.

Editor's Notes

  • \n
  • \n
  • &amp;#x30C7;&amp;#x30A3;&amp;#x30B9;&amp;#x30EC;&amp;#x30AF;&amp;#x30B7;&amp;#x30A2;&amp;#xFF08;&amp;#x8B58;&amp;#x5B57;&amp;#x56F0;&amp;#x96E3;&amp;#xFF09;&amp;#x306E;&amp;#x65B9;&amp;#x306E;&amp;#x305F;&amp;#x3081;&amp;#x306E;&amp;#x60C5;&amp;#x5831;&amp;#x63D0;&amp;#x4F9B;&amp;#x3002;\n&amp;#x969C;&amp;#x304C;&amp;#x3044;&amp;#x8005;&amp;#x3060;&amp;#x3051;&amp;#x3067;&amp;#x306A;&amp;#x304F;&amp;#x3001;&amp;#x88AB;&amp;#x707D;&amp;#x3059;&amp;#x308B;&amp;#x3068;&amp;#x8CA0;&amp;#x50B7;&amp;#x306A;&amp;#x3069;&amp;#x3067;&amp;#x4E00;&amp;#x6642;&amp;#x7684;&amp;#x306B;&amp;#x305D;&amp;#x306E;&amp;#x3088;&amp;#x3046;&amp;#x306A;&amp;#x72B6;&amp;#x614B;&amp;#x306B;&amp;#x306A;&amp;#x308B;&amp;#x3053;&amp;#x3068;&amp;#x3082;&amp;#x3042;&amp;#x308B;&amp;#x3002;\n&amp;#x907F;&amp;#x96E3;&amp;#x3084;&amp;#x5BFE;&amp;#x7B56;&amp;#x304C;&amp;#x5FC5;&amp;#x8981;&amp;#x306B;&amp;#x306A;&amp;#x3063;&amp;#x305F;&amp;#x3068;&amp;#x304D;&amp;#x306B;&amp;#x3001;&amp;#x305D;&amp;#x306E;&amp;#x3088;&amp;#x3046;&amp;#x306A;&amp;#x65B9;&amp;#x3005;&amp;#x304C;&amp;#x60C5;&amp;#x5831;&amp;#x7684;&amp;#x4E0D;&amp;#x5229;&amp;#x306B;&amp;#x306A;&amp;#x3089;&amp;#x306A;&amp;#x3044;&amp;#x3088;&amp;#x3046;&amp;#x306B;&amp;#x3002;\n
  • \n
  • \n
  • &amp;#x6025;&amp;#x3044;&amp;#x3067;&amp;#x3044;&amp;#x305F;&amp;#x306E;&amp;#x3067;&amp;#x30DE;&amp;#x30FC;&amp;#x30AF;&amp;#x30A2;&amp;#x30C3;&amp;#x30D7;&amp;#x306F;&amp;#x3066;&amp;#x304D;&amp;#x3068;&amp;#x3046;&amp;#x3002;\nheader&amp;#x3068;&amp;#x304B;footer&amp;#x3068;&amp;#x304B;&amp;#x3001;css&amp;#x306E;&amp;#x6307;&amp;#x5B9A;&amp;#x304C;&amp;#x3081;&amp;#x3093;&amp;#x3069;&amp;#x304B;&amp;#x3063;&amp;#x305F;&amp;#x304B;&amp;#x3089;&amp;#x3084;&amp;#x3081;&amp;#x305F;&amp;#x3002;\n
  • controls &amp;#x5C5E;&amp;#x6027;&amp;#x3092;&amp;#x3064;&amp;#x3051;&amp;#x308B;&amp;#x3060;&amp;#x3051;&amp;#x3067;&amp;#x30D7;&amp;#x30EC;&amp;#x30A4;&amp;#x30E4;&amp;#x30FC;&amp;#x304C;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x3046;&amp;#x306E;&amp;#x306F;&amp;#x6539;&amp;#x3081;&amp;#x3066;&amp;#x4FBF;&amp;#x5229;&amp;#x3068;&amp;#x611F;&amp;#x3058;&amp;#x305F;\n
  • \n
  • jquery mobile &amp;#x306E; javascript &amp;#x3068; CSS &amp;#x3092;&amp;#x8AAD;&amp;#x307F;&amp;#x8FBC;&amp;#x3080;\njquery &amp;#x3082;&amp;#x5FC5;&amp;#x305A;&amp;#x8AAD;&amp;#x307F;&amp;#x8FBC;&amp;#x3080;&amp;#x3053;&amp;#x3068;\n
  • jQuery Mobile&amp;#x306E;&amp;#x30AB;&amp;#x30B9;&amp;#x30BF;&amp;#x30E0;&amp;#x30C7;&amp;#x30FC;&amp;#x30BF;&amp;#x5C5E;&amp;#x6027;&amp;#x3092;&amp;#x4ED8;&amp;#x52A0;&amp;#x3059;&amp;#x308B;\n
  • \n
  • toggle() &amp;#x3067;css&amp;#x3092;&amp;#x5207;&amp;#x308A;&amp;#x66FF;&amp;#x3048;&amp;#x3066;&amp;#x30C6;&amp;#x30AD;&amp;#x30B9;&amp;#x30C8;&amp;#x3092;&amp;#x8868;&amp;#x793A;&amp;#x3057;&amp;#x305F;&amp;#x308A;&amp;#x96A0;&amp;#x3057;&amp;#x305F;&amp;#x308A;&amp;#x3059;&amp;#x308B;\n&amp;#x3053;&amp;#x308C;&amp;#x3067;UI&amp;#x5B8C;&amp;#x6210;&amp;#x3002;\n
  • &amp;#x30AA;&amp;#x30FC;&amp;#x30D7;&amp;#x30F3;&amp;#x30BD;&amp;#x30FC;&amp;#x30B9;&amp;#x306E;&amp;#x97F3;&amp;#x58F0;&amp;#x5408;&amp;#x6210;&amp;#x30A8;&amp;#x30F3;&amp;#x30B8;&amp;#x30F3; Open JTalk\n&amp;#x8AAD;&amp;#x307F;&amp;#x9055;&amp;#x3048;&amp;#x3092;&amp;#x4FEE;&amp;#x6B63;&amp;#x3057;&amp;#x306A;&amp;#x304C;&amp;#x3089; wav &amp;#x30D5;&amp;#x30A1;&amp;#x30A4;&amp;#x30EB;&amp;#x3092;&amp;#x4F5C;&amp;#x6210;&amp;#x3057;&amp;#x305F;&amp;#x3002;\n200&amp;#x5B57;&amp;#x4EE5;&amp;#x4E0A;&amp;#x5165;&amp;#x3089;&amp;#x306A;&amp;#x3044;&amp;#x304B;&amp;#x3089;&amp;#x3001;&amp;#x5C11;&amp;#x3057;&amp;#x3065;&amp;#x3064;&amp;#x7E70;&amp;#x308A;&amp;#x8FD4;&amp;#x3057;&amp;#x5408;&amp;#x6210;&amp;#x3057;&amp;#x305F;\n
  • &amp;#x97F3;&amp;#x58F0;&amp;#x5408;&amp;#x6210;&amp;#x306B;&amp;#x610F;&amp;#x5916;&amp;#x3068;&amp;#x6642;&amp;#x9593;&amp;#x304C;&amp;#x304B;&amp;#x304B;&amp;#x3063;&amp;#x305F;&amp;#x3002;\n&amp;#x306A;&amp;#x306E;&amp;#x3067;&amp;#x305F;&amp;#x3076;&amp;#x3093;UI&amp;#x306E;&amp;#x4F5C;&amp;#x6210;&amp;#x306F;4~50&amp;#x5206;&amp;#x304F;&amp;#x3089;&amp;#x3044;&amp;#x3060;&amp;#x3063;&amp;#x305F;&amp;#x3093;&amp;#x3058;&amp;#x3083;&amp;#x306A;&amp;#x3044;&amp;#x304B;&amp;#x3002;\n
  • \n
  • \n
  • &amp;#x3068;&amp;#x306B;&amp;#x304B;&amp;#x304F;&amp;#x901F;&amp;#x653B;&amp;#x3067;&amp;#x914D;&amp;#x4FE1;&amp;#x3057;&amp;#x305F;&amp;#x3044;&amp;#x6642;&amp;#x306B;&amp;#x3059;&amp;#x3050;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x3002;\n
  • alpha4 &amp;#x3067; WP7 &amp;#x306B;&amp;#x5BFE;&amp;#x5FDC;&amp;#x3057;&amp;#x305F;&amp;#x3002;3/31\n&amp;#x30AB;&amp;#x30B9;&amp;#x30BF;&amp;#x30E0;&amp;#x30C7;&amp;#x30FC;&amp;#x30BF;&amp;#x5C5E;&amp;#x6027;&amp;#x3067;UI&amp;#x3092;&amp;#x6307;&amp;#x5B9A;&amp;#x3057;&amp;#x3066;&amp;#x3044;&amp;#x308B;&amp;#x306E;&amp;#x304C;&amp;#x3044;&amp;#x3044;&amp;#x3002;&amp;#x306A;&amp;#x305C;&amp;#x304B;&amp;#x306F;&amp;#x6700;&amp;#x5F8C;&amp;#x306B;&amp;#x8AAC;&amp;#x660E;&amp;#x3059;&amp;#x308B;&amp;#x3002;\n
  • Android&amp;#x306E;Webkit&amp;#x306F;ogg theora&amp;#x3067;&amp;#x3084;&amp;#x3063;&amp;#x3066;&amp;#x307F;&amp;#x305F;&amp;#x3051;&amp;#x3069;&amp;#x7121;&amp;#x7406;&amp;#x3060;&amp;#x3063;&amp;#x305F;&amp;#x3002;\n&amp;#x3064;&amp;#x30FC;&amp;#x304B;&amp;#x3061;&amp;#x3083;&amp;#x3093;&amp;#x3068;&amp;#x30AA;&amp;#x30FC;&amp;#x30C7;&amp;#x30A3;&amp;#x30AA;&amp;#x30D5;&amp;#x30A1;&amp;#x30A4;&amp;#x30EB;&amp;#x518D;&amp;#x751F;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#xFF1F;\n
  • audio&amp;#x30B3;&amp;#x30F3;&amp;#x30C8;&amp;#x30ED;&amp;#x30FC;&amp;#x30E9;&amp;#x30FC;&amp;#x304C;&amp;#x3061;&amp;#x3063;&amp;#x3061;&amp;#x3083;&amp;#x3059;&amp;#x304E;&amp;#x3001;&amp;#x306A;&amp;#x305C;&amp;#x304B;PC Safari&amp;#x3088;&amp;#x308A;&amp;#x3082;&amp;#x3061;&amp;#x3063;&amp;#x3061;&amp;#x3083;&amp;#x3044;&amp;#x3002;\n\n
  • &amp;#x3061;&amp;#x3087;&amp;#x3063;&amp;#x3068;&amp;#x30C0;&amp;#x30B5;&amp;#x3044;&amp;#x3051;&amp;#x3069;&amp;#x5927;&amp;#x304D;&amp;#x3044;&amp;#x306E;&amp;#x304C;&amp;#x3044;&amp;#x3044;&amp;#x3002;\n&amp;#x3053;&amp;#x308C;&amp;#x304F;&amp;#x3089;&amp;#x3044;&amp;#x3058;&amp;#x3083;&amp;#x306A;&amp;#x3044;&amp;#x3068;&amp;#x4F7F;&amp;#x3044;&amp;#x306B;&amp;#x304F;&amp;#x3044;&amp;#x3088;&amp;#x306D;&amp;#x3002;\n
  • \n
  • &amp;#x30C7;&amp;#x30E2;&amp;#x3002;JavaScript&amp;#x3092;&amp;#x4E00;&amp;#x5207;&amp;#x4F7F;&amp;#x3063;&amp;#x3066;&amp;#x306A;&amp;#x3044;&amp;#x3002;\n
  • \n
  • \n
  • &amp;#x7269;&amp;#x8CC7;&amp;#x306E;&amp;#x4F9B;&amp;#x7D66;&amp;#x3084;&amp;#x7FA9;&amp;#x63F4;&amp;#x91D1;&amp;#x306B;&amp;#x6BD4;&amp;#x3079;&amp;#x3066;&amp;#x3001;IT&amp;#x304C;&amp;#x88AB;&amp;#x707D;&amp;#x5730;&amp;#x306B;&amp;#x76F4;&amp;#x63A5;&amp;#x8CA2;&amp;#x732E;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x3053;&amp;#x3068;&amp;#x306F;&amp;#x3059;&amp;#x304F;&amp;#x306A;&amp;#x3044;&amp;#x3002;\n&amp;#x3057;&amp;#x304B;&amp;#x3057;&amp;#x3001;&amp;#x3053;&amp;#x308C;&amp;#x304B;&amp;#x3089;&amp;#x907F;&amp;#x96E3;&amp;#x3084;&amp;#x5FA9;&amp;#x8208;&amp;#x306E;&amp;#x6BB5;&amp;#x968E;&amp;#x306B;&amp;#x306A;&amp;#x308B;&amp;#x3068;WEB&amp;#x306E;&amp;#x60C5;&amp;#x5831;&amp;#x304C;&amp;#x91CD;&amp;#x8981;&amp;#x306B;&amp;#x306A;&amp;#x3063;&amp;#x3066;&amp;#x304F;&amp;#x308B;&amp;#x3002;\n&amp;#x30AF;&amp;#x30EA;&amp;#x30A8;&amp;#x30A4;&amp;#x30BF;&amp;#x30FC;&amp;#x306E;&amp;#x7686;&amp;#x3055;&amp;#x3093;&amp;#x306F;&amp;#x3001;WEB&amp;#x30B3;&amp;#x30F3;&amp;#x30C6;&amp;#x30F3;&amp;#x30C4;&amp;#x3092;&amp;#x4F5C;&amp;#x6210;&amp;#x3059;&amp;#x308B;&amp;#x6280;&amp;#x8853;&amp;#x3092;&amp;#x6301;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B;&amp;#x3002;&amp;#x305D;&amp;#x306E;&amp;#x6280;&amp;#x8853;&amp;#x3067;&amp;#x4F55;&amp;#x304C;&amp;#x51FA;&amp;#x6765;&amp;#x308B;&amp;#x304B;&amp;#xFF1F;&amp;#x9707;&amp;#x707D;&amp;#x306B;&amp;#x3069;&amp;#x306E;&amp;#x3088;&amp;#x3046;&amp;#x306B;&amp;#x8CA2;&amp;#x732E;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x304B;&amp;#x3092;&amp;#x8003;&amp;#x3048;&amp;#x3066;&amp;#x307B;&amp;#x3057;&amp;#x3044;&amp;#x3002;&amp;#x305D;&amp;#x306E;&amp;#x30A2;&amp;#x30A4;&amp;#x30C7;&amp;#x30A2;&amp;#x306E;&amp;#x4E2D;&amp;#x306B;&amp;#x306F;HTML5&amp;#x306A;&amp;#x3069;&amp;#x3067;&amp;#x3084;&amp;#x308B;&amp;#x3068;&amp;#x52B9;&amp;#x7387;&amp;#x304C;&amp;#x3088;&amp;#x3044;&amp;#x30B1;&amp;#x30FC;&amp;#x30B9;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#x306F;&amp;#x305A;&amp;#x3002;\n&amp;#x9707;&amp;#x707D;&amp;#x5BFE;&amp;#x7B56;&amp;#x306B;&amp;#x8CA2;&amp;#x732E;&amp;#x3057;&amp;#x306A;&amp;#x304C;&amp;#x3089;&amp;#x3001;&amp;#x65B0;&amp;#x3057;&amp;#x3044;&amp;#x6280;&amp;#x8853;&amp;#x3092;&amp;#x7FD2;&amp;#x5F97;&amp;#x3057;&amp;#x3066;&amp;#x3044;&amp;#x304F;&amp;#x3088;&amp;#x3044;&amp;#x6A5F;&amp;#x4F1A;&amp;#x3067;&amp;#x3042;&amp;#x308B;&amp;#x3068;&amp;#x3082;&amp;#x3044;&amp;#x3048;&amp;#x308B;&amp;#x3002;\n
  • \n
  • ×