SlideShare a Scribd company logo
Let's  begin  WebRTC!

                            2013/03/22
                  Web先端技術味⾒見見部#18
        Toru  Yoshikawa  (@yoshikawa_̲t)
Who?
吉川  徹  /  Toru  Yoshikawa
@yoshikawa_̲t
   Google  Developer  Experts  (Chrome)

   html5j.org/HTML5とか勉強会スタッフ

   ⽇日本jQuery  Mobileユーザー会  管理理⼈人

   Sublime  Text  2  Japan  Users  Group  管理理⼈人

   allWebクリエイター塾/jQuery  Mobile担当講師

   Blog:  http://d.hatena.ne.jp/pikotea/
Recently  hot  news
Hello  Chrome,  itʼ’s  Firefox  calling!




   https://hacks.mozilla.org/2013/02/hello-‐‑‒chrome-‐‑‒its-‐‑‒firefox-‐‑‒calling/

   http://blog.chromium.org/2013/02/hello-‐‑‒firefox-‐‑‒this-‐‑‒is-‐‑‒chrome-‐‑‒calling.html
HTML5でテレビ電話、Chrome  
Beta  for  AndroidでWebRTCを試す




  http://d.hatena.ne.jp/jovi0608/20130307/1362645489
Resources
Community

   http://www.webrtc.org/

Sample  Source

   https://code.google.com/p/webrtc-‐‑‒samples/source/
   browse/trunk/apprtc/

Interoperability  (Chrome  and  Firefox)

   https://code.google.com/p/webrtc-‐‑‒samples/source/
   browse/trunk/apprtc/js/adapter.js
