クラウドを活用した WebRTC コールセンターの最前線

by Kiminari Homma

Slide 1

Slide 1 text

Ϋϥ΢υΛ׆༻ͨ͠ WebRTC ίʔϧηϯλʔ ͷ࠷લઢ @kimihom

Slide 2

Slide 2 text

ຊؒ ߖ੒ @kimihom CTO at selfree,llc TwilioJP-UG ϝϯόʔ CallConnect (ి࿩αϙʔτΛ؆୯ʹ) ϒϩά “ϘΫίί” ӡӦ https://www.callconnect.jp http://www.bokukoko.info/ Who am Iʁ

Slide 3

Slide 3 text

Goal “ίʔϧηϯλʔ” ʹ͍ͭͯ஌ࣝΛਂΊɺ WebRTC ͕ͲͷΑ͏ʹ׆༻͞Ε࣮ݱ͍ͯ͠Δͷ͔ Λཧղ͠ɺ࣍ͳΔ Cloud Innovation ͷώϯτΛ௫ΜͰ͍ͩͨͩ͘

Slide 4

Slide 4 text

Topic

Slide 5

Slide 5 text

Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ

Slide 6

Slide 6 text

Q. ͦ΋ͦ΋ి࿩͸ ͳͥͭͳ͕Δͷʁ

Slide 7

Slide 7 text

Ωʔϫʔυ͸ “ަ׵ػ”

Slide 8

Slide 8 text

A B C ࢢ಺ہ൪ ަ׵ػ Ұൠి࿩

Slide 9

Slide 9 text

A B C ࢢ֎ہ൪ ަ׵ػ Ұൠి࿩

Slide 10

Slide 10 text

اۀͷ಺ઢి࿩΍ίʔϧηϯλʔΛ ߏங͍ͨ͠৔߹ʹɺ ి࿩ͷ ”γεςϜԽ” ͕ඞཁʹͳΔ

Slide 11

Slide 11 text

A: ݻఆి࿩ B: SIP ϑΥϯ C ࢢ֎ہ൪ IP-PBX ަ׵ػ PBX (اۀ಺ަ׵ػ) ࣾ಺ ࣾ֎

Slide 12

Slide 12 text

ࣾ಺Ͱަ׵ػ(PBX)Λ࣋ͭ ϝϦοτ • ಺ઢ௨࿩(௨࿩ྉͷઅ໿) • ୅දి࿩൪߸ • ಺ઢసૹ • ͦͷଞίʔϧηϯλʔػೳ (IP-PBX) σϝϦοτ • ઐ༻ PBX / αʔόʔ ͷ ߏங/ӡ༻͕ඞཁ

Slide 13

Slide 13 text

σϝϦοτΛղܾ͢ΔͨΊʹ ి࿩ަ׵ػΛ”Ϋϥ΢υ”Խ

Slide 14

Slide 14 text

A B C Ϋϥ΢υ PBX ަ׵ػ

Slide 15

Slide 15 text

Ϋϥ΢υ PBX ͷϝϦοτ • ࣗࣾͰަ׵ػΛ࣋ͭඞཁ͕ͳ͘ͳΔ • ॳظίετɾݻఆࢿ࢈ͷෛ୲Λ࡟ݮ • ಋೖεϐʔυ͕଎͍ • ఆظతͳΞοϓσʔτ

Slide 16

Slide 16 text

ɹɹɹͷొ৔

Slide 17

Slide 17 text

A B C Ϋϥ΢υ PBX ަ׵ػ

Slide 18

Slide 18 text

• Ϋϥ΢υ PBX αʔϏεͱಉ౳ͷ࢓૊ΈΛ API Ͱɹɹɹ ఏڙ͠ɺ։ൃऀ͕ࣗ༝ʹి࿩γεςϜΛߏஙͰ͖Δ • ి࿩γεςϜͷ࢓૊ΈΛ Web ٕज़ͷΈ Ͱ࣮ݱ ࠶ੜɺసૹɺ࿥Իɺอཹɺϓογϡૢ࡞ɺΩϡʔɾɾ • ి࿩ճઢ͕ෆཁ • νϟωϧͷ֓೦͕ͳ͍ Voice

Slide 19

Slide 19 text

