embedded webで加速するweb of things

Newphoria Corporation

Embedded Webで加速するWeb of Things2015年11月15日(日)

Firefox Developers Conference 2015 in Tokyo

@futomi futomi.hatano

http://www.newphoria.co.jp/


自己紹介

マークアップ解説本 API解説本 APIチュートリアル本Windows 8API解説本

日経SYSTMS 連載こんなに変わったWeb開発 / SEは避けて通れない!HTML5の基本テクニック

2


下がり続けるウェブの消費時間

http://nielsen.com/us/en/reports/2014/an-era-of-growth-the-cross-platform-report.html

Webは死んだのか？


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


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


ウェブの誕生から25年以上が経過

1989年

Tim Berners-LeeがHTMLを発明

世界初のウェブページが公開

1990年 1994年

World Wide WebConsortium設立

http://home.web.cern.ch/topics/birth-web

1993年

WebがPublicDomainに

2014年


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


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

これで満足なのか？


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


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


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/• チャンネル、番組表、録画、再生などの制御


Web-based Signage


DSJ/APPS JAPAN 2015


TPAC 2015で使われたWeb-based Signage

ブラウザー内蔵パネル提供協力：ソニー、東芝、パナソニック、三菱電機JS Player開発・コンテンツ制作：ニューフォリア



• Web-based Signage Business Group• Working Groupチャーターに向けて活動中

• スペック• Working Groupでの対象APIを選定中

• 電源管理、時間同期、スクリーン管理 (電源, 色設定, 輝度設定など)、CPU状態把握 (ロード, 温度)、メモリー消費量把握、マルチキャストビデオ再生、外部ストレージ (USB, SD) などが候補に


Web-based Signageにおけるデバイス連携

USB(power feeding,

serial communication)

SBC(e.g. RPi) Microcontroller

(e.g. Arduino)

UltrasonicSensor

TemperatureSensor

WebSocketServer

JSPlayer

CompanionPlug-inSensorDevice

Request

response

event

WebSocket Protocol( ws://localhost:18000 )

Request

response

event

Serial( 115200 baud )

Datapass-through

ニューフォリアの実験的取り組み


In-Vehicle Infotainment


QNX CAR Platform for Infotainmenthttp://www.qnx.com/products/qnxcar/http://youtu.be/rvaSWqxMg6k

Newphoria Corporationhttps://www.automotivelinux.org/

Automotive Grade Linux



• 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/


APIの一例• 車速(km/h)• エンジン回転数(rpm)• イグニションスイッチ位置• アクセルペダル位置(%)• スロットル位置(%)• トリップメーター• ギア位置• クルーズコントロール状態

• ライト点灯状況• 車内灯の点灯状況• ガソリン残量レベル(%)• 燃費(リットル/100km)• エンジンオイル状態• 加速度• 位置情報• クーラント状態


車速の取得のコード例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:


W3C TPAC 2015 でのACCESS社のデモ展示

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

ACCESS社によるAPI実装


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


ODB-IIコネクタ


ODB-IIアダプタ (ELM327互換)

USB Serial Bluetooth RFCOMM/L2CAP


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


Web of ThingsWebがモノへ


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


MozOpenHard CHIRIMEN


CHIRIMENでWeb-based Signage at TPAC

Hosted Appsインストーラー Hosted Appアイコン

大事な現地での写真撮影を忘れてました (;^_^A ｱｾｱｾ･･･

関係者のみなさま、もしお持ちでしたら、ください。


W3Cにおける標準化活動• Web of Things Interest Group

• JSON-LDベースのモノの記述

• Browsers and Robotics Community Group• SBCのGPIO/I2Cの低レベルAPIの設計• スペック

• Web I2C APIhttps://rawgit.com/browserobo/WebI2C/master/index.html

• Web GPIO API• https://rawgit.com/browserobo/WebGPIO/master/index.html


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);});

});});

});


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);});

});});

});


Webはどこへ向かうのかこれからのWeb像


Gartner Hype Cycle

https://www.gartner.co.jp/research/methodologies/research_hype.php


Hype Cycle for Emerging Technologies, 2012

HTML5絶頂期

猫も杓子もHTML5と叫べば注目される時代

でも実はまだHTML5で誰も儲かっていない時代

HTML5はココ


Hype Cycle for Emerging Technologies, 2015

http://www.gartner.com/newsroom/id/3114217

HTML5の名前はもうない...

もはやトレンドではない当たり前の技術に

HTML5は他の産業と融合

新たな技術トレンドといかに組み合わせるかが鍵


One WebW3Cのミッション

• 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/


私のWeb on Everything

ディスプレイが存在するモノから、ディスプレイが存在しないモノまで

スペックやコスト的に組み込み機器にブラウザーなんて無理と言われるが...


デバイスのスペックの進化

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)32GB3GB


組込み機器向けブラウザーチューニング• GPUアクセラレーション• JavaScriptエンジンの性能向上

ルネサス R-Car H1に最適化したACCESS NetFront Browser NXhttp://monoist.atmarkit.co.jp/mn/articles/1212/28/news064.html


ウェブは見せるもの？

Internet of Everything

Internet of Things Web of Things

ヒト

モノつなぐ/見せる

Big Dataためる

解析する


ウェブ技術をモノにも

Internet of Everything

Web of Things

ヒト

つなぐ/見せる

Big Dataためる

解析する

Web of Things

モノ


Embedded Web組込み専用機器向けWebのことを



と私の周りで勝手に呼んでいる :)



と私の周りで勝手に呼んでいる :)

これが私のOne Webの形


ご清聴ありがとうございました

@futomi futomi.hatano

http://www.newphoria.co.jp/

embedded webで加速するweb of things

Technology