読者です 読者をやめる 読者になる 読者になる

迎 昭宏のブログ

IT業界で働きながら、週末はボルダリング。たまにライブ・フェス観戦。

Subway Surfersの動画広告を調べてみた

海外の人気アプリで動画広告がどのように実装されているのかを調べているけど、正直マンネリを感じ始めてしまった。単純過ぎるものは省いて、実装の参考になるものだけを厳選してお届けしたいとは思う。

 

ゲーム自体は非常に良く出来ているランゲーム。

電車に落書きしていたら、警官に見つかって逃げるという設定。

Subway Surfers - Google Play の Android アプリ

f:id:tonby:20160624003535p:plain

 走りながら左、真ん中、右に移動して、電車や障害物を避ける。

コインやアイテムが出てくるので、取ると有利にゲームを進めたりする。

f:id:tonby:20160624004145p:plain

アイテム取ると、こんな感じで大ジャンプできたり、

磁石でコインを吸い取ったりできる。

f:id:tonby:20160624004426p:plain

アイテムで一定時間空を飛ぶこともできる。

f:id:tonby:20160624004546p:plain

障害物にぶつかると、警官に捕まる。鍵を使うことでコンティニューできる。

f:id:tonby:20160624004654p:plain

ゲームオーバー時にたまにアイテムが貰えることが!

f:id:tonby:20160624004755p:plain

Double Up!のボタンが出るが、動画広告であることは知らされない。

f:id:tonby:20160624005009p:plain

AdColonyの動画が再生された。

f:id:tonby:20160624005246p:plain

エンドカード

f:id:tonby:20160624005309p:plain

インセンティブとして、2倍のコインが貰えた。

f:id:tonby:20160624005322p:plain

通信内容

メディエーションSSPを使わずに自社で行っているようだ。

設定されている動画アドネットワークはこちら。

AdColony、Vungle、Flurry、Tapjoy、inmobi。

だが、起動時に読み込まれたのはAdColony、Tapjoy、inmobiのみ。

実際に読み込まれた動画はAdColonyの2案件分(WALKING WAR ROBOTS、LINEのブラウンファーム)。WALKING WAR ROBOTSの動画ファイルが5Mでちょっと重めだが、1アドネットワークしか動画を読み込ませていない。

 

まとめ

動画リワードの観せ方が上手い。毎回ゲームオーバー時に出すのではなく、たまにしか出ないし、コインが2倍になるよ?となれば、動画観るぐらい大したことないので、みんな喜んで観る。ゲーム自体も楽しんでできるので、ランキング上位なのも納得。

COLOR SWITCHの動画広告を調べてみたら、実際にゲームとしてトライアルプレイできる広告が表示された。

海外で人気のタイミングゲーム。タップするとボールを真上に弾くことができ、重力ですぐに落ちてくるので、タイミング良くタップし続けながら(サッカーのリフティングと同じ)、障害物が回転しているので、同じ色の時だけすり抜けられる。

一定以上の高さまでたどり着けばゴール。

Color Switch - Google Play の Android アプリ

 

広告は、もりもり組み込まれている。

f:id:tonby:20160623003421p:plain

タイミングよくタップしてボールを上にあげていく。

f:id:tonby:20160623003953p:plain

同じ色のときだけすり抜けられる。

f:id:tonby:20160623004048p:plain

違う色の時にぶつかると終了。

f:id:tonby:20160623004119p:plain

ゲームオーバー画面で+30の動画リワードが表示されている。

常に表示されるので有り難みは無い。

f:id:tonby:20160623004147p:plain

今回はAppLovinが選択された。

f:id:tonby:20160623004244p:plain

エンドカード

f:id:tonby:20160623004315p:plain

通信内容

まず起動画面でheyZapでメディエーションしていることから、各アドネットワークが呼ばれる。フッターにはモバイルバナーが常設。

先読みとしてインタースティシャル、ネイティブ、動画と盛りだくさん。

heyZap、admob、FAN(Facebook Audience Network)、inmobiなど

 

動画リワードはAdColony、AppLovin、UnityAds、Vungle。

 

ゲームオーバー時に、たまに自動で全画面インタースティシャル(admob?全画面インタースティシャルはなかなかみないので新鮮)や、同意なしで動画リワードの動画が再生される。

まとめ

ゲームとしてはタイミングゲームが苦手なので、長く続けられなかった。ゲーム自体は何度でも再チャレンジできるので、インセンティブの意味合いが薄い。

動画リワードの実装方法としては真似しないほうが良い

inmobiの広告なのか?ハッキリとわからなかったが、ゲームとして遊べる広告が表示された。