ి࿩ ͱ Web ͷ͕֞ࠜແ͘ͳΓͭͭ͋Δ

Slide 20

Slide 20 text

Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ

Slide 21

Slide 21 text

WebRTC (Web Real-Time Communication)

Slide 22

Slide 22 text

WebRTC ͰͰ͖Δ͜ͱ • ి࿩ • ࿥Ի • ϏσΦ௨࿩ • σʔλڞ༗ • ө૾഑৴ Ϣʔβʔ͸ઐ༻ϓϥάΠϯແ͠Ͱར༻Մೳ

Slide 23

Slide 23 text

σόΠε΍αʔόͱ ௚઀ (P2P) ܨ͕Δ εϚϗ ΞϓϦ PC ϒϥ΢β IP-PBX Web αʔό SIP ϑΥϯ

Slide 24

Slide 24 text

A B C ަ׵ػ

Slide 25

Slide 25 text

WebRTC ίʔϧηϯλʔͷར఺ • ి࿩ ͱ Web ͷ༥߹ • Chrome ͚ͩͰίʔϧηϯλʔΛ࣮ݱͰ͖Δ > ௿Ձ֨, ಋೖ༰қ, ߴػೳ • ి࿩/ϏσΦ/νϟοτ “ΦϜχνϟωϧԽ”

Slide 26

Slide 26 text

WebRTC ͷ՝୊ • ࢓༷͕ݻ·Γ͖Ε͍ͯͳ͍ • γάφϦϯάͷͨΊͷ࢓૊Έ • ωοτϫʔΫͷઐ໳஌ࣝ • Ϣʔβʔ؀ڥʹେ͖͘ґଘ

Slide 27

Slide 27 text

WebRTC ͷ՝୊ • ࢓༷͕ݻ·Γ͖Ε͍ͯͳ͍ • γάφϦϯάͷͨΊͷ࢓૊Έ • ωοτϫʔΫͷઐ໳஌ࣝ • Ϣʔβʔ؀ڥʹେ͖͘ґଘ 3೥લͷ࿩

Slide 28

Slide 28 text

WebRTC Ϋϥ΢υ API * WebRTC ࠷৽ͷ௥ै * WebRTC ͷίΞ࣮૷Λ ҙࣝͤͣʹϦΞϧλΠϜ αʔϏεΛߏஙͰ͖Δ SDK

Slide 29

Slide 29 text

• Ϋϥ΢υ ”ίϛϡχέʔγϣϯ” API αʔϏε Ի੠௨࿩ / SMS / ϏσΦ / νϟοτ / ௨஌ / ಉظ / IoT • Add-on Ͱ Watson ͱͷ࿈ܞ΋༰қ • ࢝Ί͔Βैྔ՝ۚ • શࠃͰษڧձ΍ͬͯ·͢ (Twilio-UG)

Slide 30

Slide 30 text

ैདྷ͸ਂ͍ઐ໳ੑΛཁͨ͠ “ίϛϡχέʔγϣϯͷٕज़” ͕୭Ͱ΋ API Ͱ࣮ݱՄೳʹ Open Cloud Innovation

Slide 31

Slide 31 text

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

“ސ٬ରԠ͸ϝʔϧ΍νϟοτͰे෼”ʁ ސ٬ຬ଍Λ௥ٻ͢ΔͳΒ ి࿩͸Ϛετɻ ϏδωεΛ੒ޭʹಋ͘ ”෢ث”ͱͳΔπʔϧΛ໨ࢦ͢ αʔϏεͷࢥ͍

Slide 34

Slide 34 text

• ࠃ಺།Ұͷ׬શ SaaS ܕ WebRTC ίʔϧηϯλʔ • 5෼Ͱಋೖ/ӡ༻Մೳ • 14೔ແྉτϥΠΞϧ • PC ి࿩ͱڞʹɺސ٬৘ใ΍௨࿩ཤྺΛ Web ্Ͱ؅ཧ • ଞΫϥ΢υαʔϏεͱͷ࿈ܞ

Slide 35

Slide 35 text

DEMO

Slide 36

Slide 36 text

