英会話サービスのために開発したビデオチャットアプリの技術

by taminif

Slide 1

Slide 1 text

ӳձ࿩αʔϏεͷͨΊʹ ࡞੒ͨ͠ϏσΦνϟοτΞϓϦ ͷٕज़ iOSDC JAPAN 2017 day 1 2017/09/16 େౡ ޫو@sbntaminif

Slide 2

Slide 2 text

ຊ೔ͷλʔήοτ • SkyWay, Firebaseʹ͍ͭͯ஌Γ͍ͨํ • ্هͷӡ༻ͷ஌ݟʹ͍ͭͯڵຯͷ͋Δํ • ӳձ࿩αʔϏεʹڵຯͷ͋Δํ • ७ਮʹڵຯͷ͋Δํ

Slide 3

Slide 3 text

ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾWEBΤϯδχΞ + ϓϩμΫτ Ϛωʔδϟʔ • ΞϓϦΤϯδχΞ  ʢࣗশʣ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢

Slide 4

Slide 4 text

http://ejje.weblio.jp/content/ios

Slide 5

Slide 5 text

Weblio͸ ΦϯϥΠϯࣙॻΛఏڙ͢Δ WebαʔϏεΛ ӡӦ͓ͯ͠Γ·͢

Slide 6

Slide 6 text

࣮͸ࣙॻҎ֎ʹ΋ ͜ΜͳWebαʔϏεΛ΍ͬ ͍ͯ·͢

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

WebRTCͱ͸ʢςϯϓϨʣ • W3C͕ఏএ͢ΔP2PϦΞϧλΠϜίϛϡχέʔ γϣϯΛ࣮ݱ͢Δٕज़ • ϓϥάΠϯͳ͠Ͱϒϥ΢βؒͷ΍ΓͱΓ͕Մೳ • ຊ೔͸࢓૊ΈΛ؆୯ʹ͚ͩઆ໌͠·͢ɻ

Slide 9

Slide 9 text

؆୯ʹ࢓૊Έ͚ͩ ᶅ௨৴ʂ 456/563/ ʢதܧʣαʔό γάφϦϯά αʔό ᶃ ᶄ ᶄ ᶃ

Slide 10

Slide 10 text

WebRTCͱ͸ʢςϯϓϨʣ • W3C͕ఏএ͢ΔP2PϦΞϧλΠϜίϛϡχέʔ γϣϯΛ࣮ݱ͢Δٕज़ • ϓϥάΠϯͳ͠Ͱϒϥ΢βؒͷ΍ΓͱΓ͕Մೳ • ຊ೔͸࢓૊ΈΛ؆୯ʹ͚ͩઆ໌͠·͢ɻ

Slide 11

Slide 11 text

ΞϓϦͷ࿩ ͡Όͳ͍ͷʁ ϒϥ΢βͷ࿩ʁ

Slide 12

Slide 12 text

ΞϓϦΛ࡞ΔܦҢ

Slide 13

Slide 13 text

iOSͷSafari͸ WebRTCʹରԠ͍ͯ͠·ͤΜ ʢۙ೔ରԠ༧ఆʂʣ

Slide 14

Slide 14 text

iPhone΍iPadͰ͸ Weblioӳձ࿩͕࢖͑ͳ͍

Slide 15

Slide 15 text

࿩͸มΘͬͯɺ Weblioӳձ࿩͸ֶߍ΍ اۀʹ΋ఏڙ͍ͯ͠·͢

Slide 16

Slide 16 text

·ͨɺֶߍͷதʹ͸ iPadΛतۀʹ࢖༻͢Δॴ΋ ૿͖͑ͯ·ͨ͠

Slide 17

Slide 17 text

ʮWeblioӳձ࿩ΛiPadͰ ࢖༻Ͱ͖ͳ͍ʁʯ

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

iOS SafariͰ͸ແཧ͚ͩͲ ΞϓϦͰ࣮૷͢Ε͹Ͱ͖Δ

Slide 20

Slide 20 text

ͦ͏ɺΞϓϦΛ࡞Δඞཁ͕ ͋ͬͨͷͰ͢

Slide 21

Slide 21 text

https://itunes.apple.com/jp/app/weblio๏ਓӳձ࿩/id1215209006?mt=8

Slide 22

Slide 22 text

