WebViewアプリ連携方法 - glossom-dev/AdfurikunSDK-iOS GitHub Wiki

WebViewアプリにおけるアドフリくん広告SDK連携マニュアル

このマニュアルでは、WebViewアプリでアドフリくんの動画リワード広告を表示させる連携方法を説明します。

アドフリくんiOS SDKの導入

アドフリくんSDKの導入ページを参考にアドフリくんiOS SDKを導入します。

Web→iOS連携方法

Web側からiOS側の機能（アドフリくんSDKの関数呼び出しなど）を連携するには、JavaScript Channelを使用します。

Web側の実装

Web側では、webkit.messageHandlersを使用してiOS側にメッセージを送信します。

    <script>
        function OnLoadClick() {
            // iOS側にloadHandlerメッセージを送信
            webkit.messageHandlers.loadHandler.postMessage("");
        }
        function OnPlayClick() {
            // iOS側にplayHandlerメッセージを送信
            webkit.messageHandlers.playHandler.postMessage("");
        }
    </script>

上記サンプルでは、OnLoadClick()関数でloadHandlerチャネルに、OnPlayClick()関数でplayHandlerチャネルにメッセージを送信しています。

iOS側の実装

iOS側では、WKUserContentControllerのadd関数を使用して、Web側からのメッセージを受信します。

let webCfg: WKWebViewConfiguration = WKWebViewConfiguration()
let userController: WKUserContentController = WKUserContentController()
userController.add(self, name: "loadHandler")
userController.add(self, name: "playHandler")
webCfg.userContentController = userController
webview = WKWebView(frame: self.view.bounds, configuration: webCfg)

WKScriptMessageHandler.userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) 関数を実装して受信したメッセージに対しての処理を実装します。

func userContentController(_ userContentController: WKUserContentController, didReceive message:
WKScriptMessage) {
    if(message.name == "loadHandler") {
        movieReward?.load()
    }
    if(message.name == "playHandler") {
        movieReward?.play()
    }
}

このコードでは、loadHandlerとplayHandlerという2つのJavaScript Channelを設定し、それぞれでアドフリくんのリワード広告の読み込み、再生を行なっています。アドフリくんのリワード広告実装の詳細は動画リワード実装方法を参考にして下さい。

iOS→Web連携方法

iOS側からWeb側にメッセージを送信する（アドフリくんSDKからのコールバック通知など）には、WKWebViewのevaluateJavaScript関数を使用します。

iOS側の実装

下記サンプルコードでは、アドフリくんSDKからのコールバックイベントに応じてWebページのタイトルを変更しています。

extension ViewController: ADFmyMovieRewardDelegate {
    func adsFetchCompleted(_ appID: String, isTestMode isTestMode_inApp: Bool, isManualMode: Bool) {
        // Web側のsetTitle関数に引数'広告取得成功'を送信
        webview?.evaluateJavaScript("setTitle('広告取得成功');");
    }
    
    func adsFetchFailed(_ appID: String, error: Error, adnetworkError: [AdnetworkError]) {
        // Web側のsetTitle関数に引数'広告取得失敗'を送信
        webview?.evaluateJavaScript("setTitle('広告取得失敗');");
    }
    // ... その他のコールバック処理
}

Web側の実装

Web側では、JavaScript関数を定義してiOS側からのメッセージを受け取ります。

    <script>
        // 連携テスト用にh1タグのテキストコンテンツを更新
        function setTitle(val) {
            var h1 = document.getElementById("title");
            h1.textContent = val;
        }
        // ... その他の関数
    </script>

このsetTitle関数は、iOS側から渡された値でh1タグのテキストコンテンツを更新します。

全体のサンプルコード

上記で説明したWeb側とiOS側の実装を組み合わせたものが、以下の全体サンプルコードになります。

Web側の実装

<!DOCTYPE html>
<html lang="ja">
    <script>
        function setTitle(val) {
            var h1 = document.getElementById("title");
            h1.textContent = val;
        }
        function OnLoadClick() {
            webkit.messageHandlers.loadHandler.postMessage("");
        }
        function OnPlayClick() {
            webkit.messageHandlers.playHandler.postMessage("");
        }
    </script>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <h1 id="title">タイトル</h1>
        <script type="text/javascript" src="javascript/js.js"></script>
        <input type="button" value="動画ロード" onclick="OnLoadClick();"/><br />
        <input type="button" value="動画再生" onclick="OnPlayClick();"/><br />
    </body>
</html>

iOS側の実装

import UIKit
import WebKit
class ViewController: UIViewController {
    var webview: WKWebView?
    var movieReward: ADFmyMovieReward?
    override func viewDidLoad() {
        super.viewDidLoad()
        if let url = URL(string: "Web側のURL") {
            let webCfg: WKWebViewConfiguration = WKWebViewConfiguration()
            let userController: WKUserContentController = WKUserContentController()
            userController.add(self, name: "loadHandler")
            userController.add(self, name: "playHandler")
            webCfg.userContentController = userController
            webview = WKWebView(frame: self.view.bounds, configuration: webCfg)
            self.view.addSubview(webview!)
            webview?.load(URLRequest(url: url))
            movieReward = ADFmyMovieReward.getInstance("アドフリくんの広告枠ID", delegate: self)
        }
    }
    deinit {
        movieReward?.dispose()
    }
}
extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message:
WKScriptMessage) {
        if(message.name == "loadHandler") {
            movieReward?.load()
        }
        if(message.name == "playHandler") {
            movieReward?.play()
        }
    }
}
extension ViewController: ADFmyMovieRewardDelegate {
    func adsFetchCompleted(_ appID: String, isTestMode isTestMode_inApp: Bool, isManualMode: Bool) {
        webview?.evaluateJavaScript("setTitle('広告取得成功');");
    }
    func adsFetchFailed(_ appID: String, error: Error, adnetworkError: [AdnetworkError]) {
        webview?.evaluateJavaScript("setTitle('広告取得失敗');");
    }
    func adsDidShow(_ appID: String, adnetworkKey: String) {
        webview?.evaluateJavaScript("setTitle('広告再生開始');");
    }
    func adsDidCompleteShow(_ appID: String) {
        webview?.evaluateJavaScript("setTitle('広告再生終了');");
    }
    func adsPlayFailed(_ appID: String, adnetworkError: AdnetworkError) {
        webview?.evaluateJavaScript("setTitle('広告再生失敗');");
    }
    func adsDidHide(_ appID: String, isRewarded: Bool) {
        if isRewarded {
            webview?.evaluateJavaScript("setTitle('広告を閉じた(報酬付与対象)');");
        } else {
            webview?.evaluateJavaScript("setTitle('広告を閉じた(報酬付与対象外)');");
        }
    }
}
⚠️ **GitHub.com Fallback** ⚠️