embedded webで加速するweb of things
TRANSCRIPT
![Page 1: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/1.jpg)
Newphoria Corporation
Embedded Webで加速するWeb of Things2015年11月15日(日)
Firefox Developers Conference 2015 in Tokyo
@futomi futomi.hatano
http://www.newphoria.co.jp/
![Page 2: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/2.jpg)
Newphoria Corporation
自己紹介
マークアップ解説本 API解説本 APIチュートリアル本Windows 8API解説本
日経SYSTMS 連載こんなに変わったWeb開発 / SEは避けて通れない!HTML5の基本テクニック
2
![Page 3: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/3.jpg)
Newphoria Corporation
下がり続けるウェブの消費時間
http://nielsen.com/us/en/reports/2014/an-era-of-growth-the-cross-platform-report.html
Webは死んだのか?
![Page 4: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/4.jpg)
Newphoria Corporation
もくじ• Webの歴史を振り返る• 産業界ごとのWeb標準化• Web of Things• Webはどこへ向かうのか
![Page 5: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/5.jpg)
Newphoria Corporation
Webの歴史を振り返るWebの誕生から25年以上が経過
![Page 6: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/6.jpg)
Newphoria Corporation
ウェブの誕生から25年以上が経過
1989年
Tim Berners-LeeがHTMLを発明
世界初のウェブページが公開
1990年 1994年
World Wide WebConsortium設立
http://home.web.cern.ch/topics/birth-web
1993年
WebがPublicDomainに
2014年
![Page 7: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/7.jpg)
Newphoria Corporation
アプリ基盤としてのWebへ• HTML5でWebがリッチになった• プラグインはHTML5によってほとんど駆逐された• スマートフォンアプリもHTML5で作れるようになった
![Page 8: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/8.jpg)
Newphoria Corporation
アプリ基盤としてのWebへ• HTML5でWebがリッチになった• プラグインはHTML5によってほとんど駆逐された• スマートフォンアプリもHTML5で作れるようになった
これで満足なのか?
![Page 9: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/9.jpg)
Newphoria Corporation
産業界ごとのWeb標準化PC・スマートフォンからテレビや車載機器へ
![Page 10: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/10.jpg)
Newphoria Corporation
http://www.nhk.or.jp/hybridcast/online/http://www.iptvforum.jp/hybridcast/receiver.html
![Page 11: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/11.jpg)
Newphoria Corporation
![Page 12: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/12.jpg)
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/• チャンネル、番組表、録画、再生などの制御
![Page 13: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/13.jpg)
Newphoria Corporation
Web-based Signage
![Page 14: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/14.jpg)
Newphoria Corporation
DSJ/APPS JAPAN 2015
![Page 15: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/15.jpg)
Newphoria Corporation
TPAC 2015で使われたWeb-based Signage
ブラウザー内蔵パネル提供協力:ソニー、東芝、パナソニック、三菱電機JS Player開発・コンテンツ制作:ニューフォリア
![Page 16: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/16.jpg)
Newphoria Corporation
W3Cにおける標準化活動• グループ
• Web-based Signage Business Group• Working Groupチャーターに向けて活動中
• スペック• Working Groupでの対象APIを選定中
• 電源管理、時間同期、スクリーン管理 (電源, 色設定, 輝度設定など)、CPU状態把握 (ロード, 温度)、メモリー消費量把握、マルチキャストビデオ再生、外部ストレージ (USB, SD) などが候補に
![Page 17: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/17.jpg)
Newphoria Corporation
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
ニューフォリアの実験的取り組み
![Page 18: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/18.jpg)
Newphoria Corporation
In-Vehicle Infotainment
![Page 19: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/19.jpg)
Newphoria Corporation
QNX CAR Platform for Infotainmenthttp://www.qnx.com/products/qnxcar/http://youtu.be/rvaSWqxMg6k
![Page 20: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/20.jpg)
Newphoria Corporationhttps://www.automotivelinux.org/
Automotive Grade Linux
![Page 21: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/21.jpg)
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/
![Page 22: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/22.jpg)
Newphoria Corporation
APIの一例• 車速(km/h)• エンジン回転数(rpm)• イグニションスイッチ位置• アクセルペダル位置(%)• スロットル位置(%)• トリップメーター• ギア位置• クルーズコントロール状態
• ライト点灯状況• 車内灯の点灯状況• ガソリン残量レベル(%)• 燃費(リットル/100km)• エンジンオイル状態• 加速度• 位置情報• クーラント状態
![Page 23: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/23.jpg)
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:
![Page 24: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/24.jpg)
Newphoria Corporation
W3C TPAC 2015 でのACCESS社のデモ展示
本技術は、SIP(戦略的イノベーション創造プログラム)の課題「自動走行システム研究開発」における総務省の個別施策『ICT を活用した次世代ITS の確立』での受託研究機関である(株)KDDI総研から(株)ACCESSがブラウザ開発企業としての選定を受け、開発したもの。http://www8.cao.go.jp/cstp/gaiyo/sip/
ACCESS社によるAPI実装
![Page 25: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/25.jpg)
Newphoria Corporation
みんなも試せる Webで車載情報の取得
![Page 26: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/26.jpg)
Newphoria Corporation
ODB-IIコネクタ
![Page 27: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/27.jpg)
Newphoria Corporation
ODB-IIアダプタ (ELM327互換)
USB Serial Bluetooth RFCOMM/L2CAP
![Page 28: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/28.jpg)
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
![Page 29: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/29.jpg)
Newphoria Corporation
![Page 30: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/30.jpg)
Newphoria Corporation
![Page 31: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/31.jpg)
Newphoria Corporation
![Page 32: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/32.jpg)
Newphoria Corporation
![Page 33: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/33.jpg)
Newphoria Corporation
![Page 34: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/34.jpg)
Newphoria Corporation
Web of ThingsWebがモノへ
![Page 35: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/35.jpg)
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
![Page 36: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/36.jpg)
Newphoria Corporation
MozOpenHard CHIRIMEN
![Page 37: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/37.jpg)
Newphoria Corporation
CHIRIMENでWeb-based Signage at TPAC
Hosted Appsインストーラー Hosted Appアイコン
大事な現地での写真撮影を忘れてました (;^_^A アセアセ・・・
関係者のみなさま、もしお持ちでしたら、ください。
![Page 38: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/38.jpg)
Newphoria Corporation
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
![Page 39: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/39.jpg)
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);});
});});
});
![Page 40: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/40.jpg)
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);});
});});
});
![Page 41: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/41.jpg)
Newphoria Corporation
Webはどこへ向かうのかこれからのWeb像
![Page 42: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/42.jpg)
Newphoria Corporation
Gartner Hype Cycle
https://www.gartner.co.jp/research/methodologies/research_hype.php
![Page 43: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/43.jpg)
Newphoria Corporation
Hype Cycle for Emerging Technologies, 2012
HTML5絶頂期
猫も杓子もHTML5と叫べば注目される時代
でも実はまだHTML5で誰も儲かっていない時代
HTML5はココ
![Page 44: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/44.jpg)
Newphoria Corporation
Hype Cycle for Emerging Technologies, 2015
http://www.gartner.com/newsroom/id/3114217
HTML5の名前はもうない...
もはやトレンドではない当たり前の技術に
HTML5は他の産業と融合
新たな技術トレンドといかに組み合わせるかが鍵
![Page 45: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/45.jpg)
Newphoria Corporation
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/
![Page 46: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/46.jpg)
Newphoria Corporation
私のWeb on Everything
ディスプレイが存在するモノから、 ディスプレイが存在しないモノまで
スペックやコスト的に組み込み機器にブラウザーなんて無理と言われるが...
![Page 47: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/47.jpg)
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)32GB3GB
![Page 48: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/48.jpg)
Newphoria Corporation
組込み機器向けブラウザーチューニング• GPUアクセラレーション• JavaScriptエンジンの性能向上
ルネサス R-Car H1に最適化したACCESS NetFront Browser NXhttp://monoist.atmarkit.co.jp/mn/articles/1212/28/news064.html
![Page 49: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/49.jpg)
Newphoria Corporation
ウェブは見せるもの?
Internet of Everything
Internet of Things Web of Things
ヒト
モノ つなぐ/見せる
Big Dataためる
解析する
![Page 50: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/50.jpg)
Newphoria Corporation
ウェブ技術をモノにも
Internet of Everything
Web of Things
ヒト
つなぐ/見せる
Big Dataためる
解析する
Web of Things
モノ
![Page 51: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/51.jpg)
Newphoria Corporation
Embedded Web組込み専用機器向けWebのことを
![Page 52: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/52.jpg)
Newphoria Corporation
Embedded Web組込み専用機器向けWebのことを
と私の周りで勝手に呼んでいる :)
![Page 53: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/53.jpg)
Newphoria Corporation
Embedded Web組込み専用機器向けWebのことを
と私の周りで勝手に呼んでいる :)
これが私のOne Webの形
![Page 54: Embedded Webで加速するWeb of Things](https://reader033.vdocuments.mx/reader033/viewer/2022052418/58f2c94e1a28ab67258b45b3/html5/thumbnails/54.jpg)
Newphoria Corporation
ご清聴ありがとうございました
@futomi futomi.hatano
http://www.newphoria.co.jp/