いま、Html5でできること

3,559 views

Published on

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

No Downloads
Views
Total views
3,559
On SlideShare
0
From Embeds
0
Number of Embeds
234
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

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
  • いま、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.

    ×