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

More Related Content

What's hot

What's hot (19)

Web rtcの使い方
Web rtcの使い方Web rtcの使い方
Web rtcの使い方
 
node.js 版 GotAPI 実装 - node-gotapi
node.js 版 GotAPI 実装 - node-gotapinode.js 版 GotAPI 実装 - node-gotapi
node.js 版 GotAPI 実装 - node-gotapi
 
デバイスWeb apiコンソーシアム 第四回資料(RemoteRelay with Thermal camera)
デバイスWeb apiコンソーシアム 第四回資料(RemoteRelay with Thermal camera)デバイスWeb apiコンソーシアム 第四回資料(RemoteRelay with Thermal camera)
デバイスWeb apiコンソーシアム 第四回資料(RemoteRelay with Thermal camera)
 
デバイスWebAPIを用いた各種ソリューション適用事例の紹介
デバイスWebAPIを用いた各種ソリューション適用事例の紹介デバイスWebAPIを用いた各種ソリューション適用事例の紹介
デバイスWebAPIを用いた各種ソリューション適用事例の紹介
 
iPhoneでなんちゃってWebRTC
iPhoneでなんちゃってWebRTCiPhoneでなんちゃってWebRTC
iPhoneでなんちゃってWebRTC
 
2018年のハイブリッドクラウド事情と 2019年のクラウド予想!
2018年のハイブリッドクラウド事情と 2019年のクラウド予想!2018年のハイブリッドクラウド事情と 2019年のクラウド予想!
2018年のハイブリッドクラウド事情と 2019年のクラウド予想!
 
IoTに最適なセキュアなVPN通信のご紹介
IoTに最適なセキュアなVPN通信のご紹介IoTに最適なセキュアなVPN通信のご紹介
IoTに最適なセキュアなVPN通信のご紹介
 
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
 
IE8 滅びろ
IE8 滅びろIE8 滅びろ
IE8 滅びろ
 
SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術
 
Communication×Hack 事前スライド 〜WebRTCで次世代のコミュニケーションをHackする〜
Communication×Hack 事前スライド 〜WebRTCで次世代のコミュニケーションをHackする〜Communication×Hack 事前スライド 〜WebRTCで次世代のコミュニケーションをHackする〜
Communication×Hack 事前スライド 〜WebRTCで次世代のコミュニケーションをHackする〜
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )
 
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
注目の最新技術「WebRTC」とは? -技術概要と事例紹介-
 
デバイス WebAPI設計の進め方
デバイス WebAPI設計の進め方デバイス WebAPI設計の進め方
デバイス WebAPI設計の進め方
 
L2延伸を利用したクラウド移行とクラウド活用術
L2延伸を利用したクラウド移行とクラウド活用術L2延伸を利用したクラウド移行とクラウド活用術
L2延伸を利用したクラウド移行とクラウド活用術
 
Html5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap TipsHtml5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap Tips
 
ニフティクラウドでのVyOS利用事例
ニフティクラウドでのVyOS利用事例ニフティクラウドでのVyOS利用事例
ニフティクラウドでのVyOS利用事例
 
Blazor Server テンプレート解説
Blazor Server テンプレート解説Blazor Server テンプレート解説
Blazor Server テンプレート解説
 
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTCスマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
 

Viewers also liked (6)

SkyWay Vision & Mission
SkyWay Vision & MissionSkyWay Vision & Mission
SkyWay Vision & Mission
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
 
HTTP/2の現状とこれから
HTTP/2の現状とこれからHTTP/2の現状とこれから
HTTP/2の現状とこれから
 
HTTP/2 入門
HTTP/2 入門HTTP/2 入門
HTTP/2 入門
 
AWSで実現するクラウドネイティブなアプリ開発のポイント
AWSで実現するクラウドネイティブなアプリ開発のポイントAWSで実現するクラウドネイティブなアプリ開発のポイント
AWSで実現するクラウドネイティブなアプリ開発のポイント
 
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
 

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

【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
Developers Summit
 
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報
モノビット エンジン
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Akira Inoue
 

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

モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせモバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効 率化するツールを使いこなせ
 
Yahoo!ブラウザーにおける市場環境の分析と戦略化
Yahoo!ブラウザーにおける市場環境の分析と戦略化Yahoo!ブラウザーにおける市場環境の分析と戦略化
Yahoo!ブラウザーにおける市場環境の分析と戦略化
 
革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
 
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
 
IoT Application Development by XPages on Bluemix
IoT Application Development by XPages on BluemixIoT Application Development by XPages on Bluemix
IoT Application Development by XPages on Bluemix
 
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
 
ニフクラ mobile backend チームのCIツール活用事例紹介
ニフクラ mobile backend チームのCIツール活用事例紹介ニフクラ mobile backend チームのCIツール活用事例紹介
ニフクラ mobile backend チームのCIツール活用事例紹介
 
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報
 
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報 - モノビットエンジン - GTMF 2018 O...
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報 - モノビットエンジン - GTMF 2018 O...VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報 - モノビットエンジン - GTMF 2018 O...
VRライブ・コミュニケーションサービス「バーチャルキャスト」でのモノビットエンジンの採用事例と最新情報 - モノビットエンジン - GTMF 2018 O...
 
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
イノベート・ハブ九州 Bluemix勉強会(第2回)
イノベート・ハブ九州 Bluemix勉強会(第2回)イノベート・ハブ九州 Bluemix勉強会(第2回)
イノベート・ハブ九州 Bluemix勉強会(第2回)
 
たかがAPI,されどAPI、シナジーで広がるビジネスチャンス
たかがAPI,されどAPI、シナジーで広がるビジネスチャンスたかがAPI,されどAPI、シナジーで広がるビジネスチャンス
たかがAPI,されどAPI、シナジーで広がるビジネスチャンス
 
IoTの技術的課題と実現のポイント~実装例・エンジニアリングのヒント
IoTの技術的課題と実現のポイント~実装例・エンジニアリングのヒントIoTの技術的課題と実現のポイント~実装例・エンジニアリングのヒント
IoTの技術的課題と実現のポイント~実装例・エンジニアリングのヒント
 
IoTの技術的課題と実現のポイント~実装例・エンジニアリングのヒント
IoTの技術的課題と実現のポイント~実装例・エンジニアリングのヒント IoTの技術的課題と実現のポイント~実装例・エンジニアリングのヒント
IoTの技術的課題と実現のポイント~実装例・エンジニアリングのヒント
 
MozOpenHardプロジェクトと そのコア技術について
MozOpenHardプロジェクトと そのコア技術についてMozOpenHardプロジェクトと そのコア技術について
MozOpenHardプロジェクトと そのコア技術について
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
 
【C-2】スマホアプリの開発は、エンタメとエンプラでどこまで違う?
【C-2】スマホアプリの開発は、エンタメとエンプラでどこまで違う?【C-2】スマホアプリの開発は、エンタメとエンプラでどこまで違う?
【C-2】スマホアプリの開発は、エンタメとエンプラでどこまで違う?
 

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