Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TV・車・ゲームに搭載されているブラウザってどうなっているの?

2,601 views

Published on

HTML5 conference 2017 公開用

Published in: Devices & Hardware
  • Be the first to comment

  • Be the first to like this

TV・車・ゲームに搭載されているブラウザってどうなっているの?

  1. 1. P. 1P. 1 HTML5 Conference 2017 TV・車・ゲームに搭載されているブラウザって どうなってるの?
  2. 2. P. 2P. 2 自己紹介 名前:梅田雅士 所属:株式会社 ACCESS IoT事業本部 ブラウザ開発 の 課長 NetFront Browserの開発 React.js, Vue.jsを使ったウェブサービスの開発 NetFront NX/BEチームのマネージャー
  3. 3. P. 3P. 3 ACCESSって? iモードのブラウザを作った会社 Compact HTML を 提案し、 モバイルデバイスからの インターネットアクセスを実現
  4. 4. P. 4P. 4 組込ブラウザ
  5. 5. P. 5P. 5 組込ブラウザとは? PC/スマホブラウザ - オープンインターネットの閲覧 - Web サービスの利用 組込ブラウザ - デバイス とその 市場に特化した機能 - TV 向けサービス、車向けサービス - linux から ITRON まで色々な環境 車TV ゲーム
  6. 6. P. 6P. 6 組込ブラウザをやっている企業 ACCESS (日本)   車、TV、ゲーム Obigo (韓国) 車 Esipial (カナダ) TV Vewd (ノルウェイ 旧Opera) : TV 自社開発でWebKit or Chromiumを利用している企業もある Mozilla も積極的に参加
  7. 7. P. 7P. 7 ブラウザの移り変わり 2000年初頭 PC: IE, FireFox, Opera 組込: NFB(独自エンジン), Opera(独自エンジン), OpenWeve(WAPブラウザ) 2005年 WebKit OSS化 2007年 初代IPhone発売 2008年 Chromeリリース 2011年 NetFrontNX(WebKit)リリース 2011年 HTML5 LastDraft 2013年 WebKitとBlinkの分離, OperaのChromium利用 2014年 NetFrontBE(Chromium)リリース
  8. 8. P. 8P. 8 テレビ の ブラウザ
  9. 9. P. 9P. 9 テレビ の ブラウザ dデータボタン から ブラウザを起動 TVの映像 天気予報の情報とか TVの内容を補足 する情報とか 映像以外の部分をブラウザで表示
  10. 10. P. 10P. 10 メニュー を HTML アプリで実現
  11. 11. P. 11P. 11 メニューから呼び出すアプリもHTMLアプリで実現
  12. 12. P. 12P. 12 番組表 を HTML アプリで実現
  13. 13. P. 13P. 13 © 2017 ACCESS CO., LTD. All rights reserved. l Confidential Hybridcast Connect とは  放送局 付加サービス 自宅 サービス提供 視聴者 受信機画面 Hybridcast 1 3 サービス管理 サーバー 2 URL 4 放送連動 5 外部サービス連動 Hybridcast Connect 画面 NHKが推進している放送-通信の連携サービス 通信部の仕様としてHTML5を使用
  14. 14. P. 14P. 14 Youtube専用ブラウザ
  15. 15. P. 15P. 15 • リモコンでの快適な操作を目指しての十字キーでのフォーカスハンドラ – 一般サイトだとマウスやタッチ前提 • テレビ向け仕様への対応 – JLab拡張 API(日本) – hbbTV拡張 API(欧州) • 大画面向け対応とメモリや速度のパフォーマンスチューニング – 数Kb単位で節約する要望も受ける • TTML(Timed Text Style Guide)を利用した字幕対応 – Netflixでも採用されている字幕の仕様 – W3Cで規定されている TV向けブラウザの開発
  16. 16. P. 16P. 16 ゲーム の ブラウザ
  17. 17. P. 17P. 17 ゲームがブラウザを持つ ゲーム内一部の機能でブラウジングした結果を表示
  18. 18. P. 18P. 18 ゲーム機がブラウザを持つケース PSP®「プレイステーション・ポータブル」: NetFrontBrowserでインターネットの閲覧が可能 PlayStation®4: 自社開発でWebKitを利用。インターネットの閲覧が可能。 「PlayStation」および「PSP」は株式会社ソニー・インタラクティブエンタテインメントの 登録商標です。 © 2017 Sony Interactive Entertainment Inc. All rights reserved.
  19. 19. P. 19P. 19 車 の ブラウザ
  20. 20. P. 20P. 20 車 の ブラウザ • HMI(Human Machine Interface)としてのUI • アプリ • マニュアル • ブラウジング
  21. 21. P. 21P. 21 Jaguar Land Rover • Webから情報を取得する部分についてブラウザを採用 © 2016 ACCESS CO., LTD. All rights reservedl
  22. 22. P. 22P. 22 IVI (In-Vehicle Infotaiment) GENIVI AGL : Automotive Grame Linux Infomation + Entertaiment
  23. 23. P. 23P. 23 車載アプリの操作の変化
  24. 24. P. 24P. 24 • 安全最優先 – 過去にはプロジェクトでFlashのソースのパッチを作ったことも • 走行中の利用制限 – 運転者の気を散らさないこと(Driver Distraction) – フォントサイズや位置画面の最大文字数等 車 向けブラウザの開発
  25. 25. P. 25P. 25 • WebSocket Vehicle Signal Server – Vehicle APIを利用してlocal Serverから車両の情報を取得・更新できるように 車 向けブラウザの開発 WebApp Browser HW + OS Vehicle Server WebService IVI
  26. 26. P. 26P. 26 Vehicle API (Draft) const vias = new VISClient({ host: 'wwwivi', protocol: 'wss://', port: 443, }); vias.connect .set(() => { return vias.set(" Signal.Cabin.Door.*.IsLocked “, [ { 'Row1.Right.IsLocked': true }, { 'Row1.Left.IsLocked': true }, { 'Row2.Right.IsLocked': true }, { 'Row2.Left.IsLocked' : true }, ]); }) .catch((error) => { console.dir(error); }); Setの例
  27. 27. P. 27P. 27 組込ブラウザが創る未来
  28. 28. P. 28P. 28 組込の世界でのアプリ開発の変化 PluginからHTML5+Device APIへ
  29. 29. P. 29P. 29 今後期待される機能 WebRTC Browser X WoT websocketを利用したデバイス連携 web APIを利用したウェブとの連携 => サービスの REST APIの重要性がましてきている
  30. 30. P. 30P. 30 機能の標準化へ 車載ではW3CでVehicle APIを各社集まって定義している 標準化したAPIを提供することで新しいサービスが 生み出されるチャンスが広がっていく より個人に最適化して より楽しく より安全な世の中に さらなる発展には3rdPartyの参入が不可欠
  31. 31. P. 31P. 31 モバイルの独自性からオープン化への変化の例 compactHTML VS WAP HTMLのサブセットであるcHTML WMLという独自言語のWAP WAP2.0でWML+cHTML+XMLとなり。。。
  32. 32. P. 32P. 32 組込ブラウザが創る未来 デバイス特化のプラットフォームからオープンなプラットフォームへの変化 いろんなデバイスの上で動かせるチャンスがくる HTML5の開発者が活躍できる場が増えていく
  33. 33. P. 33P. 33 webと車のハッカソン
  34. 34. P. 34P. 34 まとめ ブラウザを組込み向けにつくるということは PC/スマホで動いていたサービスを新しい環境へ 新しい環境で新しいサービスが生まれる可能性をつくること
  35. 35. P. 35P. 35
  36. 36. P. 36P. 36 採用のお問い合わせはこちらまで

×