真ん中にいるのが自分。周りから敵が迫ってくるので、タップして銃撃する。

f:id:tonby:20160623010123p:plain

 この画面で遊べるゲームとしてはぶっちゃけ全くおもしろくない。

f:id:tonby:20160623010334p:plain

15秒ほどで、以下のタイトルが表示され、もう一度プレイするかストアに飛ぶか選択。ただし、ストアに飛んでバックボタンで戻ってくると、ストアに強制移動させられて、通常のゲームが遊べなくなってしまった。

f:id:tonby:20160623010433p:plain

 

こちらは、もう少し凝っている作り。ドラッグアンドドロップで、戦うためのオブジェクトを配置。

f:id:tonby:20160623011540p:plain

f:id:tonby:20160623011658p:plain

f:id:tonby:20160623011732p:plain

放置してたら、5分ぐらいで敗退してた。 

f:id:tonby:20160623011815p:plain

ゾンビキャッチャー (Zombie Catchers)の動画広告を調べてみた

海外アプリで動画リワードが実装されている状況を調査。

主にリワードの実装方法、アドネットワーク、メディエーションなど中心に。

ゾンビキャッチャー (Zombie Catchers) - Google Play の Android アプリ

 

ゲーム内容は、捕獲したゾンビを材料にジュースを作って、それを店で売る。売って稼いだお金でゾンビを捕まえる為の装備や、新しいジュースを作れるようになったりする。

 

自由に横スクロールできるアクションゲーム。

脳みそを置いてゾンビをおびき寄せる。ゾンビが沼からでてくるので、モリで突いて捕獲する。

武器を強化したり、網で一網打尽に捕まえたり、罠をしかけたり様々。

特別な武器は、一度使うと一定時間が経過しないと再び使えない。

f:id:tonby:20160620003048p:plain

捕まえてきたゾンビをここで押しつぶしてジュースを作る。右に行くほど強いゾンビでかつ、高額で売れるジュースになる。

f:id:tonby:20160620003121p:plain

地下で作ったジュースは、地上に運ばれて、お客さんが列を成しているので売ってお金を稼ぐ。

f:id:tonby:20160620003103p:plain

捕まえたゾンビをジュースにすると、また新たに捕まえてこないといけない。

ドローンがゾンビを探すのだが、一定時間が経たないと、ゾンビが見つからない。

アイテムか動画視聴することで、すぐに見つけてくれる。

f:id:tonby:20160620003203p:plain

f:id:tonby:20160620003221p:plain

SponsorPayが表示された。エンドカードは無いようだ。

f:id:tonby:20160620011153p:plain

通信内容

端末:Android SO-02H(6.0)

通信環境:WIFI

 

アプリ起動直後に最優先でchartboostが呼ばれる。

2秒後:fyberとsponsorpayが呼ばれる。

4秒後にAppLovinとUnityAdsが呼ばれる。

5秒後にAdColonyが呼ばれる。

UnityAdsの動画ファイルが6秒後に1つだけ読み込まれる。

 まとめ

ゲームとしてよく出来てる。これは単純なタップのみのゲームじゃないのでハマる。

メディエーションツールはfyber。

sponsorpayは初めて見た。動画視聴中に閉じるボタンを押下すれば、途中で視聴を止めることができる。ダイアログが表示されて、インセンティブが受け取れないけど良いか?と聞かれる。

今回も初期化時に動画ファイルはUnityAdsの1つしか読み込まれなかった。

やはり無駄に動画ファイルを読み込ませないような設定があるのか?それともfyberが上手くコントロールしているのか?

Tap Titansの動画広告を調べてみた

海外ゲームで動画リワードってどうのような実装されているのか興味はあったけど、きちんと調べたことがなかったので、世界中で1300万人が遊ぶと言われるTap Titansの動画広告を調べてみた。

調べる目的で何気なく始めたんだけど、結構ハマって1週間はタップしまくった。右手・左手合わせて八本の指をスマホの画面で連打しまくる様は、他者からみたら奇怪な行動にみえただろうな。

温泉行って、食事食べてる時もカタカタずっとタップしてるし。。

こんなにスマホ画面を連続タップしたことないほど叩きまくった。

Tap Titans(世界中1300万人突破のタップRPG) - Google Play の Android アプリ

以下はアイテムを使って一定時間、影分身が代わりに連続斬りしてくれているところ。

f:id:tonby:20160619205029p:plain

ゲーム中に不定期で妖精が飛んでくるので、タップするとアイテムやダイヤ、ゴールドをくれる。 

f:id:tonby:20160619214540p:plain

まれに、妖精からのボーナスとして大量のゴールドが貰えるチャンスが。

