• Like
Html5
Upcoming SlideShare
Loading in...5
×
  • 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
1,624
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

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