Firefox Developers Conference 2015 in Tokyo

1. Newphoria Corporation
Embedded Webで加速するWeb of Things
2015年11月15日(日)
Firefox Developers Conference 2015 in Tokyo
@futomi futomi.hatano
http://www.newphoria.co.jp/

2. Newphoria Corporation
自己紹介
マークアップ解説本 API解説本 APIチュートリアル本Windows 8API解説本
日経SYSTMS 連載
こんなに変わったWeb開発 / SEは避けて通れない!HTML5の基本テクニック
2

3. Newphoria Corporation
下がり続けるウェブの消費時間
http://nielsen.com/us/en/reports/2014/an-era-of-growth-the-cross-platform-report.html
Webは死んだのか？

4. Newphoria Corporation
もくじ
• Webの歴史を振り返る
• 産業界ごとのWeb標準化
• Web of Things
• Webはどこへ向かうのか

5. Newphoria Corporation
Webの歴史を振り返る
Webの誕生から25年以上が経過

6. Newphoria Corporation
ウェブの誕生から25年以上が経過
1989年
Tim Berners-Lee
がHTMLを発明
世界初のウェブ
ページが公開
1990年 1994年
World Wide Web
Consortium設立
http://home.web.cern.ch/topics/birth-web
1993年
WebがPublic
Domainに
2014年

7. Newphoria Corporation
アプリ基盤としてのWebへ
• HTML5でWebがリッチになった
• プラグインはHTML5によってほとんど駆逐された
• スマートフォンアプリもHTML5で作れるようになった

8. Newphoria Corporation
アプリ基盤としてのWebへ
• HTML5でWebがリッチになった
• プラグインはHTML5によってほとんど駆逐された
• スマートフォンアプリもHTML5で作れるようになった
これで満足なのか？

9. Newphoria Corporation
産業界ごとのWeb標準化
PC・スマートフォンからテレビや車載機器へ

10. Newphoria Corporation
http://www.nhk.or.jp/hybridcast/online/
http://www.iptvforum.jp/hybridcast/receiver.html

11. Newphoria Corporation

12. Newphoria Corporation
W3Cにおける標準化活動
• グループ
• Web and TV Interest Group
• Web and Broadcasting Business Group
• Second Screen Working Group
• TV Control API Community Group
• スペック
• Presentation API
• http://www.w3.org/TR/presentation-api/
• 特定のコンテンツをセカンドクリーンに表示 (Miracast, DLNAなど)
• TV Control API Specification
• http://w3c.github.io/tvapi/spec/
• チャンネル、番組表、録画、再生などの制御

13. Newphoria Corporation
Web-based Signage

14. Newphoria Corporation
DSJ/APPS JAPAN 2015

15. Newphoria Corporation
TPAC 2015で使われたWeb-based Signage
ブラウザー内蔵パネル提供協力：ソニー、東芝、パナソニック、三菱電機
JS Player開発・コンテンツ制作：ニューフォリア

16. Newphoria Corporation
W3Cにおける標準化活動
• グループ
• Web-based Signage Business Group
• Working Groupチャーターに向けて活動中
• スペック
• Working Groupでの対象APIを選定中
• 電源管理、時間同期、スクリーン管理 (電源, 色設定, 輝度設定など)、CPU状態把
握 (ロード, 温度)、メモリー消費量把握、マルチキャストビデオ再生、外部スト
レージ (USB, SD) などが候補に