ギフトを集めるボタンを押下すると、動画が再生される。

f:id:tonby:20160619214714p:plain

今回は、UnityAdsが選択された。

f:id:tonby:20160619214857p:plain

エンドカード

f:id:tonby:20160619214932p:plain

大量のゴールドがゲットできるので、アイテムや仲間を増やしてよりゲームを楽しめる。

f:id:tonby:20160619214955p:plain

通信内容

検証端末:Android、SO-02H(6.0)
接続:WIFI

 

起動したら真っ先にTapjoyとAppsFlyerが呼ばれる。

4秒後にchartboost、UnityAdsが呼ばれ、6秒後にAppLovinが呼ばれる。

SSPは使っていないようだ。自社メディエーションかもしれない。 

 

AppLovinの動画ファイルは2M以下で軽い。
UnityAdsは動画ファイルは容量が軽かった印象があるのだが、今回は3M。

Tapjoyの動画ファイル読み込みが見当たらないので、フリクエンシーキャップにかかった可能性がある。


まとめ

初期化で読みこむ動画ファイルの数が少ないと思った。動画ファイルの読み込み数ってお願いすればコントロールできるのだろうか?

初期化でアドネットワークを呼び出す時間をずらしている意図は感じる。何度かアプリ起動時の挙動をみてみたが、やはりTapjoyを最優先で呼び出している。

AdColonyが入ってないのはなぜだろう?

グローバルで大ヒットしているゲームにSSPが入ってないのは、自社メディエーションツールを使っているからだろうか?

単純にゲームとしてハマる。面白かった。

HTTP Live Streaming(HLS)形式の動画をAWS(Amazon Elastic Transcoder、S3、CloudFront)で配信

Apple仕様のHTTP Live Streaming(HLS)をアダプティブ配信する環境をAWSAmazon Elastic Transcoder→S3→CloudFront)で構築して、配信最適化できるか試してみた。

f:id:tonby:20160618231613p:plain

Akamaiでの配信方法は以下

動画配信技術 その1 - HTTP Live Streaming(HLS) - Akamai Japan Blog

動画配信技術 その3 - Universal Streaming(HDS/HLS) - Akamai Japan Blog

 

HTTP Live Streamingとは、容量の大きい動画ファイルを10秒ごとに分割して、読み込みながらでも再生できる。特別なストリーミングサーバを必要とせず、通常のWEBサーバで配信ができるのも利点。iOSAndroidともに対応端末が幅広い。

Apple公式の資料
「特別なサーバソフトを使用しないオーディオとビデオの送信」

https://developer.apple.com/jp/documentation/StreamingMediaGuide.pdf

 

f:id:tonby:20160618204230p:plain

アダプティブ配信とは?

回線品質によって、読みこむファイルを切り替えながら再生する。

3G→LTEWIFIのように通信環境が変化すると、それに応じた動画再生に切り替えられる。

f:id:tonby:20160618211626p:plain

f:id:tonby:20160618232209p:plain

 

S3に元動画を入れる用と、出力用の2つのバケットを準備する。

f:id:tonby:20160618205444p:plain

元となるMP4動画を-inの方にアップロードする。

f:id:tonby:20160618205709p:plain

素材はNHKのクリエイティブ・ライブラリーを引用。

www.nhk.or.jp

わかりやすく

・高画質(飛行機)

着陸する飛行機(6)ズームイン:素材をさがす:NHKクリエイティブ・ライブラリー

・中画質(新幹線)

東北新幹線「はやぶさ」:素材をさがす:NHKクリエイティブ・ライブラリー

・低画質(船)

ベネチア 運河(1):素材をさがす:NHKクリエイティブ・ライブラリー

としてみた。

 

Amazon Elastic TranscoderでMP4ファイルを
ts分割したファイルプレイリスト(m3u8)をS3へ保存する。

 

Elastic Transcoderを選択

f:id:tonby:20160618213436p:plain

Create New Pipelineから、以下のように入力する。

f:id:tonby:20160618213656p:plain

今度は左のメニューでJobsを選択肢、Create New Jobを押下。

f:id:tonby:20160618213843p:plain

Create New Jobから高画質の場合はhighというフォルダに出力されるよう登録。

f:id:tonby:20160618214336p:plain

右下のCreate New Jobを押下すると、以下のようにS3の-out/high/〜に出力される。 

f:id:tonby:20160618212638p:plain

これをmidとlowの分繰り返す。

f:id:tonby:20160618214718p:plain

f:id:tonby:20160618214905p:plain

f:id:tonby:20160618214914p:plain

