Html5

1,928 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,928
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. HTML5<br />10TH勉強会<br />2010/1/25<br />
  2. 2. HTML5とは?<br />HTMLの5回目に当たる大幅な改良版<br />HTMLと5の間にスペースを含まない<br />HTML5はWHATWGによって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト(草案)が発表された。<br />2012年3月頃に正式に勧告する予定である<br />Wikipedia 「HTML5」(2011年1月5日 (水) 00:50)『ウィキペディア日本語版』<br />http://ja.wikipedia.org/wiki/HTML5<br />2<br />
  3. 3. 特徴・概要<br />HTML5 はプロプライエタリなプラグインとして、提供されているリッチインターネットアプリケーション(JavaFX、Adobe Flash、Silverlight 等)を置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。<br />2008年以降に発表されたウェブブラウザの多くは HTML5 に段階的に対応している。<br />Google Chrome 3.0 以降、Safari 3.1 以降、Firefox 3.5 以降、Opera 10.5、Internet Explorer 9 など<br />Wikipedia 「HTML5」(2011年1月5日 (水) 00:50)『ウィキペディア日本語版』<br />http://ja.wikipedia.org/wiki/HTML5<br />3<br />
  4. 4. やってみようHTML5 基本タグ編<br />VIDEO,CANVAS, FORM etc…<br />4<br />
  5. 5. VIDEO要素<br />VIDEO要素では動画データをHTMLから直接扱うことができる。<br />JavaScriptと組み合わせることで、再生をコントロールできる。<br /> <video id="video" controls src="Scissors_soccer.theora.ogv"><br />Controls属性はブラウザのコントロールボタンが表示される。<br />Safariはogvファイルを再生できない<br />5<br />
  6. 6. VIDEOのデモをご覧ください<br />6<br />
  7. 7. CANVAS要素<br />CANVAS要素ではJavaScrpitを使って図形や画像の描画ができる。<br />ちなみにIE以外のブラウザでは、すでに動作する。<br />回転や変形、透過などはJavaScriptで制御<br /> <canvas id="canvas" width=“800" height=“600"><br />7<br />
  8. 8. CANVASのデモをご覧ください<br />8<br />
  9. 9. FORM要素<br />Web Forms2の仕様を取り込み、大幅パワーアップ<br />placeholder<br />未入力フィールドに表示される薄い文字<br /> <input type="text" placeholder=“Please input"><br />autofocus<br />入力フィールドに自動フォーカス。JavaScriptレス<br /> <input type="text" autofocus><br />autocomplete<br />テキストオートコンプリート。リストをdatalistタグに<br /> <input type="text" name="completelist" autocomplete="on" autofocus list="completelist"><br /> <datalist id="completelist" stlye="display: none;"><br /> <option>masa<br /> <option>masanori<br /> <option>satou<br /> </datalist><br />9<br />
  10. 10. FORM要素<br />他にもいろいろパワーアップ<br />10<br />※1はOpera10のみ(2010/01現在)<br />
  11. 11. FORM要素で入力値検証<br />HTMLで入力値検証ができるように<br />11<br /><input name="text" type="text" required pattern="^w.*$"><br />
  12. 12. FORMのデモをご覧ください<br />12<br />
  13. 13. やってみようHTML5 Webアプリ編<br />Web Works,Web Strage/Web Database, Web Sockets etc…<br />13<br />
  14. 14. Web Works<br />Web WorksはWebアプリケーションにおいてバックグラウンド処理を実現できる。<br />これまでのHTMLとJavaScriptで作成したプログラムはUIスレッドで実行されるため、JavaScriptの処理時間に引きずられてHTMLのレンダリング速度も劣化する。<br />Web Worksでは、バックグラウンドスレッドを生成できるためHTMLのレンダリング速度が劣化しない。<br />利用方法<br />var worker = new Worker(“hoge.js”); // 生成<br />worker.onmessage = function(event) {}; // コールバック<br />worker.postMessage(message); // メッセージ送信<br />14<br />
  15. 15. Web Worksのデモをご覧くださいFirefox Only…<br />15<br />
  16. 16. Web Storage/Web Database<br />Web Storage/Web Databaseはクライアントのデータ永続化機構。オフラインWebアプリケーションを作成するときに使える。<br />Web Strageはキーバリューストア、Web DatabaseはRDBS。<br />Web StrageにはsessionStrageとlocalStrageの2種類がある。<br />使い方は普通のKeyValueStoreと同じ感じ<br />Web DatabaseではSQLが利用可能で、トランザクションもある<br />16<br />
  17. 17. Geolocation API<br />Geolocation APIは位置情報が取得できる。<br />void getCurrentPosition(onSuccess, onError, options<br />現在位置を取得する<br />intwatchPosition(onSuccess, onError, options)<br />位置情報を継続して監視する<br />void clearWatch(watchId)<br />位置情報の監視をやめる。引数はwatchPosition()を呼び出した際に得られる戻り値<br />スマートフォンで使うのか<br />17<br />ws.close();<br />
  18. 18. おまけ HTML5で作られた美しいサイト<br />18<br />
  19. 19. 参考文献<br />詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編<br />http://journal.mycom.co.jp/special/2009/html5-2/menu.html<br />19<br />ws.close();<br />

×