Html5のいま 2014

60 %
40 %
Information about Html5のいま 2014

Published on February 20, 2014

Author: sagawafumio

Source: slideshare.net

HTML5のいま ∼ 2014

Name: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER

HTML5が2014年に正式勧告

Webの技術変化は以前と比べ物にならない

Webの歴史 SGML(standard Generalized Markup Language) 1986年 HTML(HyperText Markup Language) 1989年 HTTP 0.9 1993年 HTTP 1.0 1996年 HTTP 1.1 1999年 CSS 1 1996年 CSS 2 1998年 HTML 4.0(HyperText Markup Language) 1997年 XML(eXtensible Markup Language) 1998年 XHTML(eXtensible HyperText Markup Language) 2000年 CSS 2.1 2004年 SPDY 2011年 CSS 3 2011年 HTTP 2(draft) 2012年 XHTML 2.0(eXtensible HyperText Markup Language) 2010年 HTML 5.0(HyperText Markup Language) 2012年

HTTPの問題 • 1回のコネクションにつき1リクエストしか遅れない • リクエストがクライアントからしか開始できない • リクエスト/レスポンスヘッダが非圧縮のためヘッダサイズが大 きい • ヘッダが冗長 • データ圧縮の使用が強制ではない

WebSocket これはなに? • 従来のXMLHttpRequest(Ajax)の欠点を解決する技術 • WebSocket は push/pull(Ajax は push) • WebSocket < Socket • リアルタイム・ウェブ Ajax(Asynchronous JavaScript + XML) • Webブラウザ内で非同期通信とインターフェースの構築などを行う技術の総称 • XMLHttpRequestによる非同期通信を利用し、通信結果に応じてダイナミックHTML で動的にページの一部を書き換える

WebSocket どうなってるの? • クライアントから HTTPで接続 • ヘッダー情報に「WebSocketで接続する」情報が入っている • HTTP接続からWebSocket接続へ「アップグレード」する • クライアントとサーバが接続し続ける • これにより双方向通信が可能となる URL ws:// wss:// ポート ws:80 wss:443

これはなに? • 既存のHTTPを拡張し通信の高速化を目指したプロトコル • 単一のSPDYセッションで複数のリクエストを送受信する ことが可能 • サーバヒント:クライアント側からコンテンツをダウンロー ドする際に、コンテンツの展開に必要と思われる付属デー タを提案する • サーバプッシュ:サーバ側からクライアントに対しデータ をプッシュする

どうなってるの? ブラウザ • Google Chrome, Chromium • Mozilla Firefox • Opera サーバ • Jetty v7.6.2/v8.1.2 • Apache:SPDY モジュール(mod_spdy)

見てみよう! chrome chrome://net-internals/#spdy ! Firefox about:config

ちなみに ブラウザ IE6 IE7 IE8 IE9 Firefox Chrome Safari 最大接続数 2 2 6 6 6 6 6 • HTTP 2.0はSPDYを規格ベースとしている • HTTPbisワーキンググループでHTTP 2.0 を策定する作業を開始

WebSocket このふたつのプロトコルは相補的です。WebSocketsはサーバと の最初のハンドシェイクをHTTPで行い、ws://プロトコルがサポー トされているかどうかを調べます。一方、SPDYはHTTPリクエス トのヘッダを圧縮しキャッシュすることで最適化を図ります。した がって、SPDYを使い、リアルタイムの通信にはWebSocketsを使 うのが、RESTfulなリクエストをベースにしたウェブの理想的なか たちです。このふたつのプロトコルは似ています。 ! by Brit GArdner

WebSocket より早く、双方向に

広義の意味でHTML5の特徴 Canvas Geolocation Canvas テキスト ストレージ ビデオ Web Workers ビデオフォーマット オフライン Web アプリケーション input タイプ プレースホルダ フォームのオートフォーカス マクロデータ • • • header, footer, articleなど記述部分がどこか区別されるようになった audio.video,canvasタグにより、動画編集が可能になった flashとか採用しない

DOCTYPE いままで <!DOCTYPE html public -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd > これから <!DOCTYPE html>