それぞれのプレイリストの中身は以下。

10秒指定したのに、きっちり10秒で分割されるわけではない。


high.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:13
#EXTINF:12.078733,
high00000.ts
#EXTINF:9.009000,
high00001.ts
#EXTINF:9.009000,
high00002.ts
#EXTINF:1.768433,
high00003.ts
#EXT-X-ENDLIST


mid.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:13
#EXTINF:12.012000,
mid00000.ts
#EXTINF:9.009000,
mid00001.ts
#EXTINF:9.009000,
mid00002.ts
#EXTINF:12.012000,
mid00003.ts
#EXTINF:9.009000,
mid00004.ts
#EXTINF:9.009000,
mid00005.ts
#EXTINF:12.012000,
mid00006.ts
#EXTINF:9.009000,
mid00007.ts
#EXTINF:8.942267,
mid00008.ts
#EXT-X-ENDLIST


low.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:13
#EXTINF:12.058444,
low00000.ts
#EXTINF:8.241567,
low00001.ts
#EXT-X-ENDLIST


通信回線の状態により、これらを切り替える為にindex.m3u8を自分で作成してoutバケット直下にアップロード。 


index.m3u8

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=400000
https://d1h36s1zyfuae3.cloudfront.net/low/low.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=600000
https://d1h36s1zyfuae3.cloudfront.net/mid/mid.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=2000000
https://d1h36s1zyfuae3.cloudfront.net/high/high.m3u8


CloudFrontで配信するための設定。

iOSのATS対応のために、SSL選択が必須なのに注意。

f:id:tonby:20160618220103p:plain

Originも設定する。

バケットに直接アクセスされたくなく、常にCloudFrontからの配信になるよう制限したかったら、Restrict Bucket AccessをYesにする。

f:id:tonby:20160618220455p:plain

一通り設定完了したら、しばらく時間がかかる場合もあるが、CloudFrontでアクセスできるようになる。

URLは以下

https://d1h36s1zyfuae3.cloudfront.net/index.m3u8

AndroidChromeで開くと、ファイルをダウンロードしてしまう。

※HTMLのvideoタグでリンクすると、Androidでも再生可能。


iPhonesafariで開くと、動画が読み込まれ再生準備になる。

f:id:tonby:20160618221426p:plain

再生ボタンを押下すると、標準のプレーヤーが立ち上がり、再生が開始する。

f:id:tonby:20160618221726p:plain

再生途中から、電車の動画に切り替わる。

f:id:tonby:20160618221859p:plain

index.m3u8がリクエストされて、low.m3u8の指示でtsファイルが読み込まれ、回線品質によって、mid.m3u8に切り替わって、midのtsファイルが読み込まれ始める。

f:id:tonby:20160618222422p:plain

iPhone端末の設定 > デベロッパ > NETWORK LINK CONDITIONER

から、回線品質を変更してテストすることができる。

f:id:tonby:20160618222814p:plain

回線が良ければ、飛行機が配信される。

f:id:tonby:20160618223603p:plain

まとめ

Appleの仕様なので、safariでリピート再生した場合、動画を読み込み直さないでキャッシュを上手く利用してくれるのだが、Androidchromeだとリピートなのにtsファイルを読み込み直すので無駄がある。

↓リピート再生するたびに、low00000.ts、low00001.tsをダウンロードしてしまう。(表示は降順)

f:id:tonby:20160618225923p:plain

 

ブラウザの挙動なのでアプリで実装する場合は、上手くキャッシュを再利用すればいいが、ブラウザベースのHTML5配信でリピート再生すると、端末依存かもしれないがパケ死配慮されない残念な作りになっている。

 

Elastic Transcoderの設定が雑なのか、MP4ファイルを元にtsに細かく出力した場合に、元ファイルよりもファイルサイズが大きくなってしまうという本末転倒なことになってしまった。この辺をチューニングする必要があるのだろう。

 

S3のinputバケットにMP4の動画をアップしたら、Elastic Transcoderでhigh, mid, lowに書き出されるなど自動化することもできるようだ。

qiita.com

AWS便利すぎてやばい。配信コストはどうなのか?要調査。

LINEポイントの動画リワード

iPhoneAndroidの端末からMacbook Airにネットワークが繋がらなくなってしまい、通信内容調べる環境がこわれ、半日ハマってしまった。本当にちょっとした端末の設定だったり、ネットで問題を絞り込むためにひたすら調べるのに時間かかり過ぎて四苦八苦。通信内容みれないと不安で眠れなくなる。(嘘です)

 

