最新アドテク×Java script実践活用術

Hitokuse Inc.© 1

JavaScript技術を高めたい方必見！最新アドテク×JavaScript実践活用術

株式会社ヒトクセ CTO 長尾俊

Hitokuse Inc.©

自己紹介

2

長尾俊株式会社ヒトクセ　最高技術責任者 (Co-Founder / CTO) 東京大学大学院情報理工学系研究科　修士 IPA未踏クリエータ

得意領域 C, C++, C#, Objective-C,JAVA, PHP,Ruby,Python,HTML,CSS,JS,Flash,Lisp,VB,SQL,lua… Web, スマートフォンアプリ, 機械工作, マイコン, 音声信号処理, CG, 機械学習…

略歴 2011.4　東京大学工学部　機械情報工学科学士 2011　　東大アントレプレナー道場７期　準優勝、その他ビジコン多数受賞 2012.4　株式会社ヒトクセ設立　Co-Founder CTO就任 2012　　IPA未踏クリエータ 2012　　SIGGRAPHでの学会発表 2013.4　東京大学大学院　情報理工学系研究科電子情報工学科　修士

趣味ブレイクダンス、ヘヴィメタル、アート

Hitokuse Inc.©

自己紹介（裏）

3

ポートフォリオ・メタラー起業家 SHUNのブログ：http://shun0750.tumblr.com ・ヘヴィメタルダンスチーム「マソソソマソソソ」：　　　　　https://www.youtube.com/watch?v=I0iI_EqJYWA 　　　　　https://www.youtube.com/watch?v=Jbh0aYLfWn4

頭で回ったり・・メタルでダンスしたり・・カクテル作ったり・・

長尾俊株式会社ヒトクセ　最高技術責任者 (Co-Founder / CTO) 東京大学大学院情報理工学系研究科　修士 IPA未踏クリエータ

Hitokuse Inc.©

自己紹介 - ポートフォリオ

4

MRsionCase (Hanyuool Kim, Shun Nagao, Satoshi Maekawa, Takeshi Naemura)

多方向鑑賞可能な空中像展示ショーケースハーフミラーと超指向性スピーカを用いて、鑑賞方向に応じて異なる空中像や指向音を提示。

デジタルコンテンツEXPO 2012　採択

SIGGRAPH ASIA 2012 Emerging Technology, Tech Brief, Posters 採択

sARound - Talking Shadow (長尾　俊、若間　弘典、渡邊　翔太)

実物体音像定位プラットフォーム超指向性スピーカを用いて、任意の位置に指向音を当てて拡散させ音源を作る。

2012年　IPA未踏人材育成プログラム採択

Hitokuse Inc.© 5

第１部　リッチメディア広告とJavaScript（長尾・25分）　- ヒトクセの紹介　- 第３者配信とは？3rd Party JavaScriptについて　- 実践テクニック①　パッケージ化　- 実践テクニック②　クロスドメイン対策　- 実践テクニック③　デバイス対応ケーススタディ

第２部　JavaScriptで実現するインバナー動画広告（長尾・10分）　- インバナー動画広告とは？　- 実践テクニック④　CSSスプライト

第3部　ネイティブアドを支えるPhantomJS（島田・20分）　- ネイティブアドとデザイン自動最適化について　- PhantomJSの仕組み(基礎編) 　- PhantomJSの仕組み(スクレイピング編) 　- CasperJSについて

第4部　クリエイティブ最適化アルゴリズム（濁沼・15分）

Hitokuse Inc.© 6





Hitokuse Inc.©

会社のご紹介

7

ITの力を駆使して、人々の生活に新しい体験を生み出す。

株式会社

Smart Canvas

あらゆるデバイスでリッチな広告を

PC、タブレット、スマートフォンにHTML5のリッチメディア広告を配信します。動画広告やインタラクティブな広告で、ユーザーを次のステップへ誘導します。

Hitokuse Inc.©

Smart Canvasとは？

9

制作配信分析

Smart Canvasは動画広告やアニメーション広告などのリッチメディア広告のプラットフォームです。制作から配信・分析まで一括して総合的にサポートを行っています。

タグ出力

管理画面上の制作ツールスマートフォン・PCでの出力豊富な分析データ・プログラミング不要・手軽な操作での制作