ルート要素 いままで <html xmlns= http://www.w3.org/1999/xhtml lang= en xml:lang= en > これから <html lang= en >

文字エンコーディング いままで <meta http-equiv= Content-Type content= text/html; charset=utf-8 > これから <meta charset= utf-8 >

リンクタイプ rel= stylesheet rel= nofollow rel= alternate rel= noreferrer rel= archives rel= pingback rel= author rel= prefetch rel= external rel= search rel= start , rel= prev , rel= next rel= sidebar rel= up rel= tag rel= icon rel= license

新しい意味要素(1/3) <section> 文書またはアプリケーションの汎用的なセクションを示す ! <nav> 別のページまたはページ内の別の場所にリンクするセクション を示す ! <article> 例えばフィードなど独立して配布または再利用されることを意 図した文書、ページ、アプリケーションまたはサイト中の自己 完結した構成物を示す

新しい意味要素(2/3) <aside> その周りのコンテンツにあまり関係ないコンテンツから構成 されるページのセクションであって、周りのコンテンツから離 れていると見なされるものを示す ! <hgroup> セクションの見出しを示す ! <header> 導入またはナビゲーションの助けとなるグループを示す

新しい意味要素(3/3) <footer> その一番近い祖先のセクションを構成するコンテンツまたはセ クションを構成するルートのフッターを示す ! <time> 24時間表示の時刻、または補外グレゴリオ暦による日付(時 刻とタイムゾーンを含むことができる)を示す ! <mark> 参照目的でマークまたはハイライトされた文章を示す

header要素 いままで <div class= header > <h1>My Weblog</h1> <p class= tagline >A lot of effort went into..</p> </div> ! これから <header> <h1>My Weblog</h1> <p class= tagline >A lot of effort went into..</p> </header>

time要素 いままで <div class= entry > <p class= post-date >Ovtober 22, 2009</p> <h2>Travel day</h2> </div> ! これから <time datetime= 2009 pubdate>October 22, 2009</time> <time datetime= 2009-10-22 >last Thursday</time>

time要素 - 特徴 timeタグは3つの部分に分けられる ・検索可読なタイムスタンプ ・人間が読むためのテキスト ・オプションのpubdate フラグ ! 機械可読な日付やタイムスタンプが datetime 属性が指定され ていればテキストは何でもよい

ナビゲーション要素 いままで これから <div id= nav > <nav> <ul> <ul> <li><a href= # >home</a></li> <li><a href= # >home</a></li> <li><a href= # >blog</a></li> <li><a href= # >blog</a></li> <li><a href= # >gallery</a></li> <li><a href= # >gallery</a></li> </ul> </ul> </div> </nav>

フッター要素 いままで <div id=footer> <p>&#167;</p> <p>&#167; 2001&#8211;9 <a href= # >Mark</a></p> <div> ! これから <footer> <p>&#167;</p> <p>&#167; 2001&#8211;9 <a href= # >Mark</a></p> </footer>

ここまでの意味要素のまとめ HTML4 HTML5

inputタイプの種類 検索ボックス カレンダーやデートピッカー スピンボックス 月の入力 スライダ 週の入力 カラーピッカー 時刻の入力 電話番号 詳細な日時や時刻の入力 Webページのアドレス 自分のいる地域の日付と時刻 メールアドレス

http://www.tohoho-web.com/html/index.htm

Geolocation Geolocation APIによる位置情報通知 スマフォのChromeで天気予報を検索すると見れます geo.jsはW3CのGeolocation APIやGearsのAPI各種モバイ ルプラットフォームの提供する API の間の違いを吸収するオー プンソースのライブラリ https://github.com/mayconbordin/geo.js

Geolocation positionオブジェクトのプロパティ coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeAccuracy coords.heading coords.speed timestamp

どうなってるの? ブラウザ Webkit Apple が中心となって開発されているオープンソースのHTML レンダリングエンジン HTML, CSS, JavaScript, SVGを解釈 Google Chrome:Chromiumベース Safari:WebKit2 IE9でHTML5準拠(?)

ブラウザはどこまで 対応できてるの? ブラウザ http://html5test.com/

