ブラウザアプリ『Smooz』を作る中で会得した WKWebviewの3つのTips

1. WebViewが真っ白になる問題
2. リンクのタッチアップではなくタッチダウンを取得したい
3. WKWebView内のJavaScriptをデバッグしたい
まとめ：WKWebViewを使ってよかったこと

http://smoozapp.com/

Transcript

1. ϒϥ΢βΞϓϦʰ4NPP[ʱΛ࡞ΔதͰձಘͨ͠
   WKWebviewͷ3ͭͷTips Ξεπʔϧגࣜձࣾ
   Ճ౻༤Ұ
2. ϒϥ΢β͕ݡ͘ͳΔͱ
   ωοτ͕΋ͬͱָ͘͠ͳΔ
3. ࢸۃͷλϒૢ࡞ ৽نλϒ ੾Γସ͑ ด͡Δ
4. ࣗવݴޠղੳʹΑΔݕࡧ୯ޠ༧ଌ ಡΈࠐΈதʹݴޠղੳ ݕࡧ୯ޠΛ͓͢͢Ί
5. εϚʔτϒοΫϚʔΫ ίϝϯτ͕ಡΊΔ ϒοΫϚʔΫ౤ߘ λΠϜϥΠϯ
6. 8FC7JFX͕ਅͬനʹͳΔ໰୊ 1
7. ໰୊ɿ
   ͨ͘͞ΜͷλϒΛ։͘ͱ ΢Σϒϖʔδ͕ਅͬന
   ʹͳͬͯ͠·͏
8. 4BGBSJͰ΋ɺ࠷ۙ։͍ͨλϒ͸͙͢ಡΈࠐΊΔ͚ Ͳɺগ͠લʹ։͍ͨλϒΛ։͜͏ͱ͢ΔͱϦϩʔ υ͕͔͔Δ
9. ݪҼɿ
   8,8FCWJFXͷϝϞϦফඅྔ͕ҰఆྔΛ௒͑Δ ͱ04͕উखʹݹ͍σʔλΛ੾Γ཭͍ͯ͘͠
10. ղܾํ๏ɿ
    +4Ͱ΢Σϒϖʔδͷσʔλ͕ଘࡏ͢Δ͔Λ֬ೝ͠ɺ ଘࡏ͠ͳ͚Ε͹Ϧϩʔυ͢Δ webView.evaluateJavaScript("document.querySele ctor('body').innerHTML") {(result, error) in if error != nil { Ϧϩʔυॲཧ }
11. ϦϯΫͷλονΞοϓͰ͸ͳ͘
    λονμ΢ϯΛऔಘ͍ͨ͠ 2
12. ໰୊ɿ
    ௕ԡ͠தͷϑΟʔυόοΫΛฦͨ͢Ίʹɺ
    ϦϯΫΛλονͨ͠ॠؒʹ%FUFDU͍͕ͨ͠ɺ
    8,8FCWJFX%FMFHBUF͸λονΞοϓ͔࣌͠ݺ ͹Εͳ͍ɻ
13. ղܾํ๏ɿ
    ɾʮλονμ΢ϯͨ͜͠ͱʯͱʮλονͨ͠Ґஔʯ
    ɹΛωΠςΟϒͰऔಘ
    ɾλονͨ͠ҐஔʹϦϯΫ͕͋Δ͔Ͳ͏͔Λ+4Ͱ
    ɹऔಘ
    
14. UIGestureRecognizerͷαϒΫϥεΛ࡞Γɺ TouchesBeganͰλονμ΢ϯݕ஌ UIGestureRecognizerͰɺλονҐஔऔಘ override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent) { } let touch = touches.first touchLocation = touch!.location(in: self.view)
15. JSͰࢦఆͷҐஔʹϦϯΫ͕͋Δ͔֬ೝ͢Δ function getURLs(x, y) { var urls = { link: null, image: null }; var e = document.elementFromPoint(x,y); while (e) { var name = e.tagName if (name == 'A') { urls.link = e.getAttribute('href') || null; } e = e.parentNode; } return urls; } LinkDetection.js
16. JSΛWKWebViewʹInject͢Δ class WebViewConfiguration: WKWebViewConfiguration { fileprivate class UserContentController: WKUserContentController { static let sharedInstance = UserContentController() fileprivate override init() { super.init() do { let scriptURL = Bundle.main.path(forResource:”LinkDetection”, ofType: "js") let scriptContent = try String(contentsOfFile: scriptURL!, encoding: String.Encoding.utf8) let script = WKUserScript(source: scriptContent, injectionTime: .atDocumentEnd, forMainFrameOnly: true) addUserScript(script) } catch { print(#function, error) } }
17. ௕ԡ͠׬ྃͨ͠Βɺ͖ͬ͞ͷscriptΛ࣮ߦͯ͠λονҐஔʹ ϦϯΫ͕͋Δ͔Λ൑ఆ͢Δ extension WKWebView { internal func getHTMLElementAt(_ point: CGPoint) { let js = "getURLs(\(point.x), \(point.y))” evaluateJavaScript(js) { (urls, error) in url͕͋Ε͹৽͍͠λϒΛ։͘ } } }
18. 8,8FC7JFX಺ͷ+4Λσόοά ͍ͨ͠ 3
19. Demo
20. TouchstartΛݕ஌͢Δςετ༻JavascirptΛ WKWebViewʹInject Build (࣮ػͰ΋SimulatorͰ΋) MacͰSafari্ཱͪ͛
21. SafariͰ ։ൃ > Simulator > ΞϓϦ໊ > URLΛબ୒ WebΠϯεϖΫλʔ্ཱ͕͕ͪΔ
22. Simulator / ࣮ػ WebΠϯεϖΫλʔ Tap!
23. 8,8FC7JFXΛ࢖ͬͯΑ͔ͬͨ͜ͱ ɾ҆ఆ͍ͯ͠Δ ɾ଎͍ ɾηΩϡϦςΟ͕ݻ͍ ɾλΠτϧɺURLɺϓϩάϨε͕औΕΔ ɾAppleͷܧଓతͳϝϯςφϯε͕ظ଴Ͱ͖Δ ɾ̍ϖʔδͰԿ౓΋Delegateϝιου͕ݺ͹Εͳ͍ ·ͱΊ
24. ϒϥ΢β͕ݡ͘ͳΔͱ
    ωοτ͕΋ͬͱָ͘͠ͳΔ ΤϯδχΞ͞Μɺେืूதʂ iOS, Rails, Python(ࣗવݴޠॲཧ)