SlideShare ist ein Scribd-Unternehmen logo
1 von 46
HTML5によるデバイス連携
  最新事情と未来予測
      2013/2/8 (fri)
   NTT communications
        小松健作
自己紹介
• 名前
 – 小松健作
• 所属
 – NTTコミュニケーションズ
 – 次世代Webの研究開発・標準化
• HTML5コミュニティの運営
 – Google Developers Expert(HTML5)
 – Microsoft MVP (IE)
agenda
• Inroduction

• Base technology

• Practice for Web of Things

• Keep up w/ Web of Things
agenda
• Inroduction

• Base technology

• Practice for Web of Things

• Keep up w/ Web of Things
Web of things
“The Web of Things is a vision inspired
from the Internet of Things where everyday
devices and objects, i.e. objects that contain
an embedded device or computer, are
connected by fully integrating them to the
Web. Examples of smart devices and
objects are wireless sensor networks,
ambient devices, household
                      tagged objects, etc.”
appliances, RFID http://en.wikipedia.org/wiki/Web_of_Things
和名(直訳)



「モノ」のWeb
意訳
• Webから様々なマルチデバイスを使いこな
  せるようになること
 – パソコン
 – スマートフォン
 – タブレット
 – テレビ
 –車
 – サイネージ
 – ……..
Webって
そもそも何?
今までのWeb


Browser
   +
Web OS
これからのWeb


Browser
   +
Web OS
Demo : 従来Webのユースケース




   http://events.html5j.org/conference/2012/09/program.html
従来Webのモデル
Demo : これからのWebの
    ユースケース
これからのWebのモデル
Interactive

document
agenda
• Inroduction

• Base technology

• Practice for Web of Things

• Keep up w/ Web of Things
Browser
   +
Web OS
プロトコルとは?
• 車みたいなもの
 –フォーマット
  • 乗用車
  • バイク
  • トラック
 –ふるまい
  • 走り方
HTTP




片側一車線を一台しか走れない
必ずクライアントから開始
WebSocket




片側一車線を何台でも走れる
好きなタイミングで発車できる
ブラウザーで出来る事
• これまでは、HTTPのみ
 – 文書のダウンロード


• これからはWebSocketも
 – インタラクティブにデバイス間で通信


• でも、それ以上のことはなかなか出来な
  い
 – セキュリティリスクが大きすぎる
Browser
   +
Web OS
Web OSで出来る事

• Raw Socket API
• Bluetooth
• USB
•…
Ex) Chrome Packaged Apps
Web OS
Web page     Web OS apps    Native apps



Browser

  Browser run-time

    OS(windows, mac, linux, …)
Web OS (cont)


Web page     Web OS apps



Browser

  Browser run-time
Web OS (cont)
System Applications WG




http://www.w3.org/2012/09/sysapps-wg-charter
agenda
• Inroduction

• Base technology

• Practice for Web of Things

• Keep up w/ Web of Things
Socket APIによるDLNAの実装
• Socket API
  – 生のSocket コーディングを可能にするAPI
  – 車の例で言えば、車自体を作ったりすること
    ができる
     • これまでのWebでは出来合いの車しか使えなかっ
       た。
Demo(DLNAをそのままWebで使
             う)
                                             Micro web
                                              server is
                                     serve    inside!!
                render



DMR                                          DMS
                          controll


    DLNA protocol has
Implemented by komasshu
   based on Socket API

                                DMC
Socket APIを用いたDLNAの実装
                     Chrome Packaged
                     Apps
  Generic Web Site   (micro web server)
                     by Socket API

                        REST→DLNA
                           変換             DLNA




ユーザー操作
Demo(認証コンテンツ)
                                               Micro web
                                                server is
                                     serve      inside!!
                render



DMR                                            DMS
                          controll


    DLNA protocol has
Implemented by komasshu
   based on Socket API               DMC
                                     + proxy
認証コンテンツをDLNAで見れるよ
    うにする仕組み
                      Certification handling
                      server is implemented
                    inside of Chrome (Socket
                                API)




 User input is on
 Browser only!!
Demo (accessible from another
               network)
                                        Manipulation
                 WebSocket server      via WebSocket
                                        connections.




      render       serve

DMR            controll
                           DMS

                   DMC
 Home Network                       Mobile Network
Public wifi considerations.
• 同一Wifiだからといって、DLNAが使えるとは
  限らない
 – セキュリティリスクの低減


• 特に、Public Wifiでは致命的
 – DLNA(IP multicast, direct connection)は、まず通ら
   ないと思ったほうがいい


• Cloudとのハイブリッド、DLNAのenhanceが必
  要
http://www.flickr.com/photos/utacnyc/3524755021/
標準化へ


既存サービスをWebで再構築
             Existing
            serviceと
            Web との
              GAP
    標準化提案
agenda
• Inroduction

• Base technology

• Practice for Web of Things

• Keep up w/ Web of Things
Webの範疇は拡大の一途

• ブラウザだけではない
• 表現だけではない
• HTTPだけではない
• 組み込み系も操作可能
  (bluetooth, usb)
