【Webサイト構築】「HTML5とは何か?-企業のウエブ戦略の視点から-」(20120530メンバーズセミナー)

23,500 views
23,408 views

Published on

【Webサイト構築】「HTML5とは何か?-企業のウエブ戦略の視点から-」(20120530メンバーズセミナー)
http://www.members.co.jp/

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

No Downloads
Views
Total views
23,500
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
86
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

【Webサイト構築】「HTML5とは何か?-企業のウエブ戦略の視点から-」(20120530メンバーズセミナー)

  1. 1. 2012年度第1回 スマタブ5セミナーモバイル時代のキーワード「HTML5」とスマートフォン対応の実践 HTML5とは何か? ―企業のウエブ戦略の視点から― 2012年5月30日(水) 株式会社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. HTML、CSS、Javascriptの役割と関係 この窓からパスワードの 入力を促す フォントを40ポイントにし て太字に パスワード お天気西本、二回戦を突破 見出し 西本、二回戦を突破 西本、二回戦を突破テニスの全英オープンに テニスの全英オープンに 太字にして テニスの全英オープンに出場した西本選手は2回 出場した西本選手は2回 アンダーラインを引く 出場した西本選手は2回戦を突破し、 戦を突破し、 戦を突破し、日本選手としては・・年振 日本選手としては・・年振 日本選手としては・・年振 ここをクリックしたらりの・・・ りの・・・ 本文 りの・・・・・・選手はサーブが冴 ・・・選手はサーブが冴 天気情報を表示 ・・・選手はサーブが冴え・・・ え・・・ え・・・3回戦ではセルビアの・・・ 3回戦ではセルビアの・・・ 3回戦ではセルビアの・・・選手と対戦することが・・・ 選手と対戦することが・・・ 選手と対戦することが・・・ 写真 HTML + CSS + Javascript ホームページの文書構造を設計 ホームページの見栄えを指定 ホームページの動きをプログラミング 2
  4. 4. ブラウザでホームページを見るための仕組み ③URLで指定されたウエブ・サーバが HTML文書の送信リクエストを受け付ける ウエブ・サーバ Internet HTML文書 ②HTTPで送信リクエスト ①URLを指定 ④HTTPでHTML文書を送信 PC HTML⑤PCに送られたHTML文書を 文書ブラウザで表示 3
  5. 5. HTML5で用意された新機能• Audio, Video → ブラウザの視聴覚的な表現力の向上 http://htmlfive.appspot.com/static/video.html• Canvas tag → ブラウザの視聴覚的な表現力の向上• http://htmlfive.appspot.com/static/draw.html• http://htmlfive.appspot.com/static/gifter.html• Web Storage → オフライン機能• Geolocation API:地図アプリなどのために位置情報を取得する機能• http://htmlfive.appspot.com/static/whereami.html• Web Workers:JavaScriptで記述したプログラムを並列実行させる機能• Web Socket:サーバーとブラウザ間のリアルタイム通信• Device API:内部部品(カメラ、センサー等)へのアクセス機能等々・・・• Drag & Drop機能 → 操作性の向上• http://demos.hacks.mozilla.org/openweb/DnD/ 4
  6. 6. HTML5でウエブはどう変わるか 従来のHTMLを使うと・・・ これからのHTML5を使うと・・・ 毎朝新聞.com ワープロ 表計算 増税の前にやることがあるだろ 野田佳彦首相(54)が進める消費税 増税に暗雲が立ち込めてきた。 官僚 主導体制の打破、天下りや税金の無 駄遣いを一掃するという当初の公約を 全て反故にした民主党への国民の怒 りは根強く、政権の運営は今後、さら に困難・・・ 官僚の税金無駄遣 いや天下りを放置 して増税を訴える 首相 ゲームウエブ・サイト=何かを見るためのホームページ ウエブ・サイト=何かをするためのプラットフォーム (Platform for Dynamic Application program) 5
  7. 7. HTML5で何ができるのかスマートフォンや車載システム、タブレットでの実例 6
  8. 8. HTML5はブラウザ上での高度な情報処理を可能にする ブラウザ上でAR(拡張現実)を実現 7
  9. 9. HTML5は、ブラウザの視覚的な表現力を高める現在開発中のOperaでは、ブラウザでスマートフォン搭載カメラを操作できる。Canvas + Video Tagを使うと、JavaScriptで高度な映像処理が可能になる。 8
  10. 10. HTML5を使うと、ウエブ技術(ブラウザ技術)でアプリ配信システムを実現できる 9
  11. 11. HTML5を使うと、色々な機器をつないだシステムを構築できる CES2011で著者が撮影 10
  12. 12. HTML5を使うと、こんなこともできる 11
  13. 13. HTML5登場の背景それは何故、今、ICT産業各界の 期待を集めているのか? 12
  14. 14. HTML5登場の背景マルチ・デバイス(マルチ・スクリーン)時代の到来 13
  15. 15. マルチ・デバイス時代のメディア/コンテンツ・サービスクラウド上に各種データ(コンテンツ)が一元管理され、これをあらゆるデバイスが共有する → Native ApplicationよりもWeb Applicationの方が合理的 スマートフォン 電子ブック・リーダー タブレット 個人情報 音楽 動画 PC ネットブック 活字 写真 ゲーム 仕事情報 フォトフレーム テレビ 自動車 14
  16. 16. HTML5登場の背景:マルチ・デバイスへの対応 1 source programであらゆるデバイスにウエブ・アプリを届けられる 15
  17. 17. HTML5登場の背景:コンテンツ産業の構造変化 出版社、レコード会社、 出版社、レコード会社、 ゲーム・メーカー・・・ ゲーム・メーカー・・・ ライセンス提供 ライセンス料を払う アイフォーン、アイチューンズ、アイクラウド・・・ 個々のコンテンツに 小売 アンドロイド・マーケット、グーグル・ブックス・・・ プラットフォーム お金を払う キンドル・ブックストア、クラウド・ドライブ・・・ 利用権 プラットフォームにお金を払う 消費者(ユーザー、 消費者(ユーザー、 リスナー、ゲーマー・・・) リスナー、ゲーマー・・・) これまで これから 16
  18. 18. HTML5が注目されるのは何故か:その背景• スマート・デバイスを巡る米IT列強のプラットフォーム対抗戦• ユーザーとコンテンツ・プロバイダーを囲い込むClosed Platform Apple Google Amazon iTunes in the Cloud Google Play Amazon Cloud Drive アップル製端末 Android搭載端末 iPhone, iPad, iPod, (スマートフォン、タブ Kindle, Kindle Fire レット、スマートTV・・・ iTV・・・ アップルが提供するコンテンツは Googleが提供するコンテンツ アマゾンが提供するクラウドは はAndroid端末でしか使えない アマゾン製端末でしか使えない アップル製端末でしか使えない 17
  19. 19. HTML5が注目されるのは何故か:Cross Platform戦略• ゲームなど各種コンテンツをHTML5製のウエブ・アプリにすれば、コンテンツ・プロバイダー(CP)は ブラウザ経由でコンテンツを届けられるので、iPhone、Android端末、Kindleの何れにも対応できる CP Apple Google Amazon iTunes in the Cloud Google Play Amazon Cloud Drive Browser アップル製端末 Android搭載端末 iPhone, iPad, iPod, (スマートフォン、タブ Kindle, Kindle Fire レット、スマートTV・・・ iTV・・・ 18
  20. 20. HTML5の問題点 19
  21. 21. Webアプリ(HTML5)の問題点 ③URLで指定されたウエブ・サーバが• 情報セキュリティ上の問題点 HTML文書の送信リクエストを受け付ける• Cross Domain Communication ウエブ・サーバ Internet HTML文書 ②HTTPで送信リクエスト ①URLを指定 ④HTTPでHTML文書を送信 PC XML HTTP Request Call XML Data HTML⑤PCに送られ Dangerous!たHTML文書を 文書ブラウザで表示 20
  22. 22. Webアプリ(HTML5)の問題点 ③URLで指定されたウエブ・サーバが • 情報セキュリティ上の問題点 HTML文書の送信リクエストを受け付ける • オフライン機能 ウエブ・サーバ Internet HTML文書 ②HTTPで送信リクエスト ①URLを指定 ④HTTPでHTML文書を送信 PCDangerous! Data, Program HTML ⑤PCに送られ たHTML文書を 文書 ブラウザで表示 21
  23. 23. Webアプリ(HTML5)の問題点 ③URLで指定されたウエブ・サーバが • 情報セキュリティ上の問題点 HTML文書の送信リクエストを受け付ける • DRM(コピー防止技術)の欠如 ウエブ・サーバ Internet HTML文書 ②HTTPで送信リクエスト これまでのHTMLで作られたホーム ①URLを指定 ④HTTPでHTML文書を送信 ページでは、ブラウザはサーバ側か ら尐量データをこまめに読み込んで いたので、サーバー側のパスワード PC 管理だけでコンテンツを保護できた。 しかしHTML5に依って、ある程度まNeed DRM! Data, Program とまったデータをクライアント側に保 存できるようになった場合、読み込ん HTML だコンテンツに何らかのコピー防止 ⑤PCに送られ たHTML文書を 文書 技術をかける必要が出てくる ブラウザで表示 22
  24. 24. Webアプリ(HTML5)の問題点Performance in general JavaScript Engine ウエブ・アプリ ネイティブ・アプリ Browser OS OS CP CP U U Direct Indirect 23
  25. 25. Webアプリ(HTML5)の問題点ブラウザの互換性問題 ほんとにできるの? Facebookが提供するベンチマーク・テスト 24
  26. 26. 問題点はあるが、プラスがマイナスを上回る• Webアプリ(HTML5)の問題、課題は解決されつつある、あるいは解決される方向に進ん でいるが、現時点ではネイティブ・アプリに完全に追い着いたとは言えない。• それでもゲームなど各種アプリの開発には、HTML5が急速に導入されつつある。それは One Source for Multi Devicesの魅力、そして特定企業のコントロールから脱却できるオ ープン・プラットフォームの力が大きく作用している。 > + - アプリ開発業者らにとって、 HTML5はマイナスよりプラスが大きい 25

×