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

http://softlayer.connpass.com/event/34524/ での登壇スライド

Transcript

1. Ϋϥ΢υΛ׆༻ͨ͠ WebRTC ίʔϧηϯλʔ ͷ࠷લઢ @kimihom
2. ຊؒ ߖ੒ @kimihom CTO at selfree,llc TwilioJP-UG ϝϯόʔ CallConnect (ి࿩αϙʔτΛ؆୯ʹ) ϒϩά “ϘΫίί” ӡӦ https://www.callconnect.jp http://www.bokukoko.info/ Who am Iʁ
3. Goal “ίʔϧηϯλʔ” ʹ͍ͭͯ஌ࣝΛਂΊɺ WebRTC ͕ͲͷΑ͏ʹ׆༻͞Ε࣮ݱ͍ͯ͠Δͷ͔ Λཧղ͠ɺ࣍ͳΔ Cloud Innovation ͷώϯτΛ௫ΜͰ͍ͩͨͩ͘
4. Topic
5. Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ
6. Q. ͦ΋ͦ΋ి࿩͸ ͳͥͭͳ͕Δͷʁ
7. Ωʔϫʔυ͸ “ަ׵ػ”
8. A B C ࢢ಺ہ൪ ަ׵ػ Ұൠి࿩
9. A B C ࢢ֎ہ൪ ަ׵ػ Ұൠి࿩
10. اۀͷ಺ઢి࿩΍ίʔϧηϯλʔΛ ߏங͍ͨ͠৔߹ʹɺ ి࿩ͷ ”γεςϜԽ” ͕ඞཁʹͳΔ
11. A: ݻఆి࿩ B: SIP ϑΥϯ C ࢢ֎ہ൪ IP-PBX ަ׵ػ PBX (اۀ಺ަ׵ػ) ࣾ಺ ࣾ֎
12. ࣾ಺Ͱަ׵ػ(PBX)Λ࣋ͭ ϝϦοτ • ಺ઢ௨࿩(௨࿩ྉͷઅ໿) • ୅දి࿩൪߸ • ಺ઢసૹ • ͦͷଞίʔϧηϯλʔػೳ (IP-PBX) σϝϦοτ • ઐ༻ PBX / αʔόʔ ͷ ߏங/ӡ༻͕ඞཁ
13. σϝϦοτΛղܾ͢ΔͨΊʹ ి࿩ަ׵ػΛ”Ϋϥ΢υ”Խ
14. A B C Ϋϥ΢υ PBX ަ׵ػ
15. Ϋϥ΢υ PBX ͷϝϦοτ • ࣗࣾͰަ׵ػΛ࣋ͭඞཁ͕ͳ͘ͳΔ • ॳظίετɾݻఆࢿ࢈ͷෛ୲Λ࡟ݮ • ಋೖεϐʔυ͕଎͍ • ఆظతͳΞοϓσʔτ
16. ɹɹɹͷొ৔
17. A B C Ϋϥ΢υ PBX ަ׵ػ
18. • Ϋϥ΢υ PBX αʔϏεͱಉ౳ͷ࢓૊ΈΛ API Ͱɹɹɹ ఏڙ͠ɺ։ൃऀ͕ࣗ༝ʹి࿩γεςϜΛߏஙͰ͖Δ • ి࿩γεςϜͷ࢓૊ΈΛ Web ٕज़ͷΈ Ͱ࣮ݱ ࠶ੜɺసૹɺ࿥Իɺอཹɺϓογϡૢ࡞ɺΩϡʔɾɾ • ి࿩ճઢ͕ෆཁ • νϟωϧͷ֓೦͕ͳ͍ Voice
19. ి࿩ ͱ Web ͷ͕֞ࠜແ͘ͳΓͭͭ͋Δ
20. Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ
21. WebRTC (Web Real-Time Communication)
22. WebRTC ͰͰ͖Δ͜ͱ • ి࿩ • ࿥Ի • ϏσΦ௨࿩ • σʔλڞ༗ • ө૾഑৴ Ϣʔβʔ͸ઐ༻ϓϥάΠϯແ͠Ͱར༻Մೳ
23. σόΠε΍αʔόͱ ௚઀ (P2P) ܨ͕Δ εϚϗ ΞϓϦ PC ϒϥ΢β IP-PBX Web αʔό SIP ϑΥϯ
24. A B C ަ׵ػ
25. WebRTC ίʔϧηϯλʔͷར఺ • ి࿩ ͱ Web ͷ༥߹ • Chrome ͚ͩͰίʔϧηϯλʔΛ࣮ݱͰ͖Δ > ௿Ձ֨, ಋೖ༰қ, ߴػೳ • ి࿩/ϏσΦ/νϟοτ “ΦϜχνϟωϧԽ”
26. WebRTC ͷ՝୊ • ࢓༷͕ݻ·Γ͖Ε͍ͯͳ͍ • γάφϦϯάͷͨΊͷ࢓૊Έ • ωοτϫʔΫͷઐ໳஌ࣝ • Ϣʔβʔ؀ڥʹେ͖͘ґଘ
27. WebRTC ͷ՝୊ • ࢓༷͕ݻ·Γ͖Ε͍ͯͳ͍ • γάφϦϯάͷͨΊͷ࢓૊Έ • ωοτϫʔΫͷઐ໳஌ࣝ • Ϣʔβʔ؀ڥʹେ͖͘ґଘ 3೥લͷ࿩
28. WebRTC Ϋϥ΢υ API * WebRTC ࠷৽ͷ௥ै * WebRTC ͷίΞ࣮૷Λ ҙࣝͤͣʹϦΞϧλΠϜ αʔϏεΛߏஙͰ͖Δ SDK
29. • Ϋϥ΢υ ”ίϛϡχέʔγϣϯ” API αʔϏε Ի੠௨࿩ / SMS / ϏσΦ / νϟοτ / ௨஌ / ಉظ / IoT • Add-on Ͱ Watson ͱͷ࿈ܞ΋༰қ • ࢝Ί͔Βैྔ՝ۚ • શࠃͰษڧձ΍ͬͯ·͢ (Twilio-UG)
30. ैདྷ͸ਂ͍ઐ໳ੑΛཁͨ͠ “ίϛϡχέʔγϣϯͷٕज़” ͕୭Ͱ΋ API Ͱ࣮ݱՄೳʹ Open Cloud Innovation
31. Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ
33. “ސ٬ରԠ͸ϝʔϧ΍νϟοτͰे෼”ʁ ސ٬ຬ଍Λ௥ٻ͢ΔͳΒ ి࿩͸Ϛετɻ ϏδωεΛ੒ޭʹಋ͘ ”෢ث”ͱͳΔπʔϧΛ໨ࢦ͢ αʔϏεͷࢥ͍
34. • ࠃ಺།Ұͷ׬શ SaaS ܕ WebRTC ίʔϧηϯλʔ • 5෼Ͱಋೖ/ӡ༻Մೳ • 14೔ແྉτϥΠΞϧ • PC ి࿩ͱڞʹɺސ٬৘ใ΍௨࿩ཤྺΛ Web ্Ͱ؅ཧ • ଞΫϥ΢υαʔϏεͱͷ࿈ܞ
35. DEMO
36. WebRTC αʔϏεͷӡ༻ • iOS ະରԠ (ݱঢ় iOS Chrome Ͱ΋ར༻ෆՄ) • Ϣʔβʔ؀ڥΛνΣοΫ͢Δϖʔδ ͸ඞਢ • ϔουηοτͷ඼࣭ • ωοτϫʔΫ (઀ଓঢ়ଶ, ಉ࣌઀ଓ, ஍ཧ) • Ի࣭͕ѱ͍ͱ͍͏໰͍߹Θͤ͸Α͘དྷΔ 98% ωοτϫʔΫ΍ϚΠΫͷ઀ଓෆྑʹΑΔ΋ͷ
37. Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ
38. WebRTC ͰԿ͔Λ࡞ΔͳΒɺ Chrome ݶఆʹ͢Δ͔ ΞϓϦݶఆʹ͠Α͏
39. WebRTC / WebSocket Λ࢖͏ͳΒ ઀ଓΛ੾Β͞ͳ͍Α͏ʹ Ajax Խ͠Α͏
40. WebRTC / WebSocket Λ࢖͏ͳΒ ࠷৽ͷ HTML5 ٕज़ΛੵۃతʹऔΓೖΕΑ͏ ServiceWorker, Canvas, HistoryAPI, File API, WebSpeech API, Device API…
41. εϚϗΞϓϦ͸ ΍͕ͯ Web Խ͞Ε͍ͯ͘ Web ΞϓϦ͸΍͕ͯ εϚϗΞϓϦͷΑ͏ʹͳΔ
42. Cloud Innovation ͸ جຊٕज़ͷֵ৽͔Βੜ·ΕΔ ਐԽٕͨ͠ज़ͷ૊Έ߹Θͤ ٕज़ͷ”Ҿ͖ग़͠”Λ૿΍͢͜ͱ͕ॏཁ
43. JavaScript! JavaScript! JavaScript! + Ϋϥ΢υ API
44. ϔουηοτ ϓϨθϯτ Ωϟϯϖʔϯ ࣮ࢪதʂ ࠂ஌ ϒʔεग़లதʂ ͜͜Λग़͙ͯ͢લ
45. Thanks.
46. ൃද͸͜͜·ͰͰ͢ɻ ҎԼɺ༧උεϥΠυ
47. Goal CallConnect ͷ࣮૷Λ௨ͯ͠ HTML 5 ͷ”ࠓ”ͱ”ํ޲ੑ”Λ஌͍͖ͬͯͨͩɺ ࣍ͳΔ Open Cloud Innovation ΛੜΈग़͢ ͖͔͚ͬ΍ώϯτͱͳΔ৔ʹ͢Δ
48. Topic • ࠷৽ Web ςΫϊϩδʔͱͷ෇͖߹͍ํ • HTML 5 ςΫϊϩδʔͷ͝঺հ • HTML 5 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯
49. Topic • ࠷৽ Web ςΫϊϩδʔͱͷ෇͖߹͍ํ • HTML 5 ςΫϊϩδʔͷ͝঺հ • HTML 5 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯
51. Ϋϩεϒϥ΢βରԠ or HTML 5 ͷ࠷৽ςΫϊϩδʔ ͲͪΒʹ࣌ؒΛׂ͘΂͖͔ αʔϏε࣍ୈ
52. ϒϥ΢βαϙʔτΛݶఆ͢Δ Chrome ݶఆΛ໌ه (Φεεϝ)
53. ϥϯσΟϯάϖʔδ ͷ UA
54. Topic • ࠷৽ Web ςΫϊϩδʔͱͷ෇͖߹͍ํ • HTML 5 ςΫϊϩδʔͷ͝঺հ • HTML 5 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯
55. ͝঺հ͢Δ HTML 5 • WebRTC • WebSocket • History API • Canvas • File API • Web Speech API • Web Notifications • Service Worker • Device API
56. WebRTC (Web Real-Time Communication)
57. P2P ͰσόΠε΍αʔόͱ ”௚઀”ܨ͕Δ εϚϗ ΞϓϦ PC ϒϥ΢β PSTN Web αʔό SIP ϑΥϯ
58. WebRTC ͰͰ͖Δ͜ͱ • ϏσΦ௨࿩ • ి࿩ • ࿥Ի • σʔλڞ༗ • ө૾഑৴ Ϣʔβʔ͸ઐ༻ϓϥάΠϯແ͠Ͱར༻Մೳ
59. WebRTC • σόΠεͷϚΠΫ/ΧϝϥΛར༻ (UserMedia) • ϒϥ΢βͰϦΞϧλΠϜ௨࿩ (RTCPeerConnection) • ςΩετ΍όΠφϦσʔλͷૹड৴ (DataChannel) “୭ͱ"઀ଓ͢Δ͔Λࢦఆ͢Δ࣮૷͸ࣗ෼Ͱ༻ҙ͠ͳ͚Ε͹ͳΒͳ͍ “γάφϦϯά”
60. ՝୊ ωΠςΟϒ࣮૷ͷෳࡶ͞ ωοτϫʔΫͷઐ໳஌ࣝ ઀ଓͷͨΊͷઐ༻αʔόʔ ϒϥ΢βґଘ ϢʔβʔͷϚΠΫ ؀ڥ
61. ͜͜·Ͱ͸ 3೥લͷ࿩
62. WebRTC Ϋϥ΢υαʔϏε • Twilio • SkyWay • Tropo WebRTC ࠷৽ͷ௥ै WebRTC ͷίΞ࣮૷Λ ҙࣝͤͣʹϦΞϧλΠϜ αʔϏεΛߏஙͰ͖Δ SDK
63. // ॳظԽ 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("௨࿩த"); }); ਺ߦͷίʔυͰϦΞϧλΠϜ௨৴ػೳΛ࣮ݱʂ
64. DEMO UserMedia ͱ RTCPeerConnection
65. WebRTC αʔϏεͷӡ༻ • iOS ະରԠ (ݱঢ় iOS Chrome Ͱ΋ར༻ෆՄ) • Ϣʔβʔ؀ڥΛνΣοΫ͢Δϖʔδ͸ඞਢ • ϔουηοτͷ඼࣭ • ωοτϫʔΫ (઀ଓঢ়ଶ, ಉ࣌઀ଓ, ஍ཧ) • Ի࣭͕ѱ͍ͱ͍͏໰͍߹Θͤ͸Α͘དྷΔ 98% ωοτϫʔΫ΍ϚΠΫͷ઀ଓෆྑʹΑΔ΋ͷ
66. WebRTC ͷࠓޙ (͔ͳΓ׆ൃ) • ҆ఆɺηΩϡΞ • εΫϦʔϯڞ༗ • canvas ΍ video ཁૉͱͷ༥߹ • ࿥ը
67. WebSocket
68. A: Hello A: Hello A B αʔόʔ͔ΒಛఆͷΫϥΠΞϯτ(B)ʹϝοηʔδΛૹ৴͍ͨ͠…
69. A: Hello WebSocket ϓϩτίϧ A B WebSocket Ͱ઀ଓΛཱ֬
70. WebSocket • αʔόʔ/ϒϥ΢βͷ૒ํ޲σʔλ௨৴ • ςΩετ/όΠφϦͷૹड৴ • https ͱ͸ผͷ WebSocket ϓϩτίϧ (wss) Ͱ઀ଓΛཱ֬
71. WebSocket ͰͰ͖Δ͜ͱ(ྫ) • νϟοτ • ϦΞϧλΠϜ௨஌ • ڞ༗Ϙʔυ • Ϣʔβʔಉ࢜ͷ͋ΒΏΔίϥϘϨʔγϣϯ
72. ՝୊ ωοτϫʔΫ؀ڥґଘ ϒϥ΢βґଘ ઀ଓͷͨΊͷ WS ༻αʔόʔ
73. WebSocket Ϋϥ΢υαʔϏε • Twilio • Node-RED • Milkcocoa • Firebase • … ઐ༻αʔόෆཁ εέʔϧରԠ SDKͰ։ൃޮ཰Խ
74. // ॳظԽ 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); }); }
75. DEMO
76. WebSocket αʔϏεͷӡ༻ • PC ΛεϦʔϓͨ͠Γ͢Δͱ઀ଓ͕੾ΕΔ “઀ଓ͕੾Εͨɻߋ৽ͯ͠” ͱ͍͏දࣔΛඞͣೖΕΔ • اۀͷωοτϫʔΫ؀ڥʹ஫ҙ ϙʔϦϯά౳ͷ୅ସͱ૊Έ߹ΘͤΔඞཁ͋Γ ແཧʹ WebSocket Λ࢖Θͳͯ͘΋ɺ“ϖʔδߋ৽” Ͱ ղܾͰ͖ΔͳΒͦͷ΄͏͕͍͍ (χϡʔε΍ܝࣔ൘ͳͲ)
77. WebRTC ΍ WebSocket Λ࢖͏ͱ γϯάϧϖʔδΞϓϦέʔγϣϯ (SPA) લఏͱͳΔ SPA ͦͷଞͷཧ༝ Ϣʔβʔମݧ޲্ ωοτϫʔΫෛՙܰݮ εϚϗΞϓϦԽ
78. SPA ͷಛ௃ • େྔͷΠϕϯτΛ JavaScript Ͱఆٛ • ϖʔδ͝ͱͷ js/css ͕ఆٛͰ͖ͳ͍ (Ұׅ) • ໭Δ/ਐΉͷಈ࡞Λߟྀ
79. ͜ΕΒΛ૝ఆͯ͠ߏங͞Εͨ SPA ϑϨʔϜϫʔΫ • React.js • AngularJS • Vue.js • JS ϑϨʔϜϫʔΫͷ࿦૪͸ઈ͑ͳ͍ɾɾɻ
80. History API
81. History API • ϢʔβʔͷϖʔδભҠΛ Stack ͰੵΈ্͛Δ • ໭Δ/ਐΉ ΠϕϯτͷఆٛͰࢦఆ URL / ύϥ ϝʔλΛऔಘ • URL ʹԠͨ͡ϖʔδ੾Γସ͑͸ࣗ෼Ͱ࣮૷
82. // 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 Ͱͷ࣮૷ྫ
83. DEMO
84. History API ͷ࣮૷ • ࣗલͰ࣮૷Ͱ΋ಛʹ೉͘͠ͳ͍ • Ωϟογϡͷ࢓૊ΈΛߏஙՄ • ࣗલ SPA ͷ৔߹͸࠷ॳʹඞͣߟྀ͠Α͏
85. Web Notifications Service Worker
86. Web Notifications • ͍ΘΏΔ σεΫτοϓ௨஌ • ࠷ۙ͸௨஌ʹϘλϯ΍ΞΠίϯͳͲΛ౥ࡌՄ • ௨஌ΫϦοΫ࣌ͷಈ࡞Λఆٛ • ServiceWorker ͱ૊Έ߹ΘͤΔ͜ͱͰ εϚϗ௨஌΋Մ
87. Service Worker • όοΫάϥ΢ϯυͰಈ͘ JavaScript • ࠓ೥ॳΊ͘Β͍͔Β஫໨͞Ε࢝ΊΔ • ΦϑϥΠϯରԠ/Ωϟογϡ/ϓογϡ௨஌ ϓογϡ௨஌ͷཚ༻͸΍Ί·͠ΐ͏ʂ
88. // ServiceWorker ͷొ࿥ navigator.serviceWorker.register(‘/sw.js'); // ௨஌ൃߦ navigator.serviceWorker.ready.then(function(registration) { registration.showNotification('௨஌', { icon: '/icon.png', body: name + 'ΑΓண৴͕͋Γ·͢ɻ', vibrate: [200, 100, 200, 100, 200, 100, 200] }); });
89. self.onnotificationclick = function(event) { event.notification.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
90. DEMO εϚϗϓογϡ௨஌
91. File API
92. File API • ϑΝΠϧબ୒΍υϥοά&υϩοϓ • JavaScript ͰϑΝΠϧऔಘɺૢ࡞
93. ϑΝΠϧૢ࡞ΛϑϩϯτΤϯ υͰղܾ αʔόʔෛՙͷ௿Լ Ϣʔβʔମݧͷ޲্
94. ྫ) ը૾ΞοϓϩʔυͷྲྀΕ • ը૾Λυϥοά & υϩοϓ (File API) • ϑΝΠϧλΠϓͷνΣοΫ (File API) • ը૾ͷϦαΠζ (Canvas) • Cropper.js Ͱॎԣൺͷௐ੔ • ը૾αʔό΁Ξοϓϩʔυ (CORS) શͯ JavaScript Ͱ࣮૷Մೳ
95. // 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]; });
96. DEMO ࣮૷ํ๏͸”ݸਓϒϩά”ʹͯ
97. Canvas
98. Canvas • JavaScript Ͱඳ͚Δ 2D ඳըϥΠϒϥϦ • ௨ৗͷ HTML Ͱ͸දݱ͠ʹ͍͘΋ͷΛॊೈʹ දࣔͰ͖Δ
99. Canvas ≠ άϥϑΟοΫ/ήʔϜઐ໳ จࣈɺਤܗɺΫϦοΫΠϕϯτ ͋ΒΏΔΞϓϦέʔγϣϯͰ ΑΓΘ͔Γ΍͍͢ UI Λ࣮ݱͰ͖Δ
100. Canvas ༻ϥΠϒϥϦ • Fabric.js • jCanvas • άϥϑΟοΫ/ήʔϜ༻Ͱͦͷଞଟ਺
101. DEMO
102. Canvas ͷ࣮૷ • ࠶ඳըͷͨΊʹ σʔλΛJSON ܗࣜ౳Ͱอଘ͠ ࠶ݱ͢Δͷ͕࣮૷ͷࢁ৔ (Fablic.js ͸ඪ४౥ࡌ) • px ୯ҐͳͨΊ ϨεϙϯγϒԽ͕೉͍͠ • ςΩετϘοΫεͳͲͷ HTML ϑΥʔϜ͸ຒΊ ࠐΈෆՄ
103. Web Speech API
104. Web Speech API • Chrome, Firefox ͷ࣮ݧஈ֊ͷػೳ • ϒϥ΢β౥ࡌ • Text to Speech, Speech to Text • අ༻ 0 & ੍໿ͳ͠
105. • ਫ਼౓͸ׂͱߴ͍ • ݱঢ়͸్தͰউखʹจࣈى͕͜͠ࢭ·ͬͨΓ͢ ΔͨΊɺͣͬͱ࿥Ի͢Δʹ͸Կ͔͠ΒͷϋοΫ ͕ඞཁ • ౰વ ࿩͠૬खͷ੠ͳͲ͸औಘෆՄɻ -> ͦͷ࣌͸ ΋ͪΖΜ Watson Ͱɻ
106. // ॳظԽ 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); };
107. DEMO https://www.google.com/intl/ja/chrome/demos/speech.html
108. Web Speech API ͷར༻ • ձ࿩ͷॻ͖ى͜͠Ͱ׬ᘳͳਫ਼౓͸ෆՄೳ • จΛ੔ܗ͢ΔΑ͏ͳٕज़Λ૊Έ߹ΘͤΔͱྑ͍
109. Device API
110. • ͋ΒΏΔ୺຤৘ใΛ ϒϥ΢βͰऔಘ • Ґஔ৘ใɺ֤ηϯα৘ใɺόοςϦɺόΠϒ • ϚΠΫग़ྗσόΠε …etc https://developer.chrome.com/apps/api_index
111. • Web ΞϓϦͷ ”εϚϗΞϓϦ” Խ • Web ΞϓϦΛ࡞Ε͹ɺ֤ϓϥοτϑΥʔϜʹ ґଘ͠ͳ͍αʔϏεΛల։Մ • ֤σόΠε, OS, ϒϥ΢βͷରԠʹظ଴
112. Topic • ࠷৽ Web ςΫϊϩδʔͱͷ෇͖߹͍ํ • HTML 5 ςΫϊϩδʔͷ͝঺հ • HTML 5 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯
113. Cloud Innovation ͸ جຊٕज़ͷֵ৽͔Βੜ·ΕΔ ਐԽٕͨ͠ज़ͷ૊Έ߹Θͤ
114. ٕज़ͷҾ͖ग़͠Λ૿΍͢
115. εϚϗΞϓϦ͸ ΍͕ͯ Web Խ͞Ε͍ͯ͘ Web ΞϓϦ͸΍͕ͯ εϚϗΞϓϦͷΑ͏ʹͳΔ
116. JavaScript, JavaScript, JavaScript. + API
117. Thanks.