・スマートフォンでも再生可能・多数の提携ネットワーク（後述）

・imp数、クリック数の測定・タップ領域の可視化

Hitokuse Inc.©

配信広告のバリエーション

10

獲得系

ブランディング系◎アニメーションバナー◎トランジションバナー ◎インタラクティブバナー

◎動画バナー ◎３Dバナー ◎スクラッチバナー

Dynamic Native Ads

カメレオンWebサイトのデザイン情報を解析し、あらゆるディスプレイ広告に最適化したネイティブアドを配信します。

広告が表示されるWebサイトのデザイン情報をシステム解析し、それぞれのWebサイトのデザインに最適化したネイティブアドを Programmaticに生成します。（特許出願中）

技術者ならではの発想をビジネスに活かしていく！

Hitokuse Inc.©

サービスのご紹介

13

ヒトクセはリッチメディア広告のクリエイティブ・ソリューションを提供します

クリエイティブのデータドリブン化の時代へ

- アニメーション・動画広告の配信 - 制作ツール・APIの提供 - 各種計測データのレポート

- ヒートマップを用いた効果解析 - 自動でデザイン変化する広告配信

Hitokuse Inc.© 14





Hitokuse Inc.© 15

第３者配信とは？

Hitokuse Inc.©

広告業界の基本構造

16

テレビ

雑誌

WebSEO

リスティング

ディスプレイインストリーム

広告主媒体・メディア

街頭広告

アプリ

認知

ゲーム

アプリ

化粧品

自動車

金融

旅行

通販

電子書籍

ユーザー

：：

Hitokuse Inc.© 17

アドネットワークの仕組み

アドネットワークとは？

広告主

ゲーム

アプリ

化粧品

自動車

金融

旅行

通販

電子書籍

：

媒体・メディア

１クリック100円

ユーザー

クリック

配信

アドネットワーク

Hitokuse Inc.© 18

アドネットワークのおさらい

広告主

ゲーム

アプリ

化粧品

自動車

金融

旅行

通販

電子書籍

：

媒体・メディア

１クリック100円

配信

ヒトクセのビジネスモデル：第３者配信

ユーザー

クリック

アドネットワーク

Hitokuse Inc.© 19

概要第３者配信の仕組み

①　広告配信先Webサイトが読み込まれる ②　アドネットワークのライブラリが読み込まれる ③　第３者配信のライブラリが読み込まれる

❶広告配信先Webサイト

❷アドネットワークのDOM

❸第３者配信のDOM

Hitokuse Inc.© 20

第３者配信とは？第３者配信の注意点

・表示先Webサイトのスクリプトとの競合　「DOMのid,class名が被ってサイトのCSSが反映されてしまった」（逆も然り）　「window.onloadが発火した後に広告が表示され、広告側では発動しない」　「変数名が被って動作がおかしくなった」　対策：パッケージ化

・クロスドメイン制約　「広告内からサイトの情報を取得することができない」　「ユーザーのスクロール量を取得することができない」　対策：postMessageによるiframe間通信

・デバイス対応　「XPERIA Android4.1でフルスクリーン動画が再生されない」　「iOS Chromeでフルスクリーン終了の判定ができない」　対策：泥臭く頑張るしかない！→ケーススタディを紹介

Hitokuse Inc.© 21





Hitokuse Inc.© 22

パッケージ化

未知のWebサイト

未知のDOM構造

未知のスクリプト

ライブラリA ライブラリB

ヒトクセサーバー

ダウンロード干渉しないように！

3rd Party JavaScriptの課題

未知のWebサイトでも動くようなライブラリ作りをする必要

Hitokuse Inc.© 23

パッケージ化

ダメな例

グローバル変数にしてしまっているので、外界に影響を与える可能性が高い

var result = 0; a = 1; b = 2;

result = a + b; console.log(result);

Hitokuse Inc.© 24

パッケージ化

即時関数を用いる方法

即時関数の定義

即時関数の中ではローカル変数を使えるので、独立した環境を作れる

ローカル変数の定義

(function () { var result = 0; var a = 1; var b = 2; result = a + b; console.log(result); }());

Hitokuse Inc.© 25

パッケージ化

オブジェクトを用いる方法

オブジェクトの定義

変数をぶら下げる関数をぶら下げる