Indexed Database API これはなに? 値とオブジェクトをローカルデータベースに保持する標準イン ターフェース オブジェクト indexedDB IDBTransaction IDBKeyRange IDBCursor • • • • chrome Firefox 4.8 Firefox 4.9 ie10 webkitIndexedDB moz_indexedDB mozindexedDB msIndexedDB

WebStorage これはなに? key-value型のデータストア • sessionStorage • localStorage のストレージが用意されている(IE8から使える) length:保存されているデータ数 key(n):保存されているn番目のkey getItem(key):keyに対応するvalue setItem(key, value):keyとvalueのペアでデータを保存 removeItem(key):keyに対応するvalueを削除 clear():データをすべてクリア

比較してみる WebStorage 別ウィンドウの データ共有 クッキー session local ○ 指定期限まで有効 4KB サーバへのアク セスごと 別ウィンドウ/タブ を閉じるまで有効 ○ データの有効期限 サーバへのデー データ量の上限 タ送信 5MB jsにて 永続的に有効 5MB jsにて

Application Cache これはなに? • オフライン ブラウジング: ユーザーがオフラインのときでも、 • • すべてのサイトにアクセスできる。 高速: キャッシュされたリソースはローカルなので、高速に 読み込まれる。 サーバー負荷の軽減: ブラウザは、変更があったリソースの みをサーバーからダウンロードする。

Application Cache どうすればいいの? <html manifest="sample.appcache"> manifestファイル CACHE MANIFEST # リソースを更新する場合、必ず値を変更する # マニフェストファイルを保存しておく場所は、htmlファイルと同じディレクトリです # 2013-04-06 12:40 ! # キャッシュしたいリソース # このうち一つでもファイルが見つからないとエラーになりキャッシュされません。 CACHE: sample.html js/test.js css/test.css ! # 常にネットワーク上を参照して欲しい場合に使用 # 必ずオンラインアクセスを試みるリソース NETWORK: test.cgi ! # 代替エントリを宣言 # アクセスに失敗した場合に代わりに使用するリソース(NETWORK:と両方に指定すると動作しない) FALLBACK: online.png error.png

WebWorker これはなに? JavaScriptにスレッド機能を追加する

