html5の冒険 - 株式会社ワンパク(1pac....
TRANSCRIPT
![Page 1: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/1.jpg)
HTML5の冒険
×
31 Jul.2012
![Page 2: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/2.jpg)
HTML5とは
Webコンテンツ作成に使う基本言語の第5版でありコンテンツを利用する際の
エクスペリエンス向上を目的として制定
2014年までの正式勧告を目指し策定がおこなわれている最中である
![Page 3: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/3.jpg)
HTML5による変化
![Page 4: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/4.jpg)
何がかわるのか
API(Application Program Interface)
Markup各種APIの標準化と追加
新たなタグの追加などによる情報構造の強化
HTML5でかわるのは大別して2つ
![Page 5: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/5.jpg)
どうかわるのか
API、Markupこの2つの強化によりHTML5は
1. よりインタラクティブに2. よりセマンティックな文書構造に
Webサイト内での情報伝達としての機能だけでなくブラウザ以外での利用や情報のより有効な活用が可能になり
様々なシーンで活用されるようになります
そして
![Page 6: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/6.jpg)
HTML5の特徴
![Page 7: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/7.jpg)
HTML5 Logo
2011年2月、W3Cから発表された「 HTML5のロゴ」で
その特徴が表現されています
http://www.w3.org/html/logo/
![Page 8: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/8.jpg)
様々なタグの追加によりプログラムにとってもユーザにとってもより有効なデータ駆動型のウェブを実現
SEMANTICS
ロゴがあらわすHTML5(1)
![Page 9: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/9.jpg)
ロゴがあらわすHTML5(2)
インターネットに接続していない状態においてもウェブアプリケーションを素早く起動し
稼働することが可能となる
OFFLINE & STORAGE
![Page 10: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/10.jpg)
ロゴがあらわすHTML5(3)
ローカルデータ(オーディオ、ビデオ入力、マイク、カメラ、連絡先、予定など)
の利用が可能となる
DEVICE ACCESS
![Page 11: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/11.jpg)
ロゴがあらわすHTML5(4)
Web Sockets、Server-Sent Eventsの利用によりデータ取得のレスポンスの向上を実現
Web Sockets:HTTPを介さずサーバーとクライアントを接続する技術
CONNECTIVITY
Server-Sent Events:サーバーからデータをプッシュする技術
![Page 12: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/12.jpg)
ロゴがあらわすHTML5(5)
プラグインを利用することなく動画・音声の再生が可能となる
MULTIMEDIA
![Page 13: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/13.jpg)
ロゴがあらわすHTML5(6)
SVG、Canvas、WebGL、CSS3などの利用によりビジュアルをブラウザ内でネイティブに
レンダリングすることが可能となり表現の幅が広がる
SVG:ベクター画像記述言語 WebGL:ブラウザ上に3D図を描画するための仕様
3D, GRAPHICS EFFECTS
Canvas:ブラウザ上に図を描画するための仕様 CSS3:Webページのデザインやレイアウトを定義するための仕様
![Page 14: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/14.jpg)
ロゴがあらわすHTML5(7)
Web Workers、XMLHttpRequest 2などの利用によりWebアプリケーションや
動的なWebコンテンツのスピード向上を実現
Web Workers:JavaScriptの並列処理仕様
PERFORMANCE INTEGRATION
XMLHttpRequest 2:異るドメイン間での通信を可能とする仕様
![Page 15: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/15.jpg)
ロゴがあらわすHTML5(8)
幅広いスタイルやエフェクトをの追加やWeb Open Font Format(WOFF)による
フォント表現の強化
CSS3
![Page 16: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/16.jpg)
本日の勉強会について
![Page 17: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/17.jpg)
本日の勉強会の対象
いままでご覧いただいた通りHTML5は他のフロントサイドの技術(JavaScript、CSS)と
連携して活用されるものです
ですので本日はHTML5を軸としたフロントサイドの技術全般を
対象として進行させていただきます
HTML5 CSS3 JavaScript+ +
![Page 18: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/18.jpg)
なぜHTML5なのか
![Page 19: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/19.jpg)
なぜHTML5なのか(1)
いままでのHTML(XHTML)との違い
いままで以上に動的なことが可能になった(ローカルでの機能強化によりサーバ負荷軽減も図れる)
動的なアプリケーションとして活用できる可能性が増えた
様々な技術がオフィシャルで定義された
![Page 20: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/20.jpg)
なぜHTML5なのか(2)
デバイス、OS、ブラウザを選ばず動く「ワンソース・マルチプラットフォーム」である
![Page 21: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/21.jpg)
なぜHTML5なのか(3)
デバイスの多様化に伴う外出先や屋外でのインターネット利用の拡大、目的に多様化により
新たな技術・表現が要求されている
![Page 22: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/22.jpg)
HTML5を取り巻く状況
![Page 23: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/23.jpg)
Topic(1)
Amazon
Kindleシリーズ向けの新ファイル形式 Kindle Format 8 (KF8) を発表
レイアウトに関する要素を中心にHTML5、CSS3に対応(JavaScript、動画、音声には未対応)
http://www.amazon.com/gp/feature.html?docId=1000729511
![Page 24: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/24.jpg)
Topic(2)
Microsoft
Windows8のアプリケーション構築にHTML5を対応これにあわせ開発ツールの
Visual Studio、Expression Blendも同様に対応
![Page 25: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/25.jpg)
Topic(3)
Adobe
HTML5、JavaScript、CSS3によるアニメーション制作ソフト「Edge preview」を発売
Androidの次期バージョン4.1に「FlashPlayer」を対応させないことを発表
Android版「FlashPlayer」の新規提供を8月で終了
Android 4.1にアップグレードした端末では「Flash Player」のアンインストールを勧告
http://www.adobe.com/jp/aboutadobe/pressroom/pressreleases/20120629_flashplayer_android.html
![Page 26: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/26.jpg)
Topic(4)
ネイティブアプリからWebアプリへ
Financial Timesが2011年7月 Webアプリ「FT Web App」を公開
アプリ内課金の際のAppleによる手数料徴収回避
複数プラットフォーム対応へのアプリ開発負担・コストの軽減
![Page 27: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/27.jpg)
Topic(5)
スマートテレビでの利用へ「Symposium on Web and TV 2012」
IPTVフォーラムHTML5ワーキンググループがHTML5ベースのスマートテレビ実現
に向けて策定を進めている
IPTVフォーラム:Internet Protocol(IP)を使用した動画配信の仕様の標準化と普及を目的とした民間の標準化団体
© Impress Watch Corporation
![Page 28: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/28.jpg)
Topic(6)
移動体への進出
General Motorsが2011年11月 米LAオートショーでHTML5ベースの次世代型テレマティクス
「CUE(キュー)」を発表
テレマティクス:自動車、バイクなどにスマートフォンなどを連携させ情報サービスを提供すること
![Page 29: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/29.jpg)
HTML5の課題
![Page 30: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/30.jpg)
HTML5の課題(1)
デバイス、OS間での差異
スマートフォンをとってみてもAndroid、iOS、ブラウザでの表示・挙動の違いが生じている
≒ ≒ ≒
≒
![Page 31: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/31.jpg)
HTML5の課題(2)
スピード
ネイティブアプリに比べWebアプリは遅い
JavaScriptの処理速度は過去数年で数十倍あがっているといわれ今後も改善が見込まれまた「Web Workers」による効果も期待できる
![Page 32: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/32.jpg)
HTML5の課題(3)
セキュリティ
他サイトからデータを取得・利用できるようになったが
クロスサイトスクリプティング (Cross Site Scripting) の危険性が生じている
![Page 33: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/33.jpg)
HTML5の課題(4)
著作権
DRM(Digital Rights Management)に関する定義がないため
著作権保護の観点で問題がある
W3Cに対しGoogle、Microsoft、Netflixの3社は暗号化された動画や音楽のHTML5での再生を
可能にするためのAPI「Encrypted Media Extensions」の標準化を申請
W3CサイドはこのAPIがプラグインに近い仕様のためフラグメント化を懸念し反対(?)
![Page 34: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/34.jpg)
HTML5の課題(5)
仕様の分断化?
2012年7月 WHATWGの「Living Standard」とW3Cが推進する仕様(WHATWG曰く「Snapshot」)
に発展的(?)な分担がなされた
WHATWG(ワットダブルジー):Apple、Mozilla、Operaのブラウザベンダーによって設立されたグループ
WHATWGWeb Applications 1.0
2007
W3C
HTML52012
Living Standard
Snapshot
![Page 35: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/35.jpg)
HTML5の機能とその活用例
![Page 36: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/36.jpg)
ジオロケーション
GPS、ネットワークのIPアドレスや無線LANのアクセスポイントから取得した
ユーザの位置情報を扱う技術
![Page 37: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/37.jpg)
ジオロケーション:事例(1)
Walmart
位置情報利用の際にはユーザの許可が必要
周辺の店舗検索、ネイティブアプリケーションと連動したルート検索に加え各店舗のセールス情報なども提供
http://mobile.walmart.com
![Page 38: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/38.jpg)
ジオロケーション:事例(2)
iGSガソリン価格比較サイト「gogo.gs」のガソリン価格情報をもとに日本全国の現在位置周辺のガソリンスタンド情報と価格情報の確認ができる
http://itunes.apple.com/jp/app/igs/id409521642?mt=8
http://gogo.gs/
![Page 39: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/39.jpg)
ジオロケーション:事例(3)
TeleNav ScoutHTML5ベースの音声ガイド付きナビゲーションサービス※米国外での利用不可
http://www.scout.me
![Page 40: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/40.jpg)
Web Storage
ブラウザが持つ簡易データベースの機能で各種データや画像等の保存が可能になる
cookieと比較し多量のデータを保存することが可能
cookie:4kbytes(20個まで)localStorage:5MBytes(ユーザの同意により容量を増やすことが可能)
![Page 41: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/41.jpg)
Web Storage:事例
日本経済新聞SP beta
保存できる容量はデフォルトで5MBytesだがユーザの同意により増やすことが可能
オフラインの環境においても記事の閲覧が可能となっているWebサイト
http://sp.nikkei.com
![Page 42: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/42.jpg)
Web Storage:事例
オフラインGmail
オフライン環境で利用が可能なChromeアプリGoogle カレンダー、Google ドライブも提供されている
Googleカレンダー
Googleドライブ
![Page 43: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/43.jpg)
対応ブラウザとそのシェア参考
![Page 44: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/44.jpg)
HTML5対応ブラウザ
Firefox 3.1(14.0.1)
Chrome 3.0(20.0.1)
Safari 3.0(5.1.7)
Opera 9.6(12.00)
Internet Explorer 9(9.0.8)※一部実装されていない機能あり
()内は2012年7月現在の最新版のバージョン
![Page 45: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/45.jpg)
HTML5対応ブラウザのシェア(Japan)
StatCounter Global Stats:http://gs.statcounter.com
7割弱のブラウザがHTML5に対応
2012/1~7月
![Page 46: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/46.jpg)
HTML5対応ブラウザのシェア(Worldwide)
StatCounter Global Stats:http://gs.statcounter.com
8割のブラウザがHTML5に対応
2012/1~7月
![Page 47: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/47.jpg)
モバイルデバイスのHTML5対応状況一覧
Mobile HTML5
http://mobilehtml5.org/
モバイルブラウザでの各機能の対応が一覧で確認できる
![Page 48: HTML5の冒険 - 株式会社ワンパク(1PAC. INC.)1pac.jp/wp-content/uploads/2012/08/html5_seminar_1PAC.pdf · SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに](https://reader033.vdocument.in/reader033/viewer/2022042923/5f716dc552d25f599a37898c/html5/thumbnails/48.jpg)
様々な機能が追加されたことによりHTMLはPC、ブラウザの枠を超え様々なシーンで活用されうる言語となりました
そして「ワンソース・マルチプラットフォーム」という強みにより開発のコストや期間の軽減
ローカル処理の強化によるサーバへの負荷軽減やオフラインでの稼働など様々なメリットをもたらします
また、当然のことながらHTMLの本来の目的「文書の構造の明確化」の強化により
データの活用範囲もさらに広がることになります