次の方法で共有

MRAID とモバイルのビデオ チュートリアル

  • [アーティクル]

このページでは、MRAID とモバイル ビデオの概要について説明します。 次のような質問に答えようとします。

  • MRAID とは どのように動作し、どのように使用するのですか?
  • MRAID とモバイル ビデオの関係は何ですか?
  • モバイル ビデオを実行するさまざまな方法は何ですか?
  • モバイル Web とアプリ内広告のビデオ機能は何ですか?

MRAID

このセクションでは、MRAID とは何か、および HTML と JavaScript を組み合わせて実行できることについて説明します。 また、MRAID がそうでないことについても説明します。

MRAID 定義

MRAID は、モバイル リッチ メディア クリエイティブを記述するための流行語としてよく使用されます。 実際には、MRAID は特定の機能を持つ特定のユース ケース (アプリ内広告) 用に設計されたテクノロジです。 この概要は、このテクノロジの理解を深めるのに役立ちます。 このページを読むと、次のような質問に答えることができるはずです。

  • Xandr は MRAID をサポートしていますか?
  • この動作に MRAID が必要ですか?
  • このインベントリで MRAID クリエイティブを実行できますか?

IAB の MRAID の説明

MRAID または "Mobile Rich Media Ad Interface Definitions" は、モバイル アプリで実行されるモバイル リッチ メディア広告の共通 API (アプリケーション プログラミング インターフェイス) を定義する IAB Mobile Marketing Center of Excellence のプロジェクトです。 これは、 HTML5 と JavaScript を使用するように設計された 標準化されたコマンドセットで、リッチ メディア広告を作成する開発者は、提供されているアプリを使用して、それらの広告の動作 (拡張、サイズ変更、カレンダー イベントなどのデバイス機能へのアクセスなど) を伝えるために使用します。

上で太字でマークされた部分を確認しましょう 。

  • 共通 API - MRAID は、クリエイティブ開発者が使用できる一般的なコマンド セットです。 MRAID をサポートするすべてのアプリは同じ共通コマンドをサポートしているため、MRAID 機能を使用するクリエイティブは、同じクリエイティブ コードを使用して、異なるアプリと異なるデバイスで正しく実行されます。
  • モバイル アプリで実行されるモバイル リッチ メディア広告 - MRAID は、アプリ内環境で実行されるモバイル リッチ メディア クリエイティブにのみ関連します。 MRAID はモバイル Web 環境には関係 ありません 。
  • HTML5 と JavaScript で動作するように設計 - MRAID は HTML5 と JavaScript を置き換える設計ではありません。 これは、JavaScript を使用するクリエイティブが、クリエイティブが表示されるアプリを実行しているネイティブ オペレーティング システムと対話 できるように 設計されています。

注:

このドキュメントのすべてのコンテンツは、MRAID 2.0 を参照しています。 フルスペックはこちらからダウンロードできます。

MRAID ユース ケース

MRAID の必要性を説明するには、モバイル デバイスに広告が表示される 2 つの主なユース ケースを調べる必要があります。Mobile Web とアプリ内。 どちらの場合も関係するテクノロジには根本的な違いがあり、その違いによって MRAID の必要性が生じます。

モバイル Web

モバイル Web は、デスクトップ Web と実質的に同じです。 モバイル Web サイトは、デスクトップ サイトが実行するのと同じ HTML5 および JavaScript コードを実行し、一部のモバイル最適化設計を使用します。 つまり、モバイル Web インベントリは、フルサイズの Web ページで実行されている広告サイズの iframe (Web ページ) です。

モバイル Web のスクリーンショット。

モバイル Web では、広告とそれが実行されているコンテナー (ブラウザー) の両方が HTML5/JS を "読み上げる" ため、互いに自由に通信できます。 クリエイティブは、サイズの変更 (展開) など、iframe でアクションを実行するように Web ページに依頼できます。

In-App

クリエイティブが表示されるアプリが HTML5 と JavaScript を実行 していないため 、アプリ内インベントリはモバイル Web とは根本的に異なります。 代わりに、デバイス オペレーティング システムのネイティブ コード (iOS の場合は Objective-C、Android の場合は Java) が実行されます。 クリエイティブは WebView と呼ばれるコンテナーに表示されます。これは、HTML5 と JavaScript を実行している完全に機能する広告サイズの Web ページ です 。

アプリ内のスクリーンショット。

