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

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

5d07932dad21d50a4f33c0e4f3cd06c8?s=47 Yuichi Kato
October 26, 2016

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

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

http://smoozapp.com/

5d07932dad21d50a4f33c0e4f3cd06c8?s=128

Yuichi Kato

October 26, 2016
Tweet

More Decks by Yuichi Kato

Other Decks in Technology

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(ࣗવݴޠॲཧ)