HTML5  2011.4.3 Untitled!!!!!!!!HTML5-WEST.jp
@bathtimefishWeb                         IT                  /Web             /HTML5-WEST.jp       /     GTUG / CSS Nite in...
•               1• HTML5 (AudioElement) + jQuery Mobile• Open JTalk•
HTML
AudioElement<audio controls src=”audios/a01.mp3”></audio>
jQuery Mobile
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" /><script src="http://code.j...
<div data-role="page" id="main"> <div data-role="header" data-position="inline" data-backbtn="false">  <h1>               ...
/   <div style="text-align:center" class="reader">    <p>           1                  </span></p>    <audio controls id="...
$("#c01").toggle( function () {   $("#t01").css("display","block");   $(this).text("                 ");     },     functi...
Audacity           mp3
<video></video> <audio></audio>
jQuery Mobile• iPhone, Android, WinPhone, BlackBerry• non JavaScript, non CSS• HTML                       UI
Android• Android        Web• Opera for Android, Firefox for Android
mobile safari   ...
Firefox for Android
jQuery Mobile      +CSS MediaQuery
100
• jQuery Mobile          HTML5• CSS3             PC• HTML5 + CSS3 + WebFw    WEB
Thanks.
いま、Html5でできること
いま、Html5でできること
いま、Html5でできること
いま、Html5でできること
いま、Html5でできること
いま、Html5でできること
いま、Html5でできること
Upcoming SlideShare
Loading in...5
×

いま、Html5でできること

3,150

Published on

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

No Downloads
Views
Total Views
3,150
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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
  • いま、Html5でできること

    1. 1. HTML5 2011.4.3 Untitled!!!!!!!!HTML5-WEST.jp
    2. 2. @bathtimefishWeb IT /Web /HTML5-WEST.jp / GTUG / CSS Nite in OSAKA / OSC Kansai / IT HTML5-WEST.jpHTML5 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.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×