WebRTCにより可視化されるリアルタイムクラウド。求められるAPI

API Meetup Tokyo #3
WebRTCにより可視化されるリアルタ
イムクラウド。求められるAPI
NTTコミュニケーションズ株式会社
技術開発部
小松健作
2014年9月26日
Copyright © NTT Communications Corporation. All right reserved.

自己紹介
小松健作（@komasshu）
SkyWay の開発・運用
HTML5の研究開発・標準化活動@W3C
HTML5技術の啓蒙・コミュニティ運営
Google Developer Expert (HTML5)
NTTコミュニケーションズ
Webアプリケーションエバンジェリスト

Today’s Main Idea
リアルタイムへ変貌を遂げていくクラウドと、そ
れを支える次世代API “WebRTC” の紹介
（弊社の各種API紹介も）

Agenda
Introduction
HTML5
WebRTCとは？
WebRTCを容易に。SkyWay
想定ケーススタディ（Demo）
NTT Communications が提供するAPIサービス
4

Agenda
Introduction
HTML5
WebRTCとは？
5

Webは何を変えたのか？
6

“ The real Web revolution was not that
we could just buy more stuff with
greater choice, but make our own stuff
that others could consume. ”
“Makers: The New Industrial Revolution”, Chris Anderson, 2012
Copyright © NTT Communications Corporation. All right reserved. 7
https://www.flickr.com/photos/92366800@N00/676992
1

“ 本当のWeb革命は、豊富な品揃えから品物が選べ
るようになったことではなく、僕たちが自分のため
にものを製造し、それをほかの人達も利用できるよ
うになったところにある。”
“メイカーズ- 21世紀の産業革命が始まる”, Chris Anderson, 2012（関美和訳）
https://www.flickr.com/photos/92366800@N00/676992
1

産業革命〜20世紀までのモデル
supplier supplier
Provider
Consumer
9
大量生産・大量消費
supplier

21世紀の産業革命モデル
supplier supplier
10
Provider
Consumer
supplier
Provider Provider
Consumer Consumer
API
スモールバッチ

参考）スモールバッチ
由来：バーボンの製造によく使われる言葉。蒸留酒の世界で、職人が
手をかけて作り出したことを意味する。
市場規模よりも製品の品質を重視するビジネス。
大衆受けすることよりも、自分にとって思い入れ
のあることを商売にする。
11

ビジネス開発の民主化
Webがもたらしたもの
「思い入れがもてるもの」
を
「低コストで作り」、
「それを誰でも利用できる」
ようになった。
12

Agenda
Introduction
HTML5
WebRTCとは？
13

21世紀の産業革命モデル(cont.)
Who is the
initiative?
supplier supplier
14
Provider
Consumer
supplier
Provider Provider
Consumer Consumer
API
スモールバッチ
“ 本当のWeb革命は、豊富な品揃えから品物が選べるようになったことではな
く、僕たちが自分のためにものを製造し、それをほかの人達も利用できるよう
になったところにある。”

Copyright © NTT Communications Corporation. http://www.flickr.com/phot Aoll sri/ghrto rersyervceed.llan/8314288381/ 15
http://www.w3.org/

http://info.cern.ch/hypertext/WWW/TheProject.html
最初のWeb
16

その後の流れ（〜Web2.0 (2004) 以前）
企業コンシューマー
17
技術文書共有
商用サイト/ EC 個人サイト/ 掲示板
片方向双(?)方向

2004年当時に起きたこと：Web APIの登場
企業コンシューマー
商品情報
18
技術文書共有
製品・店舗サイト/ EC
ブログ/ 掲示板
マッシュアップ
片方向双(?)方向
口コミ
アフェリエイト

そして現在（2014年）
商品情報
19
技術文書共有
製品・店舗サイト/ EC ブログ/ 掲示板
口コミ
アフェリエイト
SNS, service,
application
製品（SW / HW）
SDK, ハッカソン
コラボレーション

Webの変遷
200x年：CRUDの時代
対象：情報
3rd partyにデータベース操作機能を公開
片方向トラフィック
201x年：SDKの時代
対象：機能
3rd partyに製品のアプリケーション機能を公開
双方向トラフィック
20

2004年から現在：W3Cで起きたこと
21

http://www.slideshare.net/dynamis/toward-firefox-os
HTML5の全体像
22

