Skip to content

WebView 連携ガイド

Jump to bottom
im-kashi edited this page Dec 2, 2016 · 3 revisions

maio SDK をインポート

maio SDK を初期化

//  AppDelegate.m
#import <Maio/Maio.h>

// 中略

// maio から発行されるメディアIDに差し替えてください。
NSString * const MAIO_MEDIA_ID = @"DemoPublisherMedia";

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // 広告の配信テスト設定を行います。アプリをリリースする際にはコメントアウトして下さい。
    [Maio setAdTestMode:YES];
    
    // SDK の初期化を開始します。
    [Maio startWithMediaId:MAIO_MEDIA_ID delegate:nil];
    
    return YES;
}

maio SDK - WebView ブリッジをセットアップ

MaioWithWebViewSample プロジェクトからMaioWebViewBridge.hとMaioWebViewBridge.mをコピーし、マイプロジェクトに追加します。
その後に、下記のコード例のように MaioWebViewBridge をセットアップします。

//  ViewController.m
#import "MaioWebViewBridge.h"

// 中略

@implementation ViewController {
    MaioWebViewBridge *_bridge;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // maio SDK <-> WebView のブリッジオブジェクトを生成
    _bridge = [[MaioWebViewBridge alloc] initWithWebView:_webView];
    
    // ブリッジオブジェクトに用意されているデフォルトのデリゲートを使用（任意）
    Maio.delegate = _bridge;
    _webView.delegate = _bridge;
    
    // WebView に表示する HTML ファイルをロード
    NSURL *url = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]];
    [_webView loadRequest:[NSURLRequest requestWithURL:url]];
}

@end

HTML ファイル側のセットアップ

MaioWithWebViewSample の Resources ディレクトリからmaio-webview-bridge.jsファイルをコピーし、マイプロジェクトの HTML ファイルのあるディレクトリに追加します。

maio SDK を呼び出したい HTML ファイル側では、head タグ内でmaio-webview-bridge.jsをインポートし、続けて maio SDK のイベントデリゲートを必要に応じて記述します。

<head>
    <!-- 中略 -->

    <!-- maio SDK ↔ WebView ブリッジ用スクリプト -->
    <script src="maio-webview-bridge.js"></script>
    <script>
        // maio SDK のイベントハンドラを設定。
        // 必要なイベントハンドラがあれば、コメントアウトを外して使用して下さい。
        Maio.delegate = {
            //onInitialize: function () {
            //    console.log('Maio.delegate.onInitialize');
            //},

            //onChangeCanShow: function (zoneId, newValue) {
            //    console.log('Maio.delegate.onChangeCanShow:' + zoneId + ', newValue:' + newValue);
            //},

            //onStartAd: function (zoneId) {
            //    console.log('Maio.delegate.onStartAd:' + zoneId);
            //},

            onFinishAd: function (zoneId, playtime, skipped, rewardParam) {
                console.log('Maio.delegate.onFinishAd:' + zoneId + ', playtime:' + playtime + ', skipped:' + skipped + ', rewardParam:' + rewardParam);

                // TODO: ユーザへのリワード付与処理
            },

            //onClickAd: function (zoneId) {
            //    console.log('Maio.delegate.onClickAd:' + zoneId);
            //},

            //onCloseAd: function (zoneId) {
            //    console.log('Maio.delegate.onCloseAd:' + zoneId);
            //},

            //onFail: function (zoneId, reason) {
            //    console.log('Maio.delegate.onFail:' + zoneId + ', reason:' + reason);
            //},
        };
    </script>
</head>

トリガーによる動画再生の場合、下記のようなコードで maio SDK を呼び出し動画を再生します。

<script>
    // トリガーのクリックイベントを設定
    $(function () {
        $('#showAdButton').on('click', function () {
            // 動画広告が再生可能かチェック
            Maio.canShow(function (result) {
                if (result) {
                    // 動画広告を再生
                    Maio.show();
                } else {
                    // 再生可能な広告が無い
                }
            });
        });
    });
</script>
Clone this wiki locally