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