Specifications
W3C

       WebRTC  1.0:  Real-‐‑‒time  Communication  Between  Browsers  (http://
       www.w3.org/TR/webrtc/)

       Media  Capture  and  Streams  (http://www.w3.org/TR/mediacapture-‐‑‒streams/)

IETF

       Web  Real-‐‑‒Time  Communication  (WebRTC):  Media  Transport  and  Use  of  RTP  
       (http://tools.ietf.org/html/draft-‐‑‒ietf-‐‑‒rtcweb-‐‑‒rtp-‐‑‒usage)

       WebRTC  Data  Channel  Protocol  (http://tools.ietf.org/html/draft-‐‑‒jesup-‐‑‒rtcweb-‐‑‒
       data-‐‑‒protocol)

       Javascript  Session  Establishment  Protocol  (http://tools.ietf.org/html/draft-‐‑‒ietf-‐‑‒
       rtcweb-‐‑‒jsep)
Communications
W3C  ML

    http://lists.w3.org/Archives/Public/public-‐‑‒webrtc/

IETF  ML

    http://www.ietf.org/mail-‐‑‒archive/web/rtcweb/current/maillist.html
Architecture
Network
STUN
Simple  Traversal  of  UDP  through  NATs

NAT越えの⽅方法のひとつ

通信するホストがSTUNサーバーにUDP接続を⾏行行
い、NATが割り当てたグローバルIPアドレスとポー
ト番号を取得する

取得したグローバルIPアドレスとポート番号を通信
するホスト間で交換する
NATの種類
フルコーン型

 1つのTCP/UDPポートを1台のPCに割り当て

制限コーン型

 内部ホストがパケット送信した外部ホストのみと通信可能(UDPホール
 パンチングなどで対応)

ポート制限コーン型

 制限コーン型には、さらにポートの制限を加えたもの

対称型

 外部ホストごとに別々のアドレス変換テーブルを持つ
ICE
Interactive  Connectivity  Establishment

STUNとTURNなどのNAT越えの⼿手順をまとめたもの

STUNで対応できないホストには、TURNを利利⽤用する

STUNで対応できるNATは、フルコーン型、制限コーン型、
ポート制限コーン型の3つ

対称型、多段NATなどの場合は、TURNを利利⽤用する
TURN
Traversal  Using  Relay  NAT

NAT越えの⽅方法のひとつ

対称型や多段NATにも対応できる

要は、すべての通信をTURNを経由して⾏行行うの
で、速度度的なメリットはほとんどない

サーバー的にも⾼高負荷・⾼高コスト
Sequence
サンプルコード
getUserMedia

navigator.getUserMedia({audio: true, video:true}, success);

function success(stream) {
  videoElement.src = URL.createObjectURL(stream);
}
RTCPeerConnection

PeerConnection00は、Deprecatedなので利利⽤用
しないように

Firefoxは、nightly以外は、about:configで
media.peerconnection.enabledをtrueに設定す
る
RTCPeerConnection
            インスタンスの作成
var pc = new RTCPeerConnection({
  "iceServers": [
    {"url": "STUNサーバーのアドレス"},
      {"url": "TURNサーバーのアドレス"}
  ]
});


 stun:stun.l.google.com:19302
 stun:23.21.150.121
addICECandidate
pc.onicecandidate = function(e) {

     // リモートへICE候補を送信する
     sendMessage(JSON.stringify({
       "candidate": e.candidate
     }));
};

// リモートからのICE候補を受信した場合
function receiveMessage(message){

     var candidate = new RTCIceCandidate({
       "candidate": message.candidate
     });
     pc.addICECandidate(candidate);
}
addStream  (local)
            creaeOffer
// getUserMediaで取得したストリームデータを追加
pc.addStream(localStream);

// オファーを作成
pc.createOffer(function(description){
  pc.setLocalDescription(description);

  // Send Offer
  sendMessage(JSON.stringify({
    "sdp": description
  }));
});
createAnswer
function reciveMessage(message) {
  // RTCPeerConnectionを作成していなければ、作成しストリームデータを
追加しておく
  pc.setRemoteDescription(new
RTCSessionDescription(message.sdp), function(){

      if (pc.remoteDescription.type == "offer") {
        pc.createAnswer(function(description){
          pc.setLocalDescription(description);

                // Send Answer
                sendMessage(JSON.stringify({
                  "sdp": description
                }));
              });
          }
    });
}
addStrem  (remote)



pc.onaddstream = function(e) {
  video.src = URL.createObjectURL(e.stream);
}
Data  Channel
var channel = pc.createDataChannel("labelName");
channel.onopen = function(e) {
  // データチャネルオープン
}
channel.onmessage = function(e) {
  // テキストデータの受信
    console.log(e.data);
}
channel.onclose = function(e) {
  // データチャネルクローズ
}

// テキストデータの送信
channel.send(message);
Data  Channel
P2Pでバイナリ、テキストデータが送れる

APIは、WebSocketとほぼ同じ

Chrome  27より前は、起動オプションが必要

 -‐‑‒-‐‑‒enable-‐‑‒data-‐‑‒channels

Canary  Buildは、現在v27なのでそのまま利利⽤用可
能
DTMF  API

Dual-‐‑‒Tone  Multi-‐‑‒Frequency

トーン信号(プッシュ信号)を送信するための仕様

WebRTC上での仕様は、議論論中でまだまだ変わりそう

Webkitで既に実装されているが、利利⽤用できるか不不明  
(http://trac.webkit.org/changeset/141984)
Articles
グループビデオチャットのTenHandsがChromeの
WebRTCで実装–プラグイン不不要に  (http://
jp.techcrunch.com/archives/20130205real-‐‑‒time-‐‑‒
communications-‐‑‒platform-‐‑‒tenhands-‐‑‒now-‐‑‒uses-‐‑‒
webrtc-‐‑‒on-‐‑‒chrome-‐‑‒for-‐‑‒plugin-‐‑‒free-‐‑‒video-‐‑‒chats/)

WebRTCとSIPを結びつけるSDKをPlivoがローンチ…Web
と固定電話の通話も可能に  (http://jp.techcrunch.com/
archives/20130115plivo-‐‑‒launches-‐‑‒the-‐‑‒first-‐‑‒sdk-‐‑‒that-‐‑‒
lets-‐‑‒developers-‐‑‒connect-‐‑‒webrtc-‐‑‒and-‐‑‒sip/)
Microsoft  WebRTC  Proposal

  Microsoft  pushes  ahead  with  its  own  take  on  
  WebRTC  (http://gigaom.com/2013/01/17/
  microsoft-‐‑‒cu-‐‑‒webrtc-‐‑‒prototype/)

  Customizable,  Ubiquitous  Real-‐‑‒Time  
  Communication  (http://
  html5labs.interoperabilitybridges.com/cu-‐‑‒rtc-‐‑‒
  web/cu-‐‑‒rtc-‐‑‒web.htm)
Thank  you!!
 (@yoshikawa_̲t)

More Related Content

What's hot

マスタリングJUNOS DHCP
マスタリングJUNOS DHCPマスタリングJUNOS DHCP
マスタリングJUNOS DHCP
ZenSekibe
 
TCP connectionの保存と復元
TCP connectionの保存と復元TCP connectionの保存と復元
TCP connectionの保存と復元mittyorz
 
JSONでメール送信 | HTTP API Server ``Haineko''/YAPC::Asia Tokyo 2013 LT Day2
JSONでメール送信 | HTTP API Server ``Haineko''/YAPC::Asia Tokyo 2013 LT Day2JSONでメール送信 | HTTP API Server ``Haineko''/YAPC::Asia Tokyo 2013 LT Day2
JSONでメール送信 | HTTP API Server ``Haineko''/YAPC::Asia Tokyo 2013 LT Day2
azumakuniyuki 🐈
 
Ietf97 ソウル報告
Ietf97 ソウル報告Ietf97 ソウル報告
Ietf97 ソウル報告
yuki-f
 
TLS & LURK @ IETF 95
TLS & LURK @ IETF 95TLS & LURK @ IETF 95
TLS & LURK @ IETF 95
Kazuho Oku
 
raspi + soracom #pakeana33
raspi + soracom #pakeana33raspi + soracom #pakeana33
raspi + soracom #pakeana33
@ otsuka752
 
ミラクルはすける勉強会#0
ミラクルはすける勉強会#0ミラクルはすける勉強会#0
ミラクルはすける勉強会#0Kiwamu Okabe
 
Stream processing and Norikra
Stream processing and NorikraStream processing and Norikra
Stream processing and NorikraSATOSHI TAGOMORI
 
http2 最速実装 v2
http2 最速実装 v2 http2 最速実装 v2
http2 最速実装 v2
Yoshihiro Iwanaga
 
ストリーミング用マルチCDN
ストリーミング用マルチCDNストリーミング用マルチCDN
ストリーミング用マルチCDN
Masaaki Nabeshima
 
FSI analysis with preCICE (OpenFOAM and CalculiX)
FSI analysis with preCICE (OpenFOAM and CalculiX) FSI analysis with preCICE (OpenFOAM and CalculiX)
FSI analysis with preCICE (OpenFOAM and CalculiX)
守淑 田村
 
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
 
Emacsでの翻訳 - Emacsで訳す、gettextで国際化されたソフトウェア
Emacsでの翻訳 - Emacsで訳す、gettextで国際化されたソフトウェアEmacsでの翻訳 - Emacsで訳す、gettextで国際化されたソフトウェア
Emacsでの翻訳 - Emacsで訳す、gettextで国際化されたソフトウェア
Masaharu IWAI
 
Rake
RakeRake
tcpdumpとtcpreplayとtcprewriteと他。
tcpdumpとtcpreplayとtcprewriteと他。tcpdumpとtcpreplayとtcprewriteと他。
tcpdumpとtcpreplayとtcprewriteと他。(^-^) togakushi
 

What's hot (15)

マスタリングJUNOS DHCP
マスタリングJUNOS DHCPマスタリングJUNOS DHCP
マスタリングJUNOS DHCP
 
TCP connectionの保存と復元
TCP connectionの保存と復元TCP connectionの保存と復元
TCP connectionの保存と復元
 
JSONでメール送信 | HTTP API Server ``Haineko''/YAPC::Asia Tokyo 2013 LT Day2
JSONでメール送信 | HTTP API Server ``Haineko''/YAPC::Asia Tokyo 2013 LT Day2JSONでメール送信 | HTTP API Server ``Haineko''/YAPC::Asia Tokyo 2013 LT Day2
JSONでメール送信 | HTTP API Server ``Haineko''/YAPC::Asia Tokyo 2013 LT Day2
 
Ietf97 ソウル報告
Ietf97 ソウル報告Ietf97 ソウル報告
Ietf97 ソウル報告
 
TLS & LURK @ IETF 95
TLS & LURK @ IETF 95TLS & LURK @ IETF 95
TLS & LURK @ IETF 95
 
raspi + soracom #pakeana33
raspi + soracom #pakeana33raspi + soracom #pakeana33
raspi + soracom #pakeana33
 
ミラクルはすける勉強会#0
ミラクルはすける勉強会#0ミラクルはすける勉強会#0
ミラクルはすける勉強会#0
 
Stream processing and Norikra
Stream processing and NorikraStream processing and Norikra
Stream processing and Norikra
 
http2 最速実装 v2
http2 最速実装 v2 http2 最速実装 v2
http2 最速実装 v2
 
ストリーミング用マルチCDN
ストリーミング用マルチCDNストリーミング用マルチCDN
ストリーミング用マルチCDN
 
FSI analysis with preCICE (OpenFOAM and CalculiX)
FSI analysis with preCICE (OpenFOAM and CalculiX) FSI analysis with preCICE (OpenFOAM and CalculiX)
FSI analysis with preCICE (OpenFOAM and CalculiX)
 
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
 
Emacsでの翻訳 - Emacsで訳す、gettextで国際化されたソフトウェア
Emacsでの翻訳 - Emacsで訳す、gettextで国際化されたソフトウェアEmacsでの翻訳 - Emacsで訳す、gettextで国際化されたソフトウェア
Emacsでの翻訳 - Emacsで訳す、gettextで国際化されたソフトウェア
 
Rake
RakeRake
Rake
 
tcpdumpとtcpreplayとtcprewriteと他。
tcpdumpとtcpreplayとtcprewriteと他。tcpdumpとtcpreplayとtcprewriteと他。
tcpdumpとtcpreplayとtcprewriteと他。
 

Similar to Let's begin WebRTC

WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術Yoshiaki Sugimoto
 
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみようWebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
mganeko
 
2013 WebRTC node
2013 WebRTC node2013 WebRTC node
2013 WebRTC node
mganeko
 
WebRTC NextVersion時代のJavaScript開発
WebRTC NextVersion時代のJavaScript開発WebRTC NextVersion時代のJavaScript開発
WebRTC NextVersion時代のJavaScript開発
Yusuke Naka
 
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannelNode.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
mganeko
 
Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Web リソースを活用した簡単アプリケーション開発(Windows Phone)Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Web リソースを活用した簡単アプリケーション開発(Windows Phone)Akira Onishi
 
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうChromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうmganeko
 
WebRTC meetup Tokyo 1
WebRTC meetup  Tokyo 1WebRTC meetup  Tokyo 1
WebRTC meetup Tokyo 1
mganeko
 
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要Shumpei Shiraishi
 
WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版
Contest Ntt-west
 
WebRTC on Native App
WebRTC on Native AppWebRTC on Native App
WebRTC on Native App
WebRTCConferenceJapan
 
20130315 abc firefox_os
20130315 abc firefox_os20130315 abc firefox_os
20130315 abc firefox_os
Tomoaki Konno
 
Webrtc bootcamp handson
Webrtc bootcamp handsonWebrtc bootcamp handson
Webrtc bootcamp handson
mganeko
 
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
mganeko
 
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
yoshikawa_t
 
Parse触ってみた
Parse触ってみたParse触ってみた
Parse触ってみた
Naoya Harasawa
 
Apache Spark 3.0新機能紹介 - 拡張機能やWebUI関連のアップデート(Spark Meetup Tokyo #3 Online)
Apache Spark 3.0新機能紹介 - 拡張機能やWebUI関連のアップデート(Spark Meetup Tokyo #3 Online)Apache Spark 3.0新機能紹介 - 拡張機能やWebUI関連のアップデート(Spark Meetup Tokyo #3 Online)
Apache Spark 3.0新機能紹介 - 拡張機能やWebUI関連のアップデート(Spark Meetup Tokyo #3 Online)
NTT DATA Technology & Innovation
 
Akka HTTP
Akka HTTPAkka HTTP
Akka HTTP
TanUkkii
 

Similar to Let's begin WebRTC (20)

WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
 
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみようWebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
 
2013 WebRTC node
2013 WebRTC node2013 WebRTC node
2013 WebRTC node
 
WebRTC NextVersion時代のJavaScript開発
WebRTC NextVersion時代のJavaScript開発WebRTC NextVersion時代のJavaScript開発
WebRTC NextVersion時代のJavaScript開発
 
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannelNode.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
 
Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Web リソースを活用した簡単アプリケーション開発(Windows Phone)Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Web リソースを活用した簡単アプリケーション開発(Windows Phone)
 
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうChromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
 
WebRTC meetup Tokyo 1
WebRTC meetup  Tokyo 1WebRTC meetup  Tokyo 1
WebRTC meetup Tokyo 1
 
Boost sg msgpack
Boost sg msgpackBoost sg msgpack
Boost sg msgpack
 
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
 
WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版WebRTCの技術解説 第二版 公開版 完全版
WebRTCの技術解説 第二版 公開版 完全版
 
WebRTC on Native App
WebRTC on Native AppWebRTC on Native App
WebRTC on Native App
 
20130315 abc firefox_os
20130315 abc firefox_os20130315 abc firefox_os
20130315 abc firefox_os
 
Webrtc bootcamp handson
Webrtc bootcamp handsonWebrtc bootcamp handson
Webrtc bootcamp handson
 
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
 
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
 
Parse触ってみた
Parse触ってみたParse触ってみた
Parse触ってみた
 
Apache Spark 3.0新機能紹介 - 拡張機能やWebUI関連のアップデート(Spark Meetup Tokyo #3 Online)
Apache Spark 3.0新機能紹介 - 拡張機能やWebUI関連のアップデート(Spark Meetup Tokyo #3 Online)Apache Spark 3.0新機能紹介 - 拡張機能やWebUI関連のアップデート(Spark Meetup Tokyo #3 Online)
Apache Spark 3.0新機能紹介 - 拡張機能やWebUI関連のアップデート(Spark Meetup Tokyo #3 Online)
 
Akka HTTP
Akka HTTPAkka HTTP
Akka HTTP
 

More from yoshikawa_t

Ionicで作るTechfeed
Ionicで作るTechfeedIonicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
 
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
 
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
 
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要yoshikawa_t
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
 
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
 
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPIChrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
 
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
 
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2yoshikawa_t
 
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスモバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
 
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTipsモバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
 
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
yoshikawa_t
 
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
 
Sencha touch vs j query mobile
Sencha touch vs j query mobileSencha touch vs j query mobile
Sencha touch vs j query mobileyoshikawa_t
 
jQuery MobileとHTML5
jQuery MobileとHTML5jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
 

More from yoshikawa_t (20)

Ionicで作るTechfeed
Ionicで作るTechfeedIonicで作るTechfeed
Ionicで作るTechfeed
 
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
 
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
 
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
 
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
 
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPIChrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
 
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
 
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
 
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスモバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
 
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTipsモバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
 
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
 
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
 
Sencha touch vs j query mobile
Sencha touch vs j query mobileSencha touch vs j query mobile
Sencha touch vs j query mobile
 
jQuery MobileとHTML5
jQuery MobileとHTML5jQuery MobileとHTML5
jQuery MobileとHTML5
 

Recently uploaded

キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 

Recently uploaded (10)

キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 

Let's begin WebRTC