WebRTC αʔϏεͷӡ༻ • iOS ະରԠ (ݱঢ় iOS Chrome Ͱ΋ར༻ෆՄ) • Ϣʔβʔ؀ڥΛνΣοΫ͢Δϖʔδ ͸ඞਢ • ϔουηοτͷ඼࣭ • ωοτϫʔΫ (઀ଓঢ়ଶ, ಉ࣌઀ଓ, ஍ཧ) • Ի࣭͕ѱ͍ͱ͍͏໰͍߹Θͤ͸Α͘དྷΔ 98% ωοτϫʔΫ΍ϚΠΫͷ઀ଓෆྑʹΑΔ΋ͷ

Slide 37

Slide 37 text

Slide 38

Slide 38 text

WebRTC ͰԿ͔Λ࡞ΔͳΒɺ Chrome ݶఆʹ͢Δ͔ ΞϓϦݶఆʹ͠Α͏

Slide 39

Slide 39 text

WebRTC / WebSocket Λ࢖͏ͳΒ ઀ଓΛ੾Β͞ͳ͍Α͏ʹ Ajax Խ͠Α͏

Slide 40

Slide 40 text

WebRTC / WebSocket Λ࢖͏ͳΒ ࠷৽ͷ HTML5 ٕज़ΛੵۃతʹऔΓೖΕΑ͏ ServiceWorker, Canvas, HistoryAPI, File API, WebSpeech API, Device API…

Slide 41

Slide 41 text

εϚϗΞϓϦ͸ ΍͕ͯ Web Խ͞Ε͍ͯ͘ Web ΞϓϦ͸΍͕ͯ εϚϗΞϓϦͷΑ͏ʹͳΔ

Slide 42

Slide 42 text

Cloud Innovation ͸ جຊٕज़ͷֵ৽͔Βੜ·ΕΔ ਐԽٕͨ͠ज़ͷ૊Έ߹Θͤ ٕज़ͷ”Ҿ͖ग़͠”Λ૿΍͢͜ͱ͕ॏཁ

Slide 43

Slide 43 text

JavaScript! JavaScript! JavaScript! + Ϋϥ΢υ API

Slide 44

Slide 44 text

ϔουηοτ ϓϨθϯτ Ωϟϯϖʔϯ ࣮ࢪதʂ ࠂ஌ ϒʔεग़లதʂ ͜͜Λग़͙ͯ͢લ

Slide 45

Slide 45 text

Thanks.

Slide 46

Slide 46 text

ൃද͸͜͜·ͰͰ͢ɻ ҎԼɺ༧උεϥΠυ

Slide 47

Slide 47 text

Goal CallConnect ͷ࣮૷Λ௨ͯ͠ HTML 5 ͷ”ࠓ”ͱ”ํ޲ੑ”Λ஌͍͖ͬͯͨͩɺ ࣍ͳΔ Open Cloud Innovation ΛੜΈग़͢ ͖͔͚ͬ΍ώϯτͱͳΔ৔ʹ͢Δ

Slide 48

Slide 48 text

Topic • ࠷৽ Web ςΫϊϩδʔͱͷ෇͖߹͍ํ • HTML 5 ςΫϊϩδʔͷ͝঺հ • HTML 5 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯

Slide 49

Slide 49 text

Topic • ࠷৽ Web ςΫϊϩδʔͱͷ෇͖߹͍ํ • HTML 5 ςΫϊϩδʔͷ͝঺հ • HTML 5 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Ϋϩεϒϥ΢βରԠ or HTML 5 ͷ࠷৽ςΫϊϩδʔ ͲͪΒʹ࣌ؒΛׂ͘΂͖͔ αʔϏε࣍ୈ

Slide 52

Slide 52 text

ϒϥ΢βαϙʔτΛݶఆ͢Δ Chrome ݶఆΛ໌ه (Φεεϝ)

Slide 53

Slide 53 text

ϥϯσΟϯάϖʔδ ͷ UA

Slide 54

Slide 54 text

Topic • ࠷৽ Web ςΫϊϩδʔͱͷ෇͖߹͍ํ • HTML 5 ςΫϊϩδʔͷ͝঺հ • HTML 5 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯

Slide 55

Slide 55 text

͝঺հ͢Δ HTML 5 • WebRTC • WebSocket • History API • Canvas • File API • Web Speech API • Web Notiﬁcations • Service Worker • Device API

Slide 56

