WebRTCリリースで辛かったこと

Transcript

1. WebRTCϦϦʔεͰਏ͔ͬͨ͜ͱ
   4LZ8BZ6(
   

   View Slide

2. View Slide

3. WebRTCϦϦʔεͰਏ͔ͬͨ͜ͱ
   4LZ8BZ6(
   

   View Slide

4. δϟϯϘ@jumboOrNot
   Kentaro Haneda
   APPɾUX Team Leader@RareJob

   Swift/kotlin/Golang/WebRTC
   

   View Slide

5. View Slide

6. View Slide

7. SPA/Typescript/Vue.js/spectre/webpack
   swift/kotlin/firebase/MVVM/RxXXX
   re:dash/kibana…
   ৭ʑͳٕज़ελοΫΛ૊Έ߹Θͤͯ
   ࣮૷ɾӡ༻͍ͯ͠·͢
   UXɾٕज़తʹ΋͍ΖΜͳ௅ઓΛ૊ΈࠐΜͰ·͢ɻ
   

   View Slide

8. ฐࣾͷϝσΟΞͰ΋͜ΕΛ࡞͍ͬͯ͘ͱ͖ͷ
   ϓϩηεͱ͔Λॻ͍͍ͯ·͢ɻ
   https://appeal.rarejob.co.jp/creator/2018/03/28/about-
   webrtc-release-story/
   

   View Slide

9. ࠓ೔ͷ͓࿩
   • WebRTCܥͷػೳΛϦϦʔε͢Δʹ͋ͨΓ
   • ʮਏΈʯΛ࿨Β͛Δ޻෉
   • ʮਏΈʯʹ޲͚ͯ࡞͓ͬͯ͘΂͖ମ੍ɾ࢓૊Έ
   

   View Slide

10. ͜Μͳਓʹ఻͍͑ͨ
    • WebRTCʹؔΘΔαʔϏεͷۀ຿Λ͍ͯ͠Δ
    • WebRTCʹؔΘΔαʔϏεΛӡ༻͢Δ༧ఆͷਓ
    

    View Slide

11. ʮਏΈʯΛ࿨Β͛Δ޻෉
    

    View Slide

12. ʮਏΈʯΛ࿨Β͛Δ޻෉
    1. ͍͢͝ظ଴
    2. εΧΠϓʹͰ͖ΔΜͩ͠ɾɾɾ
    3. σόΠεࠩҟͱෳ਺ΫϥΠΞϯτͷ؅ཧ
    

    View Slide

13. جຊతʹWebRTC͸ͼͬ͘Γ͢Δ΄ͲͳΜͰ΋Ͱ͖Δ
    ͱࢥΘΕ͍ͯΔʢࣾ಺ɾϢʔβʔ͞ΜؚΊʣ
    ˎͰ͖ͳ͍ʢۃ୺ʹ͍͏ͱʣ
    ɾEdge/IEͰಈ͔ͳ͍Ͳ͜Ζ͔ଟ͘ͷϒϥ΢βͰಈ͔ͳ͍
    ɾεϚϗWebͩͱಈ͔ͳ͍ɺΞϓϦ͕ඞཁ
    ɾࠓܨ͕͔ͬͨΒຊ൪Ͱܨ͕Δͱ͸ݶΒͳ͍
    ɾܨ͕ͬͯͯ΋ө૾͕ݟ͑ͳ͍͜ͱ΋͋Δ
    1.͍͢͝ظ଴
    

    View Slide

14. جຊతʹWebRTC͸ͼͬ͘Γ͢Δ΄ͲͳΜͰ΋Ͱ͖Δ
    ͱࢥΘΕ͍ͯΔ
    ʮͰ͖ͳ͍ʯΛ࢓༷ʹམͱ͢
    • Firefox/ChromeҎ֎ͩͱ؀ڥνΣοΫͰΤϥʔΛදࣔ͢Δ
    • εϚϗͰͷදࣔ࣌ʹ͸ΞϓϦ or ετΞ΁ඈ͹͢
    ౳ɻҧ͍͕͋Δ͜ͱΛʮڞ༗ʯ͚ͩ
    ͡Όͳͯ͘ମݧ΍ϓϩμΫτͰ఻͑Δɻ
    1.͍͢͝ظ଴
    

    View Slide

15. 2. εΧΠϓʹͰ͖ΔΜͩ͠ɾɾɾ
    Skype͸ଟػೳͰ͋Δɻ
    ө૾ɺνϟοτɺֆจࣈɺIMɺ௨஌ɺෳ਺σόΠε
    ΞΧ΢ϯτ؅ཧɺ௨஌ઃఆɺetcɾɾɾ
    ͜ΕΛ׬શʹ࠶ݱ͢Δͷ͸େมɺྫ͑͹IM
    https://support.skype.com/ja/faq/FA34696/skype-insutantometsusezi-im-
    noshu-shi-she-ding-wosuruniha
    ͜ΕΛ࡞Δʹ͸֤ΫϥΠΞϯτଆͰʮ**Ͱғ·Εͨจࣈʹରͯ͠boldΛ
    ͔͚ΔʯͳͲͷରԠ͕ඞཁɻ
    

    View Slide

16. 2.׬શͳεΧΠϓͷ୅ସ͡Όͳ͍
    ʻWebʼ
    **ͳͲΛड͚औͬͨΒ΍λάͰғΊ͹͍͍
    → َͷਖ਼نදݱࡇΓɺͰ΋΍ΕΔ
    ʻAppʼ
    ios/androidͷඪ४ͷ૷০Λ΍Ζ͏ͱ͢Δ
    → HTMLΛҧͬͯɺʮಛఆͷRangeͷจࣈྻʹରͯ͠
    ɹAttiributeΛ͚ͭΔʯͱ͍͏࢓૊ΈͳͷͰෳࡶͳܗࣜʹରԠ͢Δͷ͕
    ɹ೉͍͠ɻ
    

    View Slide

17. 2.׬શͳεΧΠϓͷ୅ସ͡Όͳ͍
    ʻAppʼ
    Ͳ͏͍͏͜ͱ͔ͱ͍͏ͱɾɾɾ
    myMutableString = NSMutableAttributedString(string: myString, attributes:
    [NSFontAttributeName:UIFont(name: "Georgia", size: 18.0)!])
    myMutableString.addAttribute(NSForegroundColorAttributeName, value:
    UIColor.redColor(),range: NSRange(location:2,length:4))
    !!πϥΠϙΠϯτ!!
    

    View Slide

18. 2.׬શͳεΧΠϓͷ୅ସ͡Όͳ͍
    ʻAppʼ
    iOS: UILabel͸HTMLܗࣜͰදࣔͰ͖Δ
    Android: TextView͸HTMLܗࣜͰදࣔͰ͖Δ
    → HTMLʹཔΖ͏
    // kotlin
    label.setText(Html.fromHtml(“text", Html.FROM_HTML_MODE_COMPACT))

    // swift
    var err:NSError?
    self.label.attributedText = NSAttributedString(
    data: htmlText.dataUsingEncoding(NSUnicodeStringEncoding,
    allowLossyConversion: true),
    options: [NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType],
    documentAttributes: nil,
    error: &err)
    

    View Slide

19. 2.׬શͳεΧΠϓͷ୅ସ͡Όͳ͍
    ʻAppʼ
    iOS: UILabel͸HTMLܗࣜͰදࣔͰ͖Δ
    Android: TextView͸HTMLܗࣜͰදࣔͰ͖Δ
    → HTMLʹཔΖ͏
    // kotlin
    label.setText(Html.fromHtml(“text", Html.FROM_HTML_MODE_COMPACT))

    // swift
    var err:NSError?
    self.label.attributedText = NSAttributedString(
    data: htmlText.dataUsingEncoding(NSUnicodeStringEncoding,
    allowLossyConversion: true),
    options: [NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType],
    documentAttributes: nil,
    error: &err)
    ͍͍ײ͡ʹͰ͖ͨͷͰ
    ޙ೔OSSͰެ։͠·͢
    skype-IM-kitతͳ
    

    View Slide

20. 2.׬શͳεΧΠϓͷ୅ସ͡Όͳ͍
    Skype͸ଟػೳͰ͋Δɻ
    ө૾ɺνϟοτɺֆจࣈɺIMɺ௨஌ɺෳ਺σόΠε
    ΞΧ΢ϯτ؅ཧɺ௨஌ઃఆɺetcɾɾɾ
    ࠶ݱ͖͠Εͳ͍͚Ͳ޻෉ͰΧόʔͰ͖Δͱ͜Ζ͸͢Δ
    ແཧʹskypeΛ࠶ݱ͖͠Ζ͏ͱͤͣɺΑΓຊ࣭తͳ෦෼ʹ༏ઌ౓Λ
    ͋ͯͯ৽͍͠ମݧΛ࡞Δ
    

    View Slide

21. 3. σόΠεࠩҟͱෳ਺ΫϥΠΞϯτͷ؅ཧ
    ௐࢠʹ৐ͬͨΜͰ͢ɻ
    ϨΞδϣϒӳձ࿩
    (iPhone/iPad/Android/Android Tablet)
    ๏ਓ޲͚͓΋ͯͳ͠ӳձ࿩
    (iPhone/iPad/Android/Android Tablet)
    WebαΠτ
    (ੜె༻ɾߨࢣ༻)
    ΞϓϦͰ4ΞϓϦɺwebͰ2ΞϓϦ͋Γ·͢
    

    View Slide

22. 3. σόΠεࠩҟͱෳ਺ΫϥΠΞϯτͷ؅ཧ
    ϨΞδϣϒӳձ࿩
    (iPhone/iPad/Android/Android Tablet)
    ๏ਓ޲͚͓΋ͯͳ͠ӳձ࿩
    (iPhone/iPad/Android/Android Tablet)
    WebαΠτ
    (ੜె༻ɾߨࢣ༻)
    ڞ௨ԽΛ͕Μ͹Δ
    ڞ௨ϞδϡʔϧԽ
    android/iosͦΕͧΕͰ2ΞϓϦ͋Δ͚Ͳ1ͭͷιʔεͰ
    ϏϧυΛ෼͚͍ͯΔɻϨοεϯը໘ɾViewModelͳͲ
    ͕ͬͪΓڞ༗͍ͯ͠Δɻ
    ڞ௨ϞδϡʔϧԽ
    ϝοηʔδϯά෦෼ͳͲΛ
    ڞ௨Ϟδϡʔϧͱͯ͠෼཭தɺ
    SPAԽͯ͋͠Δɻ
    

    View Slide

23. ʮਏΈʯʹ޲͚ͯ࡞͓ͬͯ͘΂͖
    ମ੍ɾ࢓૊Έ
    

    View Slide

24. ࡞͓ͬͯ͘΂͖ମ੍ɾ࢓૊Έ
    • ·ͣઈର͘Δɺ͓໰͍߹Θͤʮܨ͕Βͳ͍ʯʹରͯ͠
    • ԿΛ࢒͓ͯ͘͠΂͖ͳͷ͔
    

    View Slide

25. ·ͣઈର͘Δɺ͓໰͍߹Θͤʮܨ͕Βͳ͍ʯʹରͯ͠
    ཧ༝͸༷ʑɻ
    
    ωοτϫʔΫɺσόΠεɺΞϓϦέʔγϣϯɺSkyWayɺ
    
    όʔδϣϯɺϒϥ΢βɺͦͷଞॾʑɾɾɾ
    
    ੾Γ෼͚࢝ΊΔͱΩϦ͕ͳ͍ɻ
    ઈରདྷ·͢ɻ
    

    View Slide

26. ࢼߦࡨޡͷ༷ࢠ
    

    View Slide

27. ࢼߦࡨޡͷ༷ࢠ
    ͜Εʹֻ͚ࢉͰରԠΫϥΠΞϯτ਺
    ʢweb/ios/androidʣͳͲ͕
    ૊Έ߹Θ͞Δͱɺ੾Γ෼͚͸͙͍͑ɾɾɾ
    

    View Slide

28. ԿΛ࢒͓ͯ͘͠΂͖ͳͷ͔
    ɾ໰୊ͷ͋ͬͨΫϥΠΞϯτͷUA͸ʁ
    
    ɾԿϨοεϯWebRTCͰఏڙͰ͖͔ͨʁ
    
    ɾߨࢣ͝ͱʹWebRTCͰͷϨοεϯఏڙ਺͸ʁ
    
    ɾߨࢣ͝ͱʹWebRTCͰͷϨοεϯఏڙ੒ޭ਺͸ʁ
    
    ɾੜె͝ͱʹWebRTCͰͷϨοεϯఏڙ਺͸ʁ
    
    ɾੜె͝ͱʹWebRTCͰͷϨοεϯఏڙ੒ޭ਺͸ʁ
    
    ௐࠪͰ͖Δ؀ڥͮ͘Γ
    

    View Slide

29. ԿΛ࢒͓ͯ͘͠΂͖ͳͷ͔
    ɾ໰୊ͷ͋ͬͨΫϥΠΞϯτͷUA͸ʁ
    
    ɾԿϨοεϯWebRTCͰఏڙͰ͖͔ͨʁ
    
    ɾߨࢣ͝ͱʹWebRTCͰͷϨοεϯఏڙ਺͸ʁ
    
    ɾߨࢣ͝ͱʹWebRTCͰͷϨοεϯఏڙ੒ޭ਺͸ʁ
    
    ɾੜె͝ͱʹWebRTCͰͷϨοεϯఏڙ਺͸ʁ
    
    ɾੜె͝ͱʹWebRTCͰͷϨοεϯఏڙ੒ޭ਺͸ʁ
    
    ௐࠪͰ͖Δ؀ڥͮ͘Γ
    ύϑΥʔϚϯεΛϞχλϦϯάͰ͖Δ࢓૊Έ
    ϩάΛҰཡͰ͖Δ࢓૊ΈΛOSSͰߏங
    

    View Slide

30. ԿΛ࢒͓ͯ͘͠΂͖ͳͷ͔
    ɾ໰୊ͷ͋ͬͨΫϥΠΞϯτͷUA͸ʁ
    
    ɾԿϨοεϯWebRTCͰఏڙͰ͖͔ͨʁ
    
    ɾߨࢣ͝ͱʹWebRTCͰͷϨοεϯఏڙ਺͸ʁ
    
    ɾߨࢣ͝ͱʹWebRTCͰͷϨοεϯఏڙ੒ޭ਺͸ʁ
    
    ɾੜె͝ͱʹWebRTCͰͷϨοεϯఏڙ਺͸ʁ
    
    ɾੜె͝ͱʹWebRTCͰͷϨοεϯఏڙ੒ޭ਺͸ʁ
    
    ௐࠪͰ͖Δ؀ڥͮ͘Γ
    

    View Slide

31. ԿΛ࢒͓ͯ͘͠΂͖ͳͷ͔
    ɾ໰୊ͷ͋ͬͨΫϥΠΞϯτͷUA͸ʁ
    
    ɾԿϨοεϯWebRTCͰఏڙͰ͖͔ͨʁ
    
    ɾߨࢣ͝ͱʹWebRTCͰͷϨοεϯఏڙ਺͸ʁ
    
    ɾߨࢣ͝ͱʹWebRTCͰͷϨοεϯఏڙ੒ޭ਺͸ʁ
    
    ɾੜె͝ͱʹWebRTCͰͷϨοεϯఏڙ਺͸ʁ
    
    ɾੜె͝ͱʹWebRTCͰͷϨοεϯఏڙ੒ޭ਺͸ʁ
    
    ௐࠪͰ͖Δ؀ڥͮ͘Γ
    webrtc-internalsΛऔಘ͢ΔαʔϏε΋͋Γ·͢
    ࿈བྷ͢Δͱ15෼͘Β͍σϞΛͯ͘͠ΔͷͰੋඇɻ
    

    View Slide

32. ·ͱΊ
    

    View Slide

33. ΍ͬͺΓͭΒ͍ͧWebRTC
    • ҧ͍͸ࣾ಺֎ʹཧղͯ͠΋Β͑ΔΑ͏ߟ͑ͯಈ͘ɾ४උ͢Δ
    
    • ໰୊͸ඞͣى͖ΔͷͰɺࣄલʹͦΕΛϞχλϦϯάɾௐࠪ

    Ͱ͖Δ؀ڥΛ࡞Δ
    
    ͦΕͰ΋ࠓ೔΋Α͘৸ΔͨΊʹ
    

    View Slide

34. SPA/Typescript/Vue.js/spectre/webpack
    swift/kotlin/firebase/MVVM/RxXXX
    re:dash/kibana…
    we are hiring.
    https://www.wantedly.com/projects/199723
    

    View Slide