Your SlideShare is downloading. ×
0
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Html5のいま 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5のいま 2014

3,223

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,223
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
17
Comments
0
Likes
6
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のいま ∼ 2014
  • 2. Name: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER
  • 3. HTML5が2014年に正式勧告
  • 4. Webの技術変化は以前と比べ物にならない
  • 5. 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年
  • 6. HTTPの問題 • 1回のコネクションにつき1リクエストしか遅れない • リクエストがクライアントからしか開始できない • リクエスト/レスポンスヘッダが非圧縮のためヘッダサイズが大 きい • ヘッダが冗長 • データ圧縮の使用が強制ではない
  • 7. WebSocket これはなに? • 従来のXMLHttpRequest(Ajax)の欠点を解決する技術 • WebSocket は push/pull(Ajax は push) • WebSocket < Socket • リアルタイム・ウェブ Ajax(Asynchronous JavaScript + XML) • Webブラウザ内で非同期通信とインターフェースの構築などを行う技術の総称 • XMLHttpRequestによる非同期通信を利用し、通信結果に応じてダイナミックHTML で動的にページの一部を書き換える
  • 8. WebSocket どうなってるの? • クライアントから HTTPで接続 • ヘッダー情報に「WebSocketで接続する」情報が入っている • HTTP接続からWebSocket接続へ「アップグレード」する • クライアントとサーバが接続し続ける • これにより双方向通信が可能となる URL ws:// wss:// ポート ws:80 wss:443
  • 9. これはなに? • 既存のHTTPを拡張し通信の高速化を目指したプロトコル • 単一のSPDYセッションで複数のリクエストを送受信する ことが可能 • サーバヒント:クライアント側からコンテンツをダウンロー ドする際に、コンテンツの展開に必要と思われる付属デー タを提案する • サーバプッシュ:サーバ側からクライアントに対しデータ をプッシュする
  • 10. どうなってるの? ブラウザ • Google Chrome, Chromium • Mozilla Firefox • Opera サーバ • Jetty v7.6.2/v8.1.2 • Apache:SPDY モジュール(mod_spdy)
  • 11. 見てみよう! chrome chrome://net-internals/#spdy ! Firefox about:config
  • 12. ちなみに ブラウザ IE6 IE7 IE8 IE9 Firefox Chrome Safari 最大接続数 2 2 6 6 6 6 6 • HTTP 2.0はSPDYを規格ベースとしている • HTTPbisワーキンググループでHTTP 2.0 を策定する作業を開始
  • 13. WebSocket このふたつのプロトコルは相補的です。WebSocketsはサーバと の最初のハンドシェイクをHTTPで行い、ws://プロトコルがサポー トされているかどうかを調べます。一方、SPDYはHTTPリクエス トのヘッダを圧縮しキャッシュすることで最適化を図ります。した がって、SPDYを使い、リアルタイムの通信にはWebSocketsを使 うのが、RESTfulなリクエストをベースにしたウェブの理想的なか たちです。このふたつのプロトコルは似ています。 ! by Brit GArdner
  • 14. WebSocket より早く、双方向に
  • 15. 広義の意味でHTML5の特徴 Canvas Geolocation Canvas テキスト ストレージ ビデオ Web Workers ビデオフォーマット オフライン Web アプリケーション input タイプ プレースホルダ フォームのオートフォーカス マクロデータ • • • header, footer, articleなど記述部分がどこか区別されるようになった audio.video,canvasタグにより、動画編集が可能になった flashとか採用しない
  • 16. DOCTYPE いままで <!DOCTYPE html public -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd > これから <!DOCTYPE html>
  • 17. ルート要素 いままで <html xmlns= http://www.w3.org/1999/xhtml lang= en xml:lang= en > これから <html lang= en >
  • 18. 文字エンコーディング いままで <meta http-equiv= Content-Type content= text/html; charset=utf-8 > これから <meta charset= utf-8 >
  • 19. リンクタイプ 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
  • 20. 新しい意味要素(1/3) <section> 文書またはアプリケーションの汎用的なセクションを示す ! <nav> 別のページまたはページ内の別の場所にリンクするセクション を示す ! <article> 例えばフィードなど独立して配布または再利用されることを意 図した文書、ページ、アプリケーションまたはサイト中の自己 完結した構成物を示す
  • 21. 新しい意味要素(2/3) <aside> その周りのコンテンツにあまり関係ないコンテンツから構成 されるページのセクションであって、周りのコンテンツから離 れていると見なされるものを示す ! <hgroup> セクションの見出しを示す ! <header> 導入またはナビゲーションの助けとなるグループを示す
  • 22. 新しい意味要素(3/3) <footer> その一番近い祖先のセクションを構成するコンテンツまたはセ クションを構成するルートのフッターを示す ! <time> 24時間表示の時刻、または補外グレゴリオ暦による日付(時 刻とタイムゾーンを含むことができる)を示す ! <mark> 参照目的でマークまたはハイライトされた文章を示す
  • 23. 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>
  • 24. 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>
  • 25. time要素 - 特徴 timeタグは3つの部分に分けられる ・検索可読なタイムスタンプ ・人間が読むためのテキスト ・オプションのpubdate フラグ ! 機械可読な日付やタイムスタンプが datetime 属性が指定され ていればテキストは何でもよい
  • 26. ナビゲーション要素 いままで これから <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>
  • 27. フッター要素 いままで <div id=footer> <p>§</p> <p>§ 2001–9 <a href= # >Mark</a></p> <div> ! これから <footer> <p>§</p> <p>§ 2001–9 <a href= # >Mark</a></p> </footer>
  • 28. ここまでの意味要素のまとめ HTML4 HTML5
  • 29. inputタイプの種類 検索ボックス カレンダーやデートピッカー スピンボックス 月の入力 スライダ 週の入力 カラーピッカー 時刻の入力 電話番号 詳細な日時や時刻の入力 Webページのアドレス 自分のいる地域の日付と時刻 メールアドレス
  • 30. http://www.tohoho-web.com/html/index.htm
  • 31. Geolocation Geolocation APIによる位置情報通知 スマフォのChromeで天気予報を検索すると見れます geo.jsはW3CのGeolocation APIやGearsのAPI各種モバイ ルプラットフォームの提供する API の間の違いを吸収するオー プンソースのライブラリ https://github.com/mayconbordin/geo.js
  • 32. Geolocation positionオブジェクトのプロパティ coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeAccuracy coords.heading coords.speed timestamp
  • 33. どうなってるの? ブラウザ Webkit Apple が中心となって開発されているオープンソースのHTML レンダリングエンジン HTML, CSS, JavaScript, SVGを解釈 Google Chrome:Chromiumベース Safari:WebKit2 IE9でHTML5準拠(?)
  • 34. ブラウザはどこまで 対応できてるの? ブラウザ http://html5test.com/
  • 35. Indexed Database API これはなに? 値とオブジェクトをローカルデータベースに保持する標準イン ターフェース オブジェクト indexedDB IDBTransaction IDBKeyRange IDBCursor • • • • chrome Firefox 4.8 Firefox 4.9 ie10 webkitIndexedDB moz_indexedDB mozindexedDB msIndexedDB
  • 36. 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():データをすべてクリア
  • 37. 比較してみる WebStorage 別ウィンドウの データ共有 クッキー session local ○ 指定期限まで有効 4KB サーバへのアク セスごと 別ウィンドウ/タブ を閉じるまで有効 ○ データの有効期限 サーバへのデー データ量の上限 タ送信 5MB jsにて 永続的に有効 5MB jsにて
  • 38. Application Cache これはなに? • オフライン ブラウジング: ユーザーがオフラインのときでも、 • • すべてのサイトにアクセスできる。 高速: キャッシュされたリソースはローカルなので、高速に 読み込まれる。 サーバー負荷の軽減: ブラウザは、変更があったリソースの みをサーバーからダウンロードする。
  • 39. 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
  • 40. WebWorker これはなに? JavaScriptにスレッド機能を追加する
  • 41. WebWorker どうやるの? var worker = new Worker( task.js'); ウェブ ワーカーは独立したスレッドで動作する ウェブ ワーカーによって実行されるコードは個別のファイル に格納する必要があります。
  • 42. ご清聴ありがとうございました

×