Vungle (SDK v. 5.1 以上) スタート ガイド - Adobe AIR

Vungle Adobe Air Plugin を基本的なサンプル アプリケーションに統合するには、以下の手順に従います。ここに掲載されているソース コードは、GitHub の公開リポジトリから入手できます。

コンテンツ

始める前に

  • Vungle 拡張には Adobe AIR SDK 4.0 以上が必要です。Flash Builder または Flash Professional での AIR SDK のアップデート手順については、「その他の注記」セクションを参照してください。

  • Android でご利用の場合、Vungle AIR 拡張では、JDK 6 または JDK 7 (お使いの Flash のバージョンによって異なります) が開発システムにインストールされていることが必要となります。アプリケーションを実行するには、Android 3.0 (Honeycomb - API バージョン 11) 以降が必要です

  • ActionScript 3 のクラス関連ドキュメンテーションをご覧いただけます。

  • サンプル アプリケーション クラス用の example/VungleExample.as を確認してください (Flash Professional をお使いで、ドキュメント クラスの使用方法がよくわからない場合は、この記事の最後にある「Animate または Flash Professional CS6 での VungleExample.as ドキュメント クラスの使用」を参照してください)。

手順 1. 拡張ライブラリを含める

まず、モバイル プロジェクト用の新しい AIR を作成し、ネイティブ拡張を追加します。

Android をターゲットにしている場合は、Google Play Services ライブラリのプロジェクトへの追加も必要となる可能性があります。このライブラリを既に含んでいる他の拡張の場合、ライブラリは既に追加されています。拡張を追加するには、以下の手順を繰り返します。ただし、com.vungle.extensions.Vungle.ane の代わりに com.vungle.extensions.android.GooglePlayServices.ane を使用してください。

Animate および Flash Professional CS6 以上の場合

  1. 新しい AIR for Android または AIR for iOS プロジェクトを作成します。
  2. [File] → [Publish Settings...] を選択します。
  3. [ActionScript Settings] の [Script] の横にあるレンチ アイコンを選択します。
  4. [Library Path] タブで、[Browse for Native Extension (ANE) File] をクリックして vungle.extensions.Vungle.ane ファイルを選択します。[OK] をクリックします。
  5. [Player Settings] の [Target] の横にあるレンチ アイコンを選択します。
  6. Android をターゲットにしている場合: [Permissions] タブで、[INTERNET]、[WRITE_EXTERNAL_STORAGE]、[ACCESS_NETWORK_STATE] を有効にします。
  7. [Manually manage permissions and manifest additions for this app] オプションを選択して、[OK] をクリックします。

Flash Builder 4.6 以上の場合

  1. [Project Properties] で、[Actionscript Build Path] の [Native Extensions] を選択します。
  2. [Add ANE...] を選択して、vungle.extensions.Vungle.ane ファイルを指定します。
  3. [Actionscript Build Packaging] → [Google Android] を選択します。
  4. [Native Extensions] タブで、拡張の横にある [Package] オプションを選択します。
  5. iOS をターゲットにしている場合は、手順 3 と手順 4 を [Apple iOS] ターゲットに対して繰り返します。

手順 2. アプリケーション記述子を更新する

Vungle を動作させるには、アプリケーション用のアプリケーション XML ファイルに変更を加える必要があります。IDE によって作成された XML ファイルに以下の変更を加えて修正します。

注意: Flash Professional を使用している場合は、ライブラリを含めることに関する前出の「Animate および Flash Professional CS6 以上の場合」の手順に従っていることを確認してください。そうでない場合、加えた変更が Flash によって取り消されることがあります)。

  1. アプリケーション記述子ファイルで AIR SDK を 4.0 以降に設定します。
    <application xmlns="http://ns.adobe.com/air/application/4.0">
  2. 拡張へのリンクを記述子に含めます。
    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    </extensions>
  3. Android をターゲットにしている場合は、Google Play Services 拡張を含める必要が生じる可能性があります。拡張 ID もここで追加してください。
    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    <extensionID>com.vungle.extensions.android.GooglePlayServices</extensionID>
    </extensions>

