いま、Html5でできること
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,639
On Slideshare
3,466
From Embeds
173
Number of Embeds
4

Actions

Shares
Downloads
20
Comments
0
Likes
2

Embeds 173

http://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 169
http://www.slideshare.net 2
url_unknown 1
http://twitter.com 1

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
  • \n
  • \n
  • ディスレクシア(識字困難)の方のための情報提供。\n障がい者だけでなく、被災すると負傷などで一時的にそのような状態になることもある。\n避難や対策が必要になったときに、そのような方々が情報的不利にならないように。\n
  • \n
  • \n
  • 急いでいたのでマークアップはてきとう。\nheaderとかfooterとか、cssの指定がめんどかったからやめた。\n
  • controls 属性をつけるだけでプレイヤーができるっていうのは改めて便利と感じた\n
  • \n
  • jquery mobile の javascript と CSS を読み込む\njquery も必ず読み込むこと\n
  • jQuery Mobileのカスタムデータ属性を付加する\n
  • \n
  • toggle() でcssを切り替えてテキストを表示したり隠したりする\nこれでUI完成。\n
  • オープンソースの音声合成エンジン Open JTalk\n読み違えを修正しながら wav ファイルを作成した。\n200字以上入らないから、少しづつ繰り返し合成した\n
  • 音声合成に意外と時間がかかった。\nなのでたぶんUIの作成は4~50分くらいだったんじゃないか。\n
  • \n
  • \n
  • とにかく速攻で配信したい時にすぐできる。\n
  • alpha4 で WP7 に対応した。3/31\nカスタムデータ属性でUIを指定しているのがいい。なぜかは最後に説明する。\n
  • AndroidのWebkitはogg theoraでやってみたけど無理だった。\nつーかちゃんとオーディオファイル再生できる?\n
  • audioコントローラーがちっちゃすぎ、なぜかPC Safariよりもちっちゃい。\n\n
  • ちょっとダサいけど大きいのがいい。\nこれくらいじゃないと使いにくいよね。\n
  • \n
  • デモ。JavaScriptを一切使ってない。\n
  • \n
  • \n
  • 物資の供給や義援金に比べて、ITが被災地に直接貢献できることはすくない。\nしかし、これから避難や復興の段階になるとWEBの情報が重要になってくる。\nクリエイターの皆さんは、WEBコンテンツを作成する技術を持っている。その技術で何が出来るか?震災にどのように貢献できるかを考えてほしい。そのアイデアの中にはHTML5などでやると効率がよいケースがあるはず。\n震災対策に貢献しながら、新しい技術を習得していくよい機会であるともいえる。\n
  • \n

Transcript

  • 1. HTML5 2011.4.3 Untitled!!!!!!!!HTML5-WEST.jp
  • 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. • 1• HTML5 (AudioElement) + jQuery Mobile• Open JTalk•
  • 4. HTML
  • 5. AudioElement<audio controls src=”audios/a01.mp3”></audio>
  • 6. jQuery Mobile
  • 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. <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. / <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. $("#c01").toggle( function () { $("#t01").css("display","block"); $(this).text(" "); }, function () { $("#t01").css("display","none"); $(this).text(" "); });
  • 11. Audacity mp3
  • 12. <video></video> <audio></audio>
  • 13. jQuery Mobile• iPhone, Android, WinPhone, BlackBerry• non JavaScript, non CSS• HTML UI
  • 14. Android• Android Web• Opera for Android, Firefox for Android
  • 15. mobile safari ...
  • 16. Firefox for Android
  • 17. jQuery Mobile +CSS MediaQuery
  • 18. 100
  • 19. • jQuery Mobile HTML5• CSS3 PC• HTML5 + CSS3 + WebFw WEB
  • 20. Thanks.