最新アドテク×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
テレビ
雑誌
Web
SEO
リスティング
ディスプレイ
インストリーム
広告主媒体・メディア
街頭広告
アプリ
認知
ゲーム
アプリ
化粧品
自動車
金融
旅行
通販
電子書籍
ユーザー
：：

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

{
console.log(message);
}
Hitokuse Inc.© 38
aaa.com（iframe外）
messageイベントで受け取り
iframe外→iframe内の通信
「CrossDomain」
{
if(message.split( : )[0]== getHTML )
var response = document.getElementById(message.split( : )[1]).innerHTML;
document.getElementById( ifr ).contentWindow.postMessage(response, * );
}
bbb.com（iframe内）

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.© 44
オンライン動画広告の分類
インストリーム広告インリード広告インバナー広告
YouTube、Vimeoなどの動画視
聴サービスにおいて動画の前後
や間に再生される動画広告領域
ニュースやブログなどのテキス
トコンテンツの間に表示される
広告領域
Webサイトのいたるところに
設置される広告領域
Skip Ad >>
リーチ多リーチ少
認知高認知低
音声や大画面を用いること
で認知効果が高い
❌ 配信枠が限られてしまう、
ボリュームが出ない
記事内に自然に溶け込ませ
て見せることが可能
❌ 記事と動画コンテンツの
相性を考える必要がある
枠が大量にあるため、広く
リーチが可能
❌ 視聴されない確率が高い
（スマートフォンは特に）

Hitokuse Inc.© 45
インバナー広告の利点
枠が大量にあるため、
広くリーチが可能
❌ 視聴されない確率が高い
（スマートフォンは特に）
Webサイトのいたるところに設置される広告領域
配信ロジックと組み合わせて様々なカスタマイズが可能
オーディエンスターゲティング、ホワイトリストによるプレミアム枠への配信
リターゲティング、各種計測ツールの連携
獲得＋ブランドリフト
LP遷移
会員登録
アプリダウンロード
商品への気づき
商品への理解
イメージ向上
組み合わせによっては獲得だけでなくブランドリフト向上も狙うことが可能

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
40px
120px
60px

Hitokuse Inc.© 49
スマートフォン動画の仕組み
CSSスプライトを用いてコマ送りしている
background-image
可視領域
可視領域をずらして
コマ送りさせる
background-imageで大きなCSSスプ
ライトを設定し、background-position
をJavaScriptでずらしていくことで、
コマ送りしている
.movie{
background-image:url(http:// .jpg);
}
300px
170px

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

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

Semelhante a 最新アドテク×Java script実践活用術 (20)

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