Android をターゲットにした AIR アプリケーションの場合

Android をターゲットにしている場合は、android XML 要素の Android Manifest Additions を次のように更新します。

  • INTERNETWRITE_EXTERNAL_STORAGEACCESS_NETWORK_STATE の各パーミッションを含めます。
  • VideoFullScreenAdActivity,MraidFullScreenAdActivity、MraidFullScreenAdActivity  の各アクティビティ定義を追加します。
  • google-play-services バージョン メタデータ タグを追加します。
    
    <android>
    <manifestAdditions><![CDATA[
    
    <manifest android:installLocation="auto">
    
    <uses-permission android:name="android.permission.INTERNET"/>
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="18" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <application>
       <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/>
       <activity android:name="com.vungle.publisher.VideoFullScreenAdActivity"
         android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize"
         android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>
       <activity android:name="com.vungle.publisher.MraidFullScreenAdActivity"
         android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize"
         android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"/>
       <activity android:name="com.vungle.publisher.FlexViewAdActivity"
         android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize"
         android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"/>
     </application>
    
    </manifest>
    ]]></manifestAdditions>
    </android>

手順 3. Vungle API を統合する

Vungle API は、わずか数行の ActionScript でアプリケーションに追加できます。

Vungle 拡張を初期化する

注意: デフォルトの広告配置はアプリケーションごとに自動的に作成されます。広告配置機能を利用するかどうかにかかわらず、広告配置の参照 ID をこの初期化手順で指定する必要があります。複数の広告配置を作成する場合は、すべての参照 ID を指定してください。

アプリケーションを起動するときに API を初期化します。

  • ActionScript を使用している場合は、ドキュメント クラスのコントラクターでこれを行います。
  • Flex を使用している場合は、メイン クラスの initialize() イベントでこれを呼び出します。
  • Flash でタイムライン コードを使用している場合は、フレーム 1 でこれを行います。
  1. API クラスをインポートします。
    import com.vungle.extensions.*;
    import com.vungle.extensions.events.*;
  2. create() を呼び出し、Vungle ダッシュボードからのアプリケーション ID の文字列とそのアプリケーションの広告配置参照 ID を含んでいる配列を渡すことによって、API を初期化します。同じプロジェクトで iOS と Android の両方をターゲットにしている場合は、プラットフォームごとに別のアプリケーション ID とその広告配置の配列を create() メソッドに指定します。

    作成プロセスでは Vungle によってエラーがスローされることがあるため (たとえば、デスクトップで実行する場合は拡張によってエラーがスローされます)、Vungle.create() の呼び出しは try/catch でラップする必要があります。
    try
    {
        // アプリケーション ID で初期化します
        Vungle.create("your_vungle_id", [“placement1”, “placement2”, “placement3”]);
     
    } catch (error:Error) {
        // 拡張を作成できませんでした。iOS/Android 以外のプラットフォームで実行していますか?
    }

広告配置用の広告を読み込む

広告配置用の広告を再生するには、その広告配置用に広告を読み込む必要があります。自動キャッシュ形式の広告配置の場合、このメソッドを呼び出す必要はありません。SDK は、自動キャッシュ形式の広告配置の読み込みを内部で試行します。

Vungle.vungle.loadAd(“non_auto_cached_placement”);

広告配置用の広告を再生する

広告の再生準備ができると、イベント リスナーを通じて通知が表示されます。広告配置が再生可能になったら、広告を再生することができます。

If (Vungle.vungle.isAdAvailable(“placement_id”)) {
    Vungle.vungle.playAd(“placement_id”);
}

イベント リスナーを追加する

