{"id":3156,"date":"2023-12-21T12:00:47","date_gmt":"2023-12-21T03:00:47","guid":{"rendered":"https:\/\/comcent.co.jp\/blog\/?p=3156"},"modified":"2023-12-19T19:07:37","modified_gmt":"2023-12-19T10:07:37","slug":"webview%e3%81%a7javascript%e3%81%a8%e3%81%ae%e9%80%9a%e4%bf%a1%e3%81%a7%e7%99%ba%e7%94%9f%e3%81%97%e3%81%9f%e5%95%8f%e9%a1%8c%e3%81%a8%e8%a7%a3%e6%b1%ba%e7%ad%96%e3%82%92%e7%b4%b9%e4%bb%8b%e3%80%90ios","status":"publish","type":"post","link":"https:\/\/comcent.co.jp\/blog\/archives\/3156\/","title":{"rendered":"WebView\u3067JavaScript\u3068\u306e\u901a\u4fe1\u3067\u767a\u751f\u3057\u305f\u554f\u984c\u3068\u89e3\u6c7a\u7b56\u3092\u7d39\u4ecb\u3010iOS\u3011"},"content":{"rendered":"\n

iOS\u306eWebView\u3092\u4f7f\u7528\u3057\u3066\u3001\u30cd\u30a4\u30c6\u30a3\u30d6\u30a2\u30d7\u30ea\u3068Web\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u7d71\u5408\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068\u306f\u4e00\u822c\u7684\u3067\u3059\u304c\u3001JavaScript\u3068\u306e\u901a\u4fe1\u306b\u95a2\u3057\u3066\u306f\u3044\u304f\u3064\u304b\u306e\u554f\u984c\u304c\u767a\u751f\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001iOS\u306eWebView\u3067JavaScript\u3068\u901a\u4fe1\u3059\u308b\u969b\u306b\u3088\u304f\u8d77\u304d\u308b\u554f\u984c\u3068\u305d\u308c\u3089\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306e\u89e3\u6c7a\u7b56\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

WebView\u5185\u3067JavaScript\u3068\u901a\u4fe1\u3059\u308b<\/h4>\n\n\n\n

WebView\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h4>\n\n\n\n

\u307e\u305a\u3001WebView\u3092\u30a2\u30d7\u30ea\u5185\u306b\u7d44\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n\n\n\n

\/\/ViewController\nimport UIKit\nimport WebKit\n\nclass ViewController: UIViewController {\n\n    var webView: WKWebView!\n\n    override func loadView() {\n        let webConfiguration = WKWebViewConfiguration()\n        webView = WKWebView(frame: .zero, configuration: webConfiguration)\n        view = webView\n    }\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n\n        \/\/\u30da\u30fc\u30b8\u3092\u8aad\u307f\u8fbc\u3080(\u4f8b\u3067google)\n        if let url = URL(string: \"https:\/\/www.google.com\") {\n            let request = URLRequest(url: url)\n            webView.load(request)\n        }\n    }\n}\n<\/code><\/pre><\/div>\n\n\n\n
JavaScript\u3068\u306e\u901a\u4fe1\u3092\u8a2d\u5b9a<\/h4>\n\n\n\n
override func loadView() {\n        let webConfiguration = WKWebViewConfiguration()\n        \n        \/\/JavaScript\u304b\u3089\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\n        webConfiguration.userContentController.add(self, name: \"callbackHandler\")\n        \n        webView = WKWebView(frame: .zero, configuration: webConfiguration)\n        view = webView\n    }\n<\/code><\/pre>\n<\/div>\n\n\n\n
JavaScript\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1<\/h4>\n\n\n\n
extension ViewController: WKScriptMessageHandler {\n    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {\n        if message.name == \"callbackHandler\" {\n            \/\/\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u51e6\u7406\n            if let messageBody = message.body as? String {\n                print(\"JavaScript\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8: \\(messageBody)\")\n            }\n        }\n    }\n}\n<\/code><\/pre><\/div>\n\n\n\n
JavaScript\u304b\u3089iOS\u3078\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1<\/h4>\n\n\n\n
\/\/ iOS\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\nwindow.webkit.messageHandlers.callbackHandler.postMessage(\"iOS\u3078\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\");\n<\/code><\/pre><\/div>\n\n\n\n
\u3053\u3053\u307e\u3067\u3067JavaScript\u304b\u3089Native\u3092\u547c\u3073\u51fa\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u3053\u304b\u3089\u3064\u307e\u3065\u3044\u305f\u90e8\u5206\u3068\u89e3\u6c7a\u7b56\u3092\u7d39\u4ecb\u3044\u305f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u554f\u984c\u70b91: window.webkit.messageHandlers\u304cnull\u3068\u306a\u308b(JS\u5185)<\/h4>\n\n\n\n
JS\u304b\u3089iOS\u3078\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\u3059\u308b\u305f\u3081\u306ewindow.webkit.messageHandlers\u304cnull\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002\u3088\u304f\u51fa\u3066\u304f\u308b\u8a18\u4e8b\u3067\u306f\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u3067
var WKWebkit = window.webkit;
\u306e\u3088\u3046\u306b\u5b9a\u7fa9\u3057\u3066\u3001\u4f7f\u7528\u3057\u305f\u3044\u5834\u6240\u3067
WKWebkit.messageHandlers
\u3068\u3059\u308b\u3068\u89e3\u6c7a\u3059\u308b\u3089\u3057\u3044\u306e\u3067\u3059\u304c\u3001\u79c1\u306e\u5834\u5408\u306f\u89e3\u6c7a\u3057\u307e\u305b\u3093\u3067\u3057\u305f\u3002
\u89e3\u6c7a\u7b56\u306f'limitsNavigationsToAppBoundDomains'\u3092WKWebViewConfiguration\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3057\u305f\u3002<\/p>\n\n\n\n
https:\/\/webkit.org\/blog\/10882\/app-bound-domains\/<\/a><\/a><\/p>\n\n\n\n
limitsNavigationsToAppBoundDomains\u306f\u3001WKWebViewConfiguration\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3001iOS 14\u4ee5\u964d\u3067\u5c0e\u5165\u3055\u308c\u305f\u65b0\u3057\u3044\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u6a5f\u80fd\u3067\u3059\u3002
\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u3001JavaScript\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u30f3\u30b0\u3084\u30c7\u30fc\u30bf\u306e\u9001\u4fe1\u3092\u30a2\u30d7\u30ea\u306e\u30c9\u30e1\u30a4\u30f3\u5185\u306b\u5236\u7d04\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\u30d5\u30e9\u30b0\u304ctrue\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u9650\u308a\u3001\u30a2\u30d7\u30ea\u5185\u306e\u3059\u3079\u3066\u306e WKWebView \u306e\u4e00\u90e8\u306e\u6a5f\u80fd\u304c\u7121\u52b9\u306b\u306a\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
override func loadView() {\n        let webConfiguration = WKWebViewConfiguration()\n        \n        \/\/JavaScript\u304b\u3089\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\n        webConfiguration.userContentController.add(self, name: \"callbackHandler\")\n        \n        \/\/API\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3092\u8a31\u53ef\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\n\twebConfiguration.limitsNavigationsToAppBoundDomains = true;\n        \n        webView = WKWebView(frame: .zero, configuration: webConfiguration)\n        view = webView\n    }\n<\/code><\/pre><\/div>\n\n\n\n
\u554f\u984c\u70b92: WebView\u306e\u30c7\u30d0\u30c3\u30b0\u304c\u51fa\u6765\u306a\u3044<\/h4>\n\n\n\n
Web\u30a4\u30f3\u30b9\u30da\u30af\u30bf\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30d0\u30c3\u30b0\u304c\u51fa\u6765\u307e\u3059\u3002\u3044\u307e\u307e\u3067\u306fWebView\u3092\u5b9f\u884c\u3057\u3066\u3044\u308biOS\u30c7\u30d0\u30a4\u30b9\u3067Safari\u3092\u958b\u304d\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3092\u884c\u3048\u3070WebView\u5185\u306eJavaScript\u30b3\u30fc\u30c9\u3092\u691c\u8a3c\u304c\u3067\u304d\u308b\u306f\u305a\u3067\u3057\u305f\u3002Safari\u3092\u958b\u3044\u3066\u3001\u300c\u958b\u767a\u300d\u30e1\u30cb\u30e5\u30fc\u3092\u9078\u629e\u3057\u307e\u3059\u3002\u63a5\u7d9a\u3057\u305f\u30c7\u30d0\u30a4\u30b9\u306e\u540d\u524d\u3092\u9078\u629e\u3057\u3001WebView\u3092\u9078\u629e\u3057\u307e\u3059\u3002WebView\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3068JavaScript\u30b3\u30fc\u30c9\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\u3067\u3001\u30c7\u30d0\u30c3\u30b0\u304c\u884c\u3048\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u30c7\u30d0\u30a4\u30b9\u306f\u8868\u793a\u3055\u308c\u3066\u3082\u81ea\u5206\u306e\u898b\u3066\u3044\u308bWebView\u304c\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u3053\u308c\u306fiOS16.4\u4ee5\u4e0a\u3067\u767a\u751f\u3057\u3066\u3044\u308b\u3088\u3046\u3067\u3001\u30a4\u30f3\u30b9\u30da\u30af\u30bf\u3092\u6709\u52b9\u306b\u3057\u306a\u304f\u3066\u306f\u3044\u3051\u306a\u3044\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n
https:\/\/developer.apple.com\/forums\/thread\/727049<\/a><\/a><\/p>\n\n\n\n
https:\/\/webkit.org\/blog\/13936\/enabling-the-inspection-of-web-content-in-apps\/<\/a><\/a><\/p>\n\n\n\n
override func loadView() {\n        let webConfiguration = WKWebViewConfiguration()\n        \n        \/\/JavaScript\u304b\u3089\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\n        webConfiguration.userContentController.add(self, name: \"callbackHandler\")\n        \n        \/\/API\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3092\u8a31\u53ef\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\n\twebConfiguration.limitsNavigationsToAppBoundDomains = true;\n        \n        \/\/iOS16.4\u4ee5\u4e0a\u3067Web\u30a4\u30f3\u30b9\u30da\u30af\u30bf\u3092\u6709\u52b9\u306b\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\n        webConfiguration.isInspectable = true\n\n        webView = WKWebView(frame: .zero, configuration: webConfiguration)\n        view = webView\n    }\n<\/code><\/pre><\/div>\n\n\n\n
\u307e\u3068\u3081<\/h4>\n\n\n\n
\u4eca\u56de\u306fiOS\u3067WebView\u3092\u8868\u793a\u3059\u308b\u969b\u306b\u8d77\u304d\u305f\u554f\u984c\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002\u30d0\u30fc\u30b8\u30e7\u30f3\u3054\u3068\u306b\u4ed5\u69d8\u304c\u5909\u308f\u3063\u3066\u3044\u304f\u306e\u3067\u3001\u4e0d\u5177\u5408\u304c\u8d77\u304d\u305f\u3068\u304d\u306f\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u3088\u3063\u3066\u8d77\u304d\u3066\u3044\u308b\u306e\u304b\u3092\u5148\u306b\u78ba\u8a8d\u3059\u308b\u3068\u826f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u4ee5\u4e0a\u3067\u3059\u3002\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
Designed by pikisuperstar - Freepik.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
iOS\u306eWebView\u3092\u4f7f\u7528\u3057\u3066\u3001\u30cd\u30a4\u30c6\u30a3\u30d6\u30a2\u30d7\u30ea\u3068Web\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u7d71\u5408\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068\u306f\u4e00\u822c\u7684\u3067\u3059\u304c\u3001JavaScript\u3068\u306e\u901a\u4fe1\u306b\u95a2\u3057\u3066\u306f\u3044\u304f\u3064\u304b\u306e\u554f\u984c\u304c\u767a\u751f\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001iOS\u306eWebView\u3067 […]<\/p>\n","protected":false},"author":11,"featured_media":3252,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,13],"tags":[38,76,192,114,40],"coauthors":[49],"class_list":["post-3156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app","category-frontend","tag-ios","tag-javascript","tag-webkit","tag-webview","tag-40"],"author_meta":{"nickname":"K.D","position":"\u30d7\u30ed\u30b0\u30e9\u30de\u30fc","icon_url":"https:\/\/comcent.co.jp\/blog\/images\/authorKd-150x150.png","author_url":"https:\/\/comcent.co.jp\/blog\/archives\/author\/kimura\/"},"tag_names":["iOS","JavaScript","webkit","WebView","\u30a2\u30d7\u30ea"],"thumbnail_url":"https:\/\/comcent.co.jp\/blog\/wp-content\/uploads\/2023\/10\/comcent_webview-300x200.jpg","_links":{"self":[{"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/posts\/3156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/comments?post=3156"}],"version-history":[{"count":19,"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/posts\/3156\/revisions"}],"predecessor-version":[{"id":3526,"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/posts\/3156\/revisions\/3526"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/media\/3252"}],"wp:attachment":[{"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/media?parent=3156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/categories?post=3156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/tags?post=3156"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/comcent.co.jp\/blog\/wp-json\/wp\/v2\/coauthors?post=3156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}