html5の冒険 - 株式会社ワンパク(1pac....
TRANSCRIPT
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の本来の目的「文書の構造の明確化」の強化により
データの活用範囲もさらに広がることになります