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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5のいま 2014

  • 2,783 views
Published

 

  • 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
2,783
On SlideShare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
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>&#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>
  • 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. ご清聴ありがとうございました