LINEってメッセのやりとり(コミュニケーションツール)としてしか使っていなく、スタンプを購入したことすらない。LINEポイントというものがあり、ゲームをインストールすると、ある程度のポイントが貰えるリワードがあると教えてもらった。

f:id:tonby:20160618171113p:plain

以下のアプリをインストールすると、70ポイントもらえる。

f:id:tonby:20160618171230p:plain

動画リワード

「ビデオ」というコーナーがあり、動画を完全視聴すると1ポイントもらえるメニューがある。ほとんどブランド広告。

f:id:tonby:20160618171543p:plain

ワイモバイルを選択。動画を観ていないので、「詳しくはこちら」がグレーになっていて、LPに飛べない。

f:id:tonby:20160618171925p:plain

スクロールすると、細かい説明が書いてある。視聴完了すれば1ポイントもらえる。※別に何回観てもいいけど、1人1ポイント以上はもらえない。

f:id:tonby:20160618172114p:plain

視聴してみると、フルスクリーン横画面で動画が流れる。

 

f:id:tonby:20160618172338p:plain

画面をタップする毎に一時停止/再生を繰り返す、初めて観るパターン。

Androidのバックボタンが無効にされていないので、バックボタンで前画面に戻れる。

f:id:tonby:20160618172403p:plain

 視聴完了すると、勝手にプレーヤーが閉じられて、代わりにダイアログが表示される。

この時点でポイントが付与されて、「詳しくはこちら」から、LPへ遷移してもよい。

インセンティブであるポイントを付与する通信はこの時点で完了している。

 

※動画再生完了時(30秒後)に再度、動画ファイルをダウンロードしている。

f:id:tonby:20160618172839p:plain

LPは以下のようにブラウザで閲覧する。

f:id:tonby:20160618173212p:plain

LINEポイントのトップページに戻ると、ポイントが+1増えている。

f:id:tonby:20160618173439p:plain

まとめ

ブランド広告なので広告主から高画質を求められ、再生時間も30秒だしファイル容量5〜6Mなんだろ?と、思いきや驚きの1M前後という少なさ。

動画によっては1M以下もある。30秒では驚きの圧縮率。

 

LINEのブランド広告動画は、圧縮しすぎて画質は荒いが、少量パケットでユーザーがパケ死しにくい配慮がされていて好感がもてる。

動画再生中の何パーセント再生されたとかのログを通知することはしていない。

ログは再生開始と視聴完了のみ。

 

ただし、WIFIでも低画質動画が流れてきたのはどういう判定基準なのか少し気になるけど。

あと動画視聴完了後に全く同じ動画ファイルを、謎にもう一度リクエストしているのは何なのだろうか。

動画リワードのエンドカードについて

動画リワードで動画再生が完了すると、エンドカードと呼ばれるHTMLベースで作られたページが表示される。

エンドカードから、ストアに遷移してアプリをインストールするか、もしくは閉じるボタンでエンドカードを閉じて、インセンティブ(アイテムや仮想通貨のポイントなど)を貰う。

そのエンドカードがアドネットワークによって特徴があって面白かったのでピックアップ。

Vungle

www.facebook.com

Vungleは先日のFacebookで発表があったように、2011年に動画制作の会社からスタートしているとのこと。
6月から動画やエンドカードを集中して観る機会があって、クリエイティブにこだわっているのは強く感じていたし、以前Vungleの東京オフィスにおじゃました時に、日本人クリエイターが作る質の高い動画に驚かされた。

昔はサッカー関係の仕事で、取材しながら動画編集もやったりしてたんだけど、動画って作るのにすごく時間かかるし大変なんだよね。1箇所でも修正すると、全て書き出し直さないといけなくて、やたら時間かかる。。

動画広告なので動画の質にこだわれば、当然にコンバージョンも高くなるのはわかっているけど、製作コストも静止画に比べると1〜2桁違ってしまう。

で、エンドカードの静止画像があるのですが、ここにも手を抜かずにきっちりとデザインを綺麗に作りきるあたり、デザイナーとしての強いこだわりを感じて好感がもてる。

他アドネットワークとの差別化にもなるので、今後もクリエイティブにこだわることを期待。

f:id:tonby:20160617002314p:plain

maio

maio.jp

エンドカードがシンプルな時代しか知らなかったので、いつ変わったのか気が付かなかったけど、スワイプして画像が複数枚みれるようになってた。

最後までスワイプすると動画のリプレイも加わっている。

f:id:tonby:20160617005556p:plain

動画の質にこだわるのはもちろんなんだけど、このようなHTMLベースのレイアウトも手を抜かずに作りこむことで、コンバージョンにどう違いがあるのか、A/Bテスト実績あれば結果を知りたい。