この場合、クリエイティブは HTML5/JS のみを読み上げ、アプリは Objective-C または Java のみを読み上げるため、クリエイティブと実行されているコンテナー (アプリ) は互いに読み上げられません。 ここで MRAID が登場します。 MRAID は、クリエイティブが JavaScript を使用してアプリのネイティブ コードと通信し、さまざまなアクションを実行できるようにするコマンドのセットを定義します。

次の図は、HTML5/JS、MRAID、およびネイティブ コードで実行されているアプリを使用しているクリエイティブの関係を示しています。

HTML5/JS、MRAID、ネイティブ コードで実行されているアプリを使用しているクリエイティブのスクリーンショット。

覚えておくべき主な点は、HTML5/JS と MRAID は 相互に排他的なテクノロジではないこと です。 MRAID は、クリエイティブが HTML5/JS を使用してネイティブ モバイル アプリと通信できるように設計されています。

MRAID 機能

MRAID の主な機能は、 アプリ内 インベントリで実行されているクリエイティブがサイズを変更し、画面上の位置と画面サイズに関する情報を取得できるようにすることです。 クリエイティブがデバイスメモリに写真を保存し、カレンダーイベントを作成し、ネイティブビデオプレーヤーにアクセスできるようにする追加の機能があります。

MRAID によって定義された API で使用できるすべてのメソッドの一覧を、機能別にグループ化して次に示します。

サイズ変更/拡張に使用されるメソッド その他の UI 機能 UI 以外の機能
-閉める
-膨らむ
-リサイズ
- getCurrentPosition
- getDefaultPosition
- getMaxSize
- getResizeProperties
- getScreenSize
- getState
- setExpandProperties
- setResizeProperties
- useCustomClose		 -開ける
- createCalendarEvent
- playVideo
- storePicture		 - addEventListener
- getPlacementType
- getVersion
- isViewable
- removeEventListener
-楨

MRAID によって定義されたメソッドの完全な 50% が、サイズの変更に関連していることがわかります。 これは、クリエイティブがモバイルおよびデスクトップ Web 上のブラウザーと同様にアプリと直接通信できないことの直接的な結果です。

上記のメソッドに基づいて、MRAID がユーザーに表示できる 4 つの処理があります。

  • MRAID を使用すると、クリエイティブのサイズを変更し、画面サイズ、画面上の位置、および現在表示可能かどうかに関する情報を求めることができます。
  • MRAID を使用すると、クリエイティブはデバイスのネイティブ ビデオ プレーヤーにアクセスできます。
  • MRAID を使用すると、クリエイティブはデバイスの永続的なメモリに写真を保存できます。
  • MRAID を使用すると、クリエイティブは予定表にアクセスして予定表イベントを作成できます。

MRAID の概要

モバイルリッチメディアクリエイティブが描画、ゲーム、サウンドのように行うのを見たかもしれない他のすべてのファンシーなものは、HTML5とJavaScriptで行われます。 この動作は MRAID の結果ではありません。 これらのクリエイティブが MRAID クリエイティブと呼ばれることが多いのは、MRAID が "Mobile Rich Media" クリエイティブのシノニムになったからです。 その理由は、これらのクリエイティブは通常、この追加機能を明らかにするために拡張する必要があり、拡張するには MRAID を使用する必要があるためです。

  • MRAID API を使用するすべてのクリエイティブは、モバイル、アプリ内、リッチ メディア クリエイティブです。
  • すべてのモバイル リッチ メディア クリエイティブが MRAID によって提供される機能 (モバイル Web で実行されているクリエイティブなど) を使用しているわけではありません。

モバイル ビデオ

モバイル デバイスでビデオを再生するには、それぞれ独自の機能と動作を備えたいくつかの方法があります。 MRAID ビデオと HTML5 ビデオの動作を確認するには、 SDK アプリで配置 ID 2579103サイズ 300x250 を読み込みます。 各クリエイティブのコードを以下に示します。

Advertising SDK

先に進む前に、以下で使用する "Advertising SDK" という用語について少し説明します。 ソフトウェア開発キット (SDK) は、アプリ開発者がアプリに広告を簡単に表示できるようにするコードです。 広告 SDK が実行する 2 つの主な役割は次のとおりです。

  • 広告サーバーとの通信を処理し、アプリ (WebView) によって割り当てられた領域に広告を表示します。
  • MRAID API を実装する

モバイル SDK の詳細については、「Xandr Mobile SDK」を参照してください。

MRAID ビデオ

