HTML5の冒険

×

31 Jul.2012

HTML5とは

Webコンテンツ作成に使う基本言語の第5版でありコンテンツを利用する際の

エクスペリエンス向上を目的として制定

2014年までの正式勧告を目指し策定がおこなわれている最中である

HTML5による変化

何がかわるのか

API（Application Program Interface）

Markup各種APIの標準化と追加

新たなタグの追加などによる情報構造の強化

HTML5でかわるのは大別して2つ

どうかわるのか

API、Markupこの2つの強化によりHTML5は

1. よりインタラクティブに2. よりセマンティックな文書構造に

Webサイト内での情報伝達としての機能だけでなくブラウザ以外での利用や情報のより有効な活用が可能になり

様々なシーンで活用されるようになります

そして

HTML5の特徴

HTML5 Logo

2011年2月、W3Cから発表された「 HTML5のロゴ」で

その特徴が表現されています

http://www.w3.org/html/logo/

様々なタグの追加によりプログラムにとってもユーザにとってもより有効なデータ駆動型のウェブを実現

SEMANTICS

ロゴがあらわすHTML5（1）

ロゴがあらわすHTML5（2）

インターネットに接続していない状態においてもウェブアプリケーションを素早く起動し

稼働することが可能となる

OFFLINE & STORAGE

ロゴがあらわすHTML5（3）

ローカルデータ（オーディオ、ビデオ入力、マイク、カメラ、連絡先、予定など）

の利用が可能となる

DEVICE ACCESS

ロゴがあらわすHTML5（4）

Web Sockets、Server-Sent Eventsの利用によりデータ取得のレスポンスの向上を実現

Web Sockets：HTTPを介さずサーバーとクライアントを接続する技術

CONNECTIVITY

Server-Sent Events：サーバーからデータをプッシュする技術

ロゴがあらわすHTML5（5）

プラグインを利用することなく動画・音声の再生が可能となる

MULTIMEDIA

ロゴがあらわすHTML5（6）

SVG、Canvas、WebGL、CSS3などの利用によりビジュアルをブラウザ内でネイティブに

レンダリングすることが可能となり表現の幅が広がる

SVG：ベクター画像記述言語 WebGL：ブラウザ上に3D図を描画するための仕様

3D, GRAPHICS EFFECTS

Canvas：ブラウザ上に図を描画するための仕様 CSS3：Webページのデザインやレイアウトを定義するための仕様

ロゴがあらわすHTML5（7）

Web Workers、XMLHttpRequest 2などの利用によりWebアプリケーションや

動的なWebコンテンツのスピード向上を実現

Web Workers：JavaScriptの並列処理仕様

PERFORMANCE INTEGRATION

XMLHttpRequest 2：異るドメイン間での通信を可能とする仕様

ロゴがあらわすHTML5（8）

幅広いスタイルやエフェクトをの追加やWeb Open Font Format（WOFF）による

フォント表現の強化

CSS3

本日の勉強会について

本日の勉強会の対象

いままでご覧いただいた通りHTML5は他のフロントサイドの技術（JavaScript、CSS）と

連携して活用されるものです

ですので本日はHTML5を軸としたフロントサイドの技術全般を

対象として進行させていただきます

HTML5 CSS3 JavaScript+ +

なぜHTML5なのか

なぜHTML5なのか（1）

いままでのHTML（XHTML）との違い

いままで以上に動的なことが可能になった（ローカルでの機能強化によりサーバ負荷軽減も図れる）

動的なアプリケーションとして活用できる可能性が増えた

様々な技術がオフィシャルで定義された

なぜHTML5なのか（2）

デバイス、OS、ブラウザを選ばず動く「ワンソース・マルチプラットフォーム」である

なぜHTML5なのか（3）

デバイスの多様化に伴う外出先や屋外でのインターネット利用の拡大、目的に多様化により

新たな技術・表現が要求されている

HTML5を取り巻く状況

Topic（1）

Amazon

Kindleシリーズ向けの新ファイル形式 Kindle Format 8 (KF8) を発表

レイアウトに関する要素を中心にHTML5、CSS3に対応（JavaScript、動画、音声には未対応）

http://www.amazon.com/gp/feature.html?docId=1000729511

Topic（2）

Microsoft

Windows8のアプリケーション構築にHTML5を対応これにあわせ開発ツールの

Visual Studio、Expression Blendも同様に対応

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

Topic（4）

ネイティブアプリからWebアプリへ

Financial Timesが2011年7月 Webアプリ「FT Web App」を公開

アプリ内課金の際のAppleによる手数料徴収回避

複数プラットフォーム対応へのアプリ開発負担・コストの軽減

Topic（5）

スマートテレビでの利用へ「Symposium on Web and TV 2012」