ΞϓϦͷ঺հΛ͠·͢ʂ

Slide 23

Slide 23 text

ͱͯ΋γϯϓϧͳΞϓϦ ᶃϩάΠϯ

Slide 24

Slide 24 text

ͱͯ΋γϯϓϧͳΞϓϦ ᶄ࣍ճͷϏσΦϨοεϯ೔࣌֬ೝ

Slide 25

Slide 25 text

ͱͯ΋γϯϓϧͳΞϓϦ ᶅϨοεϯ

Slide 26

Slide 26 text

͜ΜͳΞϓϦͰ͢ʂ • ߹ܭSwiftϑΝΠϧ਺16ϑΝΠϧʂ  Controller͸4ͭʂ • Storyboard͸1ϑΝΠϧʹऩ·Δ • ͓ͦΒ͘iOSDCͷதͰ΋΋ͬͱ΋খ͍͞Ξ ϓϦͩͱࢥ͍·͢ʂ

Slide 27

Slide 27 text

ຊ೔͸͜ͷΞϓϦΛ ֤ίϯϙʔωϯτʹ෼͚ͯ ঺հ͢Δ͜ͱͰ

Slide 28

Slide 28 text

ͦΕͧΕͷ෦෼ʹ࢖༻͞Εͯ ͍Δٕज़΍ӡ༻ʹ͍ͭͯͷ஌ ݟΛڞ༗͠·͢

Slide 29

Slide 29 text

͜ͷࡾͭ ϏσΦ෦෼ ڭࡐ෦෼ νϟοτ෦෼

Slide 30

Slide 30 text

1. ϏσΦ෦෼

Slide 31

Slide 31 text

ઌ΄Ͳ΋঺հͨ͠௨Γɺ Weblioӳձ࿩͸WebRTCΛ ࢖༻͍ͯ͠·͢

Slide 32

Slide 32 text

΋ͪΖΜɺΞϓϦʹ΋ WebRTCͰ࣮૷͢Δඞཁ͕ ͋Γ·͢

Slide 33

Slide 33 text

SkyWay: WebRTCΛ؆୯ʹ ࣮ݱ͢ΔαʔϏε https://webrtc.ecl.ntt.com

Slide 34

Slide 34 text