これは実際にはビデオを自動再生する最も簡単な方法ですが、ビデオのクリックを定義することは不可能であるため、大きな欠点があります。 つまり、ユーザーはビデオをクリックできず、広告主の Web サイトにリダイレクトされます。 この欠点の理由は、MRAID を使用してビデオを再生すると、デバイスのネイティブ プレーヤーでビデオが開かれるため、Web ページではないため、クリックはサポートされません。 このため、MRAID を使用して再生されているビデオをクリックすると、プレイヤー コントロールが表示されます。 犬の MRAID ビデオの簡単な作業例を次に示します。

<script src="mraid.js"></script>
<script type="text/javascript">
mraid.addEventListener('ready', function() { 
  mraid.playVideo("http://v.madnxs.com/p/e0/16/69/e6/e01669e619d6424f6b7e4597092764e3.m4v")
});
</script>

HTML5 ビデオ

モバイル広告の共通点の 1 つは、実際の Web ブラウザーで実行されるということです。 モバイル Web ページの iFrame とネイティブ モバイル アプリで実行されている WebView は、どちらも完全に機能する Web ブラウザーであるため、完全な HTML5 サポートがあります。 HTML5 では、外部プレーヤーを必要とせずにブラウザーでビデオを再生できます。 ただし、iOS と Android には、HTML5 ビデオの動作と実装が異なります。 猫の HTML5 ビデオのサンプル コードを次に示します。

<body>
<video id="videoAd" width="300" height="250" autoplay controls muted webkit-playsinline poster="http://cdn.adnxs.com/p/20/0e/21/96/200e2196675e9ca10e89f5b63c127935.png" onclick="click_thru">
<source src="http://v.madnxs.com/p/23/35/06/3b/2335063b4a2d9871922f60bca7d97a66.m4v" type="video/mp4">
Your browser does not support the video tag.
<script type="text/javascript">
//code to *handle* click event on Android and iOS
function click_thru() {
  document.getElementbyId("videoAd").pause(); 
  window.open("http://www.appnexus.com"); 
}
//code to *catch* the click event on iOS
document.getElementById("videoAd").addEventListener('touchstart', click_thru);
</script>
</video>
</body>

HTML5 ビデオによる潜在的な合併症

  • Android 4.4 以降または iOS 6 以降を実行しているデバイスでは、HTML5 ビデオの自動再生は既定では許可 されません 。 つまり、開発者は controls 属性を <video> 要素に追加して、ユーザーがビデオを開始および操作できるように、ビデオ プレーヤーが再生/一時停止、シーク バー、ミュート コントロールを表示する必要があります。 自動再生の動作は、アプリで実行されている広告 SDK によって制御できますが、Mobile Web インベントリのケースを解決するわけではありません。また、異なる広告 SDK を実行する異なるアプリ間でクリエイティブの一貫した動作が保証されることはありません。

    注:

    Xandr SDK では、HTML5 ビデオの自動再生がサポートされています。これは 、SDK アプリを使用するときに表示される動作です。 ただし、同じデバイス上のモバイル ブラウザーは、ビデオを自動再生しません。

  • 全画面表示 の iPhone および iPad ビデオは、Web ブラウザー (iFrame/WebView) ではなく、デバイスのネイティブ ビデオ プレーヤーで実行されるため、クリックスルーをサポートしていません。 Android デバイス では、 全画面表示ビデオのクリックがサポートされます。

  • iPhone 上のアプリ内環境で実行されているクリエイティブにクリックスルーを使用できるのは、ビデオを全画面表示にしない場合のみです。 これには、 webkit-playsinlineattribute を <video> 要素に追加し、アドバタイズ SDK でインライン再生を有効にする必要があります。 この実装は標準ではなく、異なる広告 SDK を実行するさまざまなアプリ間でクリエイティブの一貫した動作を保証するものではありません。

  • Android スマートフォンとタブレットと iPad は 既定で HTML5 ビデオをインラインで再生するため、クリックスルー機能を使用するために変更は必要ありません。

  • Android と iOS の両方でモバイル Web インベントリ内の HTML5 ビデオを同時に自動再生することはできません。

埋め込みビデオ プレーヤー

これは最も汎用性の高いオプションです。 SDK 依存であり、標準ではないことに注意してください。 アプリで実行されている広告 SDK にビデオ プレーヤーが含まれている場合、広告 SDK はそのプレイヤーに mraid.playVideo() 呼び出しを指示し、そのプレイヤーにクリック URL を含めることができます。 ただし、この API は MRAID で定義されていないため、さまざまなアプリで同じ方法で広告が実行される保証はありません。