Slide 56 text

WebRTC (Web Real-Time Communication)

Slide 57

Slide 57 text

P2P ͰσόΠε΍αʔόͱ ”௚઀”ܨ͕Δ εϚϗ ΞϓϦ PC ϒϥ΢β PSTN Web αʔό SIP ϑΥϯ

Slide 58

Slide 58 text

WebRTC ͰͰ͖Δ͜ͱ • ϏσΦ௨࿩ • ి࿩ • ࿥Ի • σʔλڞ༗ • ө૾഑৴ Ϣʔβʔ͸ઐ༻ϓϥάΠϯແ͠Ͱར༻Մೳ

Slide 59

Slide 59 text

WebRTC • σόΠεͷϚΠΫ/ΧϝϥΛར༻ (UserMedia) • ϒϥ΢βͰϦΞϧλΠϜ௨࿩ (RTCPeerConnection) • ςΩετ΍όΠφϦσʔλͷૹड৴ (DataChannel) “୭ͱ"઀ଓ͢Δ͔Λࢦఆ͢Δ࣮૷͸ࣗ෼Ͱ༻ҙ͠ͳ͚Ε͹ͳΒͳ͍ “γάφϦϯά”

Slide 60

Slide 60 text

՝୊ ωΠςΟϒ࣮૷ͷෳࡶ͞ ωοτϫʔΫͷઐ໳஌ࣝ ઀ଓͷͨΊͷઐ༻αʔόʔ ϒϥ΢βґଘ ϢʔβʔͷϚΠΫ ؀ڥ

Slide 61

Slide 61 text

͜͜·Ͱ͸ 3೥લͷ࿩

Slide 62

Slide 62 text

WebRTC Ϋϥ΢υαʔϏε • Twilio • SkyWay • Tropo WebRTC ࠷৽ͷ௥ै WebRTC ͷίΞ࣮૷Λ ҙࣝͤͣʹϦΞϧλΠϜ αʔϏεΛߏஙͰ͖Δ SDK

Slide 63

Slide 63 text

// ॳظԽ Twilio.Device.setup(“Twilio Token”); // ॳظԽ׬ྃ࣌ Twilio.Device.ready(function (device) { console.log("ண৴Մೳ"); } // ண৴࣌ Twilio.Device.incoming(function (conn) { conn.accept(); // ௨࿩։࢝ } // ௨࿩։࢝࣌ Twilio.Device.connect(function (conn) { console.log("௨࿩த"); }); ਺ߦͷίʔυͰϦΞϧλΠϜ௨৴ػೳΛ࣮ݱʂ

Slide 64

Slide 64 text

DEMO UserMedia ͱ RTCPeerConnection

Slide 65

Slide 65 text

WebRTC αʔϏεͷӡ༻ • iOS ະରԠ (ݱঢ় iOS Chrome Ͱ΋ར༻ෆՄ) • Ϣʔβʔ؀ڥΛνΣοΫ͢Δϖʔδ͸ඞਢ • ϔουηοτͷ඼࣭ • ωοτϫʔΫ (઀ଓঢ়ଶ, ಉ࣌઀ଓ, ஍ཧ) • Ի࣭͕ѱ͍ͱ͍͏໰͍߹Θͤ͸Α͘དྷΔ 98% ωοτϫʔΫ΍ϚΠΫͷ઀ଓෆྑʹΑΔ΋ͷ

Slide 66

Slide 66 text

WebRTC ͷࠓޙ (͔ͳΓ׆ൃ) • ҆ఆɺηΩϡΞ • εΫϦʔϯڞ༗ • canvas ΍ video ཁૉͱͷ༥߹ • ࿥ը

Slide 67

Slide 67 text

WebSocket

Slide 68

Slide 68 text

A: Hello A: Hello A B αʔόʔ͔ΒಛఆͷΫϥΠΞϯτ(B)ʹϝοηʔδΛૹ৴͍ͨ͠…

Slide 69

Slide 69 text

A: Hello WebSocket ϓϩτίϧ A B WebSocket Ͱ઀ଓΛཱ֬

Slide 70

Slide 70 text