Vungle 拡張では、VungleEvent.AD_PLAYABLEVungleEvent.AD_STARTEDVungleEvent.AD_FINISHEDVungleEvent.AD_FAILEDVungleEvent.AD_INITVungleEvent.AD_LOG の 4 つのイベントがディスパッチされます。

  1. AD_PLAYABLE は、広告の再生準備ができるとディスパッチされます。
    Vungle.vungle.addEventListener(VungleEvent.AD_PLAYABLE, onAdPlayable);
    function onAdPlayable(e:VungleEvent):void
    {
        if (e.isAdPlayable) {
            trace(“ad is playable for placement: “ + e.placement);
            Vungle.vungle.playAd(e.placement);
        } else {
    	trace(“ad not playable for placement: “ + e.placement);
        }
    }
  2. AD_STARTED イベントと AD_FINISHED イベントは、広告が表示されたときと終了されたときに、それぞれディスパッチされます。
    Vungle.vungle.addEventListener(VungleEvent.AD_STARTED, onAdStarted);
    Vungle.vungle.addEventListener(VungleEvent.AD_FINISHED, onAdFinished);
    
    function onAdStarted(e:VungleEvent):void
    {
        trace("ad displayed for placement: " + e.placement);
    }
    
    function onAdFinished(e:VungleEvent):void
    {
        trace("ad dismissed for placement: “ + e.placement + “, CTA = " + e.wasCallToActionClicked);
    
        if (e.wasSuccessfulView) {	
            trace("counts a completed view - present reward.");
        }
    }
  3. AD_INIT は、Vungle SDK が初期化を完了するとディスパッチされます。
    function onAdInit(e:VungleEvent):void
    {
        trace(“Vungle SDK is initialized: “ + e.isInitialized”);
    }
  4. AD_LOG は、Vungle SDK によってログ メッセージが送信されたときにディスパッチされます。このイベントはデバッグに使用できます。ロギングは Vungle iOS SDK にしか実装されていないため、このイベントはプラットフォーム固有です。
    Vungle.vungle.setLoggingEnabled(true);
    Vungle.vungle.addEventListener(VungleEvent.AD_LOG, onAdLog);
    
    private function onAdLog(e:VungleEvent):void
    {
        log("ad log: " + e.message);
    }

その他のオプション

ご存知のとおり、playAd() メソッドの呼び出し時に構成オプションを使用してオブジェクトを渡すことができます。以下は、VungleAdConfig で使用可能なプロパティです。

オプション

説明

orientation

VungleOrientation

Android

●      VungleOrientation.AUTO_ROTATE

●      VungleOrientation.ANDROID_MATCH_VIDEO

iOS

●      VungleOrientation.IOS_LANDSCAPE

●      VungleOrientation.IOS_PORTRAIT

soundEnabled

ブール値

true (デフォルト) の場合、動画広告の再生時にデバイスのサウンド設定に従ってサウンドが有効になります。false の場合、ミュートの状態で動画の再生が始まります。ユーザーは再生中にサウンドをミュートまたはミュート解除できます。

backButtonImmediatelyEnabled

ブール値

(Android の場合のみ) true に設定すると、ユーザーは [戻る] ボタンを使用してすぐに広告を終了できます。false (デフォルト) の場合、画面に [閉じる] ボタンが表示されるまで、ユーザーは [戻る] ボタンを使用して広告を終了することができません。

immersiveMode

ブール値

(Android の場合のみ) true に設定すると、KitKat+ デバイスでイマーシブ モードが有効になります。デフォルトで false に設定されています。

incentivizedUserId

文字列

アプリケーションに渡す一意のユーザー ID を設定して、このユーザーがインセンティブ広告の視聴による報酬の対象となることを確認できます。

incentivizedCancelDialogTitle

文字列

ユーザーが動画を途中で閉じようとしたときに表示するメッセージをカスタマイズできます。

 

