いま、Html5でできること

  • 3,006 views
Uploaded on

 

More in: Technology
  • 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,006
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
20
Comments
0
Likes
2

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
  • \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.