WebSocket • αʔόʔ/ϒϥ΢βͷ૒ํ޲σʔλ௨৴ • ςΩετ/όΠφϦͷૹड৴ • https ͱ͸ผͷ WebSocket ϓϩτίϧ (wss) Ͱ઀ଓΛཱ֬

Slide 71

Slide 71 text

WebSocket ͰͰ͖Δ͜ͱ(ྫ) • νϟοτ • ϦΞϧλΠϜ௨஌ • ڞ༗Ϙʔυ • Ϣʔβʔಉ࢜ͷ͋ΒΏΔίϥϘϨʔγϣϯ

Slide 72

Slide 72 text

՝୊ ωοτϫʔΫ؀ڥґଘ ϒϥ΢βґଘ ઀ଓͷͨΊͷ WS ༻αʔόʔ

Slide 73

Slide 73 text

WebSocket Ϋϥ΢υαʔϏε • Twilio • Node-RED • Milkcocoa • Firebase • … ઐ༻αʔόෆཁ εέʔϧରԠ SDKͰ։ൃޮ཰Խ

Slide 74

Slide 74 text

// ॳظԽ accessManager = new Twilio.AccessManager(data.token); messagingClient = new Twilio.IPMessaging.Client(accessManager); // channel ͷऔಘ messagingClient.getChannel().then(initChannel); // channel ͷΠϕϯτ function initChannel(channel) { channel.on('messageAdded', function(message) { console.log(message); }); }

Slide 75

Slide 75 text

DEMO

Slide 76

Slide 76 text

WebSocket αʔϏεͷӡ༻ • PC ΛεϦʔϓͨ͠Γ͢Δͱ઀ଓ͕੾ΕΔ “઀ଓ͕੾Εͨɻߋ৽ͯ͠” ͱ͍͏දࣔΛඞͣೖΕΔ • اۀͷωοτϫʔΫ؀ڥʹ஫ҙ ϙʔϦϯά౳ͷ୅ସͱ૊Έ߹ΘͤΔඞཁ͋Γ ແཧʹ WebSocket Λ࢖Θͳͯ͘΋ɺ“ϖʔδߋ৽” Ͱ ղܾͰ͖ΔͳΒͦͷ΄͏͕͍͍ (χϡʔε΍ܝࣔ൘ͳͲ)

Slide 77

Slide 77 text

WebRTC ΍ WebSocket Λ࢖͏ͱ γϯάϧϖʔδΞϓϦέʔγϣϯ (SPA) લఏͱͳΔ SPA ͦͷଞͷཧ༝ Ϣʔβʔମݧ޲্ ωοτϫʔΫෛՙܰݮ εϚϗΞϓϦԽ

Slide 78

Slide 78 text

SPA ͷಛ௃ • େྔͷΠϕϯτΛ JavaScript Ͱఆٛ • ϖʔδ͝ͱͷ js/css ͕ఆٛͰ͖ͳ͍ (Ұׅ) • ໭Δ/ਐΉͷಈ࡞Λߟྀ

Slide 79

Slide 79 text

͜ΕΒΛ૝ఆͯ͠ߏங͞Εͨ SPA ϑϨʔϜϫʔΫ • React.js • AngularJS • Vue.js • JS ϑϨʔϜϫʔΫͷ࿦૪͸ઈ͑ͳ͍ɾɾɻ

Slide 80

Slide 80 text

History API

Slide 81

Slide 81 text

History API • ϢʔβʔͷϖʔδભҠΛ Stack ͰੵΈ্͛Δ • ໭Δ/ਐΉ ΠϕϯτͷఆٛͰࢦఆ URL / ύϥ ϝʔλΛऔಘ • URL ʹԠͨ͡ϖʔδ੾Γସ͑͸ࣗ෼Ͱ࣮૷

Slide 82

Slide 82 text

// Stack ੵΈ্͛ History.pushState(option, title, url); // Stack มԽ࣌ͷΠϕϯτఆٛ History.Adapter.bind( window, ‘statechange’, function() { let state = History.getState(); let url = state.cleanUrl; console.log(url) //=> /posts/1 // URL ʹجͮ͘ϧʔςΟϯά }); History.js Ͱͷ࣮૷ྫ

Slide 83

Slide 83 text

DEMO

Slide 84

Slide 84 text

