O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

3.191 visualizações

Publicada em

HTML5 conference 2017 公開用

Publicada em: Dispositivos e hardware
  • Seja o primeiro a comentar

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 採用のお問い合わせはこちらまで

×