let options:SKWPeerOption = SKWPeerOption.init() options.key = `APIΩʔ` options.domain = `υϝΠϯ` peer = SKWPeer.init(options: options) peer?.on(SKWPeerEventEnum.PEER_EVENT_OPEN, callback: {(obj) -> Void in // my peer ID if let ownId = obj as? String { self.videoLessonRtdb.writeSkyWayId(id: ownId) } }) peer?.on(SKWPeerEventEnum.PEER_EVENT_CALL, callback: {(obj) -> Void in let mediaConnection:SKWMediaConnection = obj as! SKWMediaConnection self.videoConnection = mediaConnection mediaConnection.answer(self.localMediaStream) }) ਃ͠༁ఔ౓ͷαϯϓϧίʔυ #import $PDPB1PETͰΠϯετʔϧ ͨ͠ϥΠϒϥϦΛΠϯϙʔτ 1FFSΦϒδΣΫτΛੜ੒ ʢγάφϦϯάαʔόʔʹ৘ ใॻ͖ࠐΈʣ ௨৴։࢝ ͜͜Ͱ͸ө૾ͱԻ੠Λૹ৴ ৘ใΛॻ͖ࠐΜͩΒɺ 1FFS*%͕ൃߦ͞Ε·͢

Slide 35

Slide 35 text

2. νϟοτ෦෼

Slide 36

Slide 36 text

Firebase

Slide 37

Slide 37 text

Firebase • Firebase͸Google͕ఏڙ͢ΔαʔϏε  (Baas?) • iOS, Android, ΢ΣϒͰ΋࢖༻Մೳ • ։ൃΛॿ͚Δଟ͘ͷػೳ͕͋Γ·͢ɻ

Slide 38

Slide 38 text

࢖༻͍ͯ͠Δػೳ • AuthͱRealtime Database • Auth͸ೝূػೳΛఏڙͯ͘͠ΕΔαʔϏε • Realtime Database͸αʔόʔͱΫϥΠΞ ϯτؒͰσʔλΛಉظͯ͠อଘͯ͘͠ΕΔ αʔϏε

Slide 39

Slide 39 text

νϟοτͷ࣮ݱ ,FZ7BMVFͰ஋Λอଘ औಘ͢Δࡍ͸+40/ܗ ࣜͰऔಘͰ͖Δ ҰͭͷϊʔυͰҰͭͷνϟοτΛ ࣮ݱ͍ͯ͠Δ ࣌ܥྻॱʹฒ΂Δ͜ͱͰνϟοτͬΆ͘ දࣔ

Slide 40

Slide 40 text

Auth let rtdbLoginCompletionHandler: FIRAuthResultCallback = {_,_ in self.setChatObserve() self.setTmObserve() } let rtdbLoginErrorHandler = { print(‘error’) } FIRAuth.auth()?.signIn(withEmail: `ID`, password: `ύεϫʔυ`, completion: { (user, error) in guard error == nil else { rtdbLoginCompletionHandler() return } rtdbLoginCompletionHandler(user, error) }) ೝূޙͷॲཧΛఆٛ ೝূΤϥʔ࣌ͷॲཧΛఆٛ ೝূॲཧ ͜͜Ͱ͸ύεϫʔυํࣜͰ ϩάΠϯ

Slide 41

Slide 41 text

Realtime Database let withBlock = { (snapshot: FIRDataSnapshot) in // received chat data if let dictionary = snapshot.value as? [String : AnyObject] { guard let isRoleProf = dictionary["is_role_prof"] as? Bool, let timeMsec = dictionary["time_msec"] as? UInt64, let senderIdString = dictionary["sender_id"] as? String, let senderId = Int(senderIdString), let text = dictionary["text"] as? String else { return } let time:Double = Double(timeMsec) / 1000 } var data:ChatDataStruct if isRoleProf { // prof data = ChatDataStruct(messageSender: .YOU, message: text, displayTime: self.displayTimeFormatter.string(from: Date(timeIntervalSince1970: time))) } else { // member data = ChatDataStruct(messageSender: .ME, message: text, displayTime: self.displayTimeFormatter.string(from: Date(timeIntervalSince1970: time))) } self.chatTableReload(data: data) } firebaseChatObserveHandle = firebaseUserReference.child(`Firebaseͷύε `).observe(.childAdded, with: withBlock) 'JSFCBTF͔Βϊʔ υΛड͚औͬͨ࣌ ͷॲཧΛఆٛ ௥ՃࣜͰ0CTFSWFS ηοτ

Slide 42

Slide 42 text

3. ڭࡐ෦෼

Slide 43

Slide 43 text

ڭࡐ෦෼ • ڭࡐʹ͸ը૾Λ࢖༻ʢWebͷ࢓༷ʣ • αʔόʔʹஔ͍ͯ͋ΔڭࡐΛɺ WKWebViewΛ࢖༻ͯ͠ಡΈࠐΈ • ڭࡐͷURLͷ΍ΓͱΓʹ͸Realtime DatabaseΛ࢖༻

Slide 44

Slide 44 text

࣮͸͜Μͳͱ͜ʹ΋ ࢖͍ͬͯΔFirebase • ڭࡐURLͷૹ৴ • PeerIDͷަ׵ • ϨοεϯதͷϏσΦঢ়گͷ؂ࢹ • ڭࡐ্ʹදࣔ͢ΔϚ΢εಉظ

Slide 45

Slide 45 text

ӡ༻͖ͯͨ͠஌ݟ

Slide 46

Slide 46 text

1. SkyWay

Slide 47

Slide 47 text

ແྉͰ΋ αʔϏεӡ༻͸Ͱ͖ͦ͏ʁ

Slide 48

Slide 48 text

໰୊͋Γ·ͤΜ • ֶߍͷतۀͰ࢖༻͢ΔͷͰɺ20ਓʙ40ਓ ͘Β͍ͷੜె͕ಉ࣌ʹडߨ • ௨৴ཱ͕֬͢Ε͹ϥά͸1ඵ΋͔͔Γ·ͤ Μ • ͨͩ͠ωοτϫʔΫ͕੔උ͞Ε͍ͯΔલఏ

Slide 49

Slide 49 text

ωοτϫʔΫͲΕ͚ͩ ඞཁͳͷʁ

Slide 50

Slide 50 text

ඞཁͳଳҬ • 1ΫϥΠΞϯτ͋ͨΓ͜Ε͘Β͍ඞཁ  Ի੠ɿ500Kbps  ө૾ɿ2Mbps • ֶߍͩͱશһ͕ಉ࣌ʹतۀΛ͢ΔͨΊɺ  1ΫϥεͰडߨ͢Δͱ઀ଓෆྑ͕ଟ͘ൃੜͨ͠

Slide 51

Slide 51 text

࢖༻ଳҬΛݮΒͤͳ͍͔ʁ

Slide 52

Slide 52 text

ϦϦʔε౰࣌͸Ͱ͖ͳ͔ͬ ͨͷͰ͕͢ɺਖ਼ࣜ൛Ͱ͸Ͱ ͖ΔΑ͏ʹͳ͍ͬͯ·͢

Slide 53

Slide 53 text

2. Firebase

Slide 54

Slide 54 text

ຖ݄ͷྉۚͲ͏ͳͷʁ

Slide 55

Slide 55 text

ྉۚϓϥϯ͸ࡾछྨ͋Γ·͢

Slide 56

Slide 56 text

4QBSLϓϥϯ ʢແྉʣ 'MBNFϓϥϯ ʢఆֹ՝ۚʣ #MB[Fϓϥϯ ʢैྔ՝ۚʣ ಉ࣌઀ଓ਺ ্ݶ͋Γ ্ݶͳ͠ ্ݶͳ͠ μ΢ϯϩʔυ (#·Ͱ (#·Ͱ (# ετϨʔδ ݄(#·Ͱ ݄(#·Ͱ (# ࣗಈόοΫΞοϓ ͳ͠ ͳ͠ ͋Γ ※2017/09/11ݱࡏ https://ﬁrebase.google.com/pricing/

Slide 57

Slide 57 text

ྫɿ8݄ͷ࢖༻ྔ • ࠷େಉ࣌઀ଓ਺໿250 • μ΢ϯϩʔυྔ1.4GB • ετϨʔδ࢖༻ྔ16GBʢαʔϏε։࢝࣌ ͔Βͷ߹ܭʣ ͯ͞ɺ͜ΕͰ͍͘Βʁ

Slide 58

Slide 58 text

Realtime Databaseͷ ϊʔυ؅ཧ

Slide 59

Slide 59 text

؅ཧը໘Ͱ΍Β͔͢ தུ

Slide 60

Slide 60 text

ϊʔυ͕1000Λ௒͑Δͱ ؅ཧը໘͸ػೳ͠ͳ͘ͳΔ

Slide 61

Slide 61 text

͋Δఔ౓஝ੵ͞ΕΔલʹ ෼ׂ͢ΔΑ͏ͳઃܭʹ͠·͠ΐ͏ ʢྫɿ೔෇ʁʣ

Slide 62

Slide 62 text

Firebaseͷো֐৘ใ

Slide 63

Slide 63 text

௒୹ظ͚ؒͩͲ ͪΐ͍ͪΐ͍઀ଓෆྑʹͳΓ·͢

Slide 64

Slide 64 text

ேํ͕ଟ͍ͷͰ ໰୊ʹ͸ͳΓʹ͍͘Ͱ͕͢ ͜Ε͔Β҆ఆ͢Δ͜ͱΛ ظ଴͓ͯ͠Γ·͢

Slide 65

Slide 65 text

·ͱΊ

Slide 66

Slide 66 text

·ͱΊ • SkyWay, Firebaseڞʹɺॳಈ͸ແྉͰ࢖༻Մೳ • ؆୯ͳ΋ͷΛ࡞Γ͍ͨͱ͖΍ɺؾܰʹ࢖ͬͯΈΔ ͷ΋Ұͭ • ಛʹFirebase͸ΞϓϦ։ൃΛ͢Δ্Ͱඇৗʹศར • μ΢ϯϩʔυ਺΍εΫϦʔϯϏϡʔͷղੳ΋Ͱ ͖ΔͷͰɺͱΓ͋͑ͣೖΕΔͱ͍͏ͷ΋Ұߟͷ ༨஍͋Γ

Slide 67

Slide 67 text

͋Γ͕ͱ͏͍͟͝·ͨ͠