オブジェクトに処理をぶら下げるため、外部からオブジェクトを通じて処理を呼び出しやすい

var SC = function(){}; SC.a = 1; SC.b = 2; SC.result = function(){ return SC.a + SC.b; } console.log(SC.result());

Hitokuse Inc.© 26

パッケージ化

即時関数＋オブジェクト

オブジェクトをグローバルで定義

外側からもオブジェクトを介してアクセスしやすい

var SC = function(){}; (function () { var a = 1; var b = 2; SC.result = function(){ return a + b; } })();

処理は即時間数スコープ内で

外からアクセスするものはオブジェクトにぶら下げる

Hitokuse Inc.© 27

パッケージ化

即時関数＋オブジェクトの例

//sctool.js var SCTool = function(){}; (function () { var a = 1; var b = 2; SCTool.makeLink = function(){ //リンク作成処理// return url; //最終的なURL } })();

ユーティリティ系ライブラリ

//scanimation.js var SCAnimation = function(){}; (function () { var a = 1; var b = 2; SCAnimation.makeDOM = function(){ var href = SCTool.makeLink(); //アニメーションDOM作成// return url; //最終的なURL } })();

アニメーション系ライブラリ

参照

Hitokuse Inc.© 28





Hitokuse Inc.© 29

クロスドメイン制約

クロスドメイン制約とは？

「あるドメイン上で、異なるドメインのコンテンツ操作をしてはいけない」

というブラウザの制約

Hitokuse Inc.© 30

クロスドメイン制約

・他ドメインのサイトをiframeで呼び出し、iframeのコンテンツにJavaScriptでアクセスしようとする

クロスドメイン制約を受けるケース

aaa.com

bbb.com

アクセスできない！！

広告表示時によく生じるケース

Hitokuse Inc.© 31

広告でのクロスドメイン制約

スクロール

iframe

smartcanvas.net

hitokuse.com

iframe内外でドメインが異なる場合はお互いにDOMにアクセスできない（クロスドメイン制約）

※postMessageなどの機能で通信することは可能

広告内（iframe内）から広告外（サイト側）のユーザーのスクロールを読み取るのが難しい

広告が画面に入ってから動画広告を再生するのが難しい

「スマートフォンの画面に入ったら動画広告を再生したい！」

postMessage() を使いましょう。

クロスドメイン制約を打ち破れ！！

Hitokuse Inc.© 33

クロスドメイン対策

aaa.com

bbb.com

アクセスできない！！

想定するシチュエーションiframe内部（bbb.com）からiframe外部（aaa.com）への通信

Hitokuse Inc.© 34


aaa.com（iframe外）bbb.com（iframe内）

想定するシチュエーション

「CrossDomain」という文字を取得したい

<iframe id=“ifr” src=“http://bbb.com”> </iframe> <div id=“test"> 　CrossDomain </div>

Hitokuse Inc.© 35




<iframe id=“ifr” src=“http://bbb.com”> </iframe> <div id=“test"> 　CrossDomain </div>

window.parent.document.get ElementById("test").innerHTML

Hitokuse Inc.© 36




postMessageで問い合わせ messageイベントで受け取り

値を取得、 postMessageで値を送信messageイベントで受け取り

window.parent.postMessage("getHTML:test", “*”);

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {

var message = event.data; if(message.split(“:”)[0]==“getHTML”) var response = document.getElementById(message.split(“:”)[1]).innerHTML; document.getElementById(“ifr”).contentWindow.postMessage(response,”*”);

}

Hitokuse Inc.© 37


aaa.com（iframe外）

bbb.com（iframe内）

iframe内→iframe外の通信

送信先のドメイン（特に指定しない場合は*とする）

送信先（親DOM）メッセージ

messageイベントで受け取り

送信先のiframe

window.addEventListener("message", receiveMessage, false); function receiveMessage(event) {

var message = event.data; console.log(message);

}

Hitokuse Inc.© 38


aaa.com（iframe外）

messageイベントで受け取り

iframe外→iframe内の通信

「CrossDomain」

window.addEventListener("message", receiveMessage, false); function receiveMessage(event) {

var message = event.data; if(message.split(“:”)[0]==“getHTML”) var response = document.getElementById(message.split(“:”)[1]).innerHTML; document.getElementById(“ifr”).contentWindow.postMessage(response,”*”);

}

