【Webサイト構築】2012年にブレークする新ウエブ技術「HTML5」とは?:KDDI総研小林氏(20120118メンバーズセミナー)

7,109 views

Published on

【Webサイト構築】2012年にブレークする新ウエブ技術「HTML5」とは?:KDDI総研小林氏(20120118メンバーズセミナー)
http://www.members.co.jp/

Published in: Business
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,109
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
88
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

【Webサイト構築】2012年にブレークする新ウエブ技術「HTML5」とは?:KDDI総研小林氏(20120118メンバーズセミナー)

  1. 1. 第8回メンバーズFacebookインテグレーションセミナー~2012年 本格化する企業サイトのソーシャル化と飛躍するHTML5・スマホ・タブレット対応 2012年にブレークするHTML5とは何か? ― マルチ・デバイス化する企業サービスの切り札 ― 2012年1月18日(水) 株式会社KDDI総研 リサーチフェロー 小林雅一
  2. 2. HTML5とは何か•HTML5とは:• 狭義には、World Wide Web Consortium(W3C)が2004年6月から策定を進め ているマークアップ言語「HTML5」を指す。2014年の規格化を目標に、現在、作 業が進められている。ただしHTML5の最終仕様が確定する前から、既に、その 機能の多くは幾つかのブラウザに前倒しで導入されつつある。• 広義のHTML5とは、マークアップ言語「HTML5」を中心とする次世代のウエブ技 術標準を指す。一般にHTML5と言う時には、この広義のHTML5を指すことが多 い。• 広義のHTML5を構成する3つの要素• ①マークアップ言語「HTML5」:コンテンツのデータ形式(文書構造)を表現する• ②CSS3(Cascading Style Sheet 3):ウエブ・ブラウザにおける、コンテンツの視 覚的な表現を規定する• ③JavaScript用のAPI:ダイナミックなウエブ・アプリを作成するプログラム言語 1
  3. 3. HTML5登場の背景マルチ・デバイス(マルチ・スクリーン)時代の到来 2
  4. 4. HTML5を使うと何ができるか1 source programであらゆるデバイスにウエブ・アプリを届けられる 3
  5. 5. マルチ・デバイス時代のメディア/コンテンツ・サービスクラウド上に各種データ(コンテンツ)が一元管理され、これをあらゆるデバイスが共有する → Native ApplicationよりもWeb Applicationの方が合理的 スマートフォン 電子ブック・リーダー タブレット 個人情報 音楽 動画 PC ネットブック 活字 写真 ゲーム 仕事情報 フォトフレーム テレビ 自動車 4
  6. 6. HTML5で実現された新機能:表現力の向上• Canvas Tag:ウエブ・ブラウザ上での描画領域を確保• Canvas領域上で、JavaScriptは描画用APIを使って画像を描くことができる http://htmlfive.appspot.com/static/draw.html http://htmlfive.appspot.com/static/gifter.html 5
  7. 7. HTML5で実現された新機能:表現力の向上• Video, Audio Tag: http://craftymind.com/factory/html5video/CanvasVideo.html http://htmlfive.appspot.com/static/video.html• 動画や音声をプラグイン無しで再生 6
  8. 8. HTML5で実現された新機能:操作性の向上• オフラインでの情報処理を強化• Web Storage• Database/Application Cache• パソコンやスマートフォンなど、情報端末のローカル・ディスクにデータやコード を保存する機能• これにより、たとえば地下鉄のようにキャリアの電波が届かない場所でも、オフ ラインでウエブ・アプリケーションを継続的に利用できる。 7
  9. 9. HTML5で実現された新機能:操作性の向上• File API• デスクトップ画面からウエブ画面へのDrag & Dropを実現 http://demos.hacks.mozilla.org/openweb/DnD/ 8
  10. 10. HTML5で実現された新機能:より高度な情報処理• Geolocation API• 地図アプリなどのために位置情報を取得する機能• http://htmlfive.appspot.com/static/whereami.html• Web Workers• JavaScriptで記述したプログラムを並列実行させる機能• http://htmlfive.appspot.com/static/primes-bad.html• http://htmlfive.appspot.com/static/primes-good.html• http://htmlfive.appspot.com/static/tracker1.html• Web Socket• サーバーとブラウザ間のリアルタイム通信 9
  11. 11. HTML5:まとめ• これまでのHTML(HTML4まで)が基本的にホーム・ページ上の文書表現を司 るものであったのに対し、HTML5ではアプリケーション・プログラムの開発・実 行に軸足を移した仕様になっている。これまでのHTML これからのHTML5ホームページの見出しや 動きのあるプログラム(アプリ) を製作するための言語文章を書くための言語 10
  12. 12. HTML5でウエブはどう変わるか 従来のHTMLを使うと・・・ これからのHTML5を使うと・・・ 毎朝新聞.com ワープロ 表計算 増税の前にやることがあるだろ 野田佳彦首相(54)が進める消費税 増税に暗雲が立ち込めてきた。 官僚 主導体制の打破、天下りや税金の無 駄遣いを一掃するという当初の公約を 全て反故にした民主党への国民の怒 りは根強く、政権の運営は今後、さら に困難・・・ 官僚の税金無駄遣 いや天下りを放置 して増税を訴える 首相 ゲームウエブ・サイト=何かを見るためのホームページ ウエブ・サイト=何かをするためのプラットフォーム (Platform for Dynamic Application program) 11
  13. 13. ウエブ・アプリ(Web Application)とは何かブラウザー上で、ネイティブ・アプリ並みの体感を実現したアプリ 12
  14. 14. ウエブ・アプリケーションの構造• ウエブ・アプリはサーバー側とクライアント側の両方の技術が組み合わさって実現される• サーバー側(Back End)の技術• CGI(Common Gateway Interface):ウエブ・サーバー上でのプログラム実行用のインタフェース• Perl, PHP, Python, Ruby on Rails, node.ds・・・:ウエブ・サーバー上で動くプログラムを製作する ためのプログラミング言語• クライアント側(Front End)の技術• HTML:ウエブ・ページを記述するためのマークアップ言語• JavaScript:ウエブ・ページの動き方(interactivity)を設計するためのスクリプト言語• CSS(Cascading Style Sheet):フォントの種類やサイズ、背景の色など、ウエブ・ページの見栄え を指定するためのマークアップ言語• WebGL:ブラウザ上で3次元グラフィックスを実現するための技術 13
  15. 15. ウエブ・アプリケーションの構造 1st tier 2nd tier 3rd tier PHP DatabaseBrowser Perl(HTML, CSS, InternetJavaScript, CGIWebGL・・・)= HTML5 Python Presentation Logic (Application) Data (Storage)Client side Server side 14
  16. 16. HTML5の本質• 1st tierと2nd tierの区分が不明確になる• Client Sideは単なるUI、Presentationだけではなく、本格的な仕事もするようになる• その変化を促すもの:• HTML5のオフライン機能• Device API:内部部品(カメラ、センサー等)へのアクセス機能• 等々・・・ Browser ≒ OS ブラウザーが情報処理のプラットフォームになる 15
  17. 17. HTML5の本質• オフライン(インターネットから切断された状態)でも、ウエブ・アプリが使えるとはどういうこ とか?•ブラウザとOSの境界線が消える、ブラウザがOSになる• これまでアプリケーションは、パソコンやスマートフォンのような端末のOS(基本ソフト)上で稼働してい たが、HTML5を使うと、ウエブ・ブラウザ上で稼働するアプリを開発できる。これによって今後、アプリ ケーションのプラットフォーム(仕事をする場所)が、従来のOSからブラウザへと移行する可能性が出 てきた。 ウエブ・アプリ ネイティブ・アプリ Platform = Browser Platform = OS OS これまで これから 16
  18. 18. ウエブ・アプリとネイティブ・アプリは見分けがつかない 例:BBC iPlayerHTML5 version for TV with Sony Play Station HTML5 version for iPad HTML5 version for iPhone 17
  19. 19. HTML5 iPlayer: Is this Application or Browser? • 4. • At 11:11 8th 8月 2011, tony wrote: Can someone please confirm if this is still a browser- based player or its a newly app actually written on the Playstation platform? • Complain about this comment (Comment number 4) • Comment number 5. • At 11:15 8th 8月 2011, Coverleeds wrote: Its a new app. It takes the place of the old iPlayer on the TV section of the X-Menu bar, but when you select it as usual it will prompt you to download. You can no longer access the playstation browser controls from with the application, so I ould assume it isnt now browser based. • Complain about this comment (Comment number 5) • Comment number 6. • At 11:20 8th 8月 2011, Chris Warren BBC wrote: Tony, Coverleeds: Its a hybrid solution - it runs within a browser within a native app. As Gideon mentions above, the user interface is built using standard web technologies (JavaScript, CSS, etc.) but to make the most of the PS3 hardware, playout is handled through the native application. • Complain about this comment 18
  20. 20. 主要な情報端末が交代すると、プラットフォームも交代する 各時代におけるプラットフォームの転遷パソコン時代 モバイル時代 マルチ・デバイス(ネット家電)時代Windows iOS, iTunes HTML5 Android 19
  21. 21. ウエブ技術者への求人も急増している米求人情報サイトFreelance.comが集計した、ITエンジニアの求人状況(2011年第3四半期)。Flash技術者への求人が前期比で10%減尐する一方で、HTML5技術者への求人は38%増加している。 20
  22. 22. 既にWeb Application(HTML5)への移行を始めた企業• Playboy(2011年5月)• Financial Times(2011年6月)• BBC iPlayer(2011年8月)• Amazon Kindle Cloud Reader(2011年8月)• WalMart(Vudu)のビデオ配信(2011年8月)• Pandora• Boston Globe• 日本経済新聞 21
  23. 23. Web Application(HTML5)への移行を始めた企業• Netflix(インターネット動画サービス)• Salesforce(クラウド型CRM)• SlideShare(クラウド型プレゼンテーション)• Facebook Platform(2011年10月)• LinkedIn(2011年?月)• 移行の背景• Apple App Storeに代表される個別プラットフォームの横暴への対抗策• クラウド型サービスにしておけば、単一コンテンツがどのメーカーのどんな機種 にも対応できる 22
  24. 24. HTML5:ゲーム産業への応用•FlashからHTML5への移行が真っ先に進んでいるのは ゲーム産業•3Dグラフィックスを実現するWeb GLなど、ゲーム開発に 便利なウエブの新技術が次々に開発されている。•「ゲーム開発の技術者達がFlashにフラストレーションを 感じている。次のプロジェクトもFlashを使うなら転職を考 えるという人もいる」(ユビキタスエンターテイメント) 23
  25. 25. HTML5の問題と解決策• 問題:①異なる機種、OS、ブラウザ間の互換性が不完全 • ②カメラ、センサー等、端末内臓部品を操作できない• 解決先:ウエブ・アプリ→ネイティブ・アプリの変換ツール• (例:PhoneGap, Titanium Mobile, Enchant.js等)を利用する 24
  26. 26. ゲーム産業への応用:Enchant.js Pro ブラウザ上でAR(拡張現実)を実現 25
  27. 27. HTML5(ウエブ・アプリ)はゲーム産業をどう変えるか• 開発者の裾野が広がる:HTML5はCやJavaよりも簡単に使える• HTML5は大作ソフトよりも、カジュアル・ゲームやソーシャル・ゲームの開発に 適している• 売り切り型からサブスクリプション型のビジネス・モデルになる(顧客やファンと の継続的コンタクトが重要性を増す)• ユーザーIDなど顧客データベースが重要になる• ユーザーへの露出を最大化した企業が勝つ 26
  28. 28. Facebook Platform: ソーシャル・グラフを使ってアプリを配信 Word Racer Aさん Bさん AさんがWord Racerで遊びました CさんがWord Racerで遊びました Cさん Gさん Hさん Dさん FさんがMonster Land Monster Land Eさん Fさん で遊びました Iさん 27
  29. 29. HTML5 and Web On TV:家電メーカーの対応• 日本や韓国の家電メーカーは、従来型テレビの値崩れに伴い、付 加価値の高い次世代機を開発したい• 3Dテレビは期待したほどの需要を開拓できなかったので、これに 代わるものとしてインターネットTVに関心を移しつつある• これまでテレビ受像機に搭載されてきたプロセッサはパソコンほど の処理スピードを持たなかったが、家電メーカーはここに来て、よ り強力なプロセッサを搭載しようとしている。これによって、テレビ でもブラウザのレンダリングやJavaScriptの処理がスムーズに行 えるようになる。 28
  30. 30. HTML5 and Web on TV:家電メーカーの対応• 残された課題は、大きく2つある。一つはウエブ上の動画コンテン ツ。テレビ放送局は自社番組をウエブに公開するのを躊躇ってい る。一方、YouTubeなどウエブ上の動画コンテンツは解像度が低 く、テレビの大画面で見るには画質が低すぎる。• ただしYouTube(Google)はネット番組の自主開発に着手し、画 質も改善しつつある。テレビ局が番組をネットに出さないなら、自 分たちで開発すると言っている。• もう一つの課題は、UI(ユーザー・インタフェース)。既存のテレビ・ リモコンで、ウエブを操作するのは難しい。Google TV用に開発さ れてキーボード型リモコンもそれほど改善されたわけではない。 iPhone 4Sで導入されたSiriのような音声操作など、新しいUIが求 められている。 29
  31. 31. CES 2012: Internet (Smart) TV, Samsung 30
  32. 32. CES 2012: Internet (Smart) TV, LG 31
  33. 33. CES 2012: Google TV, LG 32
  34. 34. CES 2012: Google TV, Sony 33
  35. 35. HTML5による高度な動画処理現在開発中のOperaでは、ブラウザでスマートフォン搭載カメラを操作できる。Canvas + Video Tagを使うと、JavaScriptで高度な映像処理が可能になる。 34
  36. 36. HTML5 and Web on TV• テレビは単なる放送番組の視聴機から、ウエブと接続したビデオ 会議システムなど多目的な情報処理端末へと進化する何かを見る 何かをする 35
  37. 37. テレビ以降の展開:インターネットに接続する製品領域の拡大 Internet of Things M2M:医療、ヘルスケア、電力管理・・・ 自動車、冷蔵庫、白物家電・・・ テレビ タブレット、電子ブック スマートフォン パソコン 36
  38. 38. CES 2011: Verizon Telematics: HTML5 + LTE CES2011で著者が撮影 http://www.youtube.com/watch?v=aPCpqXyFA8U 37
  39. 39. CES 2012: App Car, GM 38
  40. 40. 白物家電もウエブでつながるブラウザのついた冷蔵庫(Samsung) ブラウザのついたオーブン(LG) ブラウザのついた洗濯機(LG) CES2011で著者が撮影 39
  41. 41. 今後の展開:全てのモノがウエブでつながる=Web of Things 異なるデバイスを接続する共通インタフェースとしてのHTML5 Internet of Things + HTML5 = Web of Things http://www.youtube.com/watch?feature=player_embedded&v=AN6wy0keQqo 40
  42. 42. HTML5が新聞産業に与える影響日本経済新聞社が2010年末からHTML5で作ったウエブ・アプリ(日経SP beta)でニュース配信を開始 41
  43. 43. 日経SP beta:徹底した省力化• 中心になって開発したのは2人• HTML5のオフライン機能を使って、地下鉄車内のように電波の届かない場所で も記事を読めるようにした• 記事の見出し10本と記事の本文20本を同時にダウンロードして端末に保存• 現時点の制約:3Gの速度が遅く、モバイル端末側のキャッシュ能力にも上限が あるので、動画は一時保存できない• 近い将来、これらの制約が取り払われた後は、記事の本数制限がなくなり、全 紙面の記事が端末に保存可能。どこでも読める紙の新聞に限りなく近づくと同 時に、タッチによる操作性、常時ネット接続による速報性、動画による視覚性な どで紙を上回る 42

×