IPTVフォーラムHTML5ワーキンググループがHTML5ベースのスマートテレビ実現

に向けて策定を進めている

IPTVフォーラム：Internet Protocol（IP）を使用した動画配信の仕様の標準化と普及を目的とした民間の標準化団体

© Impress Watch Corporation

Topic（6）

移動体への進出

General Motorsが2011年11月 米LAオートショーでHTML5ベースの次世代型テレマティクス

「CUE（キュー）」を発表

テレマティクス：自動車、バイクなどにスマートフォンなどを連携させ情報サービスを提供すること

HTML5の課題

HTML5の課題（1）

デバイス、OS間での差異

スマートフォンをとってみてもAndroid、iOS、ブラウザでの表示・挙動の違いが生じている

≒ ≒ ≒

≒

HTML5の課題（2）

スピード

ネイティブアプリに比べWebアプリは遅い

JavaScriptの処理速度は過去数年で数十倍あがっているといわれ今後も改善が見込まれまた「Web Workers」による効果も期待できる

HTML5の課題（3）

セキュリティ

他サイトからデータを取得・利用できるようになったが

クロスサイトスクリプティング (Cross Site Scripting) の危険性が生じている

HTML5の課題（4）

著作権

DRM（Digital Rights Management）に関する定義がないため

著作権保護の観点で問題がある

W3Cに対しGoogle、Microsoft、Netflixの3社は暗号化された動画や音楽のHTML5での再生を

可能にするためのAPI「Encrypted Media Extensions」の標準化を申請

W3CサイドはこのAPIがプラグインに近い仕様のためフラグメント化を懸念し反対（？）

HTML5の課題（5）

仕様の分断化？

2012年7月 WHATWGの「Living Standard」とW3Cが推進する仕様（WHATWG曰く「Snapshot」）

に発展的（？）な分担がなされた

WHATWG（ワットダブルジー）：Apple、Mozilla、Operaのブラウザベンダーによって設立されたグループ

WHATWGWeb Applications 1.0

2007

W3C

HTML52012

Living Standard

Snapshot

HTML5の機能とその活用例

ジオロケーション

GPS、ネットワークのIPアドレスや無線LANのアクセスポイントから取得した

ユーザの位置情報を扱う技術

ジオロケーション：事例（1）

Walmart

位置情報利用の際にはユーザの許可が必要

周辺の店舗検索、ネイティブアプリケーションと連動したルート検索に加え各店舗のセールス情報なども提供

http://mobile.walmart.com

ジオロケーション：事例（2）

iGSガソリン価格比較サイト「gogo.gs」のガソリン価格情報をもとに日本全国の現在位置周辺のガソリンスタンド情報と価格情報の確認ができる

http://itunes.apple.com/jp/app/igs/id409521642?mt=8

http://gogo.gs/

ジオロケーション：事例（3）

TeleNav ScoutHTML5ベースの音声ガイド付きナビゲーションサービス※米国外での利用不可

http://www.scout.me

Web Storage

ブラウザが持つ簡易データベースの機能で各種データや画像等の保存が可能になる

cookieと比較し多量のデータを保存することが可能

cookie：4kbytes（20個まで）localStorage：5MBytes（ユーザの同意により容量を増やすことが可能）

Web Storage：事例

日本経済新聞SP beta

保存できる容量はデフォルトで5MBytesだがユーザの同意により増やすことが可能

オフラインの環境においても記事の閲覧が可能となっているWebサイト

http://sp.nikkei.com

Web Storage：事例

オフラインGmail

オフライン環境で利用が可能なChromeアプリGoogle カレンダー、Google ドライブも提供されている

Googleカレンダー

Googleドライブ

対応ブラウザとそのシェア参考

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月現在の最新版のバージョン

HTML5対応ブラウザのシェア（Japan）

StatCounter Global Stats：http://gs.statcounter.com

7割弱のブラウザがHTML5に対応

2012/1～7月

HTML5対応ブラウザのシェア（Worldwide）

StatCounter Global Stats：http://gs.statcounter.com

8割のブラウザがHTML5に対応

2012/1～7月

モバイルデバイスのHTML5対応状況一覧

Mobile HTML5

http://mobilehtml5.org/

モバイルブラウザでの各機能の対応が一覧で確認できる

様々な機能が追加されたことによりHTMLはPC、ブラウザの枠を超え様々なシーンで活用されうる言語となりました

そして「ワンソース・マルチプラットフォーム」という強みにより開発のコストや期間の軽減

ローカル処理の強化によるサーバへの負荷軽減やオフラインでの稼働など様々なメリットをもたらします

また、当然のことながらHTMLの本来の目的「文書の構造の明確化」の強化により

データの活用範囲もさらに広がることになります

http://1pac.jp