17. Newphoria Corporation
Web-based Signageにおけるデバイス連携
USB
(power feeding,
serial communication)
SBC
(e.g. RPi)
Microcontroller
(e.g. Arduino)
Ultrasonic
Sensor
Temperature
Sensor
WebSocket
Server
JS
Player
Companion
Plug-in
Sensor
Device
Request
response
event
WebSocket Protocol
( ws://localhost:18000 )
Request
response
event
Serial
( 115200 baud )
Data
pass-through
ニューフォリアの実験的取り組み

18. Newphoria Corporation
In-Vehicle Infotainment

19. Newphoria Corporation
QNX CAR Platform for Infotainment
http://www.qnx.com/products/qnxcar/
http://youtu.be/rvaSWqxMg6k

20. Newphoria Corporationhttps://www.automotivelinux.org/
Automotive Grade Linux

21. Newphoria Corporation
W3Cにおける標準化活動
• グループ
• Automotive and Web Platform Business Group
• Automotive Working Group
• スペック
• Vehicle Information Access API
http://www.w3.org/TR/vehicle-information-api/
• Vehicle Data
http://www.w3.org/TR/vehicle-data/

22. Newphoria Corporation
APIの一例
• 車速(km/h)
• エンジン回転数(rpm)
• イグニションスイッチ位置
• アクセルペダル位置(%)
• スロットル位置(%)
• トリップメーター
• ギア位置
• クルーズコントロール状態
• ライト点灯状況
• 車内灯の点灯状況
• ガソリン残量レベル(%)
• 燃費(リットル/100km)
• エンジンオイル状態
• 加速度
• 位置情報
• クーラント状態

23. Newphoria Corporation
車速の取得のコード例
navigator.vehicle.vehicleSpeed.get().then(
function(vehicleSpeed) {
console.log("車速：" + vehicleSpeed.speed);
},
function(error) {
console.log("エラー");
}
);
navigator.vehicle.vehicleSpeed.subscribe(
function(vehicleSpeed) {
console.log("車速：" + vehicleSpeed.speed);
}
);
One-shot:
Listener:

24. Newphoria Corporation
W3C TPAC 2015 でのACCESS社のデモ展示
本技術は、SIP（戦略的イノベーション創造プ
ログラム）の課題「自動走行システム研究開
発」における総務省の個別施策『ICT を活用し
た次世代ITS の確立』での受託研究機関である
(株)KDDI総研から(株)ACCESSがブラウザ開発
企業としての選定を受け、開発したもの。
http://www8.cao.go.jp/cstp/gaiyo/sip/
ACCESS社によるAPI実装

25. Newphoria Corporation
みんなも試せる Webで車載情報の取得

26. Newphoria Corporation
ODB-IIコネクタ

27. Newphoria Corporation
ODB-IIアダプタ (ELM327互換)
USB Serial Bluetooth RFCOMM/L2CAP

28. Newphoria Corporation
Chrome Appsでアプリを作ってみた
• Chrome Platform APIs
• bluetooth API
• bluetoothSocket API
• serial API
• ODB-II ECU Simulator
• ISO 15765-4 (CAN)
• ODB-II Adapter
• IC: STN1100 (ELM327互換)
• Interface: USB Serial
• baud rate: 115,200 bps

29. Newphoria Corporation

30. Newphoria Corporation

31. Newphoria Corporation

32. Newphoria Corporation

33. Newphoria Corporation

34. Newphoria Corporation
Web of Things
Webがモノへ

35. Newphoria Corporation
SBC (Single Board Computer)
Raspberry Pi B+ BeagleBone Black ODROID-U3 ODROID-C1
Cubieboard 1/2 Marsboard RK3066 Radxa Rock Lite
HummingBoard i1/i2
Banana Pi KDDI Open Web Board
ODROID-XU4
pcDuino3 Nano

36. Newphoria Corporation
MozOpenHard CHIRIMEN

37. Newphoria Corporation
CHIRIMENでWeb-based Signage at TPAC
Hosted Appsインストーラー Hosted Appアイコン
大事な現地での写真撮影を忘れ
てました (;^_^A ｱｾｱｾ･･･
関係者のみなさま、もしお持ち
でしたら、ください。

38. Newphoria Corporation
W3Cにおける標準化活動
• Web of Things Interest Group
• JSON-LDベースのモノの記述
• Browsers and Robotics Community Group
• SBCのGPIO/I2Cの低レベルAPIの設計
• スペック
• Web I2C API
https://rawgit.com/browserobo/WebI2C/master/index.html
• Web GPIO API
• https://rawgit.com/browserobo/WebGPIO/master/index.html

39. Newphoria Corporation
Web I2C API
https://rawgit.com/browserobo/WebI2C/master/index.html
navigator.requestI2CAccess().then(function(i2c) {
i2c.open((i2c.ports.get(1)).portNumber).then(function(port) {
var slaveAddress = 0x40;
port.open(slaveAddress).then(function(slave) {
var registar = 0x10;
// 読み取り
slave.read8(registar).then(function(value) {
console.log(slaveAddress + " < " + value);
});
// 書き込み
slave.write8(registar, 1).then(function(value) {
console.log(slaveAddress + " > " + value);
});
});
});
});

40. Newphoria Corporation
Web GPIO API
https://rawgit.com/browserobo/WebGPIO/master/index.html
navigator.requestGPIOAccess().then(function(gpio) {
// 読み取り
gpio.ports.get(18).then(function(port) {
port.export("in").then(function() {
// ワンショット
port.read().then(function(value) {
console.log(port.portName + " < " + value);
});
// イベントハンドラ
port.onchange = function(event) {
console.log(event.port.portName + " < " + event.value);
};
});
});
// 書き込み
gpio.ports.get(19).then(function(port) {
port.export("out").then(function() {
port.write(1).then(function(value) {
console.log(port.portName + " > " + value);
});
});
});
});

41. Newphoria Corporation
Webはどこへ向かうのか
これからのWeb像

42. Newphoria Corporation
Gartner Hype Cycle
https://www.gartner.co.jp/research/methodologies/research_hype.php

43. Newphoria Corporation
Hype Cycle for Emerging Technologies, 2012
HTML5絶頂期
猫も杓子もHTML5と叫べば
注目される時代
でも実はまだHTML5で誰も
儲かっていない時代
HTML5はココ

44. Newphoria Corporation
Hype Cycle for Emerging Technologies, 2015
http://www.gartner.com/newsroom/id/3114217
HTML5の名前はもうない...
もはやトレンドではない
当たり前の技術に
HTML5は他の産業と融合
新たな技術トレンドといかに
組み合わせるかが鍵

45. Newphoria Corporation
One Web
W3Cのミッション
• Design Principles
• Web for All
• Web on Everything
• Vision
• Web for Rich Interaction
• Web of Data and Services
• Web of Trust
Web of Devices
• 一般的なケース
• Mobile, Voice Browsing, TVなど
• 任意のコンテンツをユーザーが使う
モノが中心
• セキュリティーとプライバシーの対
策は重要
• 私が思うEverythingの範囲
• ユーザーが介在しない、または、特
定のコンテンツだけを扱うモノ
http://www.w3.org/Consortium/mission.html http://www.w3.org/standards/webofdevices/

46. Newphoria Corporation
私のWeb on Everything
ディスプレイが存在するモノから、 ディスプレイが存在しないモノまで
スペックやコスト的に組み込み機器にブラウザーなんて無理と言われるが...

47. Newphoria Corporation
デバイスのスペックの進化
2010年10月 2015年4月
ROM
GALAXY S SC-02B
発売日
CPU
画面解像度 480 x 800
1GHz (1 core)
16.5GB
RAM 512MB
GALAXY S6 SC-05G
1440 x 2560
2.1GHz (8 cores)
32GB
3GB

48. Newphoria Corporation
組込み機器向けブラウザーチューニング
• GPUアクセラレーション
• JavaScriptエンジンの性能向上
ルネサス R-Car H1に最適化したACCESS NetFront Browser NX
http://monoist.atmarkit.co.jp/mn/articles/1212/28/news064.html

49. Newphoria Corporation
ウェブは見せるもの？
Internet of Everything
Internet of Things Web of Things
ヒト
モノ つなぐ/見せる
Big Data
ためる
解析する

50. Newphoria Corporation
ウェブ技術をモノにも
Internet of Everything
Web of Things
ヒト
つなぐ/見せる
Big Data
ためる
解析する
Web of Things
モノ

51. Newphoria Corporation
Embedded Web
組込み専用機器向けWebのことを

52. Newphoria Corporation
Embedded Web
組込み専用機器向けWebのことを
と私の周りで勝手に呼んでいる :)

53. Newphoria Corporation
Embedded Web
組込み専用機器向けWebのことを
と私の周りで勝手に呼んでいる :)
これが私のOne Webの形

54. Newphoria Corporation
ご清聴ありがとうございました
@futomi futomi.hatano
http://www.newphoria.co.jp/