$30 off During Our Annual Pro Sale. View Details »

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

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

Ken Jumbo Haneda

April 19, 2018
Tweet

More Decks by Ken Jumbo Haneda

Other Decks in Programming

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