Your SlideShare is downloading. ×
0
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
HTML5でFirefox OSアプリを作ろう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5でFirefox OSアプリを作ろう

1,451

Published on

Innovation EGG 第一回 <it系コミュニティ合同•未経験者向け勉強会> 10月26日(土)の発表資料です。

Innovation EGG 第一回 <it系コミュニティ合同•未経験者向け勉強会> 10月26日(土)の発表資料です。

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

No Downloads
Views
Total Views
1,451
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
5
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. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net HTML5&#x3067;Firefox OS&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x4F5C;&#x308D;&#x3046; &#x4F4F;&#x53CB; &#x5B5D;&#x90CE; @cattaka_net
  • 2. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x81EA;&#x5DF1;&#x7D39;&#x4ECB; &#x25CF; &#x4F4F;&#x53CB; &#x5B5D;&#x90CE;(&#x3059;&#x307F;&#x3068;&#x3082; &#x305F;&#x304B;&#x304A;) &#x25CF; &#x682A;&#x5F0F;&#x4F1A;&#x793E;&#x30D6;&#x30EA;&#x30EA;&#x30A2;&#x30F3;&#x30C8;&#x30B5;&#x30FC;&#x30D3;&#x30B9;&#x6240;&#x5C5E; &#x25CF; &#x696D;&#x52D9;&#x7CFB;Web&#x30A2;&#x30D7;&#x30EA;&#x958B;&#x767A; &#x25CF; Android&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x958B;&#x767A; &#x25CF; &#x7814;&#x7A76;&#x958B;&#x767A;&#x3068;&#x304B; &#x2013; &#x30ED;&#x30DC;&#x30C3;&#x30C8;&#x7684;&#x306A;&#x4F55;&#x304B; &#x2013; &#x753B;&#x50CF;&#x8A8D;&#x8B58;&#x7684;&#x306A;&#x4F55;&#x304B; &#x2013; Tizen IVI&#x7684;&#x306A;&#x4F55;&#x304B; &#x4F4F;&#x53CB; &#x5B5D;&#x90CE; @cattaka_net
  • 3. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x96D1;&#x591A;&#x306B;&#x3084;&#x3063;&#x3066;&#x307E;&#x3059;
  • 4. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A2;&#x30B8;&#x30A7;&#x30F3;&#x30C0; &#x25CF; Firefox OS&#x3068;&#x306F; &#x25CF; &#x30A2;&#x30D7;&#x30EA;&#x958B;&#x767A;&#x306B;&#x304A;&#x3051;&#x308B;HTML5 &#x25CF; &#x5B9F;&#x969B;&#x306B;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x4F5C;&#x308B; &#x25CF; Firefox Marketplace&#x3078;&#x516C;&#x958B;
  • 5. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox OS&#x3068;&#x306F;
  • 6. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox OS &#x25CF; Web&#x6280;&#x8853;&#x3092;&#x57FA;&#x790E;&#x3068;&#x3059;&#x308B;OS &#x25CF; HTML/CSS/JavaScript&#x3067;&#x30A2;&#x30D7;&#x30EA;&#x304C;&#x4F5C;&#x308C;&#x308B; &#x25CF; JavaScript&#x3067;&#x3082;Java&#x4E26;&#x306E;&#x901F;&#x5EA6;&#x304C;&#x3067;&#x308B;
  • 7. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox OS&#x306E;&#x3053;&#x308C;&#x307E;&#x3067; &#x25CF; 2011&#x5E74;&#xFF17;&#x6708; &#x25CF; &#x25CF; &#x25CF; &#x7814;&#x7A76;&#x30EC;&#x30D9;&#x30EB;&#x3067;&#x767A;&#x8868; &#x3053;&#x306E;&#x9803;&#x306F;&#x307E;&#x3060;&#x540D;&#x524D;&#x306F;&#x300C;Boot to Gecko(B2G)&#x300D;&#x3067;&#x3057;&#x305F; 2012&#x5E74;&#xFF17;&#x6708; &#x25CF; &#x25CF; &#x300C;Firefox OS&#x300D;&#x306B;&#x6539;&#x540D;&#x3001; &#x30B9;&#x30AF;&#x30EA;&#x30FC;&#x30F3;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&#x304C;&#x516C;&#x958B;&#x3055;&#x308C;&#x308B; 2013&#x5E74;&#xFF14;&#x6708; &#x25CF; &#x958B;&#x767A;&#x8005;&#x5411;&#x3051;&#x30C7;&#x30D0;&#x30A4;&#x30B9;&#x767A;&#x58F2; &#x2013; Keon&#x3068;Peak
  • 8. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox OS&#x306E;&#x3053;&#x308C;&#x307E;&#x3067; &#x25CF; 2013&#x5E74;7&#x6708; &#x25CF; ZTE&#x300C;ZTE Open&#x300D;&#x8CA9;&#x58F2;&#x958B;&#x59CB; &#x25CF; TCL&#x300C;ALCATEL ONE TOUCH Fire&#x300D;&#x8CA9;&#x58F2;&#x958B;&#x59CB;
  • 9. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x516C;&#x5F0F;&#x30B5;&#x30A4;&#x30C8;&#x306E;&#x30AD;&#x30FC;&#x30EF;&#x30FC;&#x30C9; &#x25CF; &#x30E2;&#x30D0;&#x30A4;&#x30EB;&#x7AEF;&#x672B;&#x306B;&#x3082;&#x30AA;&#x30FC;&#x30D7;&#x30F3;Web&#x3092; &#x25CF; Web&#x6A19;&#x6E96; &#x25CF; HTML5 &#x25CF; &#x30E2;&#x30D0;&#x30A4;&#x30EB;&#x30D7;&#x30E9;&#x30C3;&#x30C8;&#x30D5;&#x30A9;&#x30FC;&#x30E0;
  • 10. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x306A;&#x305C;Firefox OS&#x304B;&#xFF1F; &#x25CF; &#x4ECA;&#x307E;&#x3067;&#x306E;&#x30A2;&#x30D7;&#x30EA;&#x958B;&#x767A; &#x25CF; &#x25CF; &#x904E;&#x53BB;&#x306E;&#x958B;&#x767A;&#x74B0;&#x5883;&#x306F;&#x60C5;&#x5831;&#x306E;&#x8868;&#x793A;&#x306B;&#x304B;&#x304B;&#x308B;&#x52B4;&#x529B;&#x304C;&#x5927;&#x304D;&#x3044; &#x25CF; &#x25CF; Java? Objective C? C#&#xFF1F; &#x76EE;&#x306B;&#x898B;&#x3048;&#x308B;&#x3082;&#x306E;&#x306B;&#x305F;&#x3069;&#x308A;&#x7740;&#x304F;&#x306E;&#x306B;&#x6642;&#x9593;&#x304C;&#x304B;&#x304B;&#x308B; HTML&#x306F;&#x60C5;&#x5831;&#x306E;&#x8868;&#x793A;&#x304C;&#x4E00;&#x756A;&#x5F37;&#x3044;(&#x500B;&#x4EBA;&#x7684;&#x4E3B;&#x89B3;) &#x25CF; &#x25CF; &#x25CF; &#x76EE;&#x306B;&#x898B;&#x3048;&#x308B;&#x90E8;&#x5206;&#x304C;&#x7D20;&#x65E9;&#x304F;&#x4F5C;&#x308C;&#x308B; Firefox OS&#x306F;HTML5&#x3067;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x4F5C;&#x308B; JavaScript&#x304B;&#x3089;&#x5E83;&#x3044;&#x7BC4;&#x56F2;&#x306E;&#x6A5F;&#x80FD;&#x3092;&#x4F7F;&#x3048;&#x308B;
  • 11. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox OS&#x306E;&#x30A2;&#x30D7;&#x30EA;&#x958B;&#x767A;&#x3067;&#x4F7F;&#x3046;&#x30B9;&#x30AD;&#x30EB; &#x25CF; &#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30E0;&#x8A00;&#x8A9E; &#x25CF; &#x30D7;&#x30E9;&#x30C3;&#x30C8;&#x30D5;&#x30A9;&#x30FC;&#x30E0; &#x25CF; &#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30E0;&#x69CB;&#x9020; &#x25CF; &#x30C7;&#x30FC;&#x30BF;&#x69CB;&#x9020;&#x8A2D;&#x8A08; &#x25CF; UI&#x8A2D;&#x8A08; &#x25CF; &#x30D3;&#x30B8;&#x30E5;&#x30A2;&#x30EB;&#x30C7;&#x30B6;&#x30A4;&#x30F3; &#x25CF; &#x901A;&#x4FE1; &#x25CF; etc
  • 12. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5B9F;&#x6A5F;&#x306E;&#x5165;&#x624B;
  • 13. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Dev Phone
  • 14. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Nexus S&#x306A;&#x3069;&#x306B;&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;&#x3059;&#x308B;
  • 15. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Nexus S&#x306A;&#x3069;&#x306B;&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;&#x3059;&#x308B; &#x25CF; MDN(Mozilla Developer Network)&#x306B;&#x624B;&#x9806;&#x66F8; &#x25CF; &#x5BFE;&#x8C61;&#x7AEF;&#x672B; &#x25CF; &#x25CF; &#x30D3;&#x30EB;&#x30C9;&#x74B0;&#x5883; &#x25CF; &#x25CF; Nexus S&#x3001;Galaxy S2&#x3001;Galaxy Nexus&#x7B49; Ubuntu&#x3001;Fedora&#x3001;Mac&#x7B49; &#x30BD;&#x30FC;&#x30B9;&#x30B3;&#x30FC;&#x30C9; &#x25CF; GitHub&#x306A;&#x3069;&#x306E;&#x30EA;&#x30DD;&#x30B8;&#x30C8;&#x30EA;&#x304B;&#x3089;&#x53D6;&#x5F97;&#x3059;&#x308B;
  • 16. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox OS Simulator
  • 17. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5BFE;&#x5FDC;&#x72B6;&#x6CC1;&#x306E;&#x78BA;&#x8A8D;&#x65B9;&#x6CD5; &#x25CF; HTML5 TEST &#x25CF; &#x25CF; http://html5test.com/ CSS3 TEST &#x25CF; http://css3test.com/
  • 18. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox Simulator &#x25CF; Firefox&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x4E0A;&#x3067;&#x52D5;&#x4F5C; &#x25CF; &#x30A2;&#x30C9;&#x30AA;&#x30F3;&#x3068;&#x3057;&#x3066;&#x52D5;&#x4F5C; &#x25CF; &#x975E;&#x5E38;&#x306B;&#x8EFD;&#x5FEB; &#x25CF; &#x25CF; &#x25CF; Firefox OS&#x306E;&#x307B;&#x3068;&#x3093;&#x3069;&#x306E; &#x6A5F;&#x80FD;&#x304C;&#x5229;&#x7528;&#x53EF;&#x80FD; &#x958B;&#x767A;&#x4E2D;&#x306E;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x7C21;&#x5358;&#x306B; &#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;&#x53EF;&#x80FD; &#x30C7;&#x30D0;&#x30C3;&#x30B0;&#x7528;&#x306E;&#x6A5F;&#x80FD;&#x3082; &#x9806;&#x6B21;&#x8FFD;&#x52A0;
  • 19. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Android&#x4E0A;&#x3067;&#x52D5;&#x304B;&#x3059; &#x25CF; Firefox&#x304C;&#x30A4;&#x30F3;&#x30B9;&#x30C8;&#x30FC;&#x30EB;&#x3055;&#x308C;&#x3066;&#x3044;&#x308C;&#x3070;&#x53EF;&#x80FD; &#x25CF; &#x901A;&#x5E38;&#x306E;&#x30A2;&#x30D7;&#x30EA;&#x306E;&#x3088;&#x3046;&#x306B;&#x30DB;&#x30FC;&#x30E0;&#x304B;&#x3089;&#x8D77;&#x52D5;&#x3082;&#x3067;&#x304D;&#x308B;
  • 20. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A2;&#x30D7;&#x30EA;&#x958B;&#x767A;&#x306B;&#x304A;&#x3051;&#x308B;HTML5 HTML5&#x3068;CSS3
  • 21. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net HTML5
  • 22. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A2;&#x30D7;&#x30EA;&#x4F5C;&#x308A;&#x3067;&#x306E;HTML5 &#x25CF; HTML&#x306F;&#x5143;&#x3005;&#x30DE;&#x30FC;&#x30AF;&#x30A2;&#x30C3;&#x30D7;&#x30E9;&#x30F3;&#x30B2;&#x30FC;&#x30B8; &#x25CF; AJAX&#x4EE5;&#x964D;&#x3001;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x4E0A;&#x3067;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x4F5C;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x3063;&#x305F; &#x25CF; &#x3057;&#x304B;&#x3057;HTML&#xFF0B;JavaScript&#x306F;&#x3044;&#x308D;&#x3044;&#x308D;&#x8F9B;&#x3044; &#x2013; &#x25CF; &#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x4F9D;&#x5B58;&#x3001;&#x6A5F;&#x80FD;&#x4E0D;&#x8DB3; HTML5&#x306F;&#x30A2;&#x30D7;&#x30EA;&#x30B1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x30D7;&#x30E9;&#x30C3;&#x30C8;&#x30D5;&#x30A9;&#x30FC;&#x30E0; &#x25CF; &#x30C7;&#x30D0;&#x30A4;&#x30B9;&#x30A2;&#x30AF;&#x30BB;&#x30B9; &#x25CF; 2D/3D&#x30B0;&#x30E9;&#x30D5;&#x30A3;&#x30C3;&#x30AF; &#x25CF; &#x30DE;&#x30EB;&#x30C1;&#x30E1;&#x30C7;&#x30A3;&#x30A2; &#x25CF; &#x30BB;&#x30F3;&#x30B5;&#x30FC;&#x985E; &#x25CF; USB&#x3084;Bluetooth
  • 23. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5404;&#x6A5F;&#x80FD;&#x306E;&#x5BFE;&#x5FDC;&#x72B6;&#x6CC1; &#x25CF; MDN&#x306B;&#x3042;&#x308A;&#x307E;&#x3059; &#x25CF; https://wiki.mozilla.org/WebAPI
  • 24. 2013/07/19&#xA0;HTML5&amp;Android&#x306A;&#x3069;&#x52C9;&#x5F37;&#x4F1A; in&#xA0;&#x5927;&#x962A; @cattaka_net &#x30A2;&#x30D7;&#x30EA;&#x958B;&#x767A;&#x306B;&#x5FC5;&#x8981;&#x306A;&#x3082;&#x306E; &#x25CF; &#x8868;&#x793A;&#x7CFB; &#x25CF; &#x2192; Video API &amp; Audio API &#x2192; HTML&#x306E;&#x30BF;&#x30B0;&#x3084;&#x30D5;&#x30A9;&#x30FC;&#x30E0; &#x2192; CSS &#x25CF; &#x25CF; &#x203B; Web SQL Database&#x306F;&#x5EC3;&#x6B62; &#x25CF; &#x4E8C;&#x6B21;&#x5143;&#x63CF;&#x753B; &#x2192; Canvas &#x25CF; &#x901A;&#x77E5;&#x7CFB; &#x2192;Notifications API &#x30C7;&#x30FC;&#x30BF;&#x30D9;&#x30FC;&#x30B9; &#x2192; Indexed DB GPS&#x60C5;&#x5831; &#x2192; GeoLocation API &#x25CF; &#x25CF; &#x30EA;&#x30BD;&#x30FC;&#x30B9;&#x306E;&#x7BA1;&#x7406; &#x2192; URI&#x3067;&#x6307;&#x5B9A; &#x52D5;&#x753B;&#x3068;&#x97F3;&#x58F0; &#x4E09;&#x6B21;&#x5143;&#x63CF;&#x753B; &#x2192; WebGL &#x25CF; &#x30D5;&#x30A9;&#x30F3;&#x30C8; &#x2192; WebFont
  • 25. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net HTML5&#x3067;&#x3067;&#x304D;&#x308B;&#x3053;&#x3068;
  • 26. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30BB;&#x30F3;&#x30B5;&#x30FC;&#x985E;&#x306E;&#x5024;&#x306E;&#x53D6;&#x5F97; &#x25CF; &#x52A0;&#x901F;&#x5EA6;&#x30BB;&#x30F3;&#x30B5;&#x30FC; &#x25CF; &#x8FD1;&#x63A5;&#x30BB;&#x30F3;&#x30B5;&#x30FC; &#x25CF; &#x74B0;&#x5883;&#x5149;&#x30BB;&#x30F3;&#x30B5;&#x30FC; &#x25CF; A-GPS
  • 27. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net GeoLocation API &#x25CF; GeoLocation API&#x304C;&#x4F7F;&#x3048;&#x308B; &#x25CF; GPS&#x5EA7;&#x6A19;&#x304C;&#x53D6;&#x5F97;&#x3067;&#x304D;&#x308B; &#x25CF; &#x3067;&#x304D;&#x308B;&#x3053;&#x3068; &#x25CF; &#xFF11;&#x30B7;&#x30E7;&#x30C3;&#x30C8;&#x3067;&#x53D6;&#x5F97; &#x25CF; &#x7E70;&#x308A;&#x8FD4;&#x3057;&#x7D99;&#x7D9A;&#x7684;&#x306B;&#x53D6;&#x5F97; &#x25CF; &#x6307;&#x5B9A;&#x3057;&#x305F;&#x6642;&#x9593;&#x5185;&#x306B;&#x904E;&#x53BB;&#x306B;&#x53D6;&#x5F97;&#x3057;&#x305F;&#x5EA7;&#x6A19;&#x3092;&#x53D6;&#x308B;
  • 28. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Notifications API &#x25CF; Web&#x30DA;&#x30FC;&#x30B8;&#x5916;&#x3078;&#x306E;&#x901A;&#x77E5;&#x306E;&#x65B9;&#x6CD5;&#x3092;&#x5B9A;&#x7FA9; &#x25CF; &#x4F8B;&#xFF09;&#x8868;&#x793A;&#x5834;&#x6240; &#x2013; &#x2013; &#x2013; &#x30C7;&#x30A3;&#x30B9;&#x30D7;&#x30EC;&#x30A4;&#x306E;&#x9685;&#x3063;&#x3053; &#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x306E;&#x4E00;&#x90E8; &#x30E2;&#x30D0;&#x30A4;&#x30EB;&#x30D5;&#x30A9;&#x30F3;&#x306E;&#x30DB;&#x30FC;&#x30E0;&#x753B;&#x9762;
  • 29. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Canvas &#x25CF; JavaScript&#x3067;&#x3082;2D&#x63CF;&#x753B;&#x3092;&#x30B4;&#x30EA;&#x30B4;&#x30EA;&#x3067;&#x304D;&#x308B; &#x25CF; &#x57FA;&#x672C;&#x7684;&#x306A;&#x6A5F;&#x80FD;&#x306F;&#x7C97;&#x65B9;&#x4F7F;&#x3048;&#x308B;(&#x56DB;&#x89D2;&#x3084;&#x4E38;&#x306E;&#x63CF;&#x753B;) &#x25CF; setTransform&#x306E;&#x3088;&#x3046;&#x306A;&#x5909;&#x5F62;&#x3082;&#x884C;&#x3048;&#x308B; &#x25CF; toDataURL()&#x3067;&#x753B;&#x50CF;&#x3092;URL&#x3068;&#x3057;&#x3066;&#x4FDD;&#x5B58;&#x3067;&#x304D;&#x308B; &#x25CF; &#x306A;&#x3093;&#x304B;&#x3084;&#x305F;&#x3089;&#x9577;&#x3044;URL&#x304C;&#x3067;&#x304D;&#x308B;&#x3001;&#x3001;&#x3001; HTML JavaScript &lt;h2&gt;fillRect()&lt;/h2&gt; &lt;canvas id="c1" width="140" height="140"&gt; &lt;/canvas&gt; var canvas = document.getElementById('c1'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(70, 70, 60, 0, Math.PI*2, false); ctx.stroke(); var url = canvas.toDataURL();
  • 30. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net WebGL &#x25CF; 3D&#x63CF;&#x753B;&#x3082;&#x3067;&#x304D;&#x308B; &#x25CF; &#x3061;&#x3087;&#x3063;&#x3068;&#x6577;&#x5C45;&#x306F;&#x9AD8;&#x3044;&#x3001;&#x3001; &#x25CF; &#x30E9;&#x30A4;&#x30D6;&#x30E9;&#x30EA;&#x306F;&#x3044;&#x304F;&#x3064;&#x304B;&#x3042;&#x308B; &#x25CF; three.js &#x25CF; j3d &#x25CF; SceneJS
  • 31. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net HTML5&#x306B;&#x3064;&#x3044;&#x3066;&#x307E;&#x3068;&#x3081; &#x25CF; &#x30BB;&#x30F3;&#x30B5;&#x30FC;&#x306A;&#x3069;&#x6614;&#x306F;JavaScript&#x304B;&#x3089;&#x89E6;&#x308C;&#x306A;&#x304B;&#x3063;&#x305F; &#x60C5;&#x5831;&#x304C;&#x3055;&#x308F;&#x308C;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x3063;&#x3066;&#x3044;&#x308B; &#x25CF; &#x305D;&#x308C;&#x3089;&#x306F;Android&#x3084;iPhone&#x3068;&#x540C;&#x7B49;&#x6C34;&#x6E96; &#x25CF; &#x901A;&#x5E38;&#x306E;&#x30A2;&#x30D7;&#x30EA;&#x306A;&#x3089;&#x5341;&#x5206;&#x306B;&#x4F5C;&#x6210;&#x53EF;&#x80FD;
  • 32. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net CSS3&#x3067;&#x3067;&#x304D;&#x308B;&#x3053;&#x3068;
  • 33. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net CSS&#x3068;&#x306F; &#x25CF; Cascading Style Sheets&#x306E;&#x7565; &#x25CF; W3C&#x3067;&#x6A19;&#x6E96;&#x5316;&#x3055;&#x308C;&#x3066;&#x3044;&#x308B; &#x25CF; HTML&#x306B;&#x30B9;&#x30BF;&#x30A4;&#x30EB;(&#x898B;&#x6804;&#x3048;)&#x3092;&#x8FFD;&#x52A0;&#x3059;&#x308B; &#x25CF; &#x4ED5;&#x69D8;&#x5168;&#x3066;&#x306E;&#x5B8C;&#x5168;&#x306A;&#x5B9F;&#x88C5;&#x306F;&#x4E8B;&#x5B9F;&#x4E0A;&#x7121;&#x3044;
  • 34. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net HTML&#x3068;CSS&#x306E;&#x95A2;&#x4FC2; &#x25CF; HTML&#x3067;&#x6587;&#x7AE0;&#x306E;&#x8AD6;&#x7406;&#x69CB;&#x9020;&#x3092;&#x8A18;&#x8FF0;&#x3059;&#x308B; &#x25CF; CSS&#x3067;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x3092;&#x8A18;&#x8FF0;&#x3059;&#x308B; &#x25CF; &#xFF12;&#x3064;&#x3092;&#x7E4B;&#x3050;&#x306E;&#x306F;&#x30BB;&#x30EC;&#x30AF;&#x30BF; &#x25CF; &#x30BF;&#x30B0; &#x25CF; ID &#x25CF; &#x30AF;&#x30E9;&#x30B9; &#x25CF; &#x968E;&#x5C64;&#x69CB;&#x9020;
  • 35. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net CSS&#x306E;&#x8868;&#x8A18;&#x6CD5; &#x25CF; &#x30BB;&#x30EC;&#x30AF;&#x30BF; &#x25CF; &#x5BA3;&#x8A00;&#x30D6;&#x30ED;&#x30C3;&#x30AF; &#x25CF; &#x5BA3;&#x8A00; &#x2013; &#x2013; &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3; &#x5024; p#id { color : #ff3300; width : 30%; height : 20%; }
  • 36. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30BB;&#x30EC;&#x30AF;&#x30BF;&#x306E;&#x4F8B; &#x25CF; &#x30BF;&#x30B0; &#x2013; &#x25CF; ID &#x2013; &#x25CF; &#x30BB;&#x30EC;&#x30AF;&#x30BF;&#x306B;&#x201D;#&#x201D;&#xFF0B;ID&#x3092;&#x66F8;&#x304F; #myButton { ... } &#x30AF;&#x30E9;&#x30B9; &#x2013; &#x25CF; &#x30BB;&#x30EC;&#x30AF;&#x30BF;&#x306B;&#x30BF;&#x30B0;&#x540D;&#x3092;&#x305D;&#x306E;&#x307E;&#x307E;&#x66F8;&#x304F; button { ... } &#x30BB;&#x30EC;&#x30AF;&#x30BF;&#x306B;&#x201D;.&#x201D;&#xFF0B;&#x30AF;&#x30E9;&#x30B9;&#x540D;&#x3092;&#x66F8;&#x304F; .buttonClass { ... } &#x968E;&#x5C64;&#x69CB;&#x9020; &#x2013; &#x2013; &#x30BB;&#x30EC;&#x30AF;&#x30BF;&#x3092;&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x3067;&#x533A;&#x5207;&#x308B;&#x3068;&#x5B50;&#x5B6B;&#x8981;&#x7D20;&#x304C;&#x5BFE;&#x8C61;&#x3068;&#x306A;&#x308B; #myButton .buttonClass { ... } &#x201C;&gt;&#x201D;&#x3067;&#x533A;&#x5207;&#x308B;&#x3068;&#x5B50;&#x8981;&#x7D20;&#x304C;&#x5BFE;&#x8C61;&#x3068;&#x306A;&#x308B; #myButton &gt; .buttonClass { ... }
  • 37. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net HTML&#x3068;CSS&#x306E;&#x95A2;&#x4FC2; HTML &lt;div id=&#x201D;myGroup1&#x201D; class=&#x201D;groupClass&#x201D;&gt; &lt;div id=&#x201D;myItem1&#x201D; class=&#x201D;itemClass&#x201D;&gt; &#x3042;&#x3044;&#x3046;&#x3048;&#x304A; &lt;/div&gt; &lt;/div&gt; &lt;div id=&#x201D;myGroup2&#x201D; class=&#x201D;groupClass&#x201D;&gt; &lt;div id=&#x201D;myItem2&#x201D; class=&#x201D;itemClass&#x201D;&gt; &#x304B;&#x304D;&#x304F;&#x3051;&#x3053; &lt;/div&gt; &lt;/div&gt; CSS #myGroup1 &gt; .itemClass { color: #FF0000; } #myGroup2 &gt; .itemClass { color: #0000FF; } &#x3042;&#x3044;&#x3046;&#x3048;&#x304A; &#x3042;&#x3044;&#x3046;&#x3048;&#x304A;
  • 38. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net CSS&#x3067;&#x3067;&#x304D;&#x308B;&#x610F;&#x5916;&#x306A;&#x3053;&#x3068; &#x25CF; &#x753B;&#x9762;&#x30B5;&#x30A4;&#x30BA;&#x306B;&#x3088;&#x308B;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8;&#x306E;&#x5207;&#x308A;&#x66FF;&#x3048; &#x25CF; &#x30A8;&#x30EC;&#x30E1;&#x30F3;&#x30C8;&#x306E;&#x62E1;&#x5927;&#x7E2E;&#x5C0F;&#x56DE;&#x8EE2; &#x25CF; &#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;
  • 39. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x753B;&#x9762;&#x30B5;&#x30A4;&#x30BA;&#x306B;&#x3088;&#x308B;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8;&#x306E;&#x5207;&#x308A;&#x66FF;&#x3048; &#x25CF; &#x25CF; &#x25CF; MediaQueries &#x30E1;&#x30C7;&#x30A3;&#x30A2;&#x7279;&#x6027;&#x306E;&#x5F0F;&#x306B;&#x3088;&#x308A;&#x3001;&#x4F7F;&#x7528;&#x3055;&#x308C;&#x308B;CSS&#x3092;&#x5207;&#x308A;&#x66FF;&#x3048; &#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x308B; &#x5F93;&#x6765;&#x306F;onLoad()&#x5185;&#x3067;JavaScript&#x3067;&#x753B;&#x9762;&#x306E;&#x5E45;&#x304B;&#x3089; &#x30B4;&#x30EA;&#x30B4;&#x30EA;&#x3084;&#x308B;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x3063;&#x305F;
  • 40. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net MediaQueries HTML CSS &lt;div id="divFlexBox"&gt; &lt;div id="item-1st" class="item-block"&gt;1st&lt;/div&gt; &lt;div id="item-2nd" class="item-block"&gt;2nd&lt;/div&gt; &lt;div id="item-3rd" class="item-block"&gt;3rd&lt;/div&gt; &lt;div id="item-4th" class="item-block"&gt;4th&lt;/div&gt; &lt;div id="item-5th" class="item-block"&gt;5th&lt;/div&gt; &lt;/div&gt; &#x30B5;&#x30F3;&#x30D7;&#x30EB;&#x30B3;&#x30FC;&#x30C9; http://goo.gl/6Pt5FS /* &#x753B;&#x9762;&#x304C;&#x5E83;&#x3044;&#x3068;&#x304D; */ @media (min-width: 400px) { #item-1st { width: 100%; } #item-2nd { } #item-3rd { width: 50%; flex-grow: 1; } #item-4th { } #item-5th { width: 100%; } } /* &#x753B;&#x9762;&#x304C;&#x72ED;&#x3044;&#x6642; */ @media (max-width: 400px) { div#divFlexBox .item-block { width: 100%; } } &#x203B;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x306B;&#x3088;&#x3063;&#x3066;&#x5BFE;&#x5FDC;&#x72B6;&#x6CC1;&#x304C;&#x3053;&#x3068;&#x306A;&#x308B;&#x306E; &#x3067;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x8A66;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;
  • 41. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A8;&#x30EC;&#x30E1;&#x30F3;&#x30C8;&#x306E;&#x62E1;&#x5927;&#x7E2E;&#x5C0F;&#x56DE;&#x8EE2; &#x25CF; Transform &#x25CF; &#x8981;&#x7D20;&#x306E;&#x79FB;&#x52D5;&#x3001;&#x56DE;&#x8EE2;&#x3001;&#x30B9;&#x30B1;&#x30FC;&#x30EA;&#x30F3;&#x30B0;&#x3001;&#x50BE;&#x659C;&#x304C;&#x3067;&#x304D;&#x308B; &#x25CF; &#x6614;&#x306F;JavaScript&#x3092;&#x7528;&#x3044;&#x3066;&#x3082;&#x56F0;&#x96E3;&#x3060;&#x3063;&#x305F; &#x25CF; &#x25CF; Canvas&#x306B;&#x6587;&#x5B57;&#x3092;&#x63CF;&#x753B;&#x3057;&#x3066;&#x5909;&#x5F62;&#x3057;&#x306A;&#x3051;&#x308C;&#x3070;&#x306A;&#x3089;&#x306A; &#x304B;&#x3063;&#x305F; &#x305D;&#x308C;&#x306F;&#x30D1;&#x30D5;&#x30A9;&#x30FC;&#x30DE;&#x30F3;&#x30B9;&#x7684;&#x306B;&#x3082;&#x9045;&#x304B;&#x3063;&#x305F;
  • 42. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Transform HTML CSS &lt;div id="outerblock"&gt; #mytext { &lt;div id="mytext"&gt; width: 10em; &lt;p&gt;Android&#x306E;1.6&#x3001;2.0&#x3001;3.0&#x3001;4.0&#x306F;&#x76EE;&#x306B;&#x898B;&#x3048;&#x305F;&#x5909;&#x66F4;&#x304C;&#x591A;&#x304F;&#x3001; border: 1px solid #ff007f; &#x767A;&#x8868;&#x306E;&#x5EA6;&#x306B;&#x30EF;&#x30AF;&#x30EF;&#x30AF;&#xFF08;&#x307E;&#x305F;&#x306F;&#x5927;&#x304D;&#x306A;&#x4ED5;&#x69D8;&#x5909;&#x66F4;&#x306B;&#x5516;&#x7136;&#x3068;&#xFF09;&#x3057;&#x305F;&#x3082;&#x306E;&#x3060;&#x304C;&#x3001; transform: 4.0&#x4EE5;&#x964D;&#x306F;&#x305D;&#x308C;&#x304C;&#x8584;&#x304F;&#x306A;&#x3063;&#x305F;&#x6C17;&#x304C;&#x3059;&#x308B;&#x3002; translate(150px,-10px) &#x3057;&#x304B;&#x3057;&#x540C;&#x6642;&#x671F;&#x3092;&#x5883;&#x306B;iOS&#x304B;&#x3089;&#x305D;&#x306E;&#x96F0;&#x56F2;&#x6C17;&#x3092;&#x611F;&#x3058;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x3063;&#x305F;&#x306E;&#x3067; rotate(20deg) &#x4ECA;&#x3053;&#x305D;iPhone&#x3092;&#x8CB7;&#x3046;&#x3079;&#x304D;&#x306A;&#x306E;&#x304B;&#x3082;&#x3057;&#x308C;&#x306A;&#x3044;&#x3002;&lt;/p&gt; skewX(-20deg); &lt;/div&gt; } &lt;/div&gt; &#x30B5;&#x30F3;&#x30D7;&#x30EB;&#x30B3;&#x30FC;&#x30C9; http://goo.gl/6Pt5FS &#x203B;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x306B;&#x3088;&#x3063;&#x3066;&#x5BFE;&#x5FDC;&#x72B6;&#x6CC1;&#x304C;&#x3053;&#x3068;&#x306A;&#x308B;&#x306E; &#x3067;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x8A66;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;
  • 43. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3; &#x25CF; Transition &#x25CF; &#x72B6;&#x614B;&#x9077;&#x79FB;&#x6642;&#x306E;&#x5909;&#x5316;&#x306E;&#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x884C;&#x3048;&#x308B; &#x2013; &#x25CF; &#x4F8B;&#xFF09;&#x30DE;&#x30A6;&#x30B9;&#x30AB;&#x30FC;&#x30BD;&#x30EB;&#x3092;&#x5F53;&#x3066;&#x305F;&#x6642;&#x3084;&#x62BC;&#x3057;&#x305F;&#x6642; Animation &#x25CF; &#x7E70;&#x308A;&#x8FD4;&#x3057;&#x3084;&#x8907;&#x6570;&#x56DE;&#x306E;&#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x884C;&#x3048;&#x308B;
  • 44. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Animation : transition HTML &lt;div id="resizeBlock" class="outerBox"&gt; &lt;div class="animBox"&gt;Animation&lt;/div&gt; &lt;/div&gt; CSS #resizeBlock .animBox { width: 10em; height: 2em; transition-property: all; transition-duration: 1s; transition-timing-function: linear; transition-delay: 0s; } #resizeBlock .animBox:hover { width: 20em; height: 4em; transition-property: all; transition-duration: 3s; transition-timing-function: linear; transition-delay: 0s; } &#x30B5;&#x30F3;&#x30D7;&#x30EB;&#x30B3;&#x30FC;&#x30C9; http://goo.gl/6Pt5FS &#x203B;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x306B;&#x3088;&#x3063;&#x3066;&#x5BFE;&#x5FDC;&#x72B6;&#x6CC1;&#x304C;&#x3053;&#x3068;&#x306A;&#x308B;&#x306E; &#x3067;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x8A66;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;
  • 45. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Animation : animation HTML CSS &lt;div id="resizingBlock" class="outerBox"&gt; &lt;div class="animBox"&gt;Animation&lt;/div&gt; &lt;/div&gt; #resizingBlock .animBox { animation-name: resizingKfs; animation-duration: 1s; animation-play-state: running; animation-iteration-count: infinite; } @keyframes resizingKfs { from { width: 10em; } 50% { width: 20em; } to { width: 10em; } } &lt;div id="movingBlock" class="outerBox"&gt; &lt;div class="animBox"&gt;Animation&lt;/div&gt; &lt;/div&gt; #movingBlock .animBox { animation-name: movingKfs; animation-duration: 1s; animation-play-state: running; animation-iteration-count: infinite; } @keyframes movingKfs { from { margin-left: 0em; margin-top: 0em; } 25% { margin-left: 15em; margin-top: 10em; } 75% { margin-left: 5em; margin-top: 10em; } to { margin-left: 20em; margin-top: 0em; } } &#x30B5;&#x30F3;&#x30D7;&#x30EB;&#x30B3;&#x30FC;&#x30C9; http://goo.gl/6Pt5FS &#x203B;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x306B;&#x3088;&#x3063;&#x3066;&#x5BFE;&#x5FDC;&#x72B6;&#x6CC1;&#x304C;&#x3053;&#x3068;&#x306A;&#x308B;&#x306E; &#x3067;&#x3044;&#x304F;&#x3064;&#x304B;&#x306E;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x8A66;&#x3057;&#x3066;&#x304F;&#x3060;&#x3055;&#x3044;
  • 46. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net CSS&#x306E;&#x307E;&#x3068;&#x3081; &#x25CF; &#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8;&#x306B;&#x3064;&#x3044;&#x3066; &#x25CF; &#x25CF; &#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306B;&#x3064;&#x3044;&#x3066; &#x25CF; &#x25CF; Media Queries&#x3084;Flex&#x3001;Regions&#x3092;&#x4F7F;&#x3048;&#x3070;&#x3001;JavaScript &#x3092;&#x4F7F;&#x308F;&#x305A;&#x306B;&#x30B9;&#x30DE;&#x30FC;&#x30C8;&#x306B;&#x66F8;&#x3051;&#x308B; transition&#x3084;animation&#x3092;&#x4F7F;&#x3048;&#x3070;&#x3001;JavaScript&#x3092;&#x4F7F;&#x308F;&#x305A; &#x306B;&#x30B9;&#x30DE;&#x30FC;&#x30C8;&#x306B;&#x66F8;&#x3051;&#x308B; JavaScript&#x3092;&#x4F7F;&#x308F;&#x305A;&#x306B;&#x30B9;&#x30DE;&#x30FC;&#x30C8;&#x306B;&#x66F8;&#x3051;&#x308B;
  • 47. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5B9F;&#x969B;&#x306B;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x4F5C;&#x308B;
  • 48. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A2;&#x30D7;&#x30EA;&#x4F5C;&#x6210;&#x306E;&#x624B;&#x9806; &#x25CF; &#x4F55;&#x304C;&#x3057;&#x305F;&#x3044;&#x304B; &#x25CF; &#x30A4;&#x30E1;&#x30FC;&#x30B8;&#x3092;&#x7DF4;&#x308B; &#x25CF; &#x5916;&#x89B3;&#x3092;&#x4F5C;&#x308B; &#x25CF; &#x52D5;&#x304D;&#x3092;&#x4F5C;&#x308B; &#x25CF; &#x6574;&#x3048;&#x308B;
  • 49. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net HTML5&#x30A2;&#x30D7;&#x30EA;&#x306E;&#x69CB;&#x6210; &#x25CF; HTML &#x25CF; &#x25CF; JavaScript &#x25CF; &#x25CF; &#x753B;&#x9762;&#x306E;&#x69CB;&#x6210;&#x3084;&#x8AD6;&#x7406;&#x7684;&#x306A;&#x69CB;&#x9020;&#x3092;&#x8A18;&#x8FF0;&#x3059;&#x308B; &#x64CD;&#x4F5C;&#x3092;&#x8A18;&#x8FF0;&#x3059;&#x308B; CSS &#x25CF; &#x898B;&#x305B;&#x65B9;&#x3092;&#x8A18;&#x8FF0;&#x3059;&#x308B;
  • 50. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x304A;&#x984C;&#xFF1A;&#x30B9;&#x30C8;&#x30C3;&#x30D7;&#x30A6;&#x30A9;&#x30C3;&#x30C1; START STOP
  • 51. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5143;&#x30CD;&#x30BF;&#xFF1A;MufWatch &#x25CF; &#x4E00;&#x756A;&#x6700;&#x521D;&#x306B;&#x4F5C;&#x3063;&#x305F;Android&#x30A2;&#x30D7;&#x30EA; &#x25CF; &#x64CD;&#x4F5C;&#x3001;&#x52D5;&#x304D;&#x3001;&#x898B;&#x305F;&#x76EE;&#x306E;&#x52C9;&#x5F37;&#x306B;&#x4F7F;&#x3063;&#x305F;
  • 52. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x4F55;&#x304C;&#x3057;&#x305F;&#x3044;&#x304B; &#x25CF; &#x6642;&#x9593;&#x3092;&#x8A08;&#x308A;&#x305F;&#x3044; &#x25CF; &#x4E00;&#x6642;&#x505C;&#x6B62; &#x25CF; &#x30EA;&#x30BB;&#x30C3;&#x30C8; &#x25CF; &#x30BF;&#x30A4;&#x30DE;&#x30FC;
  • 53. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A4;&#x30E1;&#x30FC;&#x30B8;&#x3092;&#x7DF4;&#x308B; &#x25CF; &#x30A4;&#x30E1;&#x30FC;&#x30B8;&#x3059;&#x308B; &#x25CF; &#x624B;&#x6BB5;&#x306F;&#x4F55;&#x3067;&#x3082;&#x3044;&#x3044; &#x25CF; &#x624B;&#x66F8;&#x304D; &#x25CF; LibreOffice Draw &#x25CF; Adobe Illustrator LibreOffice Draw&#x3067;&#x63CF;&#x3044;&#x305F;&#x30B9;&#x30B1;&#x30C3;&#x30C1;&#x2192;
  • 54. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5916;&#x89B3;&#x3092;&#x4F5C;&#x308B; &#x25CF; HTML&#x3067;&#x4F5C;&#x308B; &#x25CF; &#x5FC5;&#x8981;&#x306A;&#x3089;CSS&#x3082;&#x4F7F;&#x3046;
  • 55. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x90E8;&#x54C1;&#x3092;&#x6574;&#x7406;&#x3059;&#x308B; &#x25CF; &#x8868;&#x793A;&#x90E8; &#x25CF; &#x64CD;&#x4F5C;&#x90E8; Start&#x30DC;&#x30BF;&#x30F3; &#x6642; &#x5206; &#x79D2; Stop&#x30DC;&#x30BF;&#x30F3; 1/100&#x79D2; Reset&#x30DC;&#x30BF;&#x30F3;
  • 56. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5177;&#x4F53;&#x7684;&#x306A;&#x69CB;&#x9020; &#x6587;&#x5B57;&#x76E4;&#x7528;&#x30D6;&#x30ED;&#x30C3;&#x30AF; &#x30DC;&#x30BF;&#x30F3;&#x7528;&#x30D6;&#x30ED;&#x30C3;&#x30AF;
  • 57. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net JavaScript&#x3067;&#x52D5;&#x304D;&#x3092;&#x4F5C;&#x308B; &#x25CF; &#xFF13;&#x3064;&#x306E;&#x30DC;&#x30BF;&#x30F3;&#x306B;&#x51E6;&#x7406;&#x3092;&#x5165;&#x308C;&#x308B; &#x25CF; Start&#x30DC;&#x30BF;&#x30F3; &#x25CF; Stop&#x30DC;&#x30BF;&#x30F3; &#x25CF; Reset&#x30DC;&#x30BF;&#x30F3;
  • 58. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x9759;&#x7684;&#x306A;&#x898B;&#x305F;&#x76EE;&#x3092;&#x6574;&#x3048;&#x308B; &#x25CF; &#x80CC;&#x666F;&#x8272; &#x25CF; &#x90E8;&#x54C1;&#x306E;&#x8272; &#x25CF; &#x67A0;&#x7DDA; &#x25CF; &#x30D5;&#x30A9;&#x30F3;&#x30C8;
  • 59. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x80CC;&#x666F;&#x3084;&#x67A0;&#x7DDA; CSS&#x306E;&#x6307;&#x5B9A; body { background-color: #70CC8D; } .panel { width: 16em; margin: 0px auto 0px auto; background-color: #FFCC99; border-width: 0.2em; border-radius: 0.5em; border-color: #0184D1; border-style: solid; padding: 0.5em; text-align: center; }
  • 60. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30D5;&#x30A9;&#x30F3;&#x30C8;&#x306E;&#x6307;&#x5B9A; CSS&#x306E;&#x6307;&#x5B9A; @font-face { font-family: 'Digital'; src: url('fakeReceipt.ttf'); } .panel-hour, .panel-separator-min { font-family: 'Digital'; } .panel-min, .panel-sec, .panel-frac, .panel-separator-big { font-size: 200%; font-family: 'Digital'; }
  • 61. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x52D5;&#x7684;&#x306A;&#x898B;&#x305F;&#x76EE;&#x3092;&#x6574;&#x3048;&#x308B; &#x25CF; &#x30DC;&#x30BF;&#x30F3;&#x306E;&#x8868;&#x793A; &#x25CF; &#x25CF; &#x25CF; &#x62BC;&#x4E0B;&#x6642;&#x306B;&#x8272;&#x3092;&#x5909;&#x3048;&#x308B; disabled&#x306A;&#x3089;&#x975E;&#x8868;&#x793A; CSS&#x3067;&#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3; &#x25CF; &#x52D5;&#x4F5C;&#x4E2D;&#x306F;&#x8868;&#x793A;&#x3092;&#x52D5;&#x304B;&#x3059;
  • 62. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x52D5;&#x7684;&#x306A;&#x898B;&#x305F;&#x76EE;&#x3092;&#x6574;&#x3048;&#x308B; CSS&#x306E;&#x6307;&#x5B9A; .panel-button:active { background-color: #FFB499; border-width: 0.2em; border-radius: 0.5em; border-color: #FF950E; border-style: solid; } .button-block-1 &gt; .panel-button[disabled] { display: none; }
  • 63. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x52D5;&#x7684;&#x306A;&#x898B;&#x305F;&#x76EE;&#x3092;&#x6574;&#x3048;&#x308B; CSS&#x306E;&#x6307;&#x5B9A; @keyframes resizingKfs { from { width: 16em; } 50% { width: 16.5em; } to { width: 16em; } } .panel-running { animation-name: resizingKfs; animation-duration: 1.0s; animation-play-state: running; animation-iteration-count: infinite; }
  • 64. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5FAE;&#x8ABF;&#x6574; &#x25CF; &#x753B;&#x9762;&#x30B5;&#x30A4;&#x30BA;&#x306B;&#x5408;&#x3046;&#x3088;&#x3046;&#x306B;&#x8ABF;&#x7BC0;&#x3059;&#x308B;
  • 65. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30DE;&#x30CB;&#x30D5;&#x30A7;&#x30B9;&#x30C8;&#x30D5;&#x30A1;&#x30A4;&#x30EB; &#x25CF; &#x30A2;&#x30D7;&#x30EA;&#x306E;&#x60C5;&#x5831;&#x3092;&#x8A18;&#x8F09;&#x3057;&#x305F;&#x30D5;&#x30A1;&#x30A4;&#x30EB; &#x25CF; &#x30A2;&#x30D7;&#x30EA;&#x540D; &#x25CF; &#x8D77;&#x52D5;&#x7528;URL &#x25CF; &#x30A2;&#x30A4;&#x30B3;&#x30F3; &#x25CF; etc { "name": "MufWatch", "description": "A simple stop watch", "launch_path": "/index.html", "developer": { "name": "Takao Sumitomo", "url": "https://www.cattaka.net/" }, &lt;&#x7701;&#x7565;&gt; "default_locale": "en-US", "icons": { "60": "/icon60.png", "120": "/icon120.png", }, "orientation": ["portrait","landscape"] }
  • 66. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x3067;&#x304D;&#x305F; Firefox Simulator&#x2192; &#x2193;Firefox&#x30D6;&#x30E9;&#x30A6;&#x30B6; &#x30A2;&#x30D7;&#x30EA;URL&#xFF1A; http://mufwatch.fxos.cattaka.net/
  • 67. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox Marketplace&#x3078;&#x516C;&#x958B;
  • 68. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox Marketplace &#x25CF; &#x30AA;&#x30FC;&#x30D7;&#x30F3;&#x306A;&#x30A2;&#x30D7;&#x30EA;&#x30B9;&#x30C8;&#x30A2; &#x25CF; Firefox OS&#x306B;&#x9650;&#x3089;&#x305A;Android&#x3084;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3082;&#x5BFE;&#x8C61; &#x25CF; Web&#x6280;&#x8853;&#x3067;&#x5B9F;&#x88C5;&#x3055;&#x308C;&#x3066;&#x3044;&#x308B; &#x25CF; Marketplace&#x306E;&#x30BD;&#x30FC;&#x30B9;&#x3082;&#x516C;&#x958B;&#x3055;&#x308C;&#x3066;&#x3044;&#x308B; &#x25CF; &#x30D9;&#x30F3;&#x30C0;&#x30FC;&#x975E;&#x4F9D;&#x5B58; &#x25CF; &#x30A2;&#x30D7;&#x30EA;&#x306F;&#x516C;&#x958B;&#x524D;&#x306B;&#x30EC;&#x30D3;&#x30E5;&#x30FC;&#x304C;&#x3042;&#x308B;
  • 69. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30EC;&#x30D3;&#x30E5;&#x30FC; &#x25CF; &#x30B3;&#x30DF;&#x30E5;&#x30CB;&#x30C6;&#x30A3;&#x30EC;&#x30D3;&#x30E5;&#x30FC; &#x25CF; &#x25CF; &#x30EC;&#x30D3;&#x30E5;&#x30FC;&#x57FA;&#x6E96;&#x3082;&#x30EC;&#x30D3;&#x30E5;&#x30A2;&#x30FC;&#x3082;&#x516C;&#x5E73;&#x306A;&#x30DE;&#x30FC;&#x30B1;&#x30C3;&#x30C8; &#x7C21;&#x5358;&#x306A;&#x30C1;&#x30A7;&#x30C3;&#x30AF; &#x25CF; &#x52D5;&#x4F5C;&#x78BA;&#x8A8D;&#x3068;&#x516C;&#x5E8F;&#x826F;&#x4FD7;&#x306B;&#x53CD;&#x3057;&#x306A;&#x3044;&#x304B;
  • 70. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox Marketplace&#x306B;&#x30ED;&#x30B0;&#x30A4;&#x30F3;&#x3059;&#x308B;
  • 71. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Submit an App&#x3092;&#x958B;&#x304D;&#x3001; &#x5BFE;&#x8C61;&#x3068;URL&#x3092;&#x5165;&#x529B;&#x3059;&#x308B;
  • 72. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x9593;&#x9055;&#x3063;&#x3066;&#x3044;&#x308B;&#x3068;&#x6559;&#x3048;&#x3066;&#x304F;&#x308C;&#x308B; 90x90&#x306E;&#x30A2;&#x30A4;&#x30B3;&#x30F3;&#x304C;&#x7121;&#x304B;&#x3063;&#x305F;&#x306E;&#x3067;&#x6012;&#x3089;&#x308C;&#x305F;
  • 73. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A2;&#x30D7;&#x30EA;&#x306E;&#x60C5;&#x5831;&#x3092;&#x8A18;&#x5165;&#x3059;&#x308B;
  • 74. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x30A2;&#x30D7;&#x30EA;&#x306E;&#x60C5;&#x5831;&#x3092;&#x8A18;&#x5165;&#x3059;&#x308B; &#x25CF; &#x5165;&#x529B;&#x9805;&#x76EE;(2013/10/24&#x6642;&#x70B9;) &#x25CF; Description &#x25CF; Categories &#x25CF; Privacy Policy &#x25CF; Homepage &#x25CF; Support Website &#x25CF; Support Email &#x25CF; Flash Support &#x25CF; Screenshot
  • 75. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x767B;&#x9332;&#x5B8C;&#x4E86;
  • 76. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x307E;&#x3060;&#x30EC;&#x30D3;&#x30E5;&#x30FC;&#x7D42;&#x308F;&#x3063;&#x3066;&#x307E;&#x305B;&#x3093;&#x3001;&#x3001;&#x3001; &#x3067;&#x3082;&#x72B6;&#x6CC1;&#x306F;&#x308F;&#x304B;&#x308B;
  • 77. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net Firefox&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x52D5;&#x304F;
  • 78. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net FirefoxOS&#x30B7;&#x30DF;&#x30E5;&#x30EC;&#x30FC;&#x30BF;&#x30FC;&#x3067;&#x52D5;&#x304F;
  • 79. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x5B9F;&#x6A5F;&#x3067;&#x52D5;&#x304F;
  • 80. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net HTML5&#x3067;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x4F5C;&#x308A;&#x307E;&#x3057;&#x3087;&#x3046;
  • 81. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x3053;&#x308C;&#x304B;&#x3089;&#x306F;Web&#x6280;&#x8853;&#x3060;
  • 82. Innovation EGG &#x7B2C;&#x4E00;&#x56DE; &#x767A;&#x8868;&#x8CC7;&#x6599; @cattaka_net &#x3054;&#x6E05;&#x8074;&#x3042;&#x308A;&#x304C;&#x3068;&#x3046;&#x3054;&#x3056;&#x3044;&#x307E;&#x3057;&#x305F; &#x4F4F;&#x53CB; &#x5B5D;&#x90CE; @cattaka_net

×