bbb.com（iframe内）

Hitokuse Inc.© 39





Hitokuse Inc.© 40

デバイス対応ケーススタディ

CSS3 3D Transforms

Android 4.1以降（CSS 3D Transform）

Android 4.0以前（HTML5 Canvas）

Android 4.0以前でCSS 3Dが使えない！！

Android 4.0以前はHTML5 Canvasで代用する

Hitokuse Inc.© 41


非同期でJSで通信をする場合

IEのAjax対応

IE8, IE9 IE10~

XDomainRequest XMLHttpRequest

両方対応できる送り方

if(window.XDomainRequest){ var xdr = new XDomainRequest(); // XDomainRequestの処理 }else{ var xhr = new XMLHttpRequest(); // XMLHttpRequestの処理 }

Hitokuse Inc.© 42


jQueryの$.ajaxを使っている場合

IEのAjax対応

(https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest)

MoonScript/jQuery-ajaxTransport-XDomainRequest

→IE8対応されたjQueryの追加ライブラリを使うのも手

Hitokuse Inc.© 43





Hitokuse Inc.© 44

オンライン動画広告の分類

インストリーム広告インリード広告インバナー広告

YouTube、Vimeoなどの動画視聴サービスにおいて動画の前後や間に再生される動画広告領域

ニュースやブログなどのテキストコンテンツの間に表示される

広告領域

Webサイトのいたるところに設置される広告領域

Skip Ad >>

リーチ多リーチ少

認知高認知低

　音声や大画面を用いることで認知効果が高い

❌配信枠が限られてしまう、ボリュームが出ない

　記事内に自然に溶け込ませて見せることが可能

❌記事と動画コンテンツの相性を考える必要がある

　枠が大量にあるため、広くリーチが可能

❌視聴されない確率が高い（スマートフォンは特に）

Hitokuse Inc.© 45

インバナー広告の利点

　枠が大量にあるため、広くリーチが可能

❌視聴されない確率が高い（スマートフォンは特に）

Webサイトのいたるところに設置される広告領域

配信ロジックと組み合わせて様々なカスタマイズが可能

オーディエンスターゲティング、ホワイトリストによるプレミアム枠への配信リターゲティング、各種計測ツールの連携

獲得＋ブランドリフト

LP遷移会員登録

アプリダウンロード

商品への気づき商品への理解イメージ向上

組み合わせによっては獲得だけでなくブランドリフト向上も狙うことが可能

Hitokuse Inc.© 46





Hitokuse Inc.© 47

ブラウザ・OSの制約

スマートフォンでのインバナー動画の再生にはハードルがある

videoタグの制約iOSの場合、videoタグが再生マークが出てストップする

再生マーク静止画全画面再生

タップ

・iOS：Flashが使えない。・Android：サポート対象外（2011年11月開発終了、2013年９月にアップデート終了）

Flashの制約

Hitokuse Inc.© 48

ブラウザ・OSの仕様差

CSSスプライトとは複数の画像を一つの画像にまとめ、リクエスト数を減らす手法

sprite.png

CSSの指定

.youtube{ background-image:url(sprite.png); background-position: -40px -200px; width: 120px; height: 60px; } 結果的に表示される画像

CSSで指定された値で切り取り

200px

40px120px

60px

Hitokuse Inc.© 49


スマートフォン動画の仕組みCSSスプライトを用いてコマ送りしている

background-image

可視領域

可視領域をずらしてコマ送りさせる

background-imageで大きなCSSスプライトを設定し、background-positionをJavaScriptでずらしていくことで、コマ送りしている

.movie{ background-image:url(http://~~~.jpg); background-position: -300px -340px; }

300px

170p

x

Hitokuse Inc.© 50



background-image

可視領域

.movie{ background-image:url(http://~~~.jpg); background-position: -300px -510px; }


Hitokuse Inc.© 51



background-image

可視領域.movie{ background-image:url(http://~~~.jpg); background-position: -300px -680px; }


Hitokuse Inc.© 52

その他

・ストリーミング処理・インビュー再生 / アウトビュー停止・回線速度によって画質を出し分け・音声との同期・コストを食わないような仕組み

ヒトクセで行っている工夫

Internet

最新アドテク×Java script実践活用術