注意: このオプションは標準の Vungle 広告にのみ適用され、Dynamic Template 広告には適用されません。Dynamic Template 広告に適用されるオプションはダッシュボードで指定でき、ダッシュボードにも同じオプションがあります。

incentivizedCancelDialogBodyText

incentivizedCancelDialogCloseButtonText

incentivizedCancelDialogKeepWatchingButtonText

サンプル コード:

var adConfig:VungleAdConfig = new VungleAdConfig();
            
adConfig.orientation = VungleOrientation.ANDROID_MATCH_VIDEO | VungleOrientation.IOS_LANDSCAPE;
adConfig.soundEnabled = false;

android: {
    adConfig.backButtonImmediatelyEnabled = true;
    adConfig.immersiveMode = true;
};

adConfig.incentivizedUserId = "vungle_test_user";
adConfig.incentivizedCancelDialogBodyText = "body_text";
adConfig.incentivizedCancelDialogCloseButtonText = "close_button_text";
adConfig.incentivizedCancelDialogKeepWatchingButtonText = "continue_button_text";
adConfig.incentivizedCancelDialogTitle = "title_text";

Vungle.vungle.playAd(placement, adConfig);

グローバル デフォルト

オプションのデフォルト値を設定するには、グローバル構成オブジェクトを使用します。

// set any configuration options you like
VungleAdConfig.globalConfig.orientation = VungleOrientation.ANDROID_MATCH_VIDEO;
VungleAdConfig.globalConfig.soundEnabled = false;

新しい VungleAdConfig オブジェクトはすべて、デフォルトで設定されたこれらの値で作成されます。グローバル構成はオプションなしの playAd() でも使用されます。

注意: アプリケーションがテスト モードのときは、広告されたアプリケーションをダウンロードすることはできません。さらに、ダッシュボード で IMP 数は報告されません。テスト広告の用途は、SDK が正しく組み込まれたことを確認することに限られているためです。この機能は、アプリケーションをアクティブ モードで本稼働させると使用可能になります。

その他の注記

Animate または Flash Professional CS6 での VungleExample.as ドキュメント クラスの使用

  1. まず、統合に関するこの記事の手順 1 ~ 3 に従って、アプリケーションの作成と拡張の追加を行います。
  2. as を .fla と同じフォルダーにコピー アンド ペーストします。その内容をタイムラインにコピー アンド ペーストしないでください。
  3. 行 20 でアプリケーション ID と広告配置 ID をご自分の Vungle ID に変更します。
  4. Flash プロパティで、[Document Class] に「VungleExample」と (鍵括弧を付けずに) 入力して、[OK] をクリックします。
  5. アプリケーションを構築してインストールします。

Flash Professional CS6 での新しいバージョンの AIR SDK (4.0 以上) のインストール

このリンクを利用して最新版の AIR SDK を見つけます。AIR 4.0 以上が既にインストールされている場合は、この手順をスキップしてかまいません。そうでない場合は、以下の手順に従ってください。

  1. AIR 4.0 以降の SDK パッケージをハード ドライブ上の場所に解凍します。
  2. Flash Professional CS6 を起動します。
  3. [Help] → [Manage AIR SDK...] を選択します。
  4. + (プラス) ボタンを押して、AIR SDK を解凍した場所を指定します。
  5. [OK] をクリックします。
  6. [File] → [Publish Settings] を選択します。
  7. 最新版の iOS 向け AIR SDK を [Target] ドロップダウン メニューから選択します。

Flash Builder での新しいバージョンの AIR SDK (4.0 以上) のインストール

このリンクを利用して最新版の AIR SDK を見つけます。AIR 4.0 以上が既にインストールされている場合は、この手順をスキップしてかまいません。Adobe から発表されている最新版の Flash Builder AIR SDK のアップデート手順に従うこともできます。

「Adobe Animate の入力が無効」エラーの解決

次の図に示すようなエラーが表示される場合は、この記事を参照してください。

image2.png

他にご質問がございましたら、リクエストを送信してください

コメント