HTML5 conference 2017 公開用

1. P. 1P. 1
HTML5 Conference 2017
TV・車・ゲームに搭載されているブラウザって
どうなってるの？

2. P. 2P. 2
自己紹介
名前：梅田雅士
所属：株式会社 ACCESS IoT事業本部 ブラウザ開発 の 課長
NetFront Browserの開発
React.js, Vue.jsを使ったウェブサービスの開発
NetFront NX/BEチームのマネージャー

3. P. 3P. 3
ACCESSって？
iモードのブラウザを作った会社
Compact HTML を 提案し、
モバイルデバイスからの
インターネットアクセスを実現

4. P. 4P. 4
組込ブラウザ

5. P. 5P. 5
組込ブラウザとは？
PC/スマホブラウザ
- オープンインターネットの閲覧
- Web サービスの利用
組込ブラウザ
- デバイス とその 市場に特化した機能
- TV 向けサービス、車向けサービス
- linux から ITRON まで色々な環境
車TV ゲーム

6. P. 6P. 6
組込ブラウザをやっている企業
ACCESS (日本) 車、TV、ゲーム
Obigo (韓国) 車
Esipial (カナダ） TV
Vewd (ノルウェイ 旧Opera) : TV
自社開発でWebKit or Chromiumを利用している企業もある
Mozilla も積極的に参加

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. P. 8P. 8
テレビ の ブラウザ

9. P. 9P. 9
テレビ の ブラウザ dデータボタン から ブラウザを起動
TVの映像
天気予報の情報とか
TVの内容を補足
する情報とか
映像以外の部分をブラウザで表示

10. P. 10P. 10
メニュー を HTML アプリで実現

11. P. 11P. 11
メニューから呼び出すアプリもHTMLアプリで実現

12. P. 12P. 12
番組表 を HTML アプリで実現

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. P. 14P. 14
Youtube専用ブラウザ

15. P. 15P. 15
• リモコンでの快適な操作を目指しての十字キーでのフォーカスハンドラ
– 一般サイトだとマウスやタッチ前提
• テレビ向け仕様への対応
– JLab拡張 API（日本）
– hbbTV拡張 API（欧州）
• 大画面向け対応とメモリや速度のパフォーマンスチューニング
– 数Kb単位で節約する要望も受ける
• TTML(Timed Text Style Guide)を利用した字幕対応
– Netflixでも採用されている字幕の仕様
– W3Cで規定されている
TV向けブラウザの開発

16. P. 16P. 16
ゲーム の ブラウザ

17. P. 17P. 17
ゲームがブラウザを持つ
ゲーム内一部の機能でブラウジングした結果を表示

18. P. 18P. 18
ゲーム機がブラウザを持つケース
PSP®「プレイステーション・ポータブル」:
NetFrontBrowserでインターネットの閲覧が可能
PlayStation®4:
自社開発でWebKitを利用。インターネットの閲覧が可能。
「PlayStation」および「PSP」は株式会社ソニー・インタラクティブエンタテインメントの
登録商標です。
© 2017 Sony Interactive Entertainment Inc. All rights reserved.

19. P. 19P. 19
車 の ブラウザ

20. P. 20P. 20
車 の ブラウザ
• HMI(Human Machine Interface)としてのUI
• アプリ
• マニュアル
• ブラウジング

21. P. 21P. 21
Jaguar Land Rover
• Webから情報を取得する部分についてブラウザを採用
© 2016 ACCESS CO., LTD. All rights reservedl

22. P. 22P. 22
IVI (In-Vehicle Infotaiment)
GENIVI AGL : Automotive Grame Linux
Infomation + Entertaiment

23. P. 23P. 23
車載アプリの操作の変化

24. P. 24P. 24
• 安全最優先
– 過去にはプロジェクトでFlashのソースのパッチを作ったことも
• 走行中の利用制限
– 運転者の気を散らさないこと（Driver Distraction)
– フォントサイズや位置画面の最大文字数等
車 向けブラウザの開発

25. P. 25P. 25
• WebSocket Vehicle Signal Server
– Vehicle APIを利用してlocal Serverから車両の情報を取得・更新できるように
車 向けブラウザの開発
WebApp
Browser
HW + OS
Vehicle Server WebService
IVI

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. P. 27P. 27
組込ブラウザが創る未来

28. P. 28P. 28
組込の世界でのアプリ開発の変化
PluginからHTML5+Device APIへ

29. P. 29P. 29
今後期待される機能
WebRTC
Browser X WoT
websocketを利用したデバイス連携
web APIを利用したウェブとの連携
=> サービスの REST APIの重要性がましてきている

30. P. 30P. 30
機能の標準化へ
車載ではW3CでVehicle APIを各社集まって定義している
標準化したAPIを提供することで新しいサービスが
生み出されるチャンスが広がっていく
より個人に最適化して
より楽しく
より安全な世の中に
さらなる発展には3rdPartyの参入が不可欠

31. P. 31P. 31
モバイルの独自性からオープン化への変化の例
compactHTML VS WAP
HTMLのサブセットであるcHTML
WMLという独自言語のWAP
WAP2.0でWML+cHTML+XMLとなり。。。

32. P. 32P. 32
組込ブラウザが創る未来
デバイス特化のプラットフォームからオープンなプラットフォームへの変化
いろんなデバイスの上で動かせるチャンスがくる
HTML5の開発者が活躍できる場が増えていく

33. P. 33P. 33
webと車のハッカソン

34. P. 34P. 34
まとめ
ブラウザを組込み向けにつくるということは
PC/スマホで動いていたサービスを新しい環境へ
新しい環境で新しいサービスが生まれる可能性をつくること

35. P. 35P. 35

36. P. 36P. 36
採用のお問い合わせはこちらまで