通信レイヤにフォーカスすると
23
2004年
2009年
2014年
HTTP/1.1
WebSocket
(双方向通信）
AppCache
WebStorage
IndexedDatabase
Service Worker
WebRTC
(p2p, Media
Stream）
ダウンロードのみ
オフラインではNG
通信の多様化オフライン対応

Agenda
Introduction
HTML5
WebRTCとは？
24

WebRTC
=
Web Real Time Communication
25

従来のWeb WebRTC
WebRTCとは
 ブラウザでカメラとマイク、音声と映像を扱える。
 ブラウザ間の直接通信、リアルタイム通信が可能になる。
 テレビ電話、テレビ会議、チャット、ファイル転送、音声認識、
議事録の自動作成、050plusや電話との連携等が可能に。
26
カメラやマイ
クを利用可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利用不可

WebRTC Reference App
https://apprtc.appspot.com/
27

http://www.skype.com/ https://plus.google.com/hangouts
何が変わったのか？
28

WebRTCにより、複雑なプロトコル群を容易に利用可能に
RTC
Lib. RTC
29
Lib.
NAT
Proxy
Fire
Wall

WebRTCの持つ意義
こんなモノが
作りたい
30
自社の製品に
組み込みたい
社内システムに
組み込みたい

例えば
https://komasshu-skyway-sample.github.io/clm2audio

Agenda
Introduction
HTML5
WebRTCとは？
32

本当に簡単に作れる？
33

WebRTCはWeb開発者にとって難しい技術
ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を
行う必要があり、実装にはネットワークの知識が必要。
ようやく直接34通信できる
34
これらの通信が
完了してから…

WebRTC利用アプリを簡単に開発できるクラウド基盤
SkyWayの概要
35
 2013年12月5日に提供開始
 社外の約1000名以上の
開発者が利用している
 提供内容
• シグナリング等のAPI
• ライブラリ
• サンプルアプリ
• ドキュメント
http://skyway.io/

SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、
開発者は簡単にWebRTC利用アプリを開発できる。
SkyWayの特徴
36
STUN
API
Signaling
API STUN
API
ライブラリライブラリ
APIとライブ
ラリが複雑な
処理を担う

WebRTCを容易に使える世界
実現します！！
37

Agenda
Introduction
HTML5
WebRTCとは？
38

ケース1 : リモートで気軽にテレビ会議
https://www.flickr.com/photos/codymckibb/4689105454/in/photolist-89mTFL-7BkKwT-cnPJdu-6LnxWb-9GwsDM-nGuPiA-nKevGM-nqcx2U-nED8Su-nGbAc4-
nFYYCC-nUZBN7-nq7XYY-4XvnQ6-nGYXNq-nqckrS-ezfxdN-6LnyqY-7Mfqua-eiE3Ec-65wA9S-65wAhb-83jPwP-HHD9A-eRPPEP-Q5hVU-
89iBUr-HHYcP-nqFN9U-89mTxu-nDg4Ui-ozgJMd-8WBZb2-8b3gmw-6Rhvpe-8hASFz-6zum8E-4hFe2v-9tjzGd-77fkxQ-7Pn7Yc-6YzqRr-8meZBK-
8jMb13-568Yjm-5mG1Wj-6haqft-5SiMrK-9UX2mr-6HNTYt/
39

ケース2 : 家族の関係を密接に
https://www.flickr.com/photos/61806532@N03/11036211025/in/photolist-hPet3r-6B28Ww-56yqfR-9AEwCQ-wkC2L-hz1jMg-dh1Q1E-5oxBde-gF8Yk-
6EHDTd-5whgR4-5FkiaG-tmuof-2iMSHX-FnLss-6Ay8X7-9Av5SF-egTHRz-c9qnYw-73ibaH-5p5KkB-5GQhZS-bQKPg-fFrFvQ-8NcvaR-efT5RF-
5h9Fbu-dPspwD-eeyQsu-bgxg2H-eZj9zf-94B3X3-NNGYG-7FShw1-k2ocFN-azCUZH-oiZ9G7-dh8NkX-9ztecU-7HvX5z-9q7ZLo-cyMcD9-bti3u9-
eNzaVC-Copyright 2HZVWH-© NTT Communications ack4Jn-88EcHk-Corporation. a6Jh6g-All right reserved.
eii61L-nwKGZt
40

ケース3 : 受付の品質向上
https://www.flickr.com/photos/cabbit/4161525850/in/photolist-7kJUDG-m5R74q-m5PGXZ-bZR6pf-4B822Q-d5Rjmu-4B82VG-8xCq1b-4B3GZr-d5Rgp1-
e9nwe7-7uez3W-7vHzfV-7ueJiW-7uaFrM-ZBMgo-7vMom9-6auPpQ-jFtY3o-mivurz-aNGAHH-aNGBvk-7uaQTX-5SEaTn-eaabat-e8RBPT-
976k4w-mAoQgM-9EkK6f-anpuFp-eaab3V-8gSiY8-7ueEdQ-fuHdX-d5RM4s-5642ii-d5QWp1-5HYbvY-9Stg9u-38ccTS-bcQMxx-7vmTrh-jQQvm-
5GbqSW-9Wn9LF-oCkfr-eafS1C-eaabpP-ebs7UU-eafS7S
41

WebRTCが変えるビジネス/ライフスタイル
WebRTCにより広がるビデオカンファレンス
既存のビデオ
カンファレンス
ユースケース
ユースケース
42

より詳しく
http://html5experts.jp/tag/webrtc/
43

Agenda
Introduction
HTML5
WebRTCとは？
44

今回紹介するAPI
• Real Time API
• 050 VoIP SDK : スマフォアプリから050電話が可能に
• ストレージAPI
• マイポケットAPI : 個人向けオンラインストレージを用いたア
プリ開発
• Cloudn Object Storage : 低価格、高信頼、高可用なObject
Storageサービス
45

• Real Time API
プリ開発
Storageサービス
46

http://www.ntt.com/050voip_sdk/
スマフォのアプリから、050 VoIPの通話機能を利用できる
050 VoIP SDK
47
SDKです。

課金モデルは、ID課金。通話機能の卸売です。
社内システムへの通話コスト削減や機能追加に。
特徴
1. IP電話に関する専門的な知識、ノウハウ不要で発着信機能の実装
が可能
• SIPやRTPなどの知識は不要。端末依存部分もSDKがカバー。
2. NTT ComのIP電話ネットワークを利用するため、無料通話先が豊
富
• SDK利用アプリ間はもちろん、「050 plus」との通話も無料
に。
3. 専用の050番号で広がる利用シーン
• BYODなど業務用電話としてプライベートとの分離が可能。
4. NTT Comの豊富な運用実績
• NTT研究所の品質評価技術やエコー・ノイズ低減技術を用い、
環境・端末に応じた通話品質を実現。
48

• Real Time API
プリ開発
Storageサービス
49

低価格のオンラインストレージ（300円/64GB）を利用し
マイポケットAPI
たアプリ開発が可能です。
50
https://mypocket.ntt.com/dev/

256GBまでのデータ容量を低コストに利用できます。
写真データを活用されたい方におすすめです。
特徴
1. 写真データに強い
• EXIFの自動メタ解析はもちろん、自動顔認識によるタグ付け
も
2. 低価格
• マイポケットに契約（300円/64GB）していれば、利用可能
3. セキュアなサービス
• データは、NTTコミュニケーションズのデータセンタで保管し
ますので、安心してご利用いただけます
4. 継続性の高さ
• 2003年よりサービスを継続
51

• Real Time API
プリ開発
Storageサービス
52

Cloudn Object Storage
http://www.ntt.com/cloudn/data/storage.html
3分散のスケーラブルな冗長化、Amazon S3互換APIで容
易な開発が可能です。データ転送量の課金が無いため、価
格見積が容易なのも魅力。
53

Object Storageの拡張性・堅牢性はそのままに、
受付で無料チケット（12,000円分）を配布しております！！
特徴
1. 大容量データを低価格で保管可能
• 9.03円/GB(税込9.288円/GB)からの料金設定。データ転送量
の課金もないため、見積も容易。
2. 99.999999999％の高い堅牢性による高信頼のストレージ
• 複数データセンタにまたがった3分散のデータ保管による冗長
化を実現。
3. 容量上限を気にせずにスケーラブルに大容量データを保管可能
• データ容量制限はありません。
4. REST API 対応(Amazon S3 互換)
• 既存のライブラリを利用した、容易なアプリケーション開発が
可能。
トラフィックを気にしない利用が可能です。
是非お試しを！！
54

まとめ
• Webが作り上げたもの
• ビジネスサイクルの民主化
• Webのアプリケーション化とWebRTCの登場
• 自分好みのビデオサービスが可能に
• WebRTCを、より容易に使いやすく
• WebRTC フレームワークサービス：SkyWay
• WebRTCが変えるビジネス/ライフスタイル
• 想定ユースケースとデモを紹介
• NTT Communicationsが提供するAPI紹介
• 050 VoIP, マイポケット, Cloundn Object Storage
55

Thank you!!
56
@komasshu

WebRTCにより可視化されるリアルタイムクラウド。求められるAPI

More Related Content

What's hot

Viewers also liked

Similar to WebRTCにより可視化されるリアルタイムクラウド。求められるAPI

More from Kensaku Komatsu

Recently uploaded

WebRTCにより可視化されるリアルタイムクラウド。求められるAPI