Webの特徴は全てを繋ぐこと
          ゆえに・・・

•   HTMLが書けるだけでは。。。
•   デザイン能力があるだけでは。。。
•   プログラムが書けるだけでは。。。
•   通信プロトコルが書けるだけでは。。。
•   デバイス知識を持っているだけでは。。。
理想的な人材

                       design




semantics
                                         programming




            protocol            device
一人じゃ無理

                       design




semantics
                                         programming




            protocol            device
意図的なoverlap

            design

                       programmin
semantics
                            g


                     device
     protocol
これまでの深い経験・知識が
次のイノベーションを起こすはず
Thank you!!

Weitere ähnliche Inhalte

Ähnlich wie 8th jan 2013_wotconf

Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own PathFirefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
dynamis
 
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
Developers Summit
 
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
 

Ähnlich wie 8th jan 2013_wotconf (20)

Dockerを使ったクライアントハイパーバイザー
Dockerを使ったクライアントハイパーバイザーDockerを使ったクライアントハイパーバイザー
Dockerを使ったクライアントハイパーバイザー
 
Web on Kernel
Web on KernelWeb on Kernel
Web on Kernel
 
ハイブリッドクラウド構築の要所
ハイブリッドクラウド構築の要所ハイブリッドクラウド構築の要所
ハイブリッドクラウド構築の要所
 
Notes/Domino アプリがそのまま Web ブラウザで動く HCL Nomad Web の簡単な導入と「仕掛け」
Notes/Domino アプリがそのまま Web ブラウザで動く HCL Nomad Web の簡単な導入と「仕掛け」Notes/Domino アプリがそのまま Web ブラウザで動く HCL Nomad Web の簡単な導入と「仕掛け」
Notes/Domino アプリがそのまま Web ブラウザで動く HCL Nomad Web の簡単な導入と「仕掛け」
 
20050623 1
20050623 120050623 1
20050623 1
 
Serverless x IoT = "IoT Scale" backend
Serverless x IoT = "IoT Scale" backendServerless x IoT = "IoT Scale" backend
Serverless x IoT = "IoT Scale" backend
 
Docker Swarm モード にゅうもん
Docker Swarm モード にゅうもんDocker Swarm モード にゅうもん
Docker Swarm モード にゅうもん
 
20021007
2002100720021007
20021007
 
Android開発者向けempress暗号化資料
Android開発者向けempress暗号化資料Android開発者向けempress暗号化資料
Android開発者向けempress暗号化資料
 
Firefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own PathFirefox OS - Blaze Your Own Path
Firefox OS - Blaze Your Own Path
 
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
 
Web OSで可能になる世界
Web OSで可能になる世界Web OSで可能になる世界
Web OSで可能になる世界
 
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
 
Dockerで作るd3.jsインタラクション共有&DL環境
Dockerで作るd3.jsインタラクション共有&DL環境Dockerで作るd3.jsインタラクション共有&DL環境
Dockerで作るd3.jsインタラクション共有&DL環境
 
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
【17-E-2】Ruby PaaS「MOGOK」 ~ ソフトウェアエンジニアのためのクラウドサービス ~ 藤原秀一氏
 
Docker Enterprise Editionで実践するCaaS
Docker Enterprise Editionで実践するCaaSDocker Enterprise Editionで実践するCaaS
Docker Enterprise Editionで実践するCaaS
 
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
 
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
 
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティ
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティJITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティ
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティ
 
Mobile Web
Mobile WebMobile Web
Mobile Web
 

Mehr von Kensaku Komatsu

Mehr von Kensaku Komatsu (20)

Media processing with serverless architecture
Media processing with serverless architectureMedia processing with serverless architecture
Media processing with serverless architecture
 
Boxdev lt-09082016
Boxdev lt-09082016Boxdev lt-09082016
Boxdev lt-09082016
 
a pattern for PWA, PRPL
a pattern for PWA, PRPLa pattern for PWA, PRPL
a pattern for PWA, PRPL
 
Full Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTCFull Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTC
 
WebRTC 101
WebRTC 101WebRTC 101
WebRTC 101
 
04122016 web rtc_globalsummit
04122016 web rtc_globalsummit04122016 web rtc_globalsummit
04122016 web rtc_globalsummit
 
02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu
 
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSSkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaS
 
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
 
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
 
FirefoxでgetStats()
FirefoxでgetStats()FirefoxでgetStats()
FirefoxでgetStats()
 
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会
 
WebRTCが拓く 新たなWebビジネスの世界
WebRTCが拓く新たなWebビジネスの世界WebRTCが拓く新たなWebビジネスの世界
WebRTCが拓く 新たなWebビジネスの世界
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
 
25th nov2014 52thhtml5j
25th nov2014 52thhtml5j25th nov2014 52thhtml5j
25th nov2014 52thhtml5j
 
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
 
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
 
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策
 
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 )
 
Web rtcの使い方
Web rtcの使い方Web rtcの使い方
Web rtcの使い方
 

8th jan 2013_wotconf