members          HTML5を巡るICT業界の動向                             26
HTML5に対する米IT列強のスタンス• Apple:HTML5の事実上の発起人、当初はAdobe Flashを排斥する上で、  HTML5の強力な推進者 → 今はiOS、iTunesとの絡みで、HTML5に対して  は微妙なスタンス• Goo...
HTML5を巡る動き:Facebookのケース• AppleやGoogleとは対照的に、Facebookはモバイル端末やモバイルOS、ブラウザを持たないので、  この部分が弱点になっており。• これに対処するため、Operaを買収して自らブラウ...
コンテンツ・プロバイダー(CP)はHTML5に期待• 既にWeb Application(HTML5)への移行を始めた企業• Playboy(2011年5月)• Financial Times(2011年6月)• BBC iPlayer(201...
Web Application(HTML5)への移行を始めた企業• Netflix(インターネット動画サービス)• Salesforce(クラウド型CRM)• SlideShare(クラウド型プレゼンテーション)• Facebook Platf...
Facebookのウエブ・アプリ(HTML5)戦略           ウエブ・アプリ:3つの問題           ①「中小のソフト開発業者が製作したウエブ・アプ           リは、ユーザーの目にとまりにくいこと」         ...
通信キャリアのHTML5への取り組みWAC(Wholesale Applications Community)   One API by GSMA iPhoneやAndroidに奪われたモバイル・ビジネスの主導権を、HTML5によって取り戻した...
業界の勢力図(ネイティブ・アプリ時代)                                    Samsung  Apple                                              HTC    ...
業界の勢力図(ウエブ・アプリ時代)                    端末メーカー        GoogleApple                 通信キャリア           Facebook           通信キャリア通...
日本企業のHTML5戦略               35
現状分析:米IT列強のプラットフォームに拘束されるCPネイティブ・アプリの配信システムは、プラットフォーム各社が提供する閉鎖的なシステム  iPhone User             Android User             Win...
HTML5がCPにもたらすチャンスHTML5製のウエブ・アプリにすれば、(原理的には)ユーザーに直接コンテンツを配信できる                支払     アクセス(利用)                         ウエブ・ア...
HTML5がCPにもたらすチャンス実際には、CPは通信キャリアやSNS業者と組むことになりそう。たとえば、こんな形で・・・              支払(100%)    ウエブ・アプリ    を紹介                     ...
HTML5がCPにもたらすチャンス               あるいは、こんな形も・・・               支払(100%)     ウエブ・アプリ     を紹介                                  ...
HTML5が日本のメーカーにもたらすチャンス    アップル                               日本メーカー                            A社のコンテンツ                   ...
日本企業のプラットフォーム戦略を考える上で:HTML5の本質• ブラウザがアプリケーションのプラットフォームになる• HTML5のオフライン機能• Device API:内部部品(カメラ、センサー等)へのアクセス機能等々・・・• ブラウザとOS...
ブラウザとOSの一体化:Boot to Gecko at MWC2012                                  42
HTML5が日本企業にもたらすチャンス       プラットフォーム製作への参加が可能に         これまで                     これから                                        ...
FacebookやGoogleは今、どんな未来を見据えているのか?    「セマンティック化するウエブとHTML5の関係」                              44
Facebookとビッグ・データFacebookの企業価値は、彼らが持つ大量の個人情報(ビッグ・データの一種)に依拠する。上場後の同社株価が冴えない値動きを示していることは、そこから経済価値を見出す手法がまだ見出されていないことを示唆する   ...
ビッグ・データとは何か                                                    非構造化データ構造化データ                         FacebookやTwitter、ブログの...
ウエブ(非構造化データ)から経済価値を引き出す2通りの手法 • ①AI的アプローチ • 自然言語処理:ユーザーの質問を理解する。FacebookやTwitterなどソーシャル・   メディア上の書き込みを自然言語解析して中身(意味)を読み取る ...
ウエブから経済価値を引き出す2通りの手法                   ビッグ・データの経済価値  ウエブ自体を構造化して                     AI的手法でウエブ情報                          ...
グーグルが選んだ道:セマンティック検索 • 検索エンジンの世代交代が間近に:セマンティック検索の登場 • http://www.wolframalpha.com/ • Googleのセマンティック検索もこれに似ている              ...
検索エンジン:変化のポイント• 従来の検索エンジンは、キーワードにマッチ、あるいは関係したホーム・ページを  表示するだけ• これからの検索エンジンは、ユーザーの求める情報そのものをズバリと回答する  ようになる。• それを実現するためには、検...
HTML5に用意されたセマンティック・タグ• HTML5には、ホーム・ページの論理的な構造を明示するための、いわゆるセマンティッ  ク・タグが多数用意されている。セマンティック(意味的な)・タグとは、文字通り、ホーム・  ページを構成するHTM...
新たなタグ以外にも、ウエブを構造化する手法はある RDF(Resource Description Framework) RDFa RDFa Lite Microdata(Schema.org) Microformat Open Graph  ...
最も普及しているのは、FacebookのOpen Graph                                                      理由:Open Graphを採用すると、                  ...
まとめ:今後のホームページ製作の留意点• ①Googleのセマンティック検索が開始された時点で、自社のホームページを検索結果の  (なるべく)上位に表示させる(いわゆるSEOの)ためには、Microdata(Schema.org)を  採用する...
Upcoming SlideShare
Loading in …5
×

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

2,238 views

Published on

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

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

No Downloads
Views
Total views
2,238
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
52
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. members HTML5を巡るICT業界の動向 26
  2. 2. HTML5に対する米IT列強のスタンス• Apple:HTML5の事実上の発起人、当初はAdobe Flashを排斥する上で、 HTML5の強力な推進者 → 今はiOS、iTunesとの絡みで、HTML5に対して は微妙なスタンス• Google:Microsoftへの対抗上、当初はHTML5の強力な推進者 → 今は Androidとの絡みで、HTML5に対しては微妙なスタンス• Micorosoft:当初、HTML5には消極的だった → 今はiOSやAndroidに対抗す る上で、HTML5にはかなり積極的• Facebook:上記3社のような固有プラットフォームに対するシガラミがないので、 HTML5を全面的に支持 27
  3. 3. HTML5を巡る動き:Facebookのケース• AppleやGoogleとは対照的に、Facebookはモバイル端末やモバイルOS、ブラウザを持たないので、 この部分が弱点になっており。• これに対処するため、Operaを買収して自らブラウザを提供する、さらに自らスマートフォンを開発する との噂が聞かれる。実現すれば、AppleやGoogleに対抗する動き• Device APIやブラウザの速度などの点において、Facebook経由で提供されるウエブ・アプリに最適 化された環境を実現したい V.S. ? 28
  4. 4. コンテンツ・プロバイダー(CP)はHTML5に期待• 既に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• 日本経済新聞 29
  5. 5. Web Application(HTML5)への移行を始めた企業• Netflix(インターネット動画サービス)• Salesforce(クラウド型CRM)• SlideShare(クラウド型プレゼンテーション)• Facebook Platform(2011年10月)• LinkedIn(2011年?月)• 移行の背景• Apple App Storeに代表される個別プラットフォームの横暴への対抗策• クラウド型サービスにしておけば、単一コンテンツがどのメーカーのどんな機種 にも対応できる• 課題:知名度の低いCPは、ユーザーに認知されない 30
  6. 6. Facebookのウエブ・アプリ(HTML5)戦略 ウエブ・アプリ:3つの問題 ①「中小のソフト開発業者が製作したウエブ・アプ リは、ユーザーの目にとまりにくいこと」 ②「(異なるブラウザに応じて)動き方にバラつき が生まれるフラグメンテーション」 ③「課金システムなどマネタイジングが整備されて いないこと」である。 Facebookは同社の「Open Graph」と呼ばれるモ バイル端末向けのソーシャル・グラフを中小のソフ ト開発業者に開放し、①の問題を解決する。 またW3Cと協力し、「ringmark」と呼ばれるベンチ マーク・テストを実施し、異なるブラウザの互換性 を向上させ、②の問題を解決する。 さらに世界各国のキャリアと提携して、キャリア決 済の仕組みをウエブ・アプリ市場に導入することで ③の問題を解決するという。 31
  7. 7. 通信キャリアのHTML5への取り組みWAC(Wholesale Applications Community) One API by GSMA iPhoneやAndroidに奪われたモバイル・ビジネスの主導権を、HTML5によって取り戻したい 32
  8. 8. 業界の勢力図(ネイティブ・アプリ時代) Samsung Apple HTC Google 端末メーカー コンテンツ・ 通信キャリア 通信キャリア プロバイダー コンテンツ・通信キャリア プロバイダー 33
  9. 9. 業界の勢力図(ウエブ・アプリ時代) 端末メーカー GoogleApple 通信キャリア Facebook 通信キャリア通信キャリア アプリ開発業者 アプリ開発業者 コンテンツ・ アプリ開発業者 コンテンツ・ プロバイダー プロバイダー 34
  10. 10. 日本企業のHTML5戦略 35
  11. 11. 現状分析:米IT列強のプラットフォームに拘束されるCPネイティブ・アプリの配信システムは、プラットフォーム各社が提供する閉鎖的なシステム iPhone User Android User Windows Phone Blackberry User Kindle User Userアプリ配信 支払(100%) アプリ配信 Google Play (Android Market) Career’s Windows Phone Kindle Store BlackberryApp Store(iTunes) App market App World Marketplace 支払(70%) アプリ提供 アプリ提供 アプリ開発業者 36
  12. 12. HTML5がCPにもたらすチャンスHTML5製のウエブ・アプリにすれば、(原理的には)ユーザーに直接コンテンツを配信できる 支払 アクセス(利用) ウエブ・アプリ アプリ開発業者のウエブ・サイト 37
  13. 13. HTML5がCPにもたらすチャンス実際には、CPは通信キャリアやSNS業者と組むことになりそう。たとえば、こんな形で・・・ 支払(100%) ウエブ・アプリ を紹介 キャリアBの キャリアAの キャリアCの ウエブアプリ・マーケット ウエブアプリ・マーケット ウエブアプリ・マーケット Social Network Site 支払(90%) such as Facebook アクセス(利用) ライセンス提供 ウエブ・アプリ アプリ開発業者のウエブ・サイト 38
  14. 14. HTML5がCPにもたらすチャンス あるいは、こんな形も・・・ 支払(100%) ウエブ・アプリ を紹介 キャリアBの キャリアAの キャリアCのアクセス(利用) ウエブアプリ・マーケット ウエブアプリ・マーケット ウエブ・ ウエブアプリ・マーケット アプリB ウエブ・ アプリC Social Network Site 支払(90%) ウエブ・アプリD ウエブ・アプリを提供 アプリ開発業者 39
  15. 15. HTML5が日本のメーカーにもたらすチャンス アップル 日本メーカー A社のコンテンツ B社のコンテンツ C社のコンテンツ iTunes(App store) 配信システム 配信システム 配信システム A社製の各種端末 B社製の各種端末 C社製の各種端末 アップル製端末 スマートフォン、 スマートフォン、 スマートフォン、 iPhone, iPad, iPod, タブレット、 タブレット、 タブレット、 iTV・・・ ウエブTV・・・ ウエブTV・・・ ウエブTV・・・ アップルが提供するコンテンツは 日本メーカーが提供するコンテンツは アップル製端末でしか使えない どのメーカーの端末でも使える どっちにしようかなあ・・・ コンテンツに互換性のある日本製のほうが得かなあ・・・ 40
  16. 16. 日本企業のプラットフォーム戦略を考える上で:HTML5の本質• ブラウザがアプリケーションのプラットフォームになる• HTML5のオフライン機能• Device API:内部部品(カメラ、センサー等)へのアクセス機能等々・・・• ブラウザとOSの境界線が消える、ブラウザがOSになる •Browser ≒ OS • ブラウザーが情報処理のプラットフォームになる ウエブ・アプリ ネイティブ・アプリ Platform = Browser Platform = OS OS これまで これから 41
  17. 17. ブラウザとOSの一体化:Boot to Gecko at MWC2012 42
  18. 18. HTML5が日本企業にもたらすチャンス プラットフォーム製作への参加が可能に これまで これから W3Cが共同管理するこの部分に、 日本企業は口出しできる ブラウザ=アプリ・プラットフォーム この2層は OS = アプリ・プラットフォーム いずれ一体化する OS (基本的にWindows) (iOS, Android, Windows・・・)マイクロソフトが単独で所有するこの部分に、 米IT各社が個々に所有するこの部分に、日本企業は口出しできなかった 日本企業は相変わらず口出しできない HTML5が日本メーカーにもたらすチャンス 経済的な価値を生み出すのは、各種アプリの花が咲くプラットフォームの方だ 。 アプリ・プラットフォームが上位層(ブラウザ)に移行することで、端末メーカーにもチャンスが生まれる。 詳しい説明は、「日本企業復活へのHTML5戦略」(小林雅一、光文社)で 43
  19. 19. FacebookやGoogleは今、どんな未来を見据えているのか? 「セマンティック化するウエブとHTML5の関係」 44
  20. 20. Facebookとビッグ・データFacebookの企業価値は、彼らが持つ大量の個人情報(ビッグ・データの一種)に依拠する。上場後の同社株価が冴えない値動きを示していることは、そこから経済価値を見出す手法がまだ見出されていないことを示唆する 45
  21. 21. ビッグ・データとは何か 非構造化データ構造化データ FacebookやTwitter、ブログのような ソーシャル・メディアに投稿されるコメ ント、写真、音楽、動画など ウエブ情報 企業の情報システムに格納された 「顧客情報」「売上げデータ」など FeliCa, NFC。各種センサーな Relational Database どを搭載した端末、装置、機器 などから、時々刻々と上がって くる計測データ 46
  22. 22. ウエブ(非構造化データ)から経済価値を引き出す2通りの手法 • ①AI的アプローチ • 自然言語処理:ユーザーの質問を理解する。FacebookやTwitterなどソーシャル・ メディア上の書き込みを自然言語解析して中身(意味)を読み取る • 画像、音声などの認識技術:ソーシャル・メディアにアップされた写真、動画、音楽 などを解析する • 機械学習:以上の情報を総合することで各種のパターンを抽出する • ②セマンティック・ウエブ • 元々、ウエブの創始者であるTim Berners-Lee氏が提唱したアイディア • ウエブ(HTML文書)の記述スタイルを変更することにより、ホーム・ページの内容 に意味を含ませる • 当初はあまり上手く行かなかったが、ここに来て普及し始めた。 47
  23. 23. ウエブから経済価値を引き出す2通りの手法 ビッグ・データの経済価値 ウエブ自体を構造化して AI的手法でウエブ情報 (非構造化データ)から 意味を持たせる 意味を引き出す (Semantic Web) ビッグ・データの経済価値に到達するには、2つの登坂ルート(手法)がある 48
  24. 24. グーグルが選んだ道:セマンティック検索 • 検索エンジンの世代交代が間近に:セマンティック検索の登場 • http://www.wolframalpha.com/ • Googleのセマンティック検索もこれに似ている 49
  25. 25. 検索エンジン:変化のポイント• 従来の検索エンジンは、キーワードにマッチ、あるいは関係したホーム・ページを 表示するだけ• これからの検索エンジンは、ユーザーの求める情報そのものをズバリと回答する ようになる。• それを実現するためには、検索エンジンが質問の意味やホーム・ページの中身 の「意味」を理解する必要がある• Keyword Matching → Semantic Search(意味検索)• Googleが採用した3つの手法• ①AI的アプローチ:自然言語処理、画像解析、パターン認識• ②セマンティック・ウエブ:HTML5のセマンティック・タグ、Microdata・・・• ③外部の構造化データ:Freebase、CIA World Factbook・・・ 50
  26. 26. HTML5に用意されたセマンティック・タグ• HTML5には、ホーム・ページの論理的な構造を明示するための、いわゆるセマンティッ ク・タグが多数用意されている。セマンティック(意味的な)・タグとは、文字通り、ホーム・ ページを構成するHTML文書内の各記述が、それぞれ何を意味するかを明示したタグで ある。• <article>: このタグで囲まれた部分が、新聞やブログなどの「記事(article)」であることを 意味する• <footer>: このタグで囲まれた部分が、ある文書のフッター(著作権、引用文献などを指 す)であることを意味する• <figure>: このタグで囲まれた部分が、何かの図やイメージなどであることを意味する• <figurecap>: このタグで囲まれた部分が、図のキャプションであることを意味する• ・・・• ・・・• ・・・ 51
  27. 27. 新たなタグ以外にも、ウエブを構造化する手法はある RDF(Resource Description Framework) RDFa RDFa Lite Microdata(Schema.org) Microformat Open Graph 出展:”Semantic Commerce: Structuring Your Retail Website for the Next Generation Web” by Marc Mezzacca 52
  28. 28. 最も普及しているのは、FacebookのOpen Graph 理由:Open Graphを採用すると、 自社のホームページがFacebook のソーシャル・グラフに組み込まれ るので、自社HPへのトラフィックを 急増させることができる 53 出展:”Semantic Commerce: Structuring Your Retail Website for the Next Generation Web” by Marc Mezzacca
  29. 29. まとめ:今後のホームページ製作の留意点• ①Googleのセマンティック検索が開始された時点で、自社のホームページを検索結果の (なるべく)上位に表示させる(いわゆるSEOの)ためには、Microdata(Schema.org)を 採用するのが得策• ②Facebookのソーシャル・グラフに組み入れられる事によって、自社のホームページへ のトラフィックを最大化するためには、Open Graphを採用するのが得策• ただし①と②は互いに相容れないものではない(両方、採用することも可能)• ③HTML5のセマンティック・タグを採用することは、Googleのセマンティック検索と Facebookのソーシャル・グラフの両方に対応できる• 要するに①、②、③の全てを採用することは可能だが、そうするとHP製作が複雑になる• →労力と効果のトレードオフを考慮する必要がある 54

×