Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kiminari Homma
September 17, 2016

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

Kiminari Homma

September 17, 2016
Tweet

More Decks by Kiminari Homma

Other Decks in Technology

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 ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ
  32. None
  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 ͷ໨ࢦ͢ͱ͜Ζͷߟ࡯
  50. None
  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.