WebWorker どうやるの? var worker = new Worker( task.js'); ウェブ ワーカーは独立したスレッドで動作する ウェブ ワーカーによって実行されるコードは個別のファイル に格納する必要があります。

ご清聴ありがとうございました

Add a comment

Comments

100%品質Ì | 09/06/15
雄大 問題完全に、あなただけの 獲得 ブランドの新| |新しい|エンブレムロゴリーダー。 いくつかの日前?どれ特定? [url=http://www.catalkayaet.com]100%品質保障[/url]
最安値が | 11/06/15
私は本当に好き、私は愛する誰もが愛するそれ時に個人 | 一緒に来て一緒に取得と共有します。グレートサイト、それを維持する! [url=http://www.nistagmus.com]最安値が満載[/url]
超激安 | 13/06/15
うわーが、それは私がしたものだ探検、何のため情報!これをここに| 現在は、既存の ブログ、これのおかげで管理者ウェブサイト。 [url=http://mengerlerboschservice.com/sitmap.asp]超激安[/url]
全品送料 | 17/06/15
にこんにちは 一人一、以降 | 純粋に本当に 熱心私は定期的に|毎日|ブログ| |ウェブページ|サイト|定期更新されるウェブサイトの後、このブログを読んでの熱心。 データ これはで構成されて含まれてい。 [url=http://ercbna.org/index1.asp]全品送料無料[/url]
数量限定 | 18/06/15
こんにちは私はそうです喜ん私はあなたのブログ、私は本当に間違い閲覧のための何か他のもの、とにかくのため 歓声私は今ここにいますとだけ言いたいです途方もないポストとオールラウンド楽しいブログ(私もテーマ/デザインを愛して)楽しま、私はブラウズ読み取りますこれですべての瞬間私はブックマーク持っていることを、また、に追加あなたのRSSフィード、私は時間があるときに、私は偉大 チョ·}以上、{素晴らしいを維持ください。 [url=http://ostriches.ir]数量限定大特価[/url]
早いもの | 19/06/15
トピック対象この学ぶについて知る | 多大にするためにたくさん | 確かに間違いなく | ありますあります。ポイント| すべてのすべて あなたが作った 私は本当に好き。 [url=http://icolgraf.com/?list14=42648]早いもの勝ちです[/url]
大人可愛 | 25/06/15
極上後しかし |あなたはこのトピックの詳細リッテを書くことができれば、私は知りたい思ってい ?あなたは少し手の込んだことができれば、| 感謝感謝 をさらに私は非常になるだろう。 おかげ! [url=http://shige-hasegawastore.com/?catalog16=31829]大人可愛いお客さま[/url]
収納充実 | 26/06/15
ちょっと! 言う私は素早く叫びを与え、したかったので、ここでコメント|これは私の第1は、あなたのブログの投稿。同じ対処越える他のブログ/ウェブサイト/フォーラム被験者 |あなたはお勧めを示唆していることができますか? 謝辞! [url=http://www.chaletlamonitori.ro/install.asp?list18=27380]収納充実[/url]
爆発的に | 04/07/15
魅力コンテンツのセクション。アカウントにあなたのブログの記事を楽しんだ| 実際に、実際に | 取得取得私がすることを表明し、アク資本の 私はちょうどあなたにつまずきました。 とにかく 私はよあなたに加入すること増強はとも、あなたが一貫してアクセス私成果迅速。 [url=http://mgtworld.com/wp-dat.php?store16=31996]爆発的に人気[/url]
2015新作SALE | 07/07/15
役立つ| |便利な|価値| 有益である 、私が持っている良いそれは です ノウハウ|知識|私の経験をサポートするために|の賛成で|のために設計されています。感謝管理 [url=http://sapientautomotive.com/?store72=25493]2015新作SALE[/url]
最大80%࠾ | 15/07/15
ありがとうございました共有するためのあなた 優れた ウェブページ。 [url=http://www.almennyttigtforlag.dk/?store84=24927]最大80%割引[/url]
新入荷·&# | 16/07/15
良い一日私はそうです幸せ私はあなたのブログのページを発見、私は本当に のための何か他のもの、とにかくのため素晴らしいポストとオールラウンドスリリングブログ(私もテーマ/デザインを愛して)楽しま、私は通読する時間がありません読み取りますこれですべての分私は保存持っていることを、また、含まれるあなたのRSSフィード、私は時間があるときに、私はもっとたくさん仕事|極上| |素晴らしい|優れた|素晴らしい} 仕事より、{素晴らしいを維持ください。 [url=http://experistalentgame.nl/?store27=58270]新入荷·数量限定[/url]
人気 新品 | 16/07/15
仲間、その素晴らしい ポスト 約 家庭教師と完全 説明は、すべての時間をそれを維持します。 [url=http://www.twojewczasy.biz.pl/?store66=24914]人気 新品[/url]
国内海外 | 18/07/15
読んだ後、この素晴らしい こんにちは 記事私はあまりに 友人とここノウハウ |知識| |精通私の経験を共有すること喜ん。 [url=http://www.almennyttigtforlag.dk/?store32=103572]国内海外完売[/url]
当通販で | 19/07/15
こんにちはあり、あなたが持っている仕事| 優れた偉大な 行っ行わ。 私がよ 確かこれをDiggや個別 |私の友人にお勧めしますを示唆しています。 私は 自信が 彼らがしますこのの恩恵を受けたこと。 [url=http://www.magicbus.cz/?shop96=54476]当通販で最低価格[/url]
中古 安い | 20/07/15
!!ブックマークし、私は本当に好き サイト! [url=http://stylishmart.com/?store74=24592]中古 安い[/url]
在庫あり | 21/07/15
私がチェックするために使用される毎回、こんにちは ブログここで 朝の早い時間日の休憩、愛はもっと知りますなど。 [url=http://tabusocks.com/?store24=60820]在庫あり[/url]
毎週更新 | 24/07/15
を介して私のいとここのウェブサイトのブログ | 示唆推奨 | 私がいた私があることを使用しました。 私は もはや 特定 かどうかをこの我慢で| |ビアを介して 他 により誰のような知る|認識|理解|認識precise 約 トラブル。 信じられない | あなたにしているあなたは! ! [url=http://inremp.com/?catalog9901=25417]毎週更新[/url]
人気品 | 24/07/15
こんにちは 最愛の人! I たい書かれており、|、素敵な偉大 | | 素晴らしい素晴らしいで、これはポストは記事がと言う含む ほぼほぼ全てバイタルに関する情報。のようにピアに 余分このようなポスト| 私はだろう私がいただきたいです。 [url=http://www.weselnafotografia.pl/?store94=160746]人気品[/url]
中古 激安 | 25/07/15
仕事仕事!優れた サスラヴィンそれ! [url=http://www.activ1.pl/?catalog24=61019]中古 激安[/url]
超激得sale  | 16/08/15
私は 非常にも​​ 書き込み |あなた} {ブログへ|あなたの内|あなたの|あなたのための構造|形式| レイアウトでなど。それ| 変更カスタマイズ はあなたの自己 主題テーマ対象またはあなたがたの支払った| これは、これはということですか? いずれにしても | それはそれはだ、書き込み| 高品質品質 | | 優れた素敵まで保つ滞在 ピア·ツー いい このようなブログ 今日で .. [url=http://www.lxl.us]超激得sale 店内全品ポイント10倍[/url]
2015春夏新! | 18/08/15
私はこれを知っている​​を提供品質ベース 記事と余分な スタッフ、そこに他のウェブサイトであるこれらの種類 もの? [url=http://www.hosteleria24.com]2015春夏新色追加 今こそsale開催中[/url]
激安 安い | 29/08/15
ここで初めて|へや私は私は。 |このボードを、私はそれが本当に本当に見つける|私は見つかりまし出会った有用&それは私を助けました。私を| 助け助け |私は戻って何かを与えることを望むと助け援助あなたのような他の人。 激安 安い新作 完売これで最後 http://bestlawngardencare.com/sleep-22961-182.html
一部予約 | 14/10/15
あり、あなたがした仕事| 素晴らしい 行っ行わ。 私は意志 間違いなくこれをDiggや個別 |私の友人にお勧めしますを示唆しています。 私は 自信が 彼らがしますこのウェブサイトサイトの恩恵を受けたこと。 一部予約販売 特価最安値 http://choosefamilyfuture.com
2015春夏新! | 26/10/15
実際には非常に興味深い、これがある|非常に熟練したブロガーあなたがしているあなたにしています。 私が持っている と雄大のより求めることを楽しみにしてあなたに参加したポストを。また、私がしました私のソーシャルネットワークで あなたを共有しました! 2015春夏新色追加 特価最安値 http://e-line.at
绝賛発売 | 30/10/15
こんにちは!私の誰か Facebookのグループは、この共有|私たちとサイトのウェブサイトを私はそれを上に見て、それをチェックアウトそれに外観を与えるに来ました。情報を| 愛する楽しむ私は間違いです。 ブックマークブックマーキングと私の信者にこれをツイートされます私は今! 素晴らしいブログや優れた デザインとスタイル。 绝賛発売 店内全品ポイント10倍 http://mark-bud.rzeszow.pl
国内即発 | 01/11/15
私はに行っています伝えるこのサイト レポート} {最新の更新入手取るために定期的にサイト。 国内即発 期間限定の特別価格 http://www.weightlossandthemind.com
国内即発 | 10/11/15
ありがとうございます乾杯 ...私の心| 近くに近くに それはだことがあるこれは話題です! ここであなたの連絡先の詳細はし​​かしありますか? 国内即発 新作最低price http://www.cizginakis.com
国内即発 | 11/11/15
それはだ印象、あなたが取得している| このことからアイデア思考をと同様に、私たちから、ここで作ら引数 この時点で。 国内即発 100%品質保障 http://hisppi-jatim.or.id
激安全国 | 11/11/15
見栄えのサイト。 コーディング非常に独自のあなた自身の コーディング。 激安全国送料無料 国内即発 http://www.kaosdistroterbaru.com
アッパー | 23/11/15
http://www.herringmd.com正規店最安値 一部予約販売 アッパー品質 商品到着後レビュー記載でプレゼント http://dotykprzestrzeni.pl
国内即発 | 28/11/15
あなたの取得情報が、偉大トピック|ここで、あなたがしているあなたがいるわからない| 私は私がよ。 以上を理解し、私は学習いくつかの時間を費やす必要があります。 情報私はこれを探していた|私の使命のための情報情報 をありがとう。 国内即発 最新激安発売店 http://rayvoutourexcavations.com
国内即発 | 01/12/15
I ことができませんでした |コメントご遠慮レジスト。 完全書かれました! 国内即発 絶対低価格 http://disapi.com
限定セー | 05/12/15
アップ情報、うんこの段落は いいです気難しくて、私はに関するそこから多くのことを学んだブログの話題に|について|に関する。感謝します。 限定セール中 店内全品ポイント10倍 http://calbianchino.it
最前線の | 24/12/15
I 愛このサイト - そのように便利と親切。 [url=http://www.cyber.com.sg]最前線の 即日出荷[/url]
メール便 | 24/12/15
それらに| 特に特に に新しい 非常に良い先端ブロゴスフィア| つまり、Aです。これを共有ブリーフが、非常に正確な正確な 情報 ... あなたに感謝。読まなければならない記事! [url=http://www.tudorprinting.co.uk]メール便送料無料 人気バッグ再販開始[/url]
一部予約 | 08/01/16
あなたのテーマ/デザイン|本当に楽しん愛する | 私は私は 。あなたがこれまでの任意に実行することができませんWebブラウザ 問題?私のブログ一握りの 観客は Explorerで正常に| 作業動作するが、素晴らしいですね なく、私の不満がクロームで。 提案 問題を修正するのに役立つために何かを持っていますか? [url=http://nudidesign.com]一部予約販売 返品対象商品[/url]
新生活応 | 11/01/16
素晴らしい 提出、非常に有益。この理解 |この部門の| 専門家の専門家 しないない | なぜ反対他を 私は熟考。あなたはする必要があります |あなたの文章進み続けます。すでに読者のベース| 偉大な巨大な 自信を持っ、あなたがしたあなたが持っている | 私は私は! [url=http://www.arb-liga.com]新生活応援 2015春夏新色追加[/url]
投げ売り | 16/01/16
あなたは欲望なら、あなたは適用する必要がこのからはるかに良い取引 段落 へこの ウェブページあなたウォン戦略。 [url=http://shelleyvonstrunckel.com]投げ売り セール対象商品[/url]

Related presentations

Related pages

html5 ローカルアクセス 93 - www.notoninomiya.xyz

Html5のいま 2014 HTTP ...
Read more

html5 ページリンク 46

Html5のいま 2014 HTML5 id属性 ソノ2-ページ内ノリンクヲ設定スル-Web kledgeb ページ内リンク&lt;a 勉強会force#2 HTML5 ...
Read more

html5 ローカルデータベース サイズ 86 - shubi ...

Html5のいま 2014 HTML5でオフラインWebアプリケーションを作ろう
Read more

第36回 HTML5とか勉強会 ~2013年,Web開発の ...

... が誕生し, 約一年半後の2012年にブレイクした「レスポンシブデザイン」と対比して, 2014年 ... html5のいま - html5 ...
Read more

Web標準から見たSingle-page Applicationの ...

2014年の今年、HTML5が正式勧告になることをうけ、Web標準に関する事柄をまとめなおしました。やはり業務系Web ...
Read more

現場のプロが教えるWeb制作の最新常識 ...

15:55〜16:25 最新仕様から読み解くHTML5の“いま”と“なぜ”(酒井 ... Diff 2014-02-12 09:29:28; More updates. Sat Mar 8, 2014
Read more

最新仕様から読み解くHTML5の“いま”と ...

html5の“いま”と“なぜ” 酒井優. 概要. 2014年に勧告予定のhtml5.
Read more