History API ͷ࣮૷ • ࣗલͰ࣮૷Ͱ΋ಛʹ೉͘͠ͳ͍ • Ωϟογϡͷ࢓૊ΈΛߏஙՄ • ࣗલ SPA ͷ৔߹͸࠷ॳʹඞͣߟྀ͠Α͏

Slide 85

Slide 85 text

Web Notiﬁcations Service Worker

Slide 86

Slide 86 text

Web Notiﬁcations • ͍ΘΏΔ σεΫτοϓ௨஌ • ࠷ۙ͸௨஌ʹϘλϯ΍ΞΠίϯͳͲΛ౥ࡌՄ • ௨஌ΫϦοΫ࣌ͷಈ࡞Λఆٛ • ServiceWorker ͱ૊Έ߹ΘͤΔ͜ͱͰ εϚϗ௨஌΋Մ

Slide 87

Slide 87 text

Service Worker • όοΫάϥ΢ϯυͰಈ͘ JavaScript • ࠓ೥ॳΊ͘Β͍͔Β஫໨͞Ε࢝ΊΔ • ΦϑϥΠϯରԠ/Ωϟογϡ/ϓογϡ௨஌ ϓογϡ௨஌ͷཚ༻͸΍Ί·͠ΐ͏ʂ

Slide 88

Slide 88 text

// ServiceWorker ͷొ࿥ navigator.serviceWorker.register(‘/sw.js'); // ௨஌ൃߦ navigator.serviceWorker.ready.then(function(registration) { registration.showNotiﬁcation('௨஌', { icon: '/icon.png', body: name + 'ΑΓண৴͕͋Γ·͢ɻ', vibrate: [200, 100, 200, 100, 200, 100, 200] }); });

Slide 89

Slide 89 text

self.onnotiﬁcationclick = function(event) { event.notiﬁcation.close(); event.waitUntil( clients.matchAll({ includeUncontrolled: true }).then(function(clientList) { for (var i = 0; i < clientList.length; i++) { var client = clientList[i]; if (client.url.match('myapp') && 'focus' in client) { return client.focus(); } } }); ); }; sw.js

Slide 90

Slide 90 text

DEMO εϚϗϓογϡ௨஌

Slide 91

Slide 91 text

File API

Slide 92

Slide 92 text

File API • ϑΝΠϧબ୒΍υϥοά&υϩοϓ • JavaScript ͰϑΝΠϧऔಘɺૢ࡞

Slide 93

Slide 93 text

ϑΝΠϧૢ࡞ΛϑϩϯτΤϯ υͰղܾ αʔόʔෛՙͷ௿Լ Ϣʔβʔମݧͷ޲্

Slide 94

Slide 94 text

ྫ) ը૾ΞοϓϩʔυͷྲྀΕ • ը૾Λυϥοά & υϩοϓ (File API) • ϑΝΠϧλΠϓͷνΣοΫ (File API) • ը૾ͷϦαΠζ (Canvas) • Cropper.js Ͱॎԣൺͷௐ੔ • ը૾αʔό΁Ξοϓϩʔυ (CORS) શͯ JavaScript Ͱ࣮૷Մೳ

Slide 95

Slide 95 text

// imagefield dragover $(document).on("dragover", ".droparea", function(e) { e.preventDefault(); $(".droparea").addClass("hover"); }); // imagefield dragleave $(document).on("dragleave", “.droparea", function(e) { e.preventDefault(); $(".droparea").removeClass("hover"); }); // imagefield drop $(document).on("drop", ".droparea", function(e) { e.preventDefault(); var file = e.originalEvent.dataTransfer.files[0]; });

Slide 96

Slide 96 text

DEMO ࣮૷ํ๏͸”ݸਓϒϩά”ʹͯ

Slide 97

Slide 97 text

Canvas

Slide 98

Slide 98 text

Canvas • JavaScript Ͱඳ͚Δ 2D ඳըϥΠϒϥϦ • ௨ৗͷ HTML Ͱ͸දݱ͠ʹ͍͘΋ͷΛॊೈʹ දࣔͰ͖Δ

Slide 99

Slide 99 text

Canvas ≠ άϥϑΟοΫ/ήʔϜઐ໳ จࣈɺਤܗɺΫϦοΫΠϕϯτ ͋ΒΏΔΞϓϦέʔγϣϯͰ ΑΓΘ͔Γ΍͍͢ UI Λ࣮ݱͰ͖Δ

Slide 100

Slide 100 text

Canvas ༻ϥΠϒϥϦ • Fabric.js • jCanvas • άϥϑΟοΫ/ήʔϜ༻Ͱͦͷଞଟ਺

Slide 101

Slide 101 text

DEMO

Slide 102

Slide 102 text

Canvas ͷ࣮૷ • ࠶ඳըͷͨΊʹ σʔλΛJSON ܗࣜ౳Ͱอଘ͠ ࠶ݱ͢Δͷ͕࣮૷ͷࢁ৔ (Fablic.js ͸ඪ४౥ࡌ) • px ୯ҐͳͨΊ ϨεϙϯγϒԽ͕೉͍͠ • ςΩετϘοΫεͳͲͷ HTML ϑΥʔϜ͸ຒΊ ࠐΈෆՄ

Slide 103

Slide 103 text

Web Speech API

Slide 104

Slide 104 text

Web Speech API • Chrome, Firefox ͷ࣮ݧஈ֊ͷػೳ • ϒϥ΢β౥ࡌ • Text to Speech, Speech to Text • අ༻ 0 & ੍໿ͳ͠

Slide 105

Slide 105 text

• ਫ਼౓͸ׂͱߴ͍ • ݱঢ়͸్தͰউखʹจࣈى͕͜͠ࢭ·ͬͨΓ͢ ΔͨΊɺͣͬͱ࿥Ի͢Δʹ͸Կ͔͠ΒͷϋοΫ ͕ඞཁ • ౰વ ࿩͠૬खͷ੠ͳͲ͸औಘෆՄɻ -> ͦͷ࣌͸ ΋ͪΖΜ Watson Ͱɻ

Slide 106

Slide 106 text

// ॳظԽ let recognition = new webkitSpeechRecognition(); recognition.lang = 'ja-JP'; recognition.continuous = true; // ։࢝ recognition.start(); // ݁Ռ recognition.onresult = function(event){ let results = event.results; var message = ""; for (var i = event.resultIndex; i < results.length; i++){ message += results[i][0].transcript; } console.log(message); };

Slide 107

Slide 107 text

DEMO https://www.google.com/intl/ja/chrome/demos/speech.html

Slide 108

Slide 108 text

Web Speech API ͷར༻ • ձ࿩ͷॻ͖ى͜͠Ͱ׬ᘳͳਫ਼౓͸ෆՄೳ • จΛ੔ܗ͢ΔΑ͏ͳٕज़Λ૊Έ߹ΘͤΔͱྑ͍

Slide 109

Slide 109 text

Device API

Slide 110

Slide 110 text

• ͋ΒΏΔ୺຤৘ใΛ ϒϥ΢βͰऔಘ • Ґஔ৘ใɺ֤ηϯα৘ใɺόοςϦɺόΠϒ • ϚΠΫग़ྗσόΠε …etc https://developer.chrome.com/apps/api_index

Slide 111

Slide 111 text

• Web ΞϓϦͷ ”εϚϗΞϓϦ” Խ • Web ΞϓϦΛ࡞Ε͹ɺ֤ϓϥοτϑΥʔϜʹ ґଘ͠ͳ͍αʔϏεΛల։Մ • ֤σόΠε, OS, ϒϥ΢βͷରԠʹظ଴

Slide 112

Slide 112 text

Topic • ࠷৽ Web ςΫϊϩδʔͱͷ෇͖߹͍ํ • HTML 5 ςΫϊϩδʔͷ͝঺հ • HTML 5 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯

Slide 113

Slide 113 text

Cloud Innovation ͸ جຊٕज़ͷֵ৽͔Βੜ·ΕΔ ਐԽٕͨ͠ज़ͷ૊Έ߹Θͤ

Slide 114

Slide 114 text

ٕज़ͷҾ͖ग़͠Λ૿΍͢

Slide 115

Slide 115 text

εϚϗΞϓϦ͸ ΍͕ͯ Web Խ͞Ε͍ͯ͘ Web ΞϓϦ͸΍͕ͯ εϚϗΞϓϦͷΑ͏ʹͳΔ