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

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

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

アドフリくんAndroid SDKの導入

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

Web→Android連携方法

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

Web側の実装

Web側では、Androidオブジェクト経由でAndroid側にメッセージを送信します。

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

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

Android側の実装

Android側では、WebViewのaddJavascriptInterface関数を使用して、Webページからのメッセージを受信します。

mReward = AdfurikunMovieReward("アドフリくん広告枠ID", this)
mReward?.setAdfurikunMovieRewardListener(mListener)
mWebView = findViewById(R.id.webView)
mWebView?.let { webView ->
    webView.settings?.javaScriptEnabled = true
    webView.loadUrl("Web側のURL")
    
    webView.addJavascriptInterface(object {
        // Web側からloadHandlerメッセージを受信
        @JavascriptInterface
        public fun loadHandler() {
            mReward?.load()
        }
        // Web側からplayHandlerメッセージを受信
        @JavascriptInterface
        public fun playHandler() {
            mReward?.let {
                if (it.isPrepared) {
                    it.play()
                }
            }
        }
    }, "Android")
}

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

Android→Web連携方法

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

Android側の実装

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

private val mListener = object : AdfurikunMovieRewardListener {
    override fun onPrepareSuccess(isManualMode: Boolean) {
　　　   // Web側のsetTitle関数に引数'広告取得成功'を送信
        mWebView?.evaluateJavascript("setTitle('広告取得成功');", null)
    }
    override fun onPrepareFailure(error: AdfurikunMovieError?) {
    　　 // Web側のsetTitle関数に引数'広告取得失敗'を送信
        mWebView?.evaluateJavascript("setTitle('広告取得失敗');", null)
    }
    // ... その他のコールバック処理
}

Web側の実装

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

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

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

全体のサンプルコード

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

Web側の実装

<!DOCTYPE html>
<html lang="ja">
    <script>
        function setTitle(val) {
            var h1 = document.getElementById("title");
            h1.textContent = val;
        }
        function OnLoadClick() {
            Android.loadHandler();
        }
        function OnPlayClick() {
            Android.playHandler();
        }
    </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>

Android側の実装

class MainActivity : AppCompatActivity() {
    private var mReward: AdfurikunMovieReward? = null
    private var mWebView: WebView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mReward = AdfurikunMovieReward("アドフリくん広告枠ID", this)
        mReward?.setAdfurikunMovieRewardListener(mListener)
        mWebView = findViewById(R.id.webView)
        mWebView?.let { webView ->
            webView.settings?.javaScriptEnabled = true
            webView.addJavascriptInterface(object {
                @JavascriptInterface
                public fun loadHandler() {
                    mReward?.load()
                }
                @JavascriptInterface
                public fun playHandler() {
                    mReward?.let {
                        if (it.isPrepared) {
                            it.play()
                        }
                    }
                }
            }, "Android")
        }
    }
    override fun onDestroy() {
        mReward?.onDestroy()
        super.onDestroy()
    }
    private val mListener = object : AdfurikunMovieRewardListener {
        override fun onPrepareSuccess(isManualMode: Boolean) {
            mWebView?.evaluateJavascript("setTitle('広告取得成功');", null)
        }
        override fun onPrepareFailure(error: AdfurikunMovieError?) {
            mWebView?.evaluateJavascript("setTitle('広告取得失敗');", null)
        }
        override fun onStartPlaying(data: MovieRewardData) {
            mWebView?.evaluateJavascript("setTitle('広告再生開始');", null)
        }
        override fun onFinishedPlaying(data: MovieRewardData) {
            mWebView?.evaluateJavascript("setTitle('広告再生終了');", null)
        }
        override fun onFailedPlaying(data: MovieRewardData, error: AdfurikunMovieError?) {
            mWebView?.evaluateJavascript("setTitle('広告再生失敗');", null)
        }
        override fun onAdClose(data: MovieRewardData, isRewarded: Boolean) {
            if (isRewarded) {
                mWebView?.evaluateJavascript("setTitle('広告を閉じた(報酬付与対象)');", null)
            } else {
                mWebView?.evaluateJavascript("setTitle('広告を閉じた(報酬付与対象外)');", null)
            }
        }
    }
}
⚠